Blog on 27th Floor
主页 随便 电脑 电影 社会 阅读 下载 本站 存档
主页 随便 电脑 电影 社会 阅读 下载 本站 存档

100%易读标准

12/05/06。  cathayan.org版权所有,保留一切权利。转载请保留此说明。谢绝商业转载。



这是Information Architects Japan的一篇文章,很不错。这个网站还有很多网站网页设计的文章。为了保持一致,这一篇现在使用了浏览器缺省字体大小,字体颜色是#333。

许多网站填满了难以阅读的小字,为什么要这样呢?

不要说拥挤的页面看着好
拥挤的网站绝不舒服,它们看上去让人恶心。

不要说大量链接更有用
往页面上塞满东西对易用性没有帮助。你扔出这么多东西的唯一原因只是懒惰。我们希望你能想一下什么是重要的,并预先做出选择;这不是我们的事。

不要说滚动条不好
因此所有网站都不好。滚动条并没有错,就像看书时翻页没错一样。

不要说文字不重要
95%的网站设计工作其实就是排版。

不要说带上眼镜再看
还是不要舔屏幕了,往后靠找个舒服的姿势更好。

没有任何理由往屏幕上塞那么多东西。这只是个愚蠢的错误。

1. 长篇文字要用标准的字体

原站上的字体尺寸不大,它是浏览器缺省的大小,也就是浏览器希望用来显示的大小。

我们不想点更大或更小按钮,也不想修改浏览器选项。我们只想直接阅读。我们希望你根据我们的设置来调整,而不是其他途径。

用大字体来设计一个好看的布局是挺难的,但这个困难能帮助您设计一个更简单更清晰的网站。在网站上塞满东西不难,把它搞简单并且易用,这很难。一开始你会想这缺省的字体真大,但过上一天,你就不会想看任何小于100%或1em的字体。它开始看上去是大,但一旦你用了它,你会很快明白为什么浏览器设计者们会选择这个尺寸做为缺省值。

2. 活动的空白

让你的文字呼吸。让你的读者呼吸。用空白不是设计者的怪癖,它也无关品味。让文字周围充满空气可以降低紧张度,也让人更容易把精神集中在重要的内容上。你不需要把整个窗口都填满。更漂亮的空白不是副作用,而是功能性设计的自然结果。谁说网站一定要塞满东西呢?

请确保行宽(或栏宽)不要太大,左右都加上空白会让眼睛更轻松。我们不想调整字体大小,也不想调整窗口大小。打开一个网站,我们只想读一下。可调整的栏宽也不错,但文字横跨整个屏幕就不好了。

基本规则:每行10-15个字。对流动布局来说,100%的字体大小,50%的栏宽(和屏幕有关)对多数分辨率都是个不错的基准。(我想应该是500-600像素宽)

3. 读者友好的行距

阅读专家这样说:“太小的行距会影响阅读速度,因为眼睛会同时看到上一行和下一行,于是就不能聚焦……读者会在错误的地方发更多精力,也更容易疲劳。同样,行距太大也有同样的问题。”

缺省的HTML行距太小,如果能增加一点,文字就会更易读。140%是个不错的基准。

4. 清晰的色彩对比

这甚至不用再说。但如果你还在用下面这些对比:
  • 浅灰色文字,更浅的灰色背景
  • 银色的文字,雪白的背景
  • 灰色文字,黄色背景
  • 黄色文字,红色背景
  • 绿色文字,红色背景等等

那么你就不是个网页设计师,只是装个样子罢了。如果你坚持你是,你就必须注意到如果没有人能读你说的话,就没人知道那是什么。停止这种荒谬的设计,让我们看看你写了些什么。注意:对屏幕设计来说,太强的对比(全黑全白)并不理想,或者文字闪烁也不好。基准:#333的文字,#fff的背景。(这个汉字似乎还不一样,现在正常的字体还是点阵更清楚,全黑全白也完全可接受)

5. 不要把文字做在图片里

我们希望能搜索、拷贝、保存你的文字,在阅读时还想用光标来标记它。图片中的文字看上去很漂亮,但漂亮不是WEB需要的,它需要的是交流、信息,而信息需要可阅读、可用,可扩展,可引用以及可以发送。

如果你不用这个图片文字,就不能把网站变得漂亮,恐怕你得从头开始设计了。

散播这些话

如果你想让更多网站更易读,散播这些话吧。如果知道了100%E2R是什么意思,还可以到原站上留个名(见原站)。


12/05/06 21:39:10,由cathayan发表。目录:电脑

这篇文章已经关闭,不能添加评论和投票
I am watching and will delete all spam.

我的E-Mail


Copy&Paste Exchange

访问CPeX Group

订阅Feed

订阅Feedburner
Feedsky订阅
本站订阅

请登录

导航

cathayan.org Web

最新贴

RIME 小狼毫/鼠须管的极点及五笔拼音配置
Software that rocks or sucks less
一棵热带的树换新叶的过程
几个有用的Vim招术
论语七 述而
Nomacs 图像浏览器
Windows 文件校验
Windows 10 文件批量命名简单方法
Windows 10 文件删除高级操作
本站也算是有响应式设计了

最新评论

Powered by

Powered by Nucleus CMS

版权声明

Creative Commons License
Blog on 27th floor by Cathayan is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Powered by Nucleus CMS v3.71. Best view with Mozilla browsers.