每个网页设计项目都应遵循的 10 条优秀 UI 设计规则

Geocities 网站使用硬编码、永不改变的 HTML 的时代已经一去不复返了。 今天的网站和应用程序是动态的和交互式的。 作为设计师，我们的工作是使他们与我们的 Web UI 设计交互的界面尽可能接近理想。 幸运的是，有一些几乎通用的规则可以提供帮助。 我们汇总了我们认为最好的设计原则，以便您可以增强您未来的所有网页设计项目。

每个网页设计项目都应遵循的 10 条优秀 UI 设计规则

订阅我们的 YouTube 频道

1. 让用户所需的一切都触手可及

无论是用于网页设计应用程序的一系列设计工具、视频游戏中角色的库存、电子表格还是其他任何东西，如果用户找不到他们想要的东西，他们就会从您的软件中反弹。 标签使事情变得可访问。 快捷方式和悬停工具提示也是如此。

例如，我们选择使用标签来组织 Divi。 您需要的所有工具都在构建器中，按类别分开。 工具栏同样可以访问。 如果您使用 WordPress，管理工具栏可让您快速访问帖子编辑器、主题定制器、插件设置等。 这些选项都有明确的标签，您不必搜索它们。

另一个例子是帮助/支持/联系选项。 在设计 UI 时，无论是用于移动应用程序、Web 应用程序、WordPress 网站还是其他任何内容，您的用户始终需要找到“帮助”按钮（或“联系支持”按钮）。 他们绝对需要在某个时候与您联系。 这就是为什么您必须始终确保将帮助按钮放在前面和中间。 看看迪维。 在每个模块中，只要您需要，我们都为您准备了支持按钮，触手可及。

最重要的是，帮助窗口会弹出有关您正在使用的任何功能的视频教程。 通过包含此模块内，Divi 变得更易于访问且不那么令人沮丧。 此外，作为 UI 的一部分，帮助的位置在整个产品中是一致的。 这让我们进入下一点……

2. 保持一致

就像我们刚才说的，在你的 UI 中保持一致的功能布局很重要。 但是您还应该担心您的 UI 是否在整个产品中都能正常工作并且看起来是一致的。 不要在一页的顶部和另一页的底部放置菜单。 不要在每次加载时重新排列菜单项。 确保您的用户知道您网站上的内容。 如果您在博客文章下方保留了联系表格，请不要决定将其关闭。 用户会注意到并感到困惑。

一致性还包括您的字体和设计应该从页面到页面到页面工作。 不要在页面之间交换页眉/正文字体。

有一个有趣的想法叫做最小惊喜原则，它说如果你让你的用户对某些东西的工作方式感到惊讶……重新设计它，让它更直观。

此外，您应该确保您的 UI 适合您的平台——iOS 应用在某些情况下的工作方式与 Android 不同。 桌面站点与移动站点对菜单、画廊甚至产品结账的需求不同。 一致性意味着您不会让您的用户感到沮丧，因为他们必须弄清楚在您的网站上做什么。

3. 清楚

这似乎是上面的重复，但清晰度和一致性是不同的。 清晰意味着您希望您的用户始终知道该做什么。 在某些方面，这也渗透到 UX 设计中，因为它减少了用户的挫败感，增加了留存率并降低了跳出率。

清晰是极简主义（在某种程度上也是野兽派）网页设计如此受欢迎的原因。 人们不会因为没有（或很少）杂乱而对任何站点或页面的目的感到困惑。 您希望提供与 Ling's Cars 不同的体验。

实现清晰的一种方法是在不同的页面上从一个步骤移动到另一个步骤。 与其让结账流程向下滚动页面（或包含在单个部分或框中），不如让您的用户从产品页面导航到购物车页面到结账页面到选择您的付款页面再到下订单页面确认页面。 （亚马逊就是这样做的，如下图所示）。

他们将确切地知道他们在这个过程中所处的位置，从而消除任何歧义。 这对移动用户尤其重要，因为屏幕空间非常宝贵。

4. 提供反馈

用户最不想做的就是不了解发生了什么。 如果他们按下按钮，请提供该按钮已按下的指示。 您可以通过多种方式做到这一点。 您可以为按钮设置动画，使其看起来沉入页面。 加载图标（如 MacOS 彩虹轮）提供反馈，“我们正在满足您的要求”，而不必说出来。

如果您允许用户上传文件（例如使用 Dropbox 或 Google Drive），请指明剩余时间。 提供一个弹出窗口或模式，告诉他们他们的行动是成功的，可以减少沮丧和困惑。

真的，每当用户在您的界面中执行任何操作时，只需一个小小的确认就可以区分良好的体验和乏味的体验。

5. 使用识别，而不是回忆

与良好的应试技巧相反，您希望您的用户在看到您的网站时能够识别出有关您网站的所有内容。 他们不应该考虑它并回忆这些信息。 最重要的是，您正在精简您的界面，以便每个部分都直观并从一个点移动到另一个点。 这可以通过使用我们上面提到的可识别图标来完成。 人们识别某些事物的某些图标。

也可以通过使用虚拟导览来引导用户完成一个过程，即使这不是他们第一次。 一旦第一个模态出现，他们就会识别出这个过程，而且他们不必花费精力去准确回忆如何执行这些动作。

您也可以通过精心布置的消息来实现这一点，提醒您的用户您网站上的内容。 我们通过简单的悬停工具提示在 Divi 中实现了这一点——即使有人不记得图标的作用，我们也会引导他们了解它的功能。 之后，他们应该认出该图标。 或者至少是工具提示，如果他们再次悬停。 甚至是悬停获取信息的过程。

