决定一个网站成败命运的，不是视觉设计，而是设计的可用性和有效性。访问网页的用户们握着鼠标，决定一切，“以用户为中心”已然是成功网站的标准设计方向。总之，用户不用的功能，就不该存在。
我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发式方法和入门上。这些如果能够使用得当，可以催产出更丰富的设计作品，且使呈现的信息更容易被获取。
网页设计有效性原则
为了能够合理利用这些原则，我们首先需要理解用户是怎样与网页交互活动的，是怎么思考的，行为的基本模式又是怎样的。
用户是怎么思考的？
通俗地讲，用户在互联网上的行为习惯与日常商店中的顾客们并无二样。来访者们扫视每个新页面，浏览其中的一些文本，点击他们最感兴趣的链接，或者隐约觉得能带他们找到他们想要内容的链接。事实上，页面的绝大部分，他们根本不看。
许多用户找寻感兴趣（或者他们觉得有用）且可以点击的信息，只要一些看起来符合期望的目标出现，用户就会去点击。如果新页面没有满足用户的期望，用户将点击“后退”，继续搜索。
- 用户看重质量和信誉。如果一个网站向用户提供了高质量的内容，用户就演绎忍受广告和糟糕的设计。这就是为何有些网站设计平平，但提供了高质量内容，就年复一年拥有着骄人的流量。内容重于形式。
- 用户不是阅读，而是浏览。用户分析一个网页的时候，寻找一些重要的节点或者锚点，目的是希望这些链接能够指引他们到期望的内容。
用户不是阅读，而是扫视浏览。主要“高亮”区域在页面内容的中间断开了。这是典型的扫视浏览模式。
- 互联网用户是无耐心且必须立即被满足的。非常简单的原则：如果一个网站没有达到用户的期望，设计师的工作就失败了，公司也会有经济损失。认知负荷越高、导航越不直观，用户越倾向于离开这个网站，寻找它的替代品。
- 用户不做最优的抉择。用户不会寻找最便捷的方法找到他们需要的信息。他们也不是线性浏览一个网页，按顺序从一个站点跳转到另一个站点。相反，用户是很容易满足的，他们通常选择第一个让他们满意的选项。只要他们找到一个他们觉得能指向期望目标的链接，他们通常会立即点击。最优的抉择是有难度的，需要花费很多时间。满意即可非常高效。[ 视频 ]
两个图片都显示：网页阅读模式是非线性的。右下方的路径图显示了用户浏览一个网页的视线轨迹。 - 用户遵从他们的直觉。在通常的情况下，用户杂乱无章地扫视而非阅读设计师们呈现的信息。根据Steve Krug的研究，最根本的原因是：用户不关心。“如果我们发现一些东西奏效，我们就会被吸引。这些东西是怎么运作的对我们来说不重要，我们只要能够使用它们就足够了。如果你的受众喜欢大的公告栏，就要做的就是设计一个更大的，公告栏。”
- 用户希望有可控感。用户想控制他们自己的浏览行为本身，且依赖网站呈现的连续的内容。例如，他们不想一个新窗口出乎意料地弹出，他们希望用“后退”按钮返回刚刚的页面；因此，从不在一个新的浏览窗口中打开超链接是一个好的行为。
1.别让用户思考
根据Krug的可用性第一原则，网页应当清晰且不言自明。当你创建一个网站的时候，你的工作就是避免问题——那些需要用户反复慎重考虑前因后果才能做出决定的选择。
如果网站的导航和结构不是直观的，产生的问题就会数量大增，且使得用户很难理解系统是如何工作的，怎样才能从A点跳转到B点。一个清晰的架构，中等强度温和的视觉引导，易于识别的链接，可以帮助用户找到实现目标的途径。
让我们来看一个案例。Beyondis.co.uk 宣称自己是“超越栏目，超越产品，超越分布”的。这是何含义呢？自从发现用户倾向于“F”模式的网页浏览习惯，以上提到“栏目、产品、分布”是用户浏览网页时，首先必见的三元素。
虽然设计本身非常简单且直观，但用户仍然需要去找寻才能明白这个网页是做什么的。这就是所谓的不必要的问题。设计师职责是要让问题降到0。具有视觉效果的解释已经放在右边。只要交换左右模块的位置，可用性就会增加。
ExpressionEngine 使用了与Beyondi非常相似的结构，但避免了不必要的问题。更进一步的是，宣传性的口号起到了效果，用户们会选择尝试服务，下载免费使用版本。
通过减少认知负荷，你可以使访客更容易获取系统背后的思想。只要你做到了这一点，你就可以理解为何这个系统是有用的，而用户又是怎样从中获益的。如果人们在你的网页上迷路的话，他们是不会使用你的网站的。
2. 别浪费用户的耐心
在任何一个你想向用户提供服务或者使用工具的项目工程了，尽量使你的门槛降低，对用户的要求减少。一项服务要求用户付出的越少，越有可能被一个随机进入的访者真正尝试。如果不用填那些他们以后都不会再次用到的长长的网页表格，首次来访的用户都会愿意尝试服务。请让用户自由浏览网页，让他们不用交换私人信息就能尝试你的服务。强迫用户填写电子邮箱地址来测试用户特征是不合理的。
正如37Signals team的开发者Ryan Singe所言，用户们如果在看到产品之后被要求留下电子邮箱地址的话，可能是愿意的，因此他们对于留下电邮的回报是有想法的。
Stikkit是一个用户友好的极佳例子，它清晰易懂，且几乎不向访客索取任何东西。这也是你在你的网站应当使你的用户体验到的。
很明显，Mite就索取很多。但是整个注册表可以在30秒之内完成——因为网页是横向的，用户不需要滚动页面。
如果要理想化地去除所有的障碍，首先就是不需要贡献些什么或者填写注册。仅仅一个用户注册表本身就足以阻碍用户在网站的随意浏览行为，且会对网站浏览产生很大不利影响。
3. 抓住用户的注意
因为网站都是通常既提供静态的内容又提供动态的内容，一些用户界面就会比另一些更加吸引人。很明显，图像比文本更吸引眼球——就好像加粗的句子比未加粗的更容易引起注意。
人类的眼睛是一个高度非线性运作的设备，网页用户能够直觉地识别边界、模式和运动。这是为什么视频广告特别容易引起反感，但是从市场营销的角度来说，他们的确完美地吸引了用户的注意。
Humanized.com很好地利用了焦点原理。这个页面上直接呈现给用户的视觉元素只有一个“free”，它非常地吸引注意力，当仍然非常简洁且信息传递单纯。细小的线索给用户提供了充分地信息去找到“free”的产品。
使用中等强度的视觉元素来将用户的注意力吸引到网页的特定区域，能够使你网站的访客不假思索地从A点轻松到达B点，忽略背后可能存在的逻辑关系。访客遇到的问题越少，就越会具有良好的方向感，且会更加信任这个网站呈现的公司。换言之：对于这个屏幕呈现的内容需要琢磨的越少，可用性的首要目标——用户体验，就会越好。
4. 尽量使特征明显呈现
当代网页设计总是嘲笑用鲜明视觉效果的大按钮指示用户：第一步——第二步——第三步……但是从设计的角度来说，这些元素事实上并非化石。相反的，这些导航是极其有效的，因为他们能够以一种非常简单和友好地方式带领网页的浏览者在网站内容间穿梭。
Dibusoft.com将视觉的宜人性和清晰的网站结构相结合。这个网张有9个主要的导航选择，都放置在一眼能够看见的位置上。尽管，这些导航的颜色也许有些太浅了。
让用户看清楚功能的合理性是成功用户界面的基准。这个是否达到了，实际上并不重要，重要的是内容是否被很好地理解了，而用户是否觉得他们与这个系统的交互非常舒服。
5. 有效书写
由于网站与打印出版史不一样，它需要与用户喜欢的书写方式相匹配，且与浏览习惯相契合。鼓吹浮夸的文字将不会被阅读。大段没有图像、标粗或者斜体关键字的文本将被忽略。夸张的语言将被忽略。
说正经的。避免太过于高校或者自作聪明的名字，市场导向的名字，公司名，或者不被树枝的技术名词。例如，如果你描述了一种服务，需要用户注册一个账户，“注册”比“就从这开始吧！”要好，而后者依然好过“探寻我们打服务”。
Eleven2.com直击要害。没有华丽的语辞，没有夸张的陈述。取而代之的是一个价格：这就是用户来此需要的。
有效书写的优化解决方案
- 使用简短的语句（直击要害，越快越好）
- 使用铺陈的方式（将内容分类，使用多层标题，用视觉线索和树状图）
- 使用平白直观的语言（一个宣传口号不用听上去像广告；给用户一些理性和客观的理由，让他们驻足在你的网站，享用你的服务）
6. 尽量简洁
“简洁”是网站设计的首要原则。用户们很少驻足一个网站是因为喜欢它的设计，通常情况下他们是在找寻他们需要的信息，当然设计为他们提供了寻找帮助。尽量简洁，而不是复杂。
Crcbus为网页访客提供了一个整洁简单的设计。也许因为它是意大利语的，你不能明白这个网站是干嘛的，但是，可以可以清晰地识别出导航，标题，内容区域和脚注。注意，图标都可以清晰地传递信息。只要将鼠标悬浮在图标上，更多的信息就自动呈现出来。
从用户的角度出发，好网页应当是一个纯文本的，没有广告的，新加内容与用户寻找目标密切相关的。这也是一个方便打印的网页带来用户良好体验的原因之一
Finch清晰地呈现了网站信息，让用户在没有无关内容干扰的情况下，做出进一步浏览的选择。
7. 别怕留白
事实上，在网页上留出空白区域的好处怎么估计都不过分。它不仅使网页访客的认知负荷减少，而且更容易获取网页所呈现的信息。新用户浏览网页时要做的第一件事情，通常是扫视全页，将内容区域在心理上划分成合适的组块，然后再对信息进行加工。
复杂的结构不易于阅读，扫视，分析和使用。如果有两种选择，一是用明显的竖线将两个区域隔开，另一个是使用一些空白达到这种效果，通常比较好的选择是后者，即留出空白。分层减少页面复杂感（Simon法则）：视觉上的层次感觉越好，你网页上的内容信息就越容易被获取。
空白区域是很好的。Cameron.io用空白区域作为设计的主打元素。这样就使得主要信息被层次鲜明地突出了。
8. 用“可视化”语言有效交流
Aaron Marcus在“有效的视觉表达”一文中，曾经提及过三个基本原则，其中一个就“视觉语言”，即用户在屏幕上所看到的内容。
- 组织：为用户提供清晰稳定的概念结构。一致性，页面布局，模块关系和页面导航是组织中的重要概念。同样的表达方式和规则适用于所有元素。
- 经济化：尽量少地使用视觉元素。简约、清晰、区别性和重点突出，这四个要点需要被权衡。简约的含义是：只有表达需要的重要元素才可以被呈现。清晰则指的是：所有的组件都应当与它们传递的意义相吻合，不要引起歧义或者表达含糊。区别性是非常重要的，它要求所有元素都应当是独一无二的。重点突出则是指：关键的元素要能够被认知轻易捕获。
- 表达：使用用户能力能够接受的表达方式。为了使得表达顺畅，用户界面必须在可读性，易读性，结构，象征性，许多的观点，颜色和材质效果之间来找到一种平衡。在一个页面里最多只能用三种字体,最多只能用3种字号——文本每行最多呈现18个字或者50-80个字符。
9. 规范是我们的朋友
使用传统的元素设计出的网站并非索然无趣。事实上，传统规范非常有用，因为他们减少了学习的周期且节省了去收集有效性的精力。例如，如果所有网站对于RSS源都启用不同的视觉特征，这将是可用性的一个梦魇。这与我们习惯于对数据规范整理，或者对于商场的货架规律摆放，并无区别。
如果你遵从规范，你将获得用户的信心，信赖，信任，且证明你的可靠。遵从用户的希望——理解他们对于一个网站导航、文字结构、搜索栏位置的期望，等等。（参考Nielsen： Usability Alertbox）
BabelFish in use: Amazon.com in Russian.
在可用性测试方面一个典型的例子是：将网页翻译成日语（假设你的网站用户不懂日语，例如，是使用Babelfish的），然后请你的可用性测试被试在异种语言的网页中寻找一些内容。如果规范被良好的遵从，那么用户是可以找到一些不适特别特殊的目标内容的，尽管他们对于这种语言一窍不通。
Steve Krug建议仅仅在你确认自己有一个更好的想法的时候再去创新，但是如果没有的话，好好遵守现有规范。
10. 早些测试，常常测试。
TETO原则可被应用于任何网页设计，因为对于现有布局的重要的问题和细节，可用性测试总是能提供关键的洞见。
测试不要做的太迟，太少，或是为了不合适的理由而做。“不为了不合适的理由儿测试”的意思是，许多设计方面的决策是为着当下的，你不能普适性地宣布某些布局方式就一定优于其它，因为你需要从一个特殊的角度去权衡（考虑需求，投资者的利益，预算，等等）
一些要点需要牢记于心:
- 根据Steve Krug的研究，测试一个用户要比一个都不测好一倍，且在项目启动之初测试一个用户要比项目告罄的时候测试五十个要好得多。根据Boehm的法则一，错误在需求和设计活动中是非常常见的，而越迟被发现，代价就越昂贵。
- 测试是一个迭代的过程。这意味着你需要设计些东西，然后接着就测试它，修正它，然后再接着测试。也许第一轮不能发现一些问题，因为这些问题可能被其它问题所覆盖，用户们在其它问题上就已经被绊住了。
- 可用性测试总是带来有用的结果。无论是被指出现有网站存在的问题或者是没有触犯某些主流的设计错误，都会使您对于自己的项目做出一个有意义的审视。
- 根据Weinberg’的法则，网站的代码开发者不适合做为测试人员。这个原则同样适用于设计师。因为你对一个网站设计了相当长的时间，你已经不能够从一个全新的角度去审视它。你知道它是如何搭建的、如何工作的——你比独立的测试人员和网站访客们“知道的太多”。
基线原则：如果你想做出一个极好的网站，那一定得测试。
参考文献
- Designing Effective User Interfaces by Suzanne Martin
- Summary on Web Design
- UID presentation (Flash)
- Research-Based Web Design & Usability Guidelines
- “The psychology of computer programming” by Gerald Weinberg
- “Designing Web Usability” by Jakob Nielsen [JN / DWU]
- “Prioritizing Web Usability” by Jakob Nielsen
- “Don’t Make Me Think” by Steve Krug
- “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
- A Summary of Principles for User-Interface Design
英文原文:10 Principles Of Effective Web Design 中文原载:Xiaoxiao’s Weblog
原文地址：https://www.cnblogs.com/zytrue/p/8494175.html