阅读好体验的准则: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

相关推荐

  • Icon 改版:对于细节的把控才是关键

    在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。

    2017-05-04
  • 如何从细节上真正节省用户的时间,从而带给用户更好的体验

    来源:优设网 作者:阿布编译 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,什么是…

    2014-09-21
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • 眼球追踪到底是肿么回事?和VR有啥子不"正当"关系!

    虫虫是科技虫,更是虫博士,今天,好为人师的虫博士给伙伴们普及一下,眼球追踪到底是肿么回事?和VR有啥子不"正当"关系! 名词:眼球追踪 是一项用途颇广的科学应用技术,广泛运用于实验心理学、应用心理学、工程…

    2016-04-11
  • 阿里设计师分享:UX设计心理套路

    在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学理论,共享知识协同促进中国设计走出去。

    2017-05-02
  • 未来交互:Facebook首次公开内部机器学习平台,启动AI帝国

      Facebook 现在在信息推荐、过滤攻击言论、推荐热门话题、搜索结果排名等等已经使用了大量人工智能和深度学习的技术。在Facebook上,还有许多试验能够从机器学习模型中获利,但是目前,对于很多没有深厚机器…

    2016-05-11
  • 众多新闻客户端,评论交互哪家强?

    上一篇文章《众多新闻客户端,评论功能哪家强?》中,我通过抽样的方法对网易新闻、腾讯新闻、今日头条评论功能的数量和质量进行了对比分析。本文将继续对这三款产品评论功能的交互设计进行对比分析。我的结论是并非某款产品明显优于其他,而是各自都有特色和优点,值得对手借鉴。

    2017-04-29
  • 从地方性视角谈民宿的定位(二): 找到有趣而唯一的内核

    ▲点击关注我们,挖掘土壤的内涵近些年来,随着旅游的快速发展尤其是大众旅游市场的迅速兴起,旅游与地方的关系引发越来越多的关注和讨论。“地方性”一方面作为旅游目的地吸引力的内核被重视,另一方面又因其趋于淡化而引起对地方可持续发展的担忧和对旅游发展的批判。▋什么是“地方性”?事实上,地方性不是绝对的现实,而是话语与知识生产的过程。全球化进程必将是均质化与地方性凸显相互伴生的过程。虽然在全球化背景下,旅游产业的发展由于多种要素的作用,会带来社会...

    2018-03-10
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 设计的组件化

    我们在设计一个系统的时候会不可避免的与各个不同的角色互动:不同的设计师、不同的前端工程师,这其中不可避免的会出现大量的沟通和协作问题,如何在这类多角色互动中提高效率,降低沟通损耗就不可避免的成为一个…

    交互设计 2016-06-16