可用性和实用性，而不是视觉设计，决定了网站的成功或失败。由于页面的访问者是唯一点击鼠标的人，因此决定一切，因此以用户为中心的设计已成为成功和以利润为导向的网页设计的标准方法。毕竟，如果用户无法使用某个功能，那么该功能还不如不存在。

我们不打算讨论设计实现细节（例如，搜索框应放置在哪里），因为许多文章已经讨论过这一点；相反，我们关注有效网页设计的主要原则、启发式和方法——这些方法如果使用得当，可以导致更复杂的设计决策并简化感知所呈现信息的过程。

良好网站设计的原则和有效的网页设计指南

为了正确使用这些原则，我们首先需要了解用户如何与网站交互、他们如何思考以及用户行为的基本模式是什么。

用户怎么想？

基本上，用户在网络上的习惯与顾客在商店中的习惯没有太大不同。访问者浏览每个新页面，扫描一些文本，然后单击引起他们兴趣或与他们正在寻找的内容模糊相似的第一个链接。事实上，页面的很大一部分他们甚至都没有看。

• 大多数用户搜索有趣（或有用）且可点击的内容；一旦找到一些有前途的候选者，用户就会点击。如果新页面不符合用户的期望，则单击“后退”按钮并继续搜索过程。

• 用户看重质量和信誉。如果一个页面为用户提供了高质量的内容，他们愿意在内容上妥协广告和网站的设计。这就是为什么那些设计不那么出色、内容高质量的网站多年来却获得了大量流量的原因。内容比支持它的设计更重要。 用户不阅读，而是扫描。在分析网页时，用户会搜索一些固定点或锚点来引导他们浏览页面的内容。

• 网络用户缺乏耐心并坚持即时满足。非常简单的原则：如果一个网站不能满足用户的期望，那么设计师就没有做好他的工作，公司就会赔钱。认知负荷越高，导航越不直观，用户就越愿意离开网站并寻找替代方案。

• 用户不会做出最优选择。用户不会寻找最快的方式来找到他们正在寻找的信息。他们也不会以线性方式扫描网页，即依次从一个网站部分到另一个网站部分。相反，用户满意；他们选择第一个合理的选项。一旦他们发现一个看起来可能会导致目标的链接，很有可能会立即点击它。优化是很困难的，而且需要很长时间。满意才更有效率。 顺序阅读流程在 Web 中不起作用。底部图像的右侧屏幕截图描述了给定页面的扫描路径。

• 用户遵循他们的直觉。在大多数情况下，用户只是蒙混过关，而不是阅读设计师提供的信息。史蒂夫·克鲁格认为，根本原因是用户不关心。“如果我们找到有效的方法，我们就会坚持下去。只要我们能够使用它们，我们是否了解事物的工作原理对我们来说并不重要。如果你的观众会表现得像你在设计广告牌，那么就设计出色的广告牌。”

• 用户希望拥有控制权。用户希望能够控制他们的浏览器并依赖整个站点的一致数据呈现。例如，他们不希望意外弹出新窗口，并且希望能够通过“后退”按钮返回到之前访问过的网站：因此，最好不要在新浏览器窗口中打开链接。

1. 不要让用户思考

根据克鲁格可用性第一定律，网页应该是显而易见且不言自明的。当你创建一个网站时，你的工作就是消除问号——用户需要有意识地做出决定，考虑利弊和替代方案。

如果导航和网站架构不直观，问号的数量就会增加，使用户更难理解系统如何工作以及如何从 A 点到达 B 点。 结构清晰、视觉线索适中且易于识别链接可以帮助用户找到实现目标的路径。

让我们看一个例子。Beyondis.co.uk 声称“超越渠道、超越产品、超越分销”。这是什么意思？由于用户倾向于根据“F”模式探索网站，因此这三个语句将是用户加载页面后在页面上看到的第一个元素。

尽管设计本身简单直观，但要了解页面的内容，用户需要搜索答案。这就是一个不必要的问号。设计师的任务是确保问号的数量接近0。视觉解释位于右侧。只需交换两个块就会提高可用性。

ExpressionEngine 使用与 Beyondis 完全相同的结构，但避免了不必要的问号。此外，随着用户可以选择尝试该服务并下载免费版本，该口号变得实用。

通过减少认知负荷，您可以让访问者更轻松地掌握系统背后的想法。一旦实现了这一点，您就可以传达该系统为何有用以及用户如何从中受益。如果人们无法找到解决方法，他们就不会使用您的网站。

