分类
设计创意
办公创意
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    400-123-4567

    电子邮件

    1691000615@qq.com
  • 星点互联APP

    随时掌握行业动态

  • 扫描二维码

    关注星点微信公众号

打造优秀用户体验的10大排版规则

发布时期:2018-8-10 11:38
阅读:112 回复:0

对于网页和APP而言,良好的排版不仅仅是摆上漂亮的字体就可以搞定的,高度的可读性和可识别性并不是简单的要求,视觉设计和内容风格也应当做好一致性。虽然这些要求看起来和“高大上”的需求一样空泛,但是找准方向 ...

对于网页和APP而言,良好的排版不仅仅是摆上漂亮的字体就可以搞定的,高度的可读性和可识别性并不是简单的要求,视觉设计和内容风格也应当做好一致性。

虽然这些要求看起来和“高大上”的需求一样空泛,但是找准方向稍加训练,并不难做到。

所以,今天的文章我们将为你奉上10条可以帮你提升用户体验的排版规则,每条规则都附上实际案例助你理解和运用。

可读性原则

built-e1459411132331

网页必须使用非衬线体字体这种想法已经过时了,但是这种说法背后的核心思想并不过时:文本必须是易于阅读的。

想要挑选易于阅读的字体,手写字体、哥特字体和过于新颖的字体应当尽量避免使用。当然,如果是需要艺术性字体来做装饰的场景就另当别论了。

可读性优秀的字体在可识别性上也不错,并且他们通常不会特别的“显眼”。这些字体应该是“透明”的,这样可以让用户无障碍、下意识地接受,这就是他们的工作原理。

确保行间距足够宽

justactions-e1459411108854

行间距是影响用户阅读体验的关键因素之一,太过致密会令人阅读困难,有呼吸感的行间距则会令人着迷。尤其是如今大量用户在手机和平板上阅读,相对宽一点的行间距对于缓解阅读大量内容有相当的缓解作用。

而要控制好行间距需要牵涉到好几个变量:

·字体尺寸
·段落长度
·字体样式
·屏幕宽度

而非常遗憾的一点在于,并不存在一个固定的换算公式可以帮你搞定这一切,不过可以这么做:

·对于绝大多数网站而言,最佳行间距应该是字体高度的125%
·对于绝大多数移动端设备而言,最佳行间距是字体高度的150%
·宽松的行间距(比如直接空一行作为行间距)能让内容更易于被识别和扫描
·控制行间距的松紧,用双眼来浏览段落进行测试,基于感觉来进行调整

选择有字母含有大圆角的字体

robin

对于西文字体,含有较大圆角和内空的字体更易于阅读。明显的圆角弧度让B和R这样的字体易于被识别,而内空则是O和Q这样字母的标志。

紧凑和致密的字体让眼睛难于辨识,而曾经在纸媒上流行过的较宽的标题字体,识别度就相当不错,因为当字体拉宽之后,不同字母的差异就越发明显。圆角弧度更大的字体看起来更接近于给孩子们设计的字体,而幼年时期对于字体所构建起的美学认知,是会伴随人的一生的。

让字体更大一点

theory11

毫无疑问,字体适当的放大会让人感觉更舒服。当然,字体的大小通常取决于你的实际需求,而在处理大段文字的时候,就需要注意了。

虽然不同的设计师在文字的处理上有着不同的想法,但是通常大家会认为每行的字符数量应当控制在45~60个之间(中文也有一个约定俗成的数量),而在移动端上,这个数量通常需要减半看起来才足够舒适。

找x高度较高的字体

grain

和中文字体不同,西文字体有上伸区和下降区,小写字母x的高度是这套字体的x高度。小写字母的整体比例会直接影响到阅读的体验。

x高度相对比例更大的字体更易于阅读,换句话来说,就是小写字母的高度更接近大写字母的高度。最理想的情况是,字体的x高度处于大写字母高度的三分之二到四分之三之间。

显示字体的字距调整

waza

细致到位的字距调整能创造好的排版。

正文的内容如此之多,仔细调整所有的字母间的字距当然是不现实的,而且也没有这个必要。但是对于标题字体和展示字体,字距的调整就相当有必要了。不同字母的笔画角度都不尽相同,每对字母之间的距离进行适当调整,让它们看起来像是天生一对那样。这样的细节能让你的设计在诸多网站设计中脱颖而出。

其实中文和日文的字体排版中也同样用到了字距调整的技巧,使用平假名和片假名尤其多的日本,在标题和展示字体的排版上经常会用到字距调整,来确保整体的视觉体验。


鲜花

握手

雷人

路过

鸡蛋
本文暂无评论,快来抢沙发!

关注我们
  • 官方微信公众号
  • APP应用下载
客服咨询
  • 400-123-4567(工作日:9:00-16:00)
  • enquire@neoconex.com

所有资源均是网上搜集或网友上传提供,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如有侵犯您的版权,请及时发邮件联系我们

Powered by Discuz! X3.5 Licensed © 2001-2013 Comsenz Inc. 星点互联设计 ( 鲁ICP(32462341) )