众妙之门——国际顶级Web设计师成功法则

有些事情其实发生得自然而然。它们要求你耐心并对你的付出给予回报；它们要求你聚精会神，需要你相信自己的直觉；它们让你满怀希望，却又让你伤痕累累。可最重要的是：它们让你成长。

五年前着手创办Smashing Magazine时，我们并没有期望任何事情。对于成功维持一个面向设计者与开发者的在线杂志，我们并没有什么宏大的总体规划。我们只是创建了一些自己觉得有实用价值的东西，而且我们觉得这些东西对于别人也颇为有益。

但接下来，你们来了。

你们口口相传，留下评论，或发来一封邮件。你们让我们知道了自己存在的价值，知道我们所做的事情是有意义的。你让我们明白，我们的卑微付出值得引起你的关注。所以，我们倾听着，用心地聆听着。

五年过去了，Smashing Magazine亦随之有了改观。它从一个小小的不知名的博文集进化成为了专业的出版机构，有了自己的出版策略、编辑计划、团队风格以及自己的精英团队，其中包括资深作家、调研助理、咨询专家、编辑和校对人员。

Smashing Magazine团队专注而朝气蓬勃，但同样是因为你们——这些年来一直关注着Smashing Magazine的你和每一位读者。谢谢你们一直以来的支持，没有了你们，我们不可能存在。

为答谢你们这些年来的支持、批评与鼓励，我们将本书作为礼物奉上。它收录了发表在Smashing Magazine上最优秀、最实用、最有趣或最具启发性的那些文章。为方便起见，同时也为了让您读得愉快，我们细心地对这些文章进行了编辑、校对和更新。

谢谢亲爱的朋友们，让我们期待下一个五年！

Smashing Magazine主编

你没必要对什么都表示赞同。作为专业网页开发人员，你得刺激访客的兴趣与需要，你得保持自己对良好用户体验的理解，确保访客能够在复杂的网站结构中（尽可能）找到他们需要的东西。这意味着你需要在和客户与同事的沟通中维护自己的立场，同时有效地传达自己的想法。事实上，你的工作就是反对错误的想法和有误导性的概念，而不是盲目跟从。

在这种情况下，没有什么比深刻了解与你工作息息相关的基础问题对你帮助了。即使你理解其中的大多数，但要弄懂怎样给这些概念命名，以及在对话中碰到时如何称呼它们，这些还是不容小觑的。此外，手头备有精准的术语以备不时之需常常是大有裨益的，说不定在沟通中你需要它们来支持自己的论证。

在这篇文章中，我们提供了30个重要的可用性问题、术语、理论和法则，人们常常忘记、忽略或者误解它们。可读性与易读性有哪些不同？什么是80/20理论，或者帕累托法则？扫雷和满意度指的是什么？什么是逐步强化和优雅降级？现在，是时候揭开谜底啦！

可用性：理论和法则

人类大脑在处理信息的能力方面是存在一些限制的，这个法则是指，人的大脑会对复杂信息进行处理，将其分割成信息组块和单元。根据George A.Miller的研究，人类的短期记忆一次性只能记住5至9件东西。基于这个原因，导航菜单栏通常限制在7个选项之内。但我们并不完全清楚这“7±2法则”能不能（应不应该）应用到网站设计中。

这是个比较宽泛的理论，它认为，用户对于某些类型的系统响应的等待时间不能超过两秒钟，比如应用切换和程序启动时间。两秒钟的推论稍显武断，但在数量级上算是挺合理的。比较可靠的准则应该是：用户等待的时间越短，用户体验越佳。

3次点击理论

根据这个理论，如果用户在3次鼠标点击之后还无法找到需要的信息或者无法了解网站特征，他们就会终止操作。换句话说，这个理论突出强调清晰的导航、逻辑缜密的架构和方便操作的网站层次结构。多数情况下，点击次数并无多大干系，真正重要的是要确保访客始终知道自己目前所处的位置，之前去过哪些页面，以及接下来还能去哪里。如果用户对于系统操作有清晰的了解，即使是点击10次，也不会有问题。

帕累托法则（The Pareto Principle）认为，80%的结果是由20%的诱因造成的。这是商业的基本经验理论（你销售成绩的80%来自于20%的客户），但同样也能应用于设计和可用性方面。比如，如果对那些创造出80%利润的20%的用户、顾客、活动、产品或进程进行标识，极度关注它们，那么你就会获得巨大的收获。

用户界面设计的八条黄金准则

通过对界面设计的相关研究，Ben Shneiderman受经验启发，提出了一系列适用于大多数人机交互系统的准则。这些准则广泛应用于用户界面设计，对于网站设计也同样适用。

1.保持连贯性。

2.让“老鸟”用户能够使用快捷键。

3.提供有实际意义的反馈。

4.以对话结束操作。

5.提供简单的错误处理。

6.允许轻松地返回上一步。

