优秀网页设计、可用性和用户体验的9条指南

谈到设计或重新设计网站时，很容易挂断美学。

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

在屏幕右侧有徽标不会很酷吗？

不如我们在页面中间放一个巨大的GIF动画吧?

但是，如果您真正尝试使用您的在线业务（例如，品牌意识，优势等），您需要专注于您的网站如何看待。

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

现在，你可以花费数年的时间来研究可用性和用户体验的细节。但为了给你一个出发点，我们整理了一个基本指导方针的列表，你可以应用到你的下一个网站重新设计或者网站推出。然后，我们将回顾10个你需要在你的网站上把这些建议付诸实践的特性。就让我们一探究竟吧。

1.简单

虽然您的网站的外观肯定是重要的，但大多数人不会来到您的网站来评估设计的光滑。他们想完成一些动作，或找到一些特定的信息。

因此，不必要的设计元素（即，没有功能目的的那些）只会压倒并使游客能够完成他们试图完成的东西更困难。

从可用性和用户体验的角度来看，简单是你最好的朋友。如果您拥有所有必要的页面元素，则很难获得也简单。你可以在很多不同的形式中使用这个原则，例如:

• 颜色:基本上，不要用太多。的人机交互手册建议在你的设计中最多使用五种(正负两种)不同的颜色。
• 字体:您选择的字体应该是高度清晰的，所以没有任何内容和非常最小的脚本字体，如果有的话。对于文本颜色，再次保持最小，并始终确保它与背景颜色形成对比。一个共同的建议是最多使用最多三种不同的字体，最多三种不同的大小。
• 图形:只有在图形帮助用户完成任务或执行特定功能时才使用图形(不要随意添加图形)。

这里有一个简单但有效的主页设计的好例子海洛琳公司:

图片来源

2.视觉层次结构

与简单性的原则紧密相关，视觉等级意味着安排和组织网站元素，使游客自然地倾向于首先倾向于最重要的元素。

记住，当提到优化可用性和用户体验时，目标是引导访问者完成想要的操作，但要以一种自然和愉快的方式。通过调整某些元素的位置、颜色或大小，您可以以这样一种方式来构建您的网站，用户将首先被吸引到这些元素。

在下面的例子中Spotify，你可以看到主标题“倾听就是一切”(Listening is everything)的大小和页面位置位于视觉层次结构的顶部。它会把你的注意力吸引到他们的任务上。紧随其后的是“Get Spotify Free”CTA，它会提示用户采取行动。用户可以点击这个CTA，或者扫描上面的菜单项以获得更多操作。

图片来源

3.导航

规划直观导航在您的网站上至关重要，帮助游客找到他们正在寻找的东西。理想情况下，访客应该在您的网站上降落，而且不必广泛思考点击下一步。从点A移动到点B应该尽可能摩擦。

下面是一些优化你网站导航的小技巧:

• 保持主导航的结构简单(并且靠近页面顶部)。
• 在站点的页脚包括导航。
• 考虑使用面包屑在每个页面上(除了你的主页)，让用户记住他们的导航轨迹。
• 在网站的顶部设置一个搜索栏，这样访问者就可以通过关键词进行搜索。
• 每页不提供太多导航选项。再次，简单！
• 在你的页面拷贝中包含链接，并明确链接的位置。
• 不要让用户挖得太深。试着做一个基本的线框地图您的所有网站页面都像金字塔一样排列：您的主页位于顶部，每个链接页面从上一层都形成下一图层。在大多数情况下，最好保持您的地图不超过三个层次。例如，拍摄Hubspot的网站地图。

图片来源

一个指针：一旦您解决了网站的主要（顶部）导航，将保持一致。导航标签和位置应在每个页面上保持相同。

这就引出了我们的下一个原则……

4.一致性

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

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

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

图片来源

5.反应性

根据Statista在美国，48%的全球浏览量来自智能手机和平板电脑等移动设备。和根据我们的研究，93％的人留下了一个网站，因为它没有在其设备上正确显示。

