阅读好体验的准则:100% Easy-2-Read
译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。
大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是什么呢?如果我们稍作思考就会发现,没有理由将如此多的信息都硬塞进一个小小的屏幕当中。其实,这只是一个历史遗留问题,因为过去的时候屏幕真的是很小。
所以…
不要让我去调节字体大小
不要告诉我繁杂的页面看上去更好
不要告诉我滚动很糟糕
不要告诉我文字不重要
不要让我戴上眼镜
五条简单的规则
1、长文本使用标准字号
你现在正在阅读的文字的字号并不大,是你浏览器的默认显示大小,是浏览器本来应该显示的大小。
我不想点击“放大”、“缩小”按钮,也不想更改浏览器的设置。我想马上就开始阅读,我希望你能适应我的设置,而不是反过来让我更改设置来适应你。
刚开始的时候,要用大字号来设计出一个好的布局会相对困难一些,但是这样会帮助你设计出一个更简单、更清爽的页面。把一个网站塞满各种信息并不难,但是让她简单而易用却不那么简单。起初,你会不适应这些大字号,但是一天之后,你就不会再想在正文中看到任何小于100%显示的文字内容了。刚开始你会觉得这些文字看起来很大,但是一旦你体验过之后,你就会很快意识到,为什么所有浏览器的设计师都选择这个大小来作为文字的默认显示大小。
2、主动留白
让你的文字有足够的空间进行呼吸。使用留白不是设计师的既定问题,也与品位无关。
“文字段落的宽度必须与其所使用的字号相适应。过大的行宽会使人不易阅读,并且会产生负面的心理效应。过小的行宽会也中断阅读的流畅性,迫使读者频繁地换行。”
Josef Muller-Brockman, 网格系统
在文本周围留出足够的空间可以减少阅读时的压迫感,因为这样读者更容易将焦点集中在内容本身。你无需填满整个窗口。留白看上去更好并不是什么副作用,而是功能设计的必然结果。谁说页面需要填满各种内容的呢?
Muller-Brockmann说:“行宽并不是设计或格式中唯一重要的,易读性的问题具有同样的重要性。”
所以,请确保行宽不要过长。你可以在左右两端留出一些空白,便于眼睛在阅读时进行换行。我既不想要调整字号大小也不想调整窗口大小。当我打开一个页面的时候,我就只是想进行阅读。自适应宽度的文字很好,但是横跨整个屏幕一眼望不到边的文字却很糟糕。
可用性专家Nielsen最近为他的文章增加了留白区域和最大宽度的设定(下左图)。要是能再增加一些行距,那就完美了。
Good Nielsen - Bad Nielsen
基本准则是:每行10-15个单词(译者注:此处准则针对英文)。对于流动布局来说,当100%字号大小时,行宽为窗口大小的50%,在大多数分辨率下这是一个比较好的标准。
3、友好的行高
阅读专家说:
“过小的行高设定会降低阅读速度,因为眼睛会同时注意上下两行,而无法集中精神阅读当前那行的内容。读者把精力花在错误的地方,并且更容易感到疲倦。对于行高过大的情况也是如此。”
HTML的默认行高过小。如果你增加一些行高,文字会更具易读性。140%标准行高是一个不错的标准。
4、鲜明的色彩对比
这一点我觉得没必要多做赘述了。但是如果你觉得自己可以避免下列情况的话,那么你就不是一个网页设计师,而只是一个有态度的设计师。
如果你认为你还是一个网页设计师,那么你必须意识到,没有人会理解甚至看清楚你所表达的内容。别在做这种没有sense的事了,我们也想看看你到底想表达什么。注意:对于要在屏幕上显示的设计来说,过于强烈的对比(纯黑纯白)也不合适,因为这样看上去会使人感到文字在闪烁。一个建议的标准是:背景颜色#fff,文字颜色#333。
5、别把文字做成图片
在进行阅读的时候,我希望能够搜索、复制和保存文字,并使用光标来进行标记。把文字做成图片看起来很美观,但是美观并不是网页所要的全部。网页是用来进行交流和信息传达的,而信息需要具有良好的可读性、可用性、可伸缩性,方便进行引用和分享。
建议继续学习:
- 哪本书是对程序员最有影响、每个程序员都该阅读的书? (阅读:13778)
- 谈谈我的阅读经验――从刘瑜的一篇文章谈起 (阅读:2782)
- 阅读的价值之体验设计 (阅读:2189)
- 从移动设备的阅读体验谈起 (阅读:2048)
- 产品思考:分众 (阅读:1759)
- 移动设备阅读体验 (阅读:1682)
- 社会化资讯 (阅读:1381)
- 万般设计为阅读【译文】 (阅读:846)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:tembohu 来源: 网易用户体验设计中心博客
- 标签: 阅读
- 发布时间:2012-08-02 23:57:38
- [44] 界面设计速成
- [39] Oracle MTS模式下 进程地址与会话信
- [39] 视觉调整-设计师 vs. 逻辑
- [35] 如何拿下简短的域名
- [35] 程序员技术练级攻略
- [35] IOS安全–浅谈关于IOS加固的几种方法
- [33] 图书馆的世界纪录
- [33] android 开发入门
- [32] 【社会化设计】自我(self)部分――欢迎区
- [30] 读书笔记-壹百度:百度十年千倍的29条法则