7.满足用户的控制需求。

8.减轻短期记忆负荷。

费茨定律（Fitts’Law）由保罗·费茨发表于1954年，该定律是一个模拟人体运动的模型，以目标距离与目标尺寸大小为函数，从而预计移动到目标区域所需要的时间。该定律通常应用于访客从A点到达B点的鼠标指针移动操作。例如，这个定律对于如何放置内容区域、以更实用的方式、最大化内容可及性和提高内容点击率，是非常重要的。

倒金字塔结构

倒金字塔结构是一种写作风格，将文章概要放在开头。这种方式利用了新闻界出名的“瀑布效应”，即作者尽量让读者对他们所报道的话题有所了解。文章由结论开始，接着是要点信息，最后写些小细节，比如相关背景。鉴于网站用户希望得到即时性满足，这种倒金字塔风格对于网站内容写作和更好的用户体验都相当重要。

网站用户并不会倾向于利用最佳方式来寻找他们所需要的信息，他们对于最合理、最完美的解决方案也不是那么感兴趣。相反，他们——向追随快餐——就是那些“还行”的方案。在网络领域，满意度所描述的正是这种方法：用户满足于某个问题的某个“还行”的解决方案—即使从长期来看，别的解决方案能更好地实现他们的要求。

可用性背后的心理学

雏鸭综合症（Baby-Duck-Syndrome）是访客的一种心理倾向。他们忠于所记住的第一个设计，然后将其他设计与那个设计进行相似度比较。结果，用户通常倾向于那些与所记住的设计相似度比较高的系统，而不喜欢陌生的那些。这便使得大多数新的系统设计面临着可用性问题：用户已经习惯了先前的设计，所以会对新的网站布局感到不舒服，因为新的设计让他们不得不重新摸索。

网站用户倾向于屏蔽所有看上去像广告的东西，而且有意思的是，他们还挺擅长于此。尽管可以注意到广告的存在，但人们总能将其忽略掉。由于用户已经为网页上的不同任务构建了相关的网页图式，当在网页上搜索特定信息时，他们只会聚焦在网页的部分区域，即他们认为相关信息可能会出现的地方，也就是小文本和超链接。大型的彩色或动画广告条幅以及其他图像在这种情况下都会被忽略。

来源：Banner Blindness：Old and New Findings。

“扣人心弦”效应

人类无法忍受不确定性。对于感兴趣的、没有答案的问题，我们倾向于尽快找到答案。“扣人心弦”效应（Cliffanger-Effect，又称“蔡氏效应”）就是基于此事实提出的。采用此效应的电影、文章和故事情节都会在结尾部分戛然而止，通常是以某个让人震惊而又始料不及的真相或僵局收尾。这种效应常常应用于广告中：在广告中询问访客一些没有答案或者有挑衅意味的问题，这通常能够促使访客浏览广告内容，点击横幅广告或者打开链接。

1927年，Bluma W.Zeigarnik发现了此效应。这种效应与读者建立起情感联系，且在营销学中极有影响力。访客能够更好地记住广告是关于什么的，甚至连其中最细微的小细节都能记忆得清晰准确。在网页内容写作中，扣人心弦效应也用来将用户与某个网站进行捆绑。

形状视觉的格式塔原则

这些原则是人机交互设计方面人类心理的基本原则。

• 接近性原则：当我们看到一些物体时，我们会将彼此靠近的物体视为一组。

“接近性原则”的现实例子：来自2002年MTV音乐大奖。

• 相似性原则：如果某些元素彼此相似时，人们将它们视为一组。

• 普雷格朗茨原则（图像-背景）：在感知某个可视范围时，一些物体（图像）会比较抢眼，而其他的则变成了背景。

苹果电脑的logo，可以看作是一张普通的笑脸，也可以是一张对着电脑屏幕微笑的侧脸。

• 对称性原则：当我们看着某些物体时，我们倾向于将它们视为从中心展开对称的形状。

• 闭合法则：我们视觉上常常将其实并不连贯的东西视为连贯，或者说将其看做完整的图案。

我们能看出字母“I”、“B”和“M”，但其实我们看到的不过是几个不同长度的、彼此间隔的白色空间。

自我参照效应

自我参照效应在网络写作中尤其重要，它能使作者与读者之间的交流产生戏剧性的效果。比之于我们没有直接关联的东西，那些与我们个人意念直接相关的内容会更容易被记住。比方说，读完一篇文章后，用户更容易记住与其个人经历有关的角色、故事或者事实。在可用性中，自我参照效应常常应用在网络写作与网站内容里。

可用性术语表：术语和概念

眼球追踪（Eye-Tracking）是对聚焦点（我们所看的地方），或者说眼球相对头部移动进行测量的过程。眼球追踪仪记录了每一次眼球移动，并且突出显示页面上最活跃的区域。眼球追踪研究能帮助评估用户对于正在浏览的网页的舒适度以及他们对背后的架构及系统的了解速度。