这里的要点是:为了提供真正出色的用户体验，您的站点必须与访问者使用的许多不同设备兼容。在科技界，这被称为响应设计。

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

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

图片来源

除了手机友好性，你还需要测试你的网站在不同浏览器之间的兼容性。很可能，你只在一个浏览器上浏览过你的网站，可能是谷歌Chrome, Safari, Firefox，或者其他什么浏览器。

现在是时候在每个浏览器上打开页面并评估元素的出现方式。理想情况下，演示文稿中不会有很大的差异，但在你看看自己之前，你无法确定。

6.可访问性

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

与响应性一样，可访问性适用于您的整个站点：结构，页面格式，视觉效果和写入和视觉内容。的网页内容可及性指引(WCAG)由Web Accessibility计划和万维网联盟开发，为Web Accessibility设置了指导性。在广泛的意义上，这些指导方针说明了网站必须是：

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

对于进入这个主题的更深潜力，看看我们的网页易读性的终极指南。

7.惯例

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

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

虽然有些人可能会为了唯一性而放弃这些，但这是错误的。在网络传统的限制下，仍然有足够的创造力的空间。

让我们简要地考虑一下设计的另一个领域:架构。建筑规范已经到位，人们可以轻松安全地居住在空间里。建筑师不会抱怨或违反这些规定，因为除了法律后果之外，这些规定还确保了客人的安全和舒适。无论建筑看起来多么耀眼，如果你在不平的楼梯上绊了一跤，或者在火灾中无法外出，你可能更喜欢呆在外面。

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

8.信誉

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

提高信誉最好的方法之一就是对你所销售的产品或服务保持清晰和诚实。不要让访问者翻了几十页才知道你在做什么。在你的主页上，拿出一些篇幅来解释你所做的事情背后的价值。

另一个关于可信度的建议是:在主页上有一个定价页面，也可以链接。与其强迫人们联系你来了解更多的价格，不如在你的网站上清楚地列出你的价格。这使你的生意看起来更值得信赖和合法。

这是一个有效的例子来自框网站的定价页面:

图片来源

9.用户中心

在一天结束时，可用性和用户体验铰链对最终用户的偏好。毕竟，如果你没有为他们设计，你是谁在设计？

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

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

以下是一些用户测试工具可以开始：

• 网站平地机:我们的免费工具根据以下几个因素来评估你的网站:移动、设计、性能、SEO和安全性。然后提供量身定制的改进建议。你可以在我们专门的博客文章中了解更多关于网站评分器的信息。
• 疯狂的鸡蛋:在一个帐户下跟踪多个域，并揭示洞察您的网站的性能使用四个不同的智能工具-热图，滚动地图，覆盖，和五彩纸屑。
• Loop11.:使用这个工具可以轻松地创建可用性测试——即使你没有任何HTML经验。
• 用户喝醉了:付钱给理查德·立陶尔，让他喝个烂醉然后评论你的网站。不相信我吗?我们试过。

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

希望这些指导方针能对你的网页和网站的整体结构有所帮助。但是，如何将这些指导方针付诸实践呢?在下一节中，我将逐一列出您在设计计划中应该考虑包含的基本页面元素。

1.页眉和页脚

页眉和页脚是一个关于每个现代网站的主食。尝试在大多数页面中包含它们主页你的博客文章，甚至你的“找不到结果”页面。

你的头应该以logo和组织名称的形式包含你的品牌，菜单导航，也许还有一个CTA，如果间距合适并且最小的话，还应该包含一个搜索栏。在另一端，你的页脚是许多用户会本能地滚动以获取重要信息的地方。在您的页脚，放置联系信息，一个注册表单，链接到您的公共页面，法律和隐私政策，链接到您的网站的翻译版本，以及社会媒体链接。

2.菜单导航

是否是头部标题的链接列表或整洁和紧凑汉堡按钮在角落里，每个网站都需要一个导航指南，至少在你的主页和其他网站的顶部重要的页面。一个好的菜单限制点击次数，以便只需几个部分即可到达网站的任何部分。

