UI设计的关键规则

yanding 2023-12-12 346

用户界面是软件产品的重要组成部分。它是您的用户用来访问应用程序的工具。如果您的 UI 有效且高效,您的用户不会注意到它,这就是大多数 UI 设计师遵循一些基本原则的原因。

image.png

在本文中,我们想分享一些关键的 UI 设计原则。这些基于 Jakob Nielsen 的UI 设计的 10 条可用性启发法、Ben Shneiderman 的界面设计八项黄金规则和 Bruce Tognazzini 的交互设计原则,以及我们自己的一些想法。

1.使用美观和简约的设计

将 UI 保持在最低限度。不要用不必要的视觉元素弄乱它。消除任何对用户当前任务无帮助的信息。将您的显示减少到仅显示必要的组件,而不会牺牲他们当时确实需要的信息。任何不属于的东西不仅会妨碍 - 它实际上会让您的用户感到困惑。

此外,使用易于阅读和理解的语言。系统应该说用户的语言。您不应该仅仅为了使用该产品而强迫用户学习新的面向系统的术语。

最后,为各种能力水平的人设计用户界面非常重要,包括视力低下、听力障碍、色彩挑战或运动障碍的人。所有群体都可以使用出色的用户界面。

2. 力求一致性

一致的界面是指在相似的情况下使用相同的设计模式和操作序列。这包括布局、排版、颜色、语言、屏幕流程、命令、菜单项和其他元素。

例如,确认操作的按钮应该具有类似的样式,以便用户知道他们正在承诺某件事。如果您使用复选标记图标来指示操作已完成,则应对所有已完成的操作使用该图标。但不要将该图标用于其他任何用途!

3. 为用户提供快捷方式

对您的产品感到满意的频繁用户需要工具来更快地使用它。为他们提供缩写、宏、函数或其他快捷方式,帮助他们个性化体验并快速完成任务。请注意此菜单如何为您可能经常重复的功能提供快捷方式。

也就是说,保持采取行动的传统方法很重要。例如,您不应该从屏幕上删除操作菜单,因为您假设用户只会使用快捷方式。

4.提供清晰的系统反馈

让您的用户了解应用程序的每个阶段或屏幕中发生的情况非常重要,尤其是当他们刚刚采取某种操作时。此类反馈应该是相关的、清晰的且有意义的。

加载栏就是最明显的例子。如果用户不明白发生了什么,一个简单的百分比指示器通常足以让用户感到事情正在进展。

5.让“撤消”变得容易

您是否曾经因为认为自己做了一些不可挽回的事情而点击了错误的按钮或犯了一个错误并感到有点惊慌?我们都有,这就是为什么为用户提供逆转的机会如此重要。另外,只要知道他们不会为自己的错误负责,就会让用户对你的产品更加满意。

如何赋予用户这种权力将取决于您产品的性质。在某些情况下,他们只需要一个简单的“撤消”按钮即可。在其他情况下,您可能希望让他们访问整个操作日志或版本历史记录。

6.提供帮助文档

如果用户需要帮助,请确保有地方可以了解有关问题的更多信息并解决他们的问题。您可以将文档存储在知识库站点上或使用工具提示将其包含在应用程序中。确保帮助文档的内容相关且有用。

请注意 Photoshop 如何使他们的帮助文档可以直接在应用程序中访问。用户可以通过多种方式打开帮助窗口,因此在需要时它始终就在那里。

7.减少短期记忆负荷

我们的注意力持续时间是有限的。我们的短期记忆一次只能维持大约五个项目,因此我们不应该期望用户记住太多。因此,让他们识别信息比回忆信息更有效。

例如,电子商务应用程序可能会提醒用户他们最近查看或购买的内容,而不是期望他们记住。即使是一个简单的提示,例如“您确定要删除 photo.jpg 吗?” 防止用户必须记住他们选择删除的内容。

此外,您可以通过限制完成任务所需的操作数量来减少他们的认知负荷。长序列既乏味又令人沮丧,因此任何任务都应该在三次或更短的时间内完成。

8. 给予充足的封闭空间

每个动作序列都应该有一个开始和结束(有时还有中间)。这样做的目的是缩小差距,以免用户感到困惑。

开始是用户的操作,例如单击按钮。中间是正在发生操作的信息反馈(例如加载图标)。结尾将是一条消息或指示操作已完成,或者是一条解释操作未完成原因的错误消息。

哦,说到错误......

9. 使错误处理变得简单

理想情况下,您的应用程序不会出现任何错误,但这实际上是不可能的。当发生错误时,您的应用程序应该清楚地解释发生了什么以及用户如何解决它。通常这就像添加一条解释问题的应用内消息一样简单,以便用户可以修复它。

在其他情况下,应用内解决方案可能无法实现。让您的错误文本具有唯一性非常重要,以便用户可以在您的文档中查找它。您还可以将其与错误代码配对。

10.将您的系统与现实世界相匹配

让您的应用程序与现实世界保持一致是关键。只要有可能,您就应该将用户在现实世界中找到的语言和概念与应用程序中的相同语言和概念相匹配。这使您的应用程序直观并帮助用户快速理解和操作它。

例如,世界上大多数菜单都使用逻辑流,其中父项代表广泛的类别,子项代表较小的类别。这种分层设计无处不在——餐馆菜单、路标、报纸文章等。如果你偏离了这种风格,你很可能会让你的用户感到困惑。


