卓越网页设计、可用性和用户体验指南

当涉及到设计或重新设计一个网站时，很容易被美学所困扰。

那种蓝色看起来不太对眼。

把商标放在屏幕的右侧不是很酷吗?

我们在页面中间放一个巨大的GIF动画怎么样?

然而，如果你真的想在你的在线业务上有所成就(例如，品牌意识，引导一代，等等)，你需要关注的不仅仅是你的网站外观。

在一个人们有超过10亿个网站他们可能会降落，您需要确保您的设计可用性，您的网站如何使用，以及用户体验（UX）,如何令人愉快的它是与你的网站互动。

现在，你可以花几年时间来研究可用性和用户体验的方方面面。但为了给你一个起点，我们整理了一份基本指导原则的清单，你可以应用到你的下一个网站设计或网站推出．然后，我们将回顾您的站点需要的10个特性，以便将这些建议付诸实践。就让我们一探究竟吧。

1.简单

虽然网站的外观当然很重要，但大多数人来你的网站不是为了评估设计有多漂亮。他们想要完成一些动作，或者找到一些特定的信息。

因此，不必要的设计元素(即那些没有任何功能用途的元素)只会让访问者难以完成他们想要完成的任务。

从可用性和用户体验的角度来看，简单是最好的朋友。如果您拥有所有必要的页面元素，那么就很难获得它太简单的。您可以以各种不同的形式雇用此原则，例如：

• 颜色：基本上，不要用太多。的人机交互手册建议在您的设计中最多使用五种(正负两种)不同的颜色。
• 字体:你选择的字体应该是清晰易读的，所以不要太艺术化，也不要使用非常小的字体。对于文本颜色，同样，保持它的最小值，并始终确保它与背景颜色形成对比。一个共同的建议就是使用最多三种不同的字体，最多三种不同的尺寸。
• 图形：只有使用图形，如果它们帮助用户完成任务或执行特定功能（不只是添加图形Willy-Nilly）。

这里有一个很好的例子，简单而有效的主页设计女主人公公司：

图片来源

2.视觉层次结构

视觉层次与简单性原则紧密相连，它是指对网站元素进行排列和组织，使访问者自然地首先被最重要的元素吸引。

请记住，当谈到优化可用性和UX时，目标是引导访客完成所需的行动，但以一种感觉自然和愉快的方式。通过调整某些元素的位置，颜色或大小，您可以以先将观众绘制的方式构建您的网站。

在下面的例子中Spotify，你可以看到“倾听就是一切”的主标题在视觉层次的顶端，它的大小和页面位置。这会让你首先注意到他们的任务。紧随其后的是“免费获取Spotify”(Get Spotify Free) CTA，它会促使人们采取行动。用户可以单击此CTA，或扫描上面的菜单项以获得更多操作。

图片来源

3.适航性

规划直观的导航在你的网站上是至关重要的，可以帮助访问者找到他们想要的东西。理想情况下，访问者应该登陆你的网站，而不需要考虑下一步点击哪里。从A点到B点的移动应该尽可能无摩擦。

以下是优化您网站导航的一些提示：

• 保持主导航的结构简单(并且靠近页面的顶部)。
• 在站点的页脚包含导航。
• 考虑使用面包屑在每个页面(除了你的主页)，这样用户就能记住他们的导航轨迹。
• 在你的网站顶部设置一个搜索栏，这样访问者就可以通过关键字进行搜索。
• 每页不要提供太多的导航选项。再次,简单!
• 在你的页面副本中包含链接，并明确这些链接的位置。
• 不要让用户挖掘得太深。试着做一个基本的线框地图你的主页在最上面，每一个先前链接的页面在下一层。在大多数情况下，最好让你的地图深度不超过3个关卡。以HubSpot的网站地图为例。

图片来源

还有一点:一旦你确定了网站的主(顶部)导航，保持它的一致性。导航的标签和位置应该在每个页面上保持一致。

这很好地引出了我们的下一个原则……

4.一致性

