阅读好体验的准则:100% Easy-2-Read

文章目录[隐藏]

阅读好体验的准则:100% Easy-2-Read | 艾欧交互设计

阅读体验准则

译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。

 

大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是什么呢?如果我们稍作思考就会发现,没有理由将如此多的信息都硬塞进一个小小的屏幕当中。其实,这只是一个历史遗留问题,因为过去的时候屏幕真的是很小。

typesize_comparison21

屏幕 VS. 杂志:100%并不大(来自Wilson Miner)

所以…

不要让我去调节字体大小

我可不想每次访问一个网站的时候都要去更改我的浏览器设置!

不要告诉我繁杂的页面看上去更好

拥挤的页面看上去一点也不好,反而会令人很不爽。向页面中填塞各种内容对于可用性来说没有任何帮助。这种把各种信息都丢给我的做法,我只能理解成你太懒了。我希望你可以思考和预先筛选一下重要的信息进行呈现,而不是让我来做。

不要告诉我滚动很糟糕

因为如果这样,那么所有的网站都很糟糕。滚动并没有错,一点也没错。滚动就像是看书的时候翻书一样自然,并没有错误。

不要告诉我文字不重要

不要让我戴上眼镜

相反的,不要再趴在屏幕上了!歇一歇靠一靠,换一种轻松的姿势继续阅读吧!

五条简单的规则

1、长文本使用标准字号

你现在正在阅读的文字的字号并不大,是你浏览器的默认显示大小,是浏览器本来应该显示的大小。

我不想点击“放大”、“缩小”按钮,也不想更改浏览器的设置。我想马上就开始阅读,我希望你能适应我的设置,而不是反过来让我更改设置来适应你。

刚开始的时候,要用大字号来设计出一个好的布局会相对困难一些,但是这样会帮助你设计出一个更简单、更清爽的页面。把一个网站塞满各种信息并不难,但是让她简单而易用却不那么简单。起初,你会不适应这些大字号,但是一天之后,你就不会再想在正文中看到任何小于100%显示的文字内容了。刚开始你会觉得这些文字看起来很大,但是一旦你体验过之后,你就会很快意识到,为什么所有浏览器的设计师都选择这个大小来作为文字的默认显示大小。

2、主动留白

让你的文字有足够的空间进行呼吸。使用留白不是设计师的既定问题,也与品位无关

“文字段落的宽度必须与其所使用的字号相适应。过大的行宽会使人不易阅读,并且会产生负面的心理效应。过小的行宽会也中断阅读的流畅性,迫使读者频繁地换行。”
Josef Muller-Brockman, 网格系统

在文本周围留出足够的空间可以减少阅读时的压迫感,因为这样读者更容易将焦点集中在内容本身。你无需填满整个窗口。留白看上去更好并不是什么副作用,而是功能设计的必然结果。谁说页面需要填满各种内容的呢?

Muller-Brockmann说:“行宽并不是设计或格式中唯一重要的,易读性的问题具有同样的重要性。”

所以,请确保行宽不要过长。你可以在左右两端留出一些空白,便于眼睛在阅读时进行换行。我既不想要调整字号大小也不想调整窗口大小。当我打开一个页面的时候,我就只是想进行阅读。自适应宽度的文字很好,但是横跨整个屏幕一眼望不到边的文字却很糟糕。

可用性专家Nielsen最近为他的文章增加了留白区域和最大宽度的设定(下左图)。要是能再增加一些行距,那就完美了。

nielsentwos2

Good Nielsen – Bad Nielsen

基本准则是:每行10-15个单词(译者注:此处准则针对英文)。对于流动布局来说,当100%字号大小时,行宽为窗口大小的50%,在大多数分辨率下这是一个比较好的标准。

3、友好的行高

阅读专家说:

“过小的行高设定会降低阅读速度,因为眼睛会同时注意上下两行,而无法集中精神阅读当前那行的内容。读者把精力花在错误的地方,并且更容易感到疲倦。对于行高过大的情况也是如此。”

