高效率网页设计的十大军规

来源：互联网发布：淘宝上至臻苹果之家编辑：程序博客网时间：2024/06/06 11:41

更多：http://www.1x3x.net/blog/web-design/2008/03/10-principles-of-effective-web-design.html

原文出处：http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

决定一个网站成败有时候并不是样式设计，而是可用性和易用性。对于一个页面的访问者来说，他所做的只是点击然后决定下一步要做的事情，因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然，如果没有任何提供给用户的功能，这个标准也不复存在了。

我们不打算深入探讨关于可用性的实践细节（比如搜索框应该放置在页面的什么位置）因为已经有相当多的文章就此做了深入的阐述，我们将重点介绍一些核心法则、启示，合理的使用这些法则，能使你的网站更加成熟，展示的内容更容易让用户理解。

请注意：

你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。
我们会在后续的文章中继续讨论关于可用性的问题，您可以订阅我们的网站 subscribe to our RSS-feed 。

为了能够正确的使用这些法则，首先我们需要知道用户是如何和页面进行交互的，用户是如何思考的以及用户的常见行为是怎样的。

用户如何思考？

基本上，一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面，从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此，事实上页面的大部分内容，用户根本没有注意过。用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接，然后点击。如果内容不是他们想要的，他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。

用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容，用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高，但是设计的很糟糕，依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。
用户并不会细读，他们是浏览 分析一个站点，用户始终在寻找一些锚记（译注 fixed point 内容节点）来作为页面内容的导航员。

（图1 图上的热点标示了用户的阅读集中在句子的前半部分）

网站用户是急切并强烈要求迅速满足需求的 非常简单的法则：如果一个站点不能满足用户的期望，那这个网站的设计师就是不称职，这个公司也将失去很多挣钱的机会。认知负载越高，直观导向越少，用户越是会放弃该站点来选择另一个网站来代替。
用户并不会做最佳的选择 用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接，他们就会在第一时间点击。所以，从全部内容中找出最优的链接耗时太多，也太累，寻找满足需求的看上去更有效率。[video]

(图2 图3 这两幅图片展示了线性阅读在网页浏览中是不适用的)

用户跟从的是他们的直觉 大多数情况下，用户不会认真去看设计师提供的内容，根据Steve Krug(Don’t make me think 作者)的说法，主要原因是用户根本不在乎这些。
用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器，并且信赖从始至终提供一直内容展现形式的网站。比如，他们不希望自动弹出的窗口，和随时能够通过“后退”按钮回到他们先前浏览过的网页，所以，一个非常重要的准则就是“不要在新窗口打开网页”。（译注：这点上，中国的用户的操作习惯恰恰相反，比如谷歌就不得不改成在新窗口打开，另外，在web标准中<a>标记的target属性是被废弃的，也是基于这个原因。）

1. 别让我思考

根据Krug的可用性第一军规，网页必须是清晰且自说明的。当你开始创建一个站点是，你的首要职责就是让网站摆脱“问号”—— 用户的决定应该是在赞成，反对以及替代者中自觉地做出的选择。如果一个站点的导航和站点架构不够直观，那这个网站中的“问号”将会越来越多，并且会让用户很难理解这个网站如何工作和如何才能够A点到B点（即功能的导向很模糊）。一个拥有适当的可视化导向线索和很容易理解的链接的网站结构，将能有效的帮助用户找到达到他们目标的路径。

让我们来看一个例子 Beyondis.co.uk 的口号是”beyond channels, beyond products, beyond distribution”。这是什么意思呢？因为用户多数情况下采用“F”-pattern 来浏览一个网页，这3句话将是用户在这个页面上第一眼看到的内容。尽管该设计本身非常的简洁而且直观，但是这个页面的主题是什么，用户必须去网页中寻找答案。这是一个完全没有必要的“问号”。对于设计师来说，必须让这样的问号数量为0。将左右页面的内容互换一下，将大大提高可用性。

