网页设计很棘手。设计师和开发人员在设计网站时必须考虑很多因素，从视觉外观（网站外观）到功能设计（网站工作方式）。为了简化任务，我们准备了本小指南。
在本文中，我将重点介绍可帮助您为网站创造出色的用户体验的主要原理，启发式方法和方法。我将从用户旅程（如何定义网站的“骨架”）之类的全局性事物开始，然后逐步研究单个页面（在网页设计过程中应考虑的内容）。我们还将介绍设计的其他重要方面，例如移动注意事项和测试。
设计用户旅程
信息架构
人们经常使用术语“信息体系结构”（IA）来表示网站上的菜单。但这是不正确的。尽管菜单是IA的一部分，但它们只是其中的一个方面。
IA是关于以清晰和合乎逻辑的方式组织信息的。这样的组织遵循一个明确的目的：帮助用户浏览一组复杂的信息。良好的IA会创建符合用户期望的层次结构。但是，良好的层次结构和直观的导航并不是偶然发生的。它们是适当的用户研究和测试的结果。
有多种研究用户需求的方法。信息架构师通常会积极参与用户访谈或卡片分类，他们会直接听到用户的期望或了解潜在用户如何对各种信息组进行分类。信息架构师还需要访问可用性测试的结果，以查看用户是否能够有效导航。
全球导航
导航是可用性的基石。如果用户找不到自己的网站，您的网站有多好都没关系。因此，您网站上的导航应遵循以下原则：
- 简化 导航的设计方式应尽可能减少访问者的访问次数。
- 清晰性 每个导航选项的含义都不应该有任何猜测。每个导航选项对于访问者来说都是不言而喻的。
- 一致性 网站上所有页面的导航系统应相同。
设计导航时，请考虑以下几点：
- 根据用户需要选择导航方式。 导航应满足大多数应用程序用户的需求。给定的目标群体期望与您的网站进行特定类型的互动，因此使这些期望对您有利。例如，如果大多数用户对图标本身的含义不熟悉，请避免使用汉堡包菜单导航。
- 确定导航选项的优先级。 确定导航选项优先级的一种简单方法是为普通用户任务分配不同的优先级（高，中，低），然后在布局中突出显示具有高优先级和频繁使用的路径和目的地。
- 使其可见。 正如雅各布·尼尔森（Jakob Nielsen）所说，识别事物比记住事物容易。通过使所有重要的导航选项永久可见，最大程度地减少用户的内存负载。最重要的导航选项应始终可用，而不仅仅是在我们预期用户将需要它们时。
- 交流当前位置。 “我在哪里？”是一个基本问题，用户需要回答才能有效导航。无法指出当前位置是许多网站上的常见问题。考虑一下位置指示器。
链接和导航选项
链接和导航选项是导航过程中的关键因素，并直接影响用户的旅程。这些互动元素应遵循一些规则：
- 认识内部和外部链接之间的区别。 用户期望内部和外部链接的行为不同。所有内部链接都应在同一标签中打开（这样，您将允许用户使用“后退”按钮）。如果决定在新窗口中打开外部链接，则应在自动打开新窗口或标签之前提供高级警告。这可以采用添加到链接文本中的文本形式，表示为“（在新窗口中打开）”。
- 更改访问链接的颜色。 当访问的链接没有改变颜色时，用户可能会无意中访问相同的页面。
- 仔细检查所有链接。 通过单击链接并获得404错误页面作为响应，用户可以很容易感到沮丧。当访问者搜索内容时，他们希望每个链接都将其带到它认为会到达的位置，而不是到达404错误页面或他们所期望的其他位置。
浏览器中的“返回”按钮
“后退”按钮可能是浏览器中第二受欢迎的UI控件（在URL输入字段之后）。确保“后退”按钮可以根据用户期望工作。当用户点击页面上的链接，然后单击“后退”按钮时，他们希望返回到原始页面上的相同位置。在无效情况下，单击“后退”会将用户带到初始页面的顶部，而不是用户离开的地方，尤其是在页面上。失去位置将迫使用户滚动浏览他们已经看过的内容。毫不奇怪，如果没有适当的“返回位置”功能，用户会很快感到沮丧。
面包屑
面包屑是一组上下文链接，可充当网站上的导航辅助。这是一种辅助导航方案，通常会显示用户在网站上的位置。
尽管此元素不需要太多解释，但有些事情值得一提：
- 不要使用面包屑代替主导航。 主导航应该是引导用户的元素，而面包屑应仅支持用户。依靠面包屑作为导航的主要方法，而不是附加功能，通常表明导航设计不佳。
- 使用箭头而不是斜线作为分隔符。明确分隔每个级别。 建议使用大于号（>）或向右箭头（→），因为这些符号表示方向。不建议将正斜杠（/）用作电子商务网站的分隔符。如果要使用它，请确保没有任何产品类别会使用斜杠：
搜索
一些用户来到网站上寻找一个特定的项目。他们不想使用导航选项。他们想在搜索框中输入文字，提交搜索查询并找到他们要查找的页面。
设计搜索框时，请考虑以下几条基本规则：
- 将搜索框放在用户希望找到它的位置。 下图是根据A. Dawn Shaikh和Keisi Lenz的研究创建的。根据对142位参与者的调查，它显示了搜索字段的预期位置。研究发现，最方便的位置是网站上每个页面的左上角或右上角。用户可以使用常见的F形扫描图案轻松找到它。
设计单个页面
内容策略
内容策略最重要的事情也许就是将设计重点放在页面目标上。了解页面的目标，并根据目标编写内容。
以下是一些提高内容理解的实用技巧：
- 防止信息过载。 信息过载是一个严重的问题。它阻止用户做出决定或采取行动，因为他们觉得自己有太多信息要消费。有一些简单的方法可以最大程度地减少信息过载。一种常见的技术是分块 —将内容分成较小的块，以帮助用户更好地理解和处理它。结帐表格就是一个很好的例子。一次最多显示五至七个输入字段，并将结帐细分为页面，并根据需要逐步显示字段。
- 避免使用行话和行业特定术语。 页面上出现的每个未知术语或短语都会增加用户的认知负担。一个安全的选择是为所有级别的读者写文章，并选择所有用户组都易于理解的单词。
- 尽量减少包含大量细节的长篇文章。 与有关信息过载的观点相一致，如果网站不适合主要的信息消费，请尝试避免文本较长。例如，如果您需要提供有关服务或产品的详细信息，请尝试逐步揭示详细信息。写成可扫描的小段以利于发现。
页面结构
结构正确的页面可以使每个用户界面元素在布局中的位置清晰可见。虽然没有一种万能的规则，但是有一些准则可以帮助您建立坚实的结构：
- 使结构可预测。 使设计符合用户期望。考虑类似类别的网站，以找出要在页面上使用哪些元素以及在何处使用。使用目标受众熟悉的模式。
- 使用布局网格。 布局网格将页面划分为主要区域，并根据大小和位置定义元素之间的关系。在网格的帮助下，将页面的不同部分以一致的布局组合在一起变得更加容易。
视觉层次
人们更可能快速浏览网页，而不是阅读其中的所有内容。因此，如果访客想查找内容或完成任务，他们将进行扫描，直到找到需要去的地方。作为设计师，您可以通过设计良好的视觉层次结构来帮助他们。视觉层次结构是指以指示重要性的方式（即，他们的眼睛应首先聚焦，然后聚焦等）的方式排列或呈现元素。适当的视觉层次结构使扫描页面变得容易。
- 使用自然扫描模式。 作为设计师，我们对人们查看页面时的位置有很多控制权。要为访问者的眼睛确定正确的路径，我们可以使用两种自然的扫描图案：F形图案和Z形图案。对于诸如文章和搜索结果之类的文本密集型页面，F模式更好，而Z模式则适合于非文本页面。
滚动行为
Web设计师之间一直存在的神话是人们不会滚动。要明确：今天，每个人都在滚动！
有一些技巧可以改善滚动行为：
- 鼓励用户滚动。 尽管人们通常在页面加载后立即开始滚动，但页面顶部的内容仍然非常重要。顶部显示的内容设置了访问者对质量的印象和期望。人们确实会滚动，但前提是必须有足够的希望。因此，将您最引人注目的内容放在页面顶部：
- 提供一个很好的介绍。 出色的介绍为内容设置了上下文，并回答了用户的问题，“此页面是关于什么的？”
- 使用引人入胜的图像。 用户密切注意包含相关信息的图像。
- 保留导航选项。 在创建冗长的页面时，请记住，用户仍然需要（当前位置的）方向感和导航（其他可能的路径）感。长页面可能会给用户带来导航问题；如果当用户向下滚动时顶部导航栏失去可见性，那么当他们深入页面时，他们将不得不一直向上滚动。一个明显的解决方案是粘贴菜单，该菜单显示当前位置，并且始终保持在屏幕上的一致区域中。
容加载
内容加载值得进一步说明。尽管即时响应是最好的，但在某些情况下，您的网站将需要更多时间向访问者交付内容。不良的Internet连接可能会导致反应缓慢，或者操作可能需要更多时间才能完成。但是，无论造成这种行为的原因是什么，您的网站都应该快速且响应迅速。
- 确保常规加载不会花费很长时间。 网络用户的注意力范围和耐心性很低。根据尼尔森·诺曼小组（Nielsen Norman Group）的研究，大约10秒是保持用户对任务的注意力的极限。当访问者不得不等待网站加载时，如果网站加载的速度不够快，他们就会感到沮丧并可能离开。即使使用设计最精美的加载指示器，如果加载时间过长，用户仍然会离开。
- 加载期间使用骨架屏幕。 许多网站使用进度指示器来显示数据正在加载。尽管进度指示器的意图很好（提供视觉反馈），但结果可能是负面的。正如卢克·罗布洛夫斯基（Luke Wroblewski）所提到的“根据定义，进度指示器提醒人们需要等待的事实。就像看着时钟在滴答滴答地滴答作响-当您这样做时，时间似乎会变慢。”进度指示器有一个很好的替代选择：骨架屏幕。这些容器本质上是页面的临时空白版本，信息逐渐加载到该页面中。设计人员无需显示加载指示器，而是可以使用框架屏幕将用户的注意力集中在实际进度上，并为即将发生的事情创建预期。这会感觉到事情正在立即发生，因为信息逐渐显示在屏幕上，人们在等待时看到网站正在运行。
纽扣
按钮对于创建流畅的对话流程至关重要。值得关注按钮的这些基本最佳实践：
- 确保可点击元素看起来像。 通过按钮和其他交互元素，考虑设计如何传达能力。用户如何将元素理解为按钮？表单应该遵循以下功能：对象的外观告诉用户如何使用它。看起来像链接或按钮但不可单击的视觉元素（例如，不是链接的带下划线的单词或具有矩形背景但不是按钮的元素）很容易使用户感到困惑。
意象
俗话说，一张图片值得一千个字。人类是高度视觉化的生物，能够几乎立即处理视觉信息。我们感知并传递到大脑的所有信息中有90％是视觉的。图像是一种吸引用户注意力并区分产品的有效方法。与精心设计的文本块相比，单个图像可以向观看者传达更多信息。此外，图像以文字无法做到的方式跨越语言障碍。
以下原则将帮助您将图像集成到您的Web设计中：
- 确保图像相关。 设计中最大的危险之一就是传达错误信息的图像。选择强烈支持您的产品目标的图像，并确保它们与上下文相关。
视频
随着Internet速度的提高，视频正变得越来越流行，尤其是考虑到它们延长了在网站上花费的时间。如今，视频无处不在。我们正在台式机，平板电脑和手机上观看它。如果有效地使用视频，它是可用来吸引观众的最强大工具之一，它传达了更多的情感，并确实给人以产品或服务的感觉。
- 默认情况下，将音频设置为关闭，并可以选择将其打开。 当用户到达页面时，他们不希望页面会播放任何声音。大多数用户不使用耳机，会感到压力，因为他们需要弄清楚如何关闭声音。在大多数情况下，用户将在网站播放后立即离开网站。
号召性用语按钮
号召性用语（CTA）是可指导用户实现转化目标的按钮。CTA的重点是将访问者引导至所需的操作过程。CTA的一些常见示例是：
- “开始试用”
- “下载书”
- “注册更新”
- “咨询”
设计CTA按钮时，请注意以下几点：
- 大小 CTA应该足够大，可以从远处看到，但又不能太大，以免引起页面其他内容的注意。要确认CTA是页面上最突出的元素，请尝试进行五秒钟的测试：查看网页五秒钟，然后写下您所记得的内容。如果CTA在您的清单中，请恭喜！尺寸适当。
- 视觉突出性 您为CTA选择的颜色对它是否显着具有极大的影响。使用颜色，可以使某些按钮比其他按钮更具视觉冲击力，从而使它们更加突出。对比色最适合用于CTA，也可以用作醒目的按钮。
- 面向操作的 文本为按钮编写文本，以迫使访问者采取行动。以“开始”，“获取”或“加入”之类的动词开头。
网络表格
填写表单仍然是网络上用户最重要的互动方式之一。实际上，通常将表单视为完成目标的最后一步。用户应该能够快速而又不会混淆地填写表格。形式就像一个对话，就像任何对话一样，在用户和网站两方之间应该进行逻辑通信。
- 仅询问需要什么。 只问您真正需要的。您添加到表单的每个其他字段都会影响其转换率。始终想一想为什么您要向用户请求某些信息以及如何使用它们。
- 逻辑上订购表格。 应该从用户的角度逻辑地提问，而不是从应用程序或数据库的角度提问。例如，在某人的名字前要求其地址是不正确的。
- 将相关字段分组在一起。 将相关信息分组为逻辑块或集合。从一组问题到下一组问题的流程将更像是一次对话。将相关字段分组在一起也可以帮助用户理解信息。
动画
越来越多的设计师将动画作为功能元素纳入其中，以增强用户体验。动画不再仅仅是取乐而已。它是进行有效交互的最重要工具之一。但是，设计中的动画只有在正确的时间和地点进行整合，才能增强用户体验。好的UI动画是有目的的；这是有意义的和实用的。
在以下情况下，动画可以增强体验：
- 有关用户操作的视觉反馈 良好的交互设计可提供反馈。当您需要将操作结果告知用户时，视觉反馈非常有用。如果无法成功执行某项操作，则功能动画可以快速简便地提供有关问题的信息。例如，当输入错误的密码时，可以使用摇动动画。很容易理解，为什么摇晃是传达“不”的相当普遍的手势，因为简单的摇晃在人际交往中如此普遍。系统状态的可视性 之一Jakob Nielsen的10个启发式的可用性，系统状态保持的知名度在用户界面设计中最重要的原则之一。用户希望在任何给定时间了解系统中的当前上下文，并且应用程序不应让他们猜测—它应该通过适当的视觉反馈来告诉用户正在发生的事情。数据上载和下载操作是功能性动画的绝佳机会。例如，动画加载条显示了流程进行的速度，并设置了对动作处理速度的期望。导航过渡 导航过渡是网站上状态之间的移动-例如，从高级视图到详细视图。默认情况下，状态更改通常涉及硬切，这会使它们难以遵循。功能动画使用户在这些变化时刻轻松自如，在导航上下文之间顺畅地运输用户，并通过在状态之间创建可视连接来说明屏幕上的变化。品牌化 假设您有数十个具有完全相同功能并帮助用户完成相同任务的网站。他们可能都提供了良好的用户体验，但是人们真正喜欢的一种体验不仅提供了良好的用户体验。它与用户建立了情感联系。品牌动画在吸引用户方面起着关键作用。它可以支持公司的品牌价值，彰显产品的优势，并使用户体验真正令人愉悦和难忘。
移动注意事项
如今，几乎50％的用户通过移动设备访问网络。这对我们的网页设计师意味着什么？这意味着我们必须为设计的每个网站制定移动策略。
练习响应式网页设计
必须针对台式机和移动浏览器的广阔前景优化您的网站，这两种浏览器的屏幕分辨率，支持的技术和用户群都不相同。
- 旨在实现单列布局。 通常，单列布局在移动屏幕上效果最佳。单列不仅有助于管理小屏幕上有限的空间，而且还可以轻松地在不同的设备分辨率之间以及纵向和横向模式之间进行缩放。
- 使用Priority +模式优先考虑跨断点的导航。Priority +是Michael Scharnagl创造的一个术语，用于描述导航，该导航公开了被认为是最重要的元素，并在“更多”按钮后面隐藏了不重要的项目。它利用了可用的屏幕空间。随着空间的增加，暴露的导航选项的数量也会增加，这可能会导致更好的可见性和更多的参与度。此模式特别适合具有大量不同部分和页面的内容密集型网站（例如新闻网站或大型零售商的商店）。监护人在其部分导航中使用Priority +模式。当用户单击“全部”按钮时，将显示次要项目。
确保图像尺寸适合显示器和平台。网站必须适应所有不同设备，各种分辨率，像素密度和方向的完美外观。管理，处理和传递图像是网站设计师在构建响应式网站时面临的主要挑战之一。为了简化此任务，您可以使用诸如响应式图像断点生成器之类的工具以交互方式生成图像的断点。从可点击到可贴
在移动网络上，互动是通过手指点击而不是鼠标点击完成的。这意味着在设计触摸目标和交互时将应用不同的规则。
- 适当大小的触摸目标。 所有交互元素（例如链接，按钮和菜单）都应该是可点击的。尽管桌面Web非常适合其活动（即，可单击）区域较小且精确的链接，但移动Web需要更大，更大块的按钮，而这些按钮可以用拇指轻松按下。如果将水龙头用作网站的主要输入方法，请参考MIT触摸实验室的研究，为按钮选择合适的尺寸。研究发现，指垫的平均大小在10到14毫米之间，指尖的范围在8到10毫米之间，使10×10毫米成为最小的触摸目标尺寸。
- 互动性更强的视觉指示。 在移动网络上，没有悬停状态。在桌面上时，当用户将鼠标悬停在某个元素上时（例如，显示一个下拉菜单），可能会提供其他视觉反馈，移动用户将不得不点击以查看该响应。因此，用户仅通过观察就应该能够正确预测界面元素的行为。
辅助功能
如今，无论个人能力如何，每个人都必须可以使用当今的产品。为有缺陷的用户设计是设计师实践同理心并学会从别人的角度去体验世界的一种方式。
视力不佳的用户
许多网站使用低对比度进行文本复制。低对比度文字可能很流行，但也难以辨认和难以访问。低对比度对于视力低下和对比度敏感的用户来说尤其成问题。
低对比度文本很难在台式机上阅读，但在移动设备上则变得更加困难。想象一下，在明亮的阳光下行走时，尝试在移动设备上阅读低对比度文本。这很好地提醒了可访问的视觉设计对于所有用户而言都是更好的视觉设计。
永远不要为了美丽而牺牲可用性。网站上文字和其他重要元素的最重要特征是可读性。可读性要求文本和背景之间有足够的对比。为确保视觉障碍者可以阅读文本，W3C的Web内容可访问性指南（WCAG）提出了对比度建议。对于正文文本和图像文本，建议使用以下对比度：
- 小文本与背景的对比度应至少为4.5：1。7∶1的比例是优选的。
- 大文本（以14点粗体和18点常规字体及以上字体）与背景的对比度应至少为3：1。
色盲用户
据估计，全球人口中有4.5％患有色盲（每12个人中有1人，每200名女性中有1人），有4％的人视力低下（每30人中有1人），有0.6％的人是盲人（每188人中有1人）。容易忘记我们是为这一组用户设计的，因为大多数设计师都不会遇到此类问题。
为了使这些用户可以访问设计，请避免仅使用颜色来传达含义。正如W3C所说，颜色不应该被用作“传达信息，指示动作，提示响应或区分视觉元素的唯一视觉手段。”
使用颜色作为传达信息的唯一手段的一个常见示例是表单警报。成功和错误消息通常分别用绿色和红色显示。但是红色和绿色是受色觉不足影响最严重的颜色-对于患有偏视性或普盲性的人来说，这些颜色可能很难区分。最有可能的是，您已经看到错误消息，例如“标有红色的字段为必填项。”虽然看起来没什么大不了，但是以以下格式出现的此错误消息对于具有色觉不足。设计师应使用颜色突出显示或补充已经可见的内容。
在上面的表格中，设计人员应提供更具体的说明，例如“您输入的电子邮件地址无效。”或至少在需要注意的字段附近显示一个图标。盲人用户
图像和插图是Web体验的重要组成部分。盲人使用诸如屏幕阅读器之类的辅助技术来解释网站。屏幕阅读器依靠图像的替代文本来“读取”图像。如果该文本不存在或描述性不足，则他们将无法获得预期的信息。
考虑两个示例，第一个是流行的T恤商店Threadless。该页面没有太多关于所售商品的信息。唯一可用的文本信息是价格和大小的组合。
第二个示例来自ASOS。出售类似衬衫的页面，为该商品提供了准确的替代文字。这可以帮助使用屏幕阅读器的人预想该项目的外观。为图像创建替代文本时，请遵循以下准则：
- 所有“有意义”的图像都需要描述性替代文本。（一张“有意义的”照片为所传达的信息增加了背景。）
- 如果图像仅是装饰性的，并且不向用户提供有用的信息以帮助他们理解页面的内容，则不需要文本替代项。
键盘友好的体验
某些用户使用键盘而不是鼠标来浏览Internet。例如，有运动障碍的人很难使用鼠标来进行精细的运动。通过使交互式元素可以通过
Tab按键进行聚焦并显示键盘焦点指示器，可以使该组用户易于访问交互式和导航元素。以下是键盘导航的最基本规则：
- 检查键盘焦点是否可见和明显。 一些Web设计师删除了键盘焦点指示器，因为他们认为这很麻烦。这阻碍了键盘用户正确地与网站进行交互。如果您不喜欢浏览器提供的默认指示器，请不要将其完全删除。而是设计它以满足您的口味。
- 所有交互元素都应该可访问。 键盘用户必须能够访问所有交互式元素，而不仅仅是主要的导航选项或主要的号召性用语。
您可以在W3C的“ WAI-ARIA创作实践”文档的“设计模式和小部件”部分中找到有关键盘交互的详细要求。
