目前,我们会发现,手机已经成了我们必不可少的工具,曾经使用手机是为了方便联络,只要实现通话和短信功能即可,现在,我们对手机的要求也越来越高。于是,手机开发者以及设计者会花尽心思的来进行研发,我们了解某些信息都来源于对网页的浏览,那么手机站建设的时候,设计师对于文字排版是否有过仔细研究呢?究竟怎样的的文字排版更加合理
1).字体选择字体选择常常被错误对待,要么直接忽视,要么简单地从字体库中任意挑选一款。实际上,不同类型的文本内容需要使用不同的字体,字体可以表达内心感觉和心理需求。试想,使用浓密生硬的字体在女性色彩的读物内容里,是不是显得格格不入?
相反,您应该选择比较细腻和柔和的字体。生硬浓重的字体往往更具刚硬气质。
另一方面,过度花哨好看的字体在手机屏幕上可能很难辨认。手机端的UI要求简单而干净,使用同种风格的字体是保持界面清爽的关键。避免单调,您可以选择一种辅助字体与主要字体形成对比。这种情况下,界面的字体数量要控制在 2 到 3 种,多则混乱。
2).字体大小手机屏幕有限,字体大小至关重要。如果您只是在手机屏幕上使用微小字体来解决,那就真是一个笑话了。虽然用户可以缩放文本来改变字体大小,从而提升可读性,但这绝不是设计师偷懒的借口。这多出的操作,本就违背用户体验。字体过小看不清,还会损伤用户的眼睛,花费更多的时间阅读;而较大的字体又会迅速吃掉屏幕,并破坏阅读连贯性。
那怎样是适当的字体尺寸?
对于iOS,使用至少11sp的字体大小,而对于Android,请选择14 sp为主文本。请注意,这是主文本通常使用的标准,不是强行的标准。此外,在设计手机端字体大小时,需要留意设计字体大小要比常规、使用在桌面端的略大一些。
3) .行间距行间距是一排文字和另一排文字之间的空间。手机屏幕较小,所以行间距通常比桌面版本小。设置行间距时,需要在手机端设置比桌面端小的值。过宽或过窄的行间距都会破坏手机UI界面,降低可读性。许多人认为,1.4em是标准的行间距,但在手机屏幕上,仍然有显得几分紧密,用户可能会感到文字仿佛在收紧。在设计上,标准的行间距应该是字体大小的120%。另外, 如果文本
4). 字间距字间距是两个文字之间的间距。这是手机排版中的一个很小的因素,但值得关注。您可能会认为,在一个段落里,字距调整可能不是一个必要问题。但如果您足够细心,您可能会注意到,这通常出现在英文文本中,大写字母与小写字母之间的空间和两个小写字母之间的空间不尽相同。这会造成一定的视觉失调,破坏美感。
5).全文本字间距上面不是刚提了字距吗?这里是否重复了呢?当然不是,字距在两个文字间和全文本的字间距并不是完全一样的概念。这两者往往可能会使设计师产生迷惑,但它们类似却不同。这里的字间距是所有字符和文本的字间距。有效的字间距会使文本更易读。通常,字体使用时可以适当调整页面字距,因此您不需要过多的关注。但如果您注意这一点,也许会对设计大有裨益。通常,大文本需要更少的字距,而稀疏的文本要求更宽的字距。
6). 层次结构层次结构是强调整个文本的关键元素,并能产生对比度。但手机排版中的层次结构比通常web界面层次简洁,通常Web界面拥有 3 个别。而手机屏幕的空间有限,所以很多设计师只应用了 2 个层次:标题和文本主题。标题是抓住读者眼球,而文本传达可读性。保留标题和主题这两个结构层次,这也是手机设计的一个趋势。这可以使手机UI简洁,并保持对比度和层次感。
7).功能性保持平衡美观的UI是远远不够的,功能也是同等重要的。手机文本设计还要产生实际的作用,比如满足我们的一些操作,像购买产品,下订单或预订机票。文本需要清晰指示用户能做什?接下来可以做什么?确保用户可以轻松地执行操作。功能性文本需要突出,可点击的元素应该足够大,以便用户可以点击它们。
8).字型和品牌同一款app或系统,建议使用单个字型并演变几种不同字体变体和不同尺寸。混合几个不同的字型会使您的界面看起来分散和混乱。通常,品牌或应用程序拥有自己的预设字型。苹果使用San Francisco, 诺基亚使用Nokia Pure,Google Android使用Roboto。
苹果根据产品功能选择字体。例如, iOS7 使用了(Pro)Light,iOS9 使用SF-UI,而在iOS10 中,San Francisco的字体版本是SF UI Text 和 SF UI Display。
9).文本样式尽可能使用内置文本样式。内置的文字样式可让您以视觉上独特的方式表达内容,同时保持佳的易读性。这些风格基于系统字体,并且你可以利用关键的排版功能,例如动态类型,可自动调整每种字体大小的字距和行距。
10).响应式设计手机设备有不同的尺寸。响应式设计也已经应用于手机设计。响应式排版成必将为这一趋势的重要因素。上述所有元素,任何错误使用可能会破坏整体手机UI设计。设计师需要考虑手机排版在不同设备上的外观。
11).原型设计文版排版设计在很多设计范围类都至关重要,原型设计中也是必不可少,的文本排版,能够和其他元素组件共同服务于干净的UI界面。但在原型设计中,文本不需要具备真正的意义。在 XCode 中调整代码,在 Sketch 中修改设计都太慢太麻烦了,不妨试试国内的原型设计工具Mockplus,Mockplus 自带了大量标准组件,你可以直接通过 Drag & Drop 的方式来快速布局你的页面,文本组件有单行文本和多行文本的组件,并可对其进行例如颜色,尺寸,对其方式,字体选择等各种属性设置,并且可以添加交互。新版本加入了文本数据填充功能,可对文本内容进行单个和批量填充,十分便捷。此外,你可以直接手机上直接查看,是否具有较高的可读性
网站标题:成都手机网站建设的排版注重
地址分享:https://www.cdcxhl.com/news36/76486.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站建设、手机网站建设等
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联