为了减少杂乱，您可能会考虑使用其中的链接进行一些或所有菜单选项，可以看出HUBSPOT的主页。

3.搜索栏

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

4.品牌

还记得我们讨论过的约定吗？你几乎到处看到的一个是左上角的标志。在第一次着陆时，许多游客的眼睛会本能地转向这个地区，以检查他们在正确的地方。不要让他们挂。

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

5.调色板

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

首次开始从划痕开始调色板可能会令人惊讶。我们似乎直观地拿起哪种颜色在一起工作，但是没有，但我们在试图从可用的无限组合中挑选时偶然。

解决方案?尝试在其他网站上显示的调色板。从您最喜爱的站点获取影响力，并查看我们的最喜爱的列表网站颜色方案开始。

6.标题

标题是我们前面讨论过的建立视觉层次结构的关键，尤其是在文本较多的页面上。当用户浏览你需要的页面时，一个清晰且切题的标题提醒读者在找到他们想要的内容后停止滚动。在页面的不同部分，尽量使用不同的标题，因为过多的夸张和粗体字会影响标题的效果。

7.清晰的标签

每当用户在网站上采取动作时，它必须明显到他们正在做的和/或他们要去的地方。所有按钮都应有清晰的文本或图标，精确地和简明地发出目的。同样适用于文本链接和窗口小部件（简单的交互元素，如下拉列表和文本表单）。

例如，链接到定价页面的按钮应该只是阅读“定价” - 除此之外（例如，“查看我们的价格”，“查看交易的定价页面）是多余的。搜索栏/按钮只需要搜索玻璃图标（），也许也许是“搜索”一词，以表示其目的。

用户测试可以在这里成为一个主要帮助。虽然您自己知道所有互动页面元素所做的，但不能对新用户说同样的信息。测试将为用户认为您的标签意味着超出您自己的角度来说，测试将提供有价值的洞察力。

8.视觉和媒体

在将静态图像、gif、视频和其他媒体整合到页面中时，请记住在选择时保持一致和有意。这些元素将吸引用户的注意力，并可能留在用户的脑海中，所以要明智地选择。

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

图片来源

此外，所有的图像和视频都应该是为搜索引擎优化并包括可访问性的描述性alt文本。

9.行动呼吁(CTAs)

拥有一个令人愉快的网站很棒，但你如何知道您的访客是否实际上正在做您想要的内容？他们是否与您的内容一起参与？这是CTA发挥作用的地方。

CTA是提示用户操作的任何页面元素。该操作可以将产品添加到卡，下载内容优惠，或注册电子邮件列表。使您的CTA元素在视觉层次结构中突出（记住我们的Spotify示例），但不像许多点击广告一样侵扰或分散注意力倾向于。

如果您需要为Sleek CTA的想法推动更多转换，请查看我们的CTA实例列表。

10.空格

没错，有时候是关于你的元素不包括。阅读这些准则和要求后，您可能会觉得填写您的页面，并使用完整的UX所需的所有位和鲍勃。不要忘记您的观众需要挖掘所有这些新信息，所以为您的元素呼吸呼吸。

但是,多少钱空白如果您有吗?这是另一个私人电话，不同的网站不同。因此，用户测试在这里也很方便。人们在关注什么?他们是否会因为内容的密度而感到不知所措?再一次，这一切都与我们的第一个准则简单性有关。

用户至上的设计

事实上，网页设计很大程度上是主观的——你的网站的外观和体验不会让每个人都满意。然而，也有一些可靠的用户体验原则，当仔细考虑和结合时，会让访问者感觉更自在。

根据亚马逊网络服务在美国，88%的网站访问者在体验不佳后不太可能返回网站。你怎么能责怪他们呢?我们都有过这样的经历。

所以，作为最终的可用性/ ux智慧，开始关心更多！想象一下你的访客的鞋子（或更准确，浏览器），并记住设计过程的每一步。