除了保持导航的一致性，站点的整体外观和感觉应该在所有站点页面上都相似。背景，配色方案，字体，甚至你写作的基调都是一致性对可用性和用户体验有积极影响的领域。

这并不是说每个页面都应该遵循相同的布局。相反，为特定类型的页面创建不同的布局(例如，登录页面，信息页面等)。通过始终如一地使用这些布局，您将使访问者更容易理解他们可能在给定页面上找到什么类型的信息。

在下面的例子中，您可以看到这一点Airbnb使用相同的布局为所有“帮助”页面，常见的做法。想象一下，如果每个“帮助”页面有自己，独特的布局，那么从访客的角度来看，这将是什么样的。可能会耸耸肩会有很多肩膀。

图片来源

5.反应性

根据Statista在美国，48%的全球页面浏览量来自智能手机和平板电脑等移动设备。和根据我们的研究在美国，93%的人会因为某个网站在他们的设备上无法正常显示而离开。

此处的外带：提供真正的用户体验，您的网站必须与访问者正在使用的许多不同设备兼容。在科技界，这被称为响应设计．

响应式设计意味着投资于高度灵活的网站结构。在响应式网站上，内容会自动调整大小和重新洗牌，以适应访问者使用的任何设备的尺寸。这可以通过移动友好的HTML模板或创建一个特殊的移动站点来实现。

最终，在不同的设备上提供出色的体验比在这些设备上看起来相同更重要。

图片来源

除了移动友好性，还值得您测试网站的交叉浏览器兼容性。在所有可能性中，您只在一个Web浏览器上查看了您的网站，请将您的网站浏览到谷歌Chrome，Safari，Firefox或其他内容。

现在是在每个浏览器上打开页面并评估元素的显示情况的时候了。理想情况下，在表现上不会有太大的不同，但你不能确定，直到你自己看到。

6.可访问性

网页可访问性的目标是让任何人都可以使用网站，包括残疾人或受限制的人，影响他们的浏览体验。作为一个网站设计师，你的工作就是在你的用户体验计划中考虑这些用户。

与响应性一样，可访问性也适用于整个站点:结构、页面格式、视觉效果以及书面和视觉内容。的网页内容可及性指引，由网页无障碍倡议和万维网联盟开发，为网页无障碍设置了指导方针。从广义上讲，这些指南规定网站必须:

• 可感知的:访问者知道你网站上的内容。
• 可操作的:网站的功能应该以不同的方式实现。
• 可以理解的:所有内容和提醒都很容易理解。
• 健壮的:您的网站可以跨不同的辅助技术、设备和浏览器使用。

要更深入地了解这个主题，请参阅我们的无障碍网页的终极指南．

7. Quativentalial.

网页设计的一大挑战是平衡创意与预期。我们大多数人都是互联网专家，随着时间的推移，我们已经习惯了一些特定的习惯。这些规范包括:

• 将主导航放在页面的顶部（或左侧）。
• 在页面的左上角(或中间)放置一个标志。
• 使徽标可点击，这样它总是把访问者带回主页。
• 有链接和按钮当你将鼠标悬停在它们上面时，它会改变颜色/外观。
• 在电子商务网站使用购物车图标。该图标还有一个数字标识，表示购物车中商品的数量。
• 确保图片滑动条有按钮用户可以单击以手动旋转幻灯片。

虽然有些人可能会为了独特性而选择抛弃这些功能，但这是一个错误。在网络传统的约束下，仍然有很大的创造力空间。

让我们简要考虑另一个设计领域，架构。建筑规范取而代的解，使人们可以轻松居住地居住。建筑师并不抱怨这些代码或违反它们，因为除了法律反应之外，他们可以确保客人的安全和舒适。这与建筑看起来有多么令人眼花 - 如果你在楼梯上绊倒或者你不能在火灾中逃脱，你可能更愿意留在外面。

同样地，您可以在满足用户期望的同时创造令人难忘的体验。如果你违反了用户的预期，他们可能会对你的网站感到不舒服甚至沮丧。

8.信誉