6. 选择人们首先互动的方式

照片来源 John Picklap，由 MarieClaire.com 提供

你知道最糟糕的是什么吗？ 推拉门。 尤其是当你只是推动前一个到达那个时。 那个建筑的设计师让用户界面不一致，所以你不知道如何做你需要做的事情。 按下看起来像按钮的东西，但无论如何都在等待响应呢？ 嗯，那是因为那些设计师没有考虑他们的用户将如何与他们的产品进行交互。 所以当你设计你的 UI 时，选择一个动作（也许两个）并坚持下去。

在移动设备上，这往往是滑动。 看看 Snapchat。 几乎每一个动作都是通过滑动来执行的，包括访问您的设置和个人资料。 您可以在 Snapchat 上向下滑动以查看您自己，向左滑动进入对话，向右滑动进入故事，向上滑动进入回忆（或本周他们被称为的任何内容）。 他们选择了他们希望用户与他们的产品交互的方式，并设计了他们的 UI 来适应这种情况。 不是反过来。

在设计 UI 时，请选择是否要使用菜单和点击、图标、滑动和手势，或者完全使用其他方式。 Alexa 和 Siri 使用语音输入作为主要的 UI 交互。 他们提供信息和执行任务的方式是围绕该特定输入设计的。 作为用户，您会凭直觉知道该做什么，因为这些信息是一开始就为您准备的。 设计师告诉你该做什么，你就照做了。 您的用户会感谢您为他们做同样的事情。

7. 遵循设计标准

一句老话，如果它没有坏，就不要修理它在这里适用。 如果标准有效，真的没有必要尝试振兴某些东西。 这从图标使用到元素的标准放置。 您不想违背用户期望的事情。 人们知道问号(?)表示帮助。 所以不要使用感叹号(!) 。 如果您希望用户找到您的移动菜单，请使用汉堡包图标（三个堆叠的线），而不是网格。

想想搜索栏。 在大多数网站上，它们往往位于相似的位置：侧边栏的顶部或标题菜单的末尾。 如果不存在，则为页面顶部的中心。 如果您决定在侧边栏底部、页脚或博客文章文本下方包含唯一的搜索字段，人们将不知道该往哪里看。 即使您使用标准放大镜图标来识别它。

跳出框框思考并寻求新的创新设计并没有错，但这并不意味着设计难以使用。

8. 元素层次很重要

不，我们并不是说地、风、水或火中的任何一个是其他人的老板。 我们的意思是，您页面上的元素需要针对实用程序和用户查看页面的方式具有清晰的层次结构。 基本上，您要确保最重要的功能位于各自页面的顶部。 此外，这种层次结构可以有机地引导用户向下浏览页面，引导用户浏览您的服务。

随着您在整个过程中移动而尺寸减小的大元素表示重要性和顺序。 颜色和对比度也是如此。 使用空白也很重要，因为杂乱会阻碍用户的进步并使人们的注意力从页面的目的上移开。 简洁的线条、大量的空间和定义明确的元素可以直观地向您的用户指示如何在没有任何文档或注释的情况下在您的 UI 中移动。

一个体面的经验法则是，您希望让事物从左到右、从上到下流动。

9. 保持简单

看看这个联系表格：

现在看看这个：

两者都是提出请求的联系表格。 其中一个填写没有问题，而另一个则比较头疼。 除了作为政府表单之外，底部表单的设计不是为用户设计的，而是为管理员设计的。 那不是你的工作。 你的工作是让用户尽可能地无摩擦。 而做到这一点的最好方法之一就是去掉任何不是绝对必要的东西。

10.让您的用户保持自由和控制

我们最不想接触的事情——也是你想对 UI 做的最后一件事——是从用户那里获得控制权。 或者让他们觉得你的设计受到限制。 你想赋予他们权力，你的 UI 应该允许他们执行他们想要的操作。 该规则有两部分： context 和 permission 。

首先，用户需要采取的任何行动都应该靠近他们想要采取的行动。 如果他们需要编辑帖子，编辑按钮应该靠近保存、发布/提交、预览按钮。 事实上，更好的选择是为用户可以在任何特定项目（或页面）上执行的所有操作提供上下文菜单。 如果您在 UI 中保持一致，正如我们在上面讨论的那样，您的用户将理解这些上下文菜单或工具栏将始终包含任何给定元素的完整操作列表。

此外，您的 UI 应该始终让用户觉得他们可以退出或恢复他们采取的任何行动。 当您设计 UI 时，他们将使用它。 所以他们需要许可（或者甚至是自由）来做他们完成工作所需的事情。 这样做就像在电子商务结账的每个页面上添加一个取消按钮一样简单（因为按下浏览器的后退按钮可能会导致事情变得混乱）。 也许这是一个撤销功能，所以他们觉得实验是可以的。 或者大型项目的修订历史（例如在 Google Drive 或 WordPress 或 Git 中）。

当您的用户感到自由和不受约束时，您显然遵循了一些良好的 UI 设计原则。

用户界面准备好了吗？

糟糕的双关语。 我知道，对不起。 但是有了这些 UI 规则，您绝对可以准备好将您的下一个网页设计项目赶出公园。 虽然其中一些可能比其他项目更适用于某些项目，但好的 UI 就是好的 UI，好的 UI 会导致好的 UX。 但这是一个完全不同的帖子的主题。

您是否有任何一直遵循的良好 UI 设计规则？

文章特色图片由 emojoez/shutterstock.com 提供