HTML的默认行高过小。如果你增加一些行高,文字会更具易读性。140%标准行高是一个不错的标准。

4、鲜明的色彩对比

这一点我觉得没必要多做赘述了。但是如果你觉得自己可以避免下列情况的话,那么你就不是一个网页设计师,而只是一个有态度的设计师

  • 浅灰色的文字放在更浅的灰色的背景上
  • 银色的文字放在白色的背景上
  • 灰色的文字放在黄色的背景上
  • 黄色的文字放在红色的背景上
  • 绿色的文字放在红色的背景上

如果你认为你还是一个网页设计师,那么你必须意识到,没有人会理解甚至看清楚你所表达的内容。别在做这种没有sense的事了,我们也想看看你到底想表达什么。注意:对于要在屏幕上显示的设计来说,过于强烈的对比(纯黑纯白)也不合适,因为这样看上去会使人感到文字在闪烁。一个建议的标准是:背景颜色#fff,文字颜色#333。

5、别把文字做成图片

在进行阅读的时候,我希望能够搜索、复制和保存文字,并使用光标来进行标记。把文字做成图片看起来很美观,但是美观并不是网页所要的全部。网页是用来进行交流和信息传达的,而信息需要具有良好的可读性、可用性、可伸缩性,方便进行引用和分享。

如果你只有把文字做成图片才能把网页设计好的话,那我觉得你需要从头开始再学一遍网页设计了。

传播理念

如果你希望更多的网站变得更有可读性,就请转发以上的文字吧!重新链回到这个页面,人们就会知道100% Easy -2-Read(100E2R)标准是在说什么。
——
译者:tembohu  原文地址:http://informationarchitects.net/blog/100e2r/
更多讨论内容请关注:学堂群:156360020 | 微信号:Aioued | 新浪微博:艾欧交互学堂 | Email:io@ued.xyz

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/1398/

(0)
TinadminTinadmin
上一篇 2014-11-13 14:54
下一篇 2014-11-14 10:44

相关推荐

  • 向APP用户请求权限的正确姿势【UXRen译#188】

    作者:Nick Babich |  翻译:Gogi,校审:June Wang   你知道吗,平均每个APP在用户安装的前3天就会流失80%的日活用户。 大部分人下载一个APP后,用过一次就删除了。这是因为用户虽然会在一开始尝试使用大量的APP,…

    交互专题 2017-11-29
  • HOW TO—撰写可用性测试报告

    在报告可用性测试结果时,首要关注的应当是本次测试的发现与改进建议,并且将测试的发现与建议按照严重等级划分优先级。其次,还应当包括测试计划和测试执行过程,当然不用面面俱到,但是加入部分细节内容可以帮助读者了解此次测试所使用的方法,方便其评判该报告的可信度。在报告中,尽量保持段落简短,多使用图表、短视频等方式来描述。

    2017-05-28
  • 设计规范 | 详解组件控件结构体系:引导类

    本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~

    2017-08-04
  • 猎豹资深交互设计师分享:如何利用数据来支撑设计?

    作者:可风 我最早的时候认为设计就是如何去做出各种新奇的图形、质感和界面,追逐潮流和创意。可是后来发现设计最难的是平衡各方面的因素,在条条框框的限制中找到方案还要推进下去,并被人看到价值。前者很容易满…

    2015-11-15
  • 设计师升级篇|动感特效轻松get

    新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。

    2017-05-07
  • APP框架之提示框架

    某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差…

    2016-09-29
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 什么是IxD交互设计?分分钟搞懂其中的关键要素!

    先讲个故事,小互是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小互想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢,于是环顾四周,发现马路对面…

    交互设计 2015-01-26
  • 从理论到实践,我是如何完成这份交互设计的?

    如何将需求落地到设计中?

    2017-05-06
  • 用户体验和可用性之间的联系和差异,你都知道吗

    可用性涉及到产品的有效性,效率和满意度,用户可以尽可能简单那地完成某些任务。另一方面,用户体验涉及到用户和网站互动上更为广泛的领域中的方方面面。作者|Amy Smith源自|优设网最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,...

    2018-03-06