遵循网络惯例可以增加网站的可信度。换句话说，它增加了你的网站所传达的信任度。如果你正在努力建立一个尽可能提供最佳用户体验的网站，信誉是很重要的。

提高您信誉的最佳方法之一是清楚，诚实地了解您正在销售的产品或服务。不要让游客挖掘数十个页面以找到您的工作。在您的主页上朝上，并专注一些房地产来解释您所做的事情背后的价值。

另一个可信度提示：有一个定价页面，也在主页上链接。而不是强迫人们联系您了解更多关于定价的信息，并清楚地列出您的网站上的价格。这使您的业务表现得更可靠和合法。

这里有一个有效的例子从Box网站的定价页面：

图片来源

9.用户中心

最终，可用性和用户体验取决于最终用户的偏好。毕竟，如果你不是为他们设计，那你是为谁设计呢?

因此，虽然这个列表中详细列出的原则是一个很好的起点，但改进站点设计的最后一个关键是进行用户测试、收集反馈，并根据您所学的内容实现更改。

不要自己测试可用性。你已经在自己的设计中投入了大量时间，这将你自己的偏见带入了等式中。让那些从未见过你的网站的测试者，就像第一次访问你的网站一样。

以下是一些用户测试工具:

• 网站平地机：我们的免费工具评估您的网站基于几个因素:移动，设计，性能，SEO，和安全。然后它会提供量身定制的改进建议。你可以在我们专门的博客文章中了解更多关于网站评分器．
• 疯狂的蛋：在一个帐户下跟踪多个域，并使用四种不同的智能工具——热图、滚动图、覆盖图和五彩纸屑，揭示关于站点性能的见解。
• Loop11：使用此工具轻松创建可用性测试 - 即使您没有任何HTML体验。
• 用户喝醉了：支付Richard Littauer喝醉并查看您的网站。不相信我？我们试过．

更多有用的选项，请参阅我们的最佳用户测试工具列表．

希望这些指导方针对你的网页和网站的整体结构是有用的。但是，如何将这些指导方针付诸实践呢?在下一节中，我将详细介绍您应该在设计计划中强烈考虑的基本页面元素。

1.页眉和页脚

页眉和页脚是几乎所有现代网站的主要内容。试着把他们包括在你的大部分页面上，从你的主页你的博客帖子，甚至你的“未找到结果”页面．

你的标题应以徽标和组织名称，菜单导航和可能为CTA的形式包含您的品牌，如果间隔良好和最小值，则为CTA和/或搜索栏。另一方面，您的页脚是许多用户本能地滚动的基本信息。在您的页脚中，将联系信息，注册表，注册表单，链接到您的通用页面，法律和隐私政策，链接到您网站的翻译版本和社交媒体链接。

2.菜单导航

无论它是一个横跨头部的链接列表，还是一个整洁而紧凑的列表汉堡包按钮在角落里，每个网站都需要一个导航指南，至少在你的主页和其他网站的顶部重要的页面．一个好的菜单会限制你网站上任何部分的点击次数。

为了减少混乱，您可以考虑将一些或所有菜单选项设置为带有链接的下拉菜单，如下图所示HubSpot的主页．

3.搜索栏

除了菜单导航，最好考虑在页面顶部放置一个搜索栏，这样用户就可以通过关键字浏览网站的内容。如果使用了这个功能，请确保您的结果是相关的，可以原谅拼写错误，并且能够大致匹配关键字。我们大多数人每天都使用高质量的搜索引擎，不管是谷歌、亚马逊、YouTube还是其他地方。这些都为你自己的网站搜索设定了标准。

4.品牌

还记得我们讨论过的惯例吗?一个你几乎随处可见的是左上角的标志。在第一次着陆时，许多游客的目光会本能地转移到这个地区，以确认他们是否在正确的地方。不要让他们悬而不决。

为了强化这一概念，将公司品牌融入你添加的每一个元素、你发布的内容和你创建的配色方案中。raybet电子竞技这就是为什么我们建议建立品牌指南，如果你还没有-检查我们的风格指南参考。

