Readability - 可读性

来源:百度文库 编辑:16楼社区 时间:2021/09/21 13:51:53
想整理一下这个概念是来自对WSJ的改版 的关注,Mario R. Garcia, CEO of Garcia Media补充说明了对这次改版的几个关键原则:
1. Remember that Journal readers come to read, not to look.
“记住:阅读者是来阅读的,不是来看看而已的 ”记住:阅读者是来阅读的,不是来看看而已的
2. Make it easier for readers to navigate the Journal.
3. Create a hierarchy of stories, so readers know the relative importance of news.
4. Maintain the best visual traditions of the Journal.
5. Innovate graphically where improvements can be made.
6. Don’t skimp on good journalism.
7. Balance long-form stories with secondary readings and quick story summaries.
8. Guide readers to the Online Journal, but don’t overdo it.
尽管之前对readability有一些了解:大概原则就是为用户创建快捷、舒服的阅读界面。 但现在看来好像还是比较笼统不够深入。 所以今天来把这个概念再整理一下,综合了一下scratch 和uxstudy 可以大致这样来增强对可读性的提升:
尺寸 - 字体大小尽量控制在3个尺寸范围,比如标题,列表,内容部分, 主要文本内容不要使用过小字体,平衡阅读舒适程度;
字体类型 - 文本内容选择舒服阅读的字类型体
英文尽量使用无修饰线的sans-serif字体 - 常用的 sans serif 字体包括: Helvetica, Avant Garde, Arial, and Geneva. Serif 字体包括: Times Roman, Courier, New Century Schoolbook, and Palatino.
中文自然是适合网页阅读的宋体,黑体或雅黑等, 尽量不要使用楷书,隶书,草书等类型;
无论中文,英文,尽量统一页面字体类型,包括不要使用超过2个以上的字体类型,我想这个对于创意设计站点应该一样实用;
颜色 - 注意增加字体颜色与背景颜色的对比
强调 - 让需要强调或被注意的内容更突出一些, 比如链接,引用,中心句, 实施方法可以是加重,不同颜色,下划线, 或其他样式定义,比如我现在尝试使用的漂浮文本框
排列和内容间隔 - 我把他们合并起来说一下,这里 有一个很有意思的英文文字间隔排版的研究,很喜欢它用阅读速度和阅读理解度来衡量阅读者对阅读的满意程度,它最后的大致结论是:阅读者更偏好于定义有外框 空白和适度行间距离的文本内容。我个人的理解是WSJ的改版就对这个做了适度的平衡,是报纸内容的可读性得到一定的改善;我用Google搜索了一下,好 像对汉字阅读排版的研究还不是很多,如果对此有所了解的朋友,请留言与大家分享一下;
文字大小写 -仅对英文参考吧!因为标题文字一般习惯用大写加于突出;
区域文字 - 翻译不是很好,就是说对不要把文字满屏的覆盖在视线范围内,适量的做一些排版和调整,比如使用列表,减少各段落的内容量,使用标题分割,减少文本宽度等;
当然,上面这些只是基本的对内容可读性的调整, 内容之间的关联,阅读者心理关注的研究,还有不用媒体类型之间的整合考虑,这些都需要做进一步研究,特别针对不用案例,我们也可以作出不同的设计和调整,最终目的还是,让用户更有效舒服地阅读。
资料参考:
WJS改版用户向导 [PDF]
http://www.garcia-media.com/NeArticl.asp?PageId=325
http://darmano.typepad.com/logic_emotion/2007/01/new_year_new_de.html
http://www.webdesignfromscratch.com/readability.cfm
http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm
http://www.uxstudy.com/2006/10/29/improve_readablity_of-_your_web_page/
http://www.webopedia.com/TERM/s/sans_serif.html