2. 不要浪费用户的耐心

在每个项目中，当您要为访问者提供一些服务或工具时，请尽量将用户需求保持在最低限度。用户测试服务所需的操作越少，随机访问者实际尝试该服务的可能性就越大。首次访问者愿意使用该服务，而不是为他们将来可能永远不会使用的帐户填写冗长的网络表单。让用户浏览网站并发现您的服务，而无需强迫他们共享私人数据。强迫用户输入电子邮件地址来测试该功能是不合理的。

正如 37Signals 团队的开发者 Ryan Singer 所说，如果用户在看到该功能运行后被要求提供电子邮件地址，他们可能会渴望提供电子邮件地址，因此他们对自己将得到什么有所了解作为回报。

Stikkit 是用户友好型服务的一个完美例子，它几乎不需要访问者做任何事情，既不引人注目又令人感到舒适。这就是您希望用户在您的网站上感受到的感觉。

显然，Mite 需要更多。然而，注册可以在不到 30 秒的时间内完成——由于表单是水平方向的，用户甚至不需要滚动页面。

理想情况下，消除所有障碍，首先不需要订阅或注册。仅用户注册就足以成为用户导航的障碍，从而减少传入流量。

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

由于网站同时提供静态和动态内容，因此用户界面的某些方面比其他方面更引人注目。显然，图像比文本更引人注目——就像标记为粗体的句子比纯文本更有吸引力一样。

人眼是一种高度非线性的设备，网络用户可以立即识别边缘、图案和运动。这就是为什么基于视频的广告非常烦人和分散注意力，但从营销的角度来看，它们完美地完成了吸引用户注意力的工作。

Humanized完美运用了聚焦原理。用户直接可见的唯一元素是“免费”这个词，它看起来很有吸引力，但仍然平静且纯粹提供信息。微妙的提示为用户提供了如何找到更多有关“免费”产品的足够信息。

通过适度使用视觉元素将用户的注意力集中到网站的特定区域可以帮助访问者从 A 点到达 B 点，而无需考虑实际上应该如何完成。访问者的问号越少，他们的方向感就越好，他们对网站所代表的公司就越信任。换句话说：幕后需要进行的思考越少，用户体验就越好，这也是可用性的首要目标。

4. 争取功能曝光

现代网页设计通常因其通过视觉上吸引人的 1-2-3 完成步骤、具有视觉效果的大按钮等引导用户的方法而受到批评。但从设计的角度来看，这些元素实际上并不是一件坏事。相反，此类指南非常有效，因为它们以非常简单且用户友好的方式引导访问者浏览网站内容。

Dibusoft 将视觉吸引力与清晰的网站结构结合在一起。该网站有 9 个一目了然的主要导航选项。不过，颜色的选择可能太浅了。

让用户清楚地看到哪些功能可用是成功的用户界面设计的基本原则。如何实现这一点并不重要。重要的是内容易于理解，并且访问者对与系统交互的方式感到舒适。

5.利用有效的写作

由于网络与印刷不同，有必要根据用户的喜好和浏览习惯调整写作风格。促销文章不会被阅读。将跳过没有用粗体或斜体标记的图像和关键字的长文本块。夸张的语言会被忽略。

谈生意。避免使用可爱或聪明的名称、营销引起的名称、公司特定名称和不熟悉的技术名称。例如，如果您描述一项服务并希望用户创建一个帐户，“注册”比“立即开始”更好。这又比“探索我们的服务”更好。

Eleven2.com直接切入主题。没有可爱的话语，没有夸张的言论。相反，价格：正是游客所寻找的。

有效写作的最佳解决方案是

• 使用简短的短语（尽快切入要点）
• 使用可扫描的布局（对内容进行分类，使用多个标题级别，使用视觉元素和项目符号列表来打破统一文本块的流动）
• 使用简单且客观的语言（促销不需要听起来像广告；为您的用户提供一些合理且客观的理由，说明为什么他们应该使用您的服务或留在您的网站上）

6.力求简单

“保持简单”原则（KIS）应该是网站设计的主要目标。用户很少会在网站上欣赏设计；此外，在大多数情况下，尽管设计如此，他们还是在寻找信息。力求简单而不是复杂。

从访问者的角度来看，最好的网站设计是纯文本，没有任何广告或与访问者使用的查询或他们一直在寻找的内容完全匹配的其他内容块。这就是为什么用户友好的网页打印版本对于良好的用户体验至关重要的原因之一。

