• 阅读好体验的准则:100% Easy-2-Read
    时间:2012-08-11   作者:tembohu   出处:uedc.163.com

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

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

    所以…

    不要让我去调节字体大小

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

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

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

    不要告诉我滚动很糟糕

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

    不要告诉我文字不重要

    不要让我戴上眼镜

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

    五条简单的规则

    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、别把文字做成图片

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

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

    传播理念

    如果你希望更多的网站变得更有可读性,就请转发以上的文字吧!重新链回到这个页面,人们就会知道100% Easy -2-Read(100E2R)标准是在说什么。

    网友留言/评论

    我要留言/评论

    相关文章

    不要告诉我你懂margin:你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……
    高性能网站的十四条黄金法则:许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在6~8秒之间。这就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。
    SEO关于URL优化的一些经验:URL在搜索结果列表中时显示内容之一。设计网站结构时需要对目录及文件命名系统做事先规划。总的原则是首先从用户体验出发,URL应该清晰友好、方便记忆,然后才考虑URL对排名的影响。具体可以考虑以下几个方面。
    搜索引擎高排名的8步骤:对于网上业务,网站和博客一样,在搜索引擎中的排名高是必须的。有机搜索结果是相关的网页出现在搜索引擎结果页面在回应关键字搜寻字词。结果是不带偏见,而不是生成的基础上的付费广告。当你的网站排在各大搜索引擎,像谷歌,雅虎和Bing高,您的网站的网址,标题和描述的结果页上可见。获得了坚实的搜索引擎的地位,意味着你的网站是一个权威和流行的在线源。
    解构科技博客:一直压着没发,之前写知乎时就写完这篇东西了,今天突发灵感就修改一些东西发出来了,可能以后写东西的方向会改变,不再是这类大而泛的文章了。
    十五种实用促销方式:促销是指为了促进产品的销售,针对的消费行为、消费习惯而采取的促进产品快速实现从厂家到手中转变的策略。@茵曼文案lala凤 根据自己在工作中的实践与摸索,总结了15种促销方式,她没想到的是,这个图迅速在微博上疯传,并被许多网友惊呼为“目前看起来最全的促销图”。
    GET和POST有什么区别?及为什么网上的多数答案都是错的。:前几天有人问我这个问题。我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用。
    网站运营人员必须要了解的网站运营术语:一个网站从建立到发展需要很多人的努力,现在的网站运营也不仅仅是一个开源程序,一个cms或者是一个网站源码就可以搞定的事情。网站建立起来想要获得发展的话还需要有人去经营网站,而如何经营,那就是网站运营要做的事情了。当然不一样的网站需要的运营手法是不相同的,而且每个运营人员对于网站的理解也是不一样的。但是不管如何改变,网站运营术语还是一样的。
    互联网产品如何从无到有聚集用户?:最近遇到考题:一个互联网产品如何从无到有聚集用户?对此,我分了3个阶段来进行论述。(中间加了一些孙子兵法的观点,学习孙子兵法,对做产品也有一定的指导思想。希望更多的人能学习国学,爱国学。多学国学,就能透过现象看本质,这也是哲学的本意。)
    信息图:社会化网站生存的五大法则:我们在社会化网站上花费的时间占据了上网时长的35%。对社会化网站站主而言,社会化网站千千万,如何在激烈的竞争中脱颖而出,是每个网站拥有者必须认真思考的一个问题。本幅信息图告诉你五大法则,助力你社会化网站的运营。