对比这10个注意事项,你的网页文字排版达标了么? - 优设-UISDC

对比这10个注意事项,你的网页文字排版达标了么?

2017/06/26 18039

对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时候,对于文本内容的处理,占据了相当大的比例。虽然网络上,信息呈现的方式多种多样,但是依然有超过9成的信息是通过文本来传递的。

良好的排版设计能让阅读成为一件愉悦的事情,正如同 Oliver Reichenstein 在他的文章中所说的:

“优化排版等同于强化可读性,提升可访问性,增强可用性,最终实现视觉上的平衡!”

换句话来说,优化排版设计就是优化UI界面。今天的文章总结了文字排版的10个常见注意事项,帮你真正有效提升内容的可读性和易读性。

1、控制字体数量

当你的网页文本内容中使用超过3种完全不同的字体的时候,会让网站显得结构紊乱和不专业。

太多字体和复杂的样式都会对布局产生影响。

为了阻止这种情况的发生,尽量控制字体类型的数量是很有必要的。

一般说来,限制字体数量是一种非常有用的方法(最多两种字体,通常一个字体能够搞定绝大多数的排版),在整个网站设计中坚持使用一种字体能够带来足够一致的体验。如果你需要使用两种,甚至更多的字体,那么请确保这几种字体族之间能够互相补充、互相搭配。以下方四个字体为例,四个字体当中 Georgia 和 Verdana 在字体的大小、宽度上都比较接近,两者构成和谐的搭配。相比而言,右侧的两款字体 Baskerville 和 Impact 如果搭配在一起就很不合适了,Impact 过于厚重,而 Baskerville 的衬线也过于突出。

2、尝试使用标准字体

诸如Google web Fonts 和Typekit 这样的在线字体服务能够为你推荐许多新鲜有趣的字体,意想不到字体设计,在很多场合能够给用户带来新鲜的体验。在使用上,也确实非常方便,比如Google Web Fonts 是这么用的:

·选一款你喜欢的字体,比如 Open Fonts
·生成代码,贴到HTML文档的标签中 ·完成!

这种操作其实和把大象放到冰箱里面一样简单。

那么,到底问题出在哪儿呢?

首先,你是选取的漂亮字体并不是谁的电脑里面都会有的,最前先的例子是,Windows电脑中的微软雅黑并不是Mac的标配字体,如果你的网页中使用了微软雅黑,它会在Mac电脑中以苹方来显示。你挑选的字体并非普遍存在的,最终会以另外一种样子呈现在别人的屏幕上,用户熟悉的还是那些标准的、常见的字体,最安全的英文字体始终都是 Arial、Calibri、Trebuchet 等字体。良好排版实际上只是基础,吸引人的始终是漂亮整齐的布局和优质的内容,而非字体本身。

3、控制每行内容的长度

每行文本的字符数,其实直接影响着内容的可读性。正如同Baymard 通过研究所发现的那样:

“如果你想拥有良好的阅读体验,将每行文字控制在大概60个字符左右,这个字符数量能够让你的内容拥有恰到好处的可读性。”

如果文本太短,用户的内容扫视频率会过高,经常会打破阅读的节奏,而如果太长了,用户会很难持续的保持高专注度的阅读。

在移动端上,每行文字应该控制在30~40个字符之间,这也符合目前的用户使用习惯和阅读体验。参考下面的对比图,可以看出,40~60个字符数通常能够取得最佳的阅读体验。

在网页设计中,通常使用 em 和 px 来控制文本块的宽度,借此来控制每行的字符数量。

4、选择各种尺寸下都能良好显示的字体

用户注定是要通过不同的设备来访问你的网站的。绝大多数的用户界面需要使用到大小不一的文本元素来作为支撑,正文,标题,按钮标签,表单,等等等等。你所选择的字体,应该在不同的尺寸、不同字重的情况下,都能具备良好的可读性。

最值得参考的是目前几个主流的平台自主设计的字体族,比如 Android 上的Roboto,苹果全系列的通用英文字体 San Francisco 。

当字体够大的时候,可识别性的问题并不明显,当它在小屏幕上呈现内容的时候,可识别度的问题就很显著了。比如下面的Vivaldi 字体,虽然很漂亮,但是当尺寸小的时候,可读性就明显不足了:

5、使用易于识别的字体

由于英文字体本身的几何特征,许多字体在设计的时候,稍不注意就会让用户难以识别,尤其是字母“i”和“L”,字母“r”、“n”和“h”,在选择字体的时候,应该特别注意这方面的问题,确保不会在这些基本的问题上,给用户造成困扰。

6、避免全部大写的情况

其实在英语言国家的网站中,使用全部大写的文本,是一个特别典型的设计上的忌讳。正如同 Miles Tinker 所说,全部的段落都使用大写字母,和小写字母相比,可读性有着明显的降低,直接反映在用户身上,就是文本的阅读速度明显降低了。

7、注意控制行高

在排版中,Leading,也就是行高,是一个非常常见的重要概念。在排版设计当中,行高也是很值得关注。换个更容易理解的概念来阐述这件事情,行间距,正常情况下,行间距应该是文本高度的30%,这样能够确保视觉上的清晰易读。

Dmitry Fadeyev 发现,段落之间的间距如果控制好了,整个阅读效率能够提升20%。这样的布局能够让文本转化为用户更容易消化的内容,剥离无关的细节。

8、确保色彩对比度合理

文本和背景应该有足够的对比度,文本越明显,用户就越能快速清晰地获取其中的信息。按照W3C的建议,文本和背景的对比是有规则的:

·较小的文本应当确保至少和背景之间有4.5:1的对比度比率
·较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

对比度不足的时候,几乎无法进行阅读

这些符合对比度的规范,易读性不错

一旦你确定了配色,需要在尽可能多的设备上进行测试,让不同的用户来查看效果,尽量避免出现可读性的问题。

9、避免使用红色和绿色的文本

红绿色盲是最常见的视力障碍之一,通常使用彩色的文本而是用来区分重要信息的,但是红绿两色则可能会失去视觉传达的功能。即使只使用红色,有尽量搭配其他的区分方式。

10、避免使用闪烁的文本

闪烁的文本确实能够引起用户的注意力,但是它存在的最大问题是让人觉得不适,甚至会引起特定用户的癫痫类疾病。讨厌且令人分心的闪烁文本,无论从哪个角度上来看,都是得不偿失的设计失误。

结语

现在,排版在网页设计中,已经是一件越来越重要的事情了。糟糕的排版令人分心,内容无法清晰地传达。相反优秀的排版会做的更加润物细无声,让内容清晰直观地传达,并且最终让用户更轻松地了解其中的内容。

【排版布局不是小事情】

  1. 《专业科班系列!超实用的标题排版小套路》
  2. 《用一个实战案例,教你学会复杂界面的布局设计》
  3. 《想让网页可读性更强?你得善用F式布局》
  4. 《专业科班方法!帮你学会网格工具这个理性的排版利器》

原文地址:uxplanet
原文作者:Nick Babich
优设译文:@陈子木


本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/typography-web-design-10-tips

sketch UI 界面设计 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 职场 设计流程 用户体验设计 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计规范 设计理论 字体下载 产品设计 设计趋势 神器下载 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里