`

改善网站可读性的方法

阅读更多
什么是网站设计中最重要的一个环节?很多人会回答是网站的可读性,怎么样才能使你的内容更容易阅读。

读者来到你的网站是在阅读他们关心的内容,如果文章的内容被设计所掩盖,导致读者难于阅读,这样只会使他们远离你的网站。

我们可以做些什么来改善网站的可读性,使那些读者留下来继续阅读我们的网站。

你可以做的 30 件事情

1 为你的链接添加下划线。读者期待看到带有下划线的链接,因此不要让他们失望。

2 为段落中的文字使用适当的行高。一种快速、简单的方法,用段落中字体的大小来测算行高。较为理想的情况是行高大约为字体大小的1.5倍。

3 在设计中明确区分你发表的内容。你发表的内容从哪里开始,到哪里结束都应该是显而易见的,其它诸如侧边栏、文章评论、文章附加信息等模块应该在视觉上有别于实际内容。

4 如果你使用Pull-quotes,要保证这部分内容明显,并处于靠近文章顶部的地方。如果用户没有很快地识别它们,那它们就没有什么用处。

5 保持简短。同样的意思,你用书面文字写出来需要50个字,但是用嘴说的话可能只需要30个字。

6 文字与背景的对比度。使用Snook's 的Color Contrast Checker检测网页的文字与背景的颜色,确保那些有视觉障碍的用户也可以正常阅读你的内容。

7 为你的文档使用结构层次。例如:文章标题——介绍——正文标题——内容——副标题——内容,这样会让你的网页更符合逻辑流程。

8 避免在中间插入广告破坏文章的完整性,这样做会打断读者的思路。

9 为以斜体和粗体显示的文字应用样式时,不要改变它们的颜色。这样做容易让读者混淆,会让他们停下来思考:这是不是一个链接?

10 使用语义标记。比如为文章的标题使用 , , 等标签来突出它们。可能你的读者当中有很多人在使用新闻聚合器阅读你的内容,诸如 这样的标签对他们而言是不会显示任何效果的。

11 在开始的文章上使用贴图。这样做的目的是为了吸引读者的注意,通常会在最顶部的文章上应用贴图。

12 避免整块的文本。没有什么能比像一面墙一样的文字更能吓跑访问者的了。

13 将文本居左对齐通常是最好的选择。我们很少能看到将文字居中或两边对齐的示例(标题除外),而将文字居右对齐我想在任何时候都不是一个最好的选择。

14 文本绕图。这主要取决于你如何将文本环绕在一个图像旁,你可以重新考虑文字的措辞,也可以调整图像的大小。

15 文章标题和副标题必须突出。这样做的一个好处是可以让读者在第一时间了解这篇文章标题下面的内容是什么。使标题突出显示要做的工作只是使用更大的字体,为字体添加下划线、更改颜色等。

16 了解何时使用有序列表,何时使用无序列表。如果你的项目列表有一个特定的顺序,最好用数字给它们添加编号。

17 缩进列表。用以表明它们不仅仅是多个段落。

18 图像居中。如果有一些特定图片是你文章中无法划分出来的一部分(比如流程图、统计图),最好把这些图像居中显示,并在图像前后指定一条分隔线。

19 创建一个打印样式表。记住并不是所有的读者都在电脑屏幕上阅读你的文章,建立一个打印样式表保证你的文章在纸上的效果同样出色。

20 选择通用字体。在你决定使用何种字体后,最好再选择一种人人都有的通用字体。

21 添加补充内容时最好与原文章空开一些距离。

22 突出的句子使用相同的字体大小。改变字体大小,将改变该行的高度,打乱页面布局。

23 不要把正文中所有文字设置成使用全部大写。仅针对英文。

24 不要在链接上使用SnapShots 。

25 使文章内容保持一个合理的宽度。浮动布局常常会使文章的内容超出屏幕之外,使人无法阅读。

26 太多的段落总比太少的段落要好。在纸上写作时,通常每一段话有4-5个句子组成;而在网络上,每个段落有2-3句话组成是更加常见的。这样做是为了使段落呈现在一个漂亮的容易理解的小块中。

27 保持侧边栏的短小。

28 分页。如果你为一篇文章使用分页样式,要保证文章的导航是清晰且易于使用的。

29 使用淡化的颜色。为一些非关键信息使用淡化的颜色,比如发表时间、作者等。此外,淡颜色的线条不太会引起人的注意。

30 使用标签。为一些缩写词使用添加说明,并不是所有的读者都了解缩写词的含义。 的常规样式中在缩写词下面加一条虚下划线。

原文链接:http://www.problogdesign.com/blog-usability/30-ways-to-improve-readability/
分享到:
评论

相关推荐

    Java为改善可读性和灵活性重构代码.pdf

    像这样的日志代码会更好: if (log.isLoggable(Level.FINE)) { ...假定你已经完成了分析,并且判断出是运行环境中Java 组件的性能需要改善。 ——参考资料:仅个人学习,未详尽测试,请自行调试!!

    电信设备-改善移动设备的可读性.zip

    电信设备-改善移动设备的可读性.zip

    汇编教程 用汇编语言编写的程序大大提高了程序的可读性

    一方面,汇编语言指令是用一些具有相应含义的助忆符来表达的,所以,它要比机器语言容易掌握和运用,但另一方面,它要直接使用CPU的资源,相对高级程序设计语言来说,它又显得难掌握。

    CSS技巧:改善代码可读性并简化代码管理

    SomereadershaveaskedtomewhatisthebetterwaytoorganizeaCSSfiletooptimizecodereadabilityandsimplifycodemanagement.Generally,Iadoptjustsomesimplerulesand,it'smyopinion,...

    论文研究-基于改进Sequence-to-Sequence模型的文本摘要生成方法.pdf

    然而,该方法不能充分利用文本的语言特征信息,且生成结果中存在未登录词问题,从而影响文本摘要的准确性和可读性。为此,利用文本语言特征改善输入的特性,同时引入拷贝机制缓解摘要生成过程未登录词问题。在此基础...

    代码编写规范说明书(c#.net与asp.net)

    代码编写规范说明书(c#.net与asp.net) 1 目的 一.为了统一公司软件开发设计过程的编程规范 ...编码规范和约定必须能明显改善代码可读性,并有助于代码管理、分类范围适用于企业所有基于.NET平台的软件开发工作

    改善既有代码的设计

    java代码重构,设计,有效改善代码质量,提高代码复用性,可读性

    重构-改善既有代码设计

    指对软件代码做任何更动以增加可读性或者简化结构而不影响输出结果。 软件重构需要借助工具完成,重构工具能够修改代码同时修改所有引用该代码的地方。 在极限编程的方法学中,重构需要单元测试来支持

    重构 改善既有代码的设计

    用于改善代码性能与可读性的很好的一本书,工作闲下来我就挤时间把它看完了,收获很大

    重构改善既有代码的设计(英文版)

    代码重构(英语:Code refactoring)指对软件代码做任何更动以增加可读性或者简化结构而不影响输出结果。 软件重构需要借助工具完成,重构工具能够修改代码同时修改所有引用该代码的地方。在极限编程的方法学中,...

    重构-改善既有代码的设计+中文版.pdf

    这是讲项目重构,重构就是不改变外观的情况下,优化内部代码和架构,使之更好维护,可读性更强,这本书太经典了

    重构改善既有代码的设计

    重构改善既有代码的设计 如果你是面向对象编程语言的开发人员 那么这本书可以帮助你更好的写好你的代码 让你的代码有更好的条理性和可读性 让你如鱼得水

    重构-改善既有代码的设计

    很好的介绍了重构的基本思想和方法,让你懂得如何编写代码、管理代码和设计代码结构,提高代码可读性和可维护性

    绘制图像直方图

    因此,在对图像经行分析前,必须对图像质量经行改善,一般情况下改善的方法有两类:图像增强和图像复原。图像增强的目的是设法改善图像的视觉效果,提高图像的可读性,将图像中感兴趣的特征有选择的突出,便于人与...

    霍里森

    通过改善网站的可访问性来改善Horiseon公司的SEO。 使用语义标记和alt属性,使残障人士更容易访问该网站。 改善网站的可访问性将提高网站的SEO排名。 拥有更好的SEO排名将增加访问该网站的流量,同时还将通过扩大...

    C++Primer中文版(第4版).part3

    既显著改善了可读性,又充分体现了C++语言的最新进展和当前的业界最佳实践。书中不但新增大量教学辅助内容,用于强调重要的知识点,提醒常见的错误,推荐优秀的编程实践,给出使用提示,还包含大量来自实战的示例和...

    汇编语言图文并茂版本

    第1章 预备知识 ...所以,在保留“程序执行效率高”的前提下,人们就开始着手研究一种能大大改善程序可读性的编程方法。 为了改善机器指令的可读性,选用了一些能反映机器指令功能的单词或词组来代表该机器

    C++ primer中文版

    既显著改善了可读性,又充分体现了C++语言的最新进展和当前的业界最佳实践。书中不但新增大量教学辅助内容,用于强调重要的知识点,提醒常见的错误,推荐优秀的编程实践,给出使用提示,还包含大量来自实战的示例和...

Global site tag (gtag.js) - Google Analytics