Finch 清楚地展示了有关网站的信息，并为访问者提供了多种选择，而不会用不必要的内容过度拥挤他们。

7.不要害怕空白

事实上，很难高估空白的重要性。它不仅有助于减轻访问者的认知负担，而且使他们能够感知屏幕上呈现的信息。当新访问者接近设计布局时，他/她尝试做的第一件事就是扫描页面并将内容区域划分为可消化的信息片段。

复杂的结构更难阅读、扫描、分析和使用。如果您可以选择通过可见线或一些空白来分隔两个设计段，那么通常最好使用空白解决方案。层次结构降低了复杂性（西蒙定律）：你越能更好地为用户提供视觉层次感，你的内容就越容易被感知。

留白空间很好。Cameron.io 使用空白作为主要设计元素。结果是一个易于浏览的布局，使内容占据了应有的主导地位。

8.使用“可见语言”进行有效沟通

亚伦·马库斯在他关于有效视觉传达的论文中阐述了使用所谓的“可见语言”（用户在屏幕上看到的内容）所涉及的三个基本原则。

• 组织：为用户提供清晰一致的概念结构。一致性、屏幕布局、关系和导航性是组织的重要概念。相同的约定和规则应适用于所有元素。
• 节约：用最少的线索和视觉元素做最多的事情。需要考虑四个要点：简单性、清晰性、独特性和重点。简单性仅包括对沟通最重要的元素。
• 清晰度：所有组件的设计都应使其含义明确。独特性：必要元素的重要属性应该是可区分的。强调：最重要的元素应该容易被感知。
• 沟通：将演示内容与用户的能力相匹配。用户界面必须保持易读性、可读性、版式、象征意义、多视图以及颜色或纹理之间的平衡，以便成功地进行沟通。使用最大。最多 3 种磅值的 3 种字体— 每行文本最多 18 个单词或 50-80 个字符。

9. 公约是我们的朋友

网站元素的常规设计不会导致网站变得无聊。事实上，约定非常有用，因为它们减少了学习曲线，减少了弄清楚事物如何运作的需要。例如，如果所有网站都有不同的 RSS 源视觉呈现，那么这将是可用性的噩梦。这与我们的日常生活没有什么不同，我们倾向于习惯如何组织数据（文件夹）或购物（产品放置）的基本原则。

通过惯例，您可以获得用户的信心、信任、可靠性并证明您的可信度。遵循用户的期望——了解他们对网站导航、文本结构、搜索位置等的期望。

可用性会议的一个典型示例是用日语翻译页面（假设您的网络用户不懂日语，例如 Babelfish），并为可用性测试人员提供在不同语言的页面中查找某些内容的任务。如果约定得到很好的应用，用户将能够实现一个不太具体的目标，即使他们一个字都听不懂。

史蒂夫·克鲁格建议，只有当你知道自己确实有更好的想法时才最好进行创新，而当你没有更好的想法时，就利用惯例。

10. 尽早测试，经常测试

这种所谓的 TETO 原则应该应用于每个网页设计项目，因为可用性测试通常可以提供对重大问题和与给定布局相关的问题的重要见解。

测试不能太晚，不能太少，也不能出于错误的原因。在后一种情况下，有必要了解大多数设计决策都是局部的；这意味着您无法普遍回答某种布局是否比另一种更好，因为您需要从非常具体的角度进行分析（考虑需求、利益相关者、预算等）。

需要记住的一些要点：

• 根据 Steve Krug 的说法，测试 1 个用户比不测试 100% 好，在项目早期测试 1 个用户比在项目接近尾声时测试 50 个用户要好。根据伯姆第一定律，错误在需求和设计活动中最常见，并且越晚被消除，代价就越高。
• 测试是一个迭代过程。这意味着你设计一些东西，测试它，修复它，然后再次测试它。可能存在第一轮中没有发现的问题，因为用户实际上被其他问题阻止了。
• 可用性测试总是会产生有用的结果。要么你会被指出你所遇到的问题，要么你会被指出不存在重大设计缺陷，这在这两种情况下都是对你的项目有用的见解。
• 根据温伯格定律，开发人员不适合测试他或她的代码。这对于设计师来说也同样适用。当你在一个网站上工作了几周后，你就无法再从一个新的角度来观察它了。您知道它是如何构建的，因此您确切地知道它是如何工作的——您拥有独立测试人员和网站访问者所没有的智慧。

底线：如果你想要一个很棒的网站，你就必须进行测试。

via： https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/