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

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

那蓝色阴影看起来不对......

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

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

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

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

现在，您可以花几年来研究INS和UX的ins。但是为了给你一个跳跃点，我们已经组装了你可以申请的基本指南的列表网站重新设计或者网站推出。然后，我们将回顾10个你需要在你的网站上把这些建议付诸实践的特性。就让我们一探究竟吧。

1.简单

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

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

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

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

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

图像源码

2.视觉层次结构

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

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

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

图像源码

3.导航

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

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

• 保持主导航的结构简单（以及附近您的页面顶部）。
• 在您网站的页脚中包含导航。
• 考虑使用面包屑在每个页面(除了你的主页)，让用户记住他们的导航路径。
• 在您的网站顶部附近的搜索栏，以便访问者可以通过关键字进行搜索。
• 每页不提供太多导航选项。再次，简单！
• 在页面副本中包含链接，并明确这些链接的去向。
• 不要让用户太深。尝试制作基本线框地图您的所有网站页面都像金字塔一样排列：您的主页位于顶部，每个链接页面从上一层都形成下一图层。在大多数情况下，最好保持您的地图不超过三个层次。例如，拍摄Hubspot的网站地图。

图像源码

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

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

4.一致性

除了保持导航一致之外，您网站的整体外观和感觉应在所有网站的所有页面中相似。背景，颜色方案，字体甚至写作的基调都是一致性对可用性和UX积极影响的所有领域。

这并不是说每个页面都应该遵循相同的布局。相反，为特定类型的页面创建不同的布局（例如，着陆页面，信息网页等）。通过始终如一地使用这些布局，您将更轻松地让访问者了解给定页面中可能找到的信息类型。

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

图像源码

5.响应性

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

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

响应设计意味着投资高度灵活的网站结构。在响应网站上，内容自动调整大小，并重新装备以适合任何设备何时使用的设备的尺寸。这可以通过移动友好的HTML模板来完成，或通过创建特殊的移动站点来完成。

最终，在不同设备上提供出色的体验比在这些设备上呈现相同的外观更重要。

图像源码

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

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

6.可访问性

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

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

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

对于进入这个主题的更深潜力，看看我们的最终的Web Acordatibility指南。

7. Quativentalial.

网络设计中的一个大挑战是通过您的期望平衡原创性。我们大多数人都是专业的互联网用户，并且有特定的约定我们已经习惯了随着时间的推移。这些公约包括：

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

虽然有些人可能选择为了唯一性而抛出这些窗口，但这是一个错误。在Web常规方面的限制范围内，还有很多创造力的空间。

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

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

8.信誉

坚持网络约定借给您的网站信誉。换句话说，它增加了您网站传达的信任级别。如果您正在努力建立一个提供最佳用户体验的网站，可信度很长。

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

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

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

图像源码

9.以用户为中心

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

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

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

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

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

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

希望这些准则对于整个网络页面和网站的结构有用。但是，人们如何将这些准则付诸实践？在下一节中，我将沿着您应该强烈考虑在您的设计计划中的基本页元素中掉下来。

1.页眉和页脚

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

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

2.菜单导航

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

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

3.搜索栏

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

4.品牌

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

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

5.彩色调色板

颜色选择在您的网站的可用性和UX中起着重要作用。该决定往往比该列表中的其他要求更为主观。但是，就像我们讨论过的其他一切一样，尝试简化 - 最多限制您的颜色选择到3-4显着的颜色。

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

解决方案？尝试一个彩色调色板，已显示在其他网站上工作。从您最喜欢的网站中受到影响，看看我们最喜欢的名单网站颜色方案开始。

6.标题

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

7.清除标签

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

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

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

8.视觉和媒体

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

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

图像源码

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

9.拨打行动（CTA）

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

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

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

10.空格

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

但是，多少钱空白你有吗？这是另一个个人呼叫，并从网站到网站。因此，用户测试也很方便。人们关注的是什么？他们是否觉得内容的密度不堪重负？再一次，它一切都扭转了我们的第一个指导，简单。

设计为用户第一个的设计

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

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

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