ExpressionEngine 这个网站使用了和Beyondis类似的页面结构，但是避免了前者存在的“问号”。而且，网站的标语本身具备了功能性，用户可以直接在这里尝试提供的服务和下载试用版本。通过让用户很容易就能理解系统提供的内容，将有效降低用户的认知负载。当你有过一次成功经历后，你可以和用户沟通，看看系统给用户提供了什么，是什么让他们受益。如果用户不能在你的网站找到他们想要的内容，他们是不会使用你的网站的。

2. 不要浪费用户的耐心

无论在什么项目中，如果你希望为用户提供某些服务或者是工具的话，记住一定对用户的要求一定要降到最低（比如用户信息）。用户尝试某个服务时，越少的动作，越容易让那些无意中看到的用户愿意去尝试一下。对于用户来说，第一次往往希望先玩一下该服务，而不是填一堆表单来注册一个帐号，且大多数人再也不会使用该帐号。应该让用户在浏览你的网站的时候并不需要强制注册他的个人信息，笔者认为让用户使用email来注册是不合理的行为（译注：可用性很多时候必须对运营做出必要的妥协）。 Ryan Singer - 37Signals的一位成员（states），在他演讲中提到，用户在了解提供email地址后会获得哪些东西后，将会非常乐意提供email地址。[演讲视频戳我]Stikkit 是一个很好的榜样，界面非常友好，最低限度的向用户索取信息，让用户没有被打扰的感觉，甚至感觉很舒服，这也将成为用户对你网站的整体感觉之一。显然 Mite 需要的信息更多。但是，这个注册同样可以在30秒内完成，因为设计师将注册页面横向水平放置，这样用户无需滚动页面。理想情况下，移除所有的栅栏，让用户无需注册就能够浏览你的网站，可以将注册独立出来，这样会避免许多用户在刚进入你的网站就放弃了它。

3. 设法集中用户的注意力

对于网站来说，由于媒体形式非常多样，包含静态和动态的内容，所以必然有些内容显得更加吸引用户一些。很明显，图片肯定比文章更具有吸引力，粗体字比普通字体更加吸引眼球。人类的眼球是一个高度非线性的设备，所以用户可以一下子识别出页面上动作和图案。所以那些视频广告是最让人觉得“吵闹”，当然对于广告商来说，这是最完美的效果（:-) 让我想到恒源祥和史玉柱）。

Humanized.com 完美的使用了吸引眼球的法则。用户第一眼唯一能看到的东西就是大大的 FREE ，这是非常具有吸引力的，但仍然保持了一种“安静”的感觉，只是纯粹的传递信息。其下的具体信息告诉用户如何去了解更多关于免费产品的信息。通过适当地使用一些可视化元素让用户的注意力集中在网页的某些区域，可以非常有效地是用户从A点走向B点，并且不会让他们觉得是有意这么做的。更少的问号，更好的方向感，会让用户更加信任该网站所展现的关于公司的形象。换句话说，在屏幕背后更少的思考，更好的用户体验是可用性的第一准则。

4. 努力展现特点

时下的网页设计师经常遭到这样的批评：总是使用“1-2-3-完成”这样的可视化导航，或者是一些加上视觉效果的大图标。但是从设计的角度来看，这并不是一件坏事情。正相反，这样的导航是非常有效的，因为它通过一种非常简单和友好的方式引导用户浏览网站。

Dibusoft.com 将清晰的网站结构和可视化吸引力结合的非常好，这个网站第一眼看去就能发现有9个主要的导航链接。当然，颜色的选取可能有些过淡了。让用户看清楚提供有哪些功能是用户界面设计中一条非常基本的准则。这并不是说我们要关心这些功能是如何实现的，而是重点关心内容是否易理解，用户是否对和系统的交互方式觉得舒服。

5. 让文字更加简练