网页折叠（Fold）线是屏幕可见区域网页的最底部。当然，折叠线位置取决于访客的屏幕分辨率。折叠线上方的区域（也称网页可见区）指的是不用拖动滚动条就能看到的网页内容。基于折叠线位置不用拖动滚动条就能直接看到内容，它便常常被视为能够带来最高广告点击率和利润回报的区域。不过，折叠区域并没有那么重要。

中心凹区（Foveal Area）是人类眼睛获得敏锐的中心视力的重要部分，人们阅读、看电视或电影、开车，以及从事其他任何非常需要视觉细节的活动都离不开它。中心凹区是眼睛所聚焦的小而宽的空间，也是你的双眼能够看到最多细节的唯一一个地方。它相当于两度的视野，或是放在你眼前的两个缩略图大小的紧凑区域，是你向访客传递最重要信息的地方。

中心凹区之所以重要，是因为在屏幕上这个小而宽的区域之外，访客看待网页的方式迥然不同。也只有在这里，你的眼睛不需要上下左右扫描。

注释（Gloss）是一个自动的行为，它提示并概要显示链接的内容，以及一旦点击后用户会到达哪里。提示可以通过链接的标题特征来提供。从可用性的角度来看，用户希望对网站上正在发生的一切事情拥有绝对的控制权。配上完整的链接文字，精准地对内外部链接进行解释，能够提高网站的可用性。

优雅降级（Graceful Degradaiton）是指一个网站即使在它的部件(部分或完全)已经无法显示或者无效的情况下还能展示内容和基本功能的能力。在实践中，这意味着网站在每一个可能“出错”的情况下显示内容，并在用户任何可能的配置下(浏览器、插件、连接、操作系统，等等)被使用。为“高级用户”提供的仍然是完整的、增强的页面版本。例如，为多媒体内容提供可替代的文件，以确保在图片无法显示的时候网站内容仍然可以显示。

粒度（Granularity）是指将某个庞杂的数据组或信息分割成更小单位的程度。

热区（Hotspot）是网站上可以点击的区域。点击该区域时，其形式或（和）外观就会发生改变。例如，当链接或网站上的任何其他元素被点击时产生的焦点效应。

易读性（Legibility）指的是文本在视觉上的清晰度。

扫雷（Mine Sweeping）是指用户为识别网站上的链接而与网页进行的交互行为。多数情况下，扫雷是可用性问题中一个明确的预警信号。通常，扫雷行为包括用户在页面上迅速移动鼠标光标或指针，看光标或者指针是否变形，从而得知有没有链接出现。

网页术语“浆糊式导航”描述的是用户在一团浆糊般的网页中难以辨识导航链接或者确定链接在哪里的设计。

物理一致性（Physical Consistency）描述的是网站外观的一致性，例如logo、导航的位置、图形元素与版式的使用。物理一致性对于更好地进行定位和有效的网站导航至关重要。

逐步强化（Progressive Enhancement）是指将网站按照多层次方式进行设计的设计方略——从适合所有浏览器的基本功能到现代浏览器附加的增强属性。逐步强化最主要的优势在于“普遍可用性”——也就是说，它允许所有用户通过所有浏览器或网络连接接触到网页的基础内容和功能，但同时给那些拥有更好的网络宽带或使用更高级浏览器的用户提供增强版的网页。

可读性（Readability）是指文字的可理解程度，它取决于句子的复杂程度和词汇的难度。这意味着无论年纪和受教育程度，所有人都能很容易地理解文章的意思。可读性不是易读性。

以用户为中心的设计

以用户为中心的设计（UCD）是一种设计思路，也就是以用户的需求、兴趣和行为作为基础，来设计网站结构、导航和内容。UCD被视为现代网络应用的标准方式，尤其是在用户网络自创内容兴起的情况下。在Web 2.0网站中，必须让访客积极主动参与互动，而这就需要分析和优化他们的需求。

警惕（持续关注）

警惕（Vigilance）是指在漫长而单调的任务中始终保持注意力的能力，比如，查找文字拼写错误、约会提醒、文档自动保存，等等。在现代网络应用中，警惕任务通常是后台自动操作，从而提高服务的可用性。

走来即用设计

走来即用设计（Walk-up And Use Design）非常直观明白，因此新手用户或者一次性用户即使没有任何相关知识或培训，也能容易上手。

线框图（Wire Frame）是个基础结构，是网站的骨架，它介绍了网站的创意、概念和架构。线框图可以设计成演示图，用来解释网站的设计原理、所具备功能以及用户如何实现自己的目的。线框图通常没什么视觉要素或完整的页面布局，它们常常是设计师画在纸上的初稿或草图。

众妙之门——国际顶级Web设计师成功法则

图书目录:

详情

图书摘要

相关图书

相关文章

相关课程