11.为用户提供控制点

控制点是指人们相信自己可以控制结果的程度。让您的用户感觉他们在您的系统中拥有自由和代理权非常重要。这意味着您无法通过中断、强制或锁定序列以及其他意外来劫持它们。

旨在让您的用户成为每项行动的发起者。这是否意味着您永远不应该提示他们?不,但如果你确实打断了他们,请确保有充分的理由。

12. 确保无障碍

您的 SaaS 产品应该可供每个用户访问和理解,无论他们的文化水平和视力如何。可悲的是,大约20% 的美国人口是文盲,而8% 的美国人有视力障碍。通过使您的 UI 尽可能易于理解和导航,帮助这些群体中的人员访问您的软件并体验价值。

例如,如果您使用颜色来区分按钮,视力不佳的人将可以更轻松地浏览您的 SaaS 产品。如果用户是色盲怎么办?这些用户就是准确标记按钮至关重要的原因。知识较少的用户也将受益于使用颜色和不同的符号来区分按钮。例如,使用红色 X 标记表示“否”或“停止”按钮,使用绿色复选标记表示“是”或“继续”按钮,将确保更容易理解每个按钮的功能。

13. 实施功能优先级

大多数用户访问您的 SaaS 应用程序是为了执行一两个主要功能。隐藏执行这些常用功能的按钮是没有意义的。相反,应优先考虑这些基本功能的按钮,使它们易于查找和访问。不常用功能的按钮可以位于级联菜单中或列表的较低位置。

或者,通过将基本功能放在前面并使用更大的按钮和更粗的文本来展示它们,使它们更容易看到。您经常看到的一个很好的例子是 Gmail 帐户。“撰写”和“收件箱”这两个最常用的功能首先出现,文本区分明显。

14.保持清洁

虽然区分基本功能和非基本功能至关重要,但请避免过度使用不同的颜色和款式。例如,如果您有五个函数,则每个函数的文本不必采用不同的颜色。

不必要的颜色和视觉风格会让你的用户界面变得忙碌和分散注意力,增加认知超载的可能性。通过避免不必要的线条、颜色、背景、字体变化和动画来防止这种结果。相反,目标是简约的设计,让事情变得简单并有目的地使用颜色。

Grammarly 打字助手是一个可以有效实现此目的的 SaaS 平台。正如您在下面的屏幕截图中看到的,Grammarly 页面对大多数文本使用相同的字体类型和颜色,并将关键消息加粗。它还通过将其品牌颜色用于 CTA 和其他颜色来有目的地应用颜色,以区分用户写作中发现的问题。

15.不断迭代  

我们坚持的UI设计的另一个关键规则是不断迭代。持续迭代不需要将设计过程视为一次短暂的一次性飞行。相反,请将其视为不断进步的重复往返,让您更接近目标 - 构建完美的 SaaS 产品。

持续迭代涉及创建产品版本、测试它以及实施用户和利益相关者的反馈以改进下一个版本。根据用户反馈改进产品并不需要彻底修改整个软件。只需一个小小的改变就足以让您的 SaaS 产品更具吸引力和吸引力。例如,对结帐页面的文本、流程或设计进行少量更改就可以帮助提高转化率和销量。

您还可以通过分析页面来识别跳出率高或转化率低的页面,从而获得改进每次迭代的见解。然后,您可以运行 A/B 测试来识别这些页面的版本,以提供更好的结果。总而言之,通过不断的迭代,你的SaaS产品可以不断变得更加美观、更加用户友好、更加盈利。

用户界面设计的 4 个核心支柱

您已经了解了我们遵循的 UI 设计的关键规则,以提供引人入胜、响应迅速且有吸引力的 SaaS 产品,帮助企业实现其目标。我们讨论的所有规则都基于 UI 设计的四个基本支柱。无论您在 SaaS 行业的定位如何,您的应用程序或网页设计都不应偏离这四个核心原则,它们是:

1. 整个 SaaS 软件的一致性

您的用户界面在所有页面上都应该具有一致的外观和感觉。例如,您不能拥有蓝色背景的主页和具有不同配色方案的其他页面。通过确保所有页面上的颜色、字体、按钮、交互和色调等元素匹配来保持整个软件的一致性。

美观的一致性可以防止分心、混乱和脱节,从而使您的 SaaS 产品看起来不专业且组合不佳。一致性还可以让用户有一种熟悉感,无论用户访问哪个页面,您的网站都可以预测和熟悉。这会带来清晰度,进而带来直观的导航,确保无缝的用户体验。

2. 用户无忧访问

您的 SaaS 产品应该尽可能直观且用户友好。否则,用户将获得令人沮丧的体验,从而增加跳出率和流失率。用户友好且直观的软件确保用户可以导航、找到他们想要的内容并在没有帮助的情况下完成操作。

您可以通过使按钮可见并提供清晰的信息来确保无忧的用户体验。这些信息将指导用户通过您的软件完成任务。所有链接、图像、文本和其他内容在页面上都应该有明确的目的,并且结构合理。此外,消除不必要的步骤并优化交互以提高用户工作效率。


我们为您提供了一套 UI 设计最佳实践,将推动您走向正确的方向。它们适用于大多数接口,但这只是开始。这些设计规则只能带你到目前为止。使用它们作为起点,然后运行您自己的实验来确定最适合您的应用程序和用户的方法。【言鼎科技


The End