由于网页和出版物有着很多不同，我们需要改变写作方式来适应用户浏览习惯。褒奖的文字是不会有人阅读的，大段未加插图或者用粗体、斜体标注关键字的文字也会被略去，同样会被略去的还有夸张的文字。 Talk business. 避免使用诸如婉转修饰过的、推销式的、公司特定、不为人所熟悉的称谓。例如，当你希望用户注册一个帐号来体验你的服务时，“Sign up 注册”会比“Start Now 现在开始”更好，当然比起“explore our service 体验我们的服务”那是更加好了。（换言之，就是要非常明确的告诉用户，这是干什么的）

Eleven2.com 做的相当出色，没有任何修饰性文字，也没有任何夸张的文字，只有价格，也就是用户唯一想知道的东西。一些关于写作的建议：

尽量使用简短的语句（一步出答案，男生选C，女生凭直觉）
使用可快速浏览的写作方式，增加标题，分类，使用列表，分隔图片等方式来划分不同的段落
使用简明扼要的词句，例如褒奖的文字不需要写的像广告一样，直接了当的告诉客户选择自己产品的理由就可以了

6.努力让网站变得简单

KISS原则应该是网站设计的首要目标。用户很少是因为网站的设计爱上他，更多的情况下，他是希望在网站找到有用的信息。所以我们要努力让网站变得更加简单。 Crcbus该网站提供了一个非常简单和清爽的界面。因为是意大利语的缘故，你可能会不知道这个网站在讲什么，但是你可以非常清楚的区分出页首，页尾，导航栏，正文内容这些区块。注意，图标也能很好的和用户交流，当你鼠标悬停的时候，附加信息会显示出来。站在用户的角度，最好网站是纯文字，没有任何广告的，这样就如同我们手上的书一般。所以提供一个额外的打印版本给用户是提升用户体验的一个非常有效的手段。

7. 不要害怕空白

实际上，怎么形容空白的重要性都不为过。他不仅为用户降低了认知负载，而且帮助用户更好的理解了屏幕上的内容。当一个用户浏览一个新的布局时，他所做的第一件事情就是快速浏览该页面，并将页面上的内容分块区分。复杂的布局将会让浏览，阅读，分析变得非常困难。当你需要分割页面内容，选择分割线还是空白，我建议是选择空白（那是不是我要把这篇blog的分割线都去掉？）。层级式的结构降低了复杂度（Simon’s law），你的内容层次越分明，越是容易被用户理解。 Cameron.io 这里通过合理的使用空白，让页面看上去非常易于理解。

8. 通过使用“可视化语言”来有效沟通

Aaron Marcus three fundamental principles 一文中提到“可视化语言”这一沟通形式。

Organize 提供用户清晰且一致的结构。一致性，屏幕布局，关联和导航都是组织形式的重要概念。对于所有元素必须应用同样的规则。
Economize 使用最少的可视化元素来完成最多的事情，考虑以下四个重要方面，简单：仅使用最重要的元素；明确：所有的元素设计必须是含义清晰，不会有歧义或者晦涩难懂；区别：所有的元素必须非常容易被区别；强调：最重要的元素必须非常明显。
Communicate 不要让文字超过3种字体，或者超过3种大小，每行18个单词，5-80个字符比较合适（这里翻译的较为简略，毕竟指导意义一般，我认为他这段话就挺晦涩的 :-)）

9. Convention —— 我们的好朋友

约定规则并不会导致我们的网站变的很死板。实际上，约定是非常有帮助的，他有效降低了学习曲线，很多东西将不需要你特意去指出他们。打个比方，如果你把网站的RSS图标改成你自己的，那将会成为一个可用性梦魇，用户会找不到他们已经习以为常的东西。遵循约定，你会获取用户的信任，遵从用户的期望，了解他们对于导航，文字结构，搜索框位置的习惯，不要试图去改变他们，除非你真的找到了一个更好的主意。

10. 尽早测试，更多测试

如果你希望获得一个更好的网站，那你必须尽早尽可能多的去测试他。