5.调色板

颜色选择在网站的可用性和用户体验中也扮演着重要的角色。这个决定往往比这个列表中的其他需求更加主观。但是，就像我们已经讨论过的其他事情一样，试着简化-限制你的颜色选择最多3-4个突出的颜色。

第一次从头开始调色板可能会非常困难。我们似乎凭直觉就能分辨出哪些颜色搭配得很好，哪些不合适，但当我们试图从无穷无尽的组合中挑选时，就会跌跌撞撞。

解决方案?尝试在其他网站上使用的调色板。从你最喜欢的网站上获取影响，并查看我们的最爱列表网站的配色方案开始。

6.标题

标题是建立我们之前讨论的视觉层次结构的关键，尤其是在文本重型页面上。当用户浏览您的页面所需的页面，一个清晰而对点标题警报读者在查找所需内容后停止滚动。仅使用与您的页面不同的部分一样多的标题，因为太多的闪烁和粗体文本将抑制这种效果。

7.清除标签

当用户在你的网站上采取行动时，你必须清楚地知道他们在做什么和/或他们要去哪里。所有按钮都应该有清晰的文本或图标，以精确和简洁地表明它们的目的。文本链接和小部件(简单的交互元素，如下拉菜单和文本表单)也是如此。

例如，一个链接到定价页面的按钮应该只读“定价”——任何超出这个范围的内容都是多余的(例如，“查看我们的价格”，“查看交易的定价页面”)。一个搜索栏/按钮只需要一个搜索玻璃图标()，也许还需要一个单词“搜索”来表示它的目的。

用户测试可以在这里提供很大的帮助。虽然您自己知道所有交互式页面元素的作用，但对于新用户来说就不是这样了。测试将提供有价值的洞察力，让你了解用户认为你的标签意味着什么，而不是你自己的观点。

8.视觉效果和媒体

当你在页面中加入静态图片、gif、视频和其他媒体时，记得在选择时保持一致和有意识。这些元素会比其他大多数文本更吸引用户的注意力，所以要明智地选择。

这里只是主页上有效媒体的一个例子。注意每一张图片是如何补充页面的美感，并支持提供个性化的健身训练结果。

图片来源

同样，所有的图片和视频都应该是搜索引擎优化并包括描述性Alt文本的可访问性。

9.行动呼吁(cta)

拥有一个令人愉快的网站是很好的，但是你怎么知道你的访问者是否真的在做你想要的事情呢?他们是否对你的内容感兴趣?这就是cta发挥作用的地方。

CTA是任何提示用户操作的页面元素。操作可以是向卡片中添加产品、下载内容优惠或注册电子邮件列表。让你的CTA元素在视觉层次中突出(记住我们在Spotify上的例子)，但不要像许多点击广告那样干扰或分散注意力。

如果您需要圆滑的cta的想法，以驱动更多的转换，请参阅我们的CTA实例列表．

10.空格

没错，有时候关键是你不包括。在阅读了这些指导原则和需求之后，您可能会忍不住在页面中塞满完美的用户体验所需的所有细节。不要忘记你的观众需要空间来消化所有这些新信息，所以要给你的元素留出空间。

但是，多少钱空格如果您有吗?这是另一个私人电话，每个地方都不一样。因此，用户测试在这里也很方便。人们关注的是什么?他们是否觉得内容密度过大?再一次，这一切都与我们的第一条原则——简单性有关。

把用户放在第一位的设计

事实上，网页设计在很大程度上是主观的——你的网站的外观和体验不会取悦所有人。然而，也有一些经过验证的真实的UX原则，当仔细考虑和整合时，会让访问者有宾亲如归的感觉。

根据亚马逊网络服务，88％的网站访问者在经验不佳后不太可能返回网站。你怎么能责怪他们？我们肯定都在那里。

所以，作为可用性/UX智慧的最后一点，开始关心更多吧!想象自己站在访问者的角度(或者更准确地说，站在浏览器的角度)，在设计过程的每一步都要记住他们。