有效用户界面的7个关键UI设计原则

用户体验（UX）和界面（UI）设计可追溯至最早的发明——当史前人类首次将石头绑在木棍上时，他们让石头更容易挥动。然而，作为一门连贯的学科，UI 设计是在 20 世纪 70 年代由 Xerox 等公司确立规范，并在 90 年代随着家用电脑的广泛普及而流行起来的。

此后，UI设计不断演进以适应新技术和新设备。您可以通过遵循相关指南，在整个电子商务网站中实施用户界面设计。以下是如何开始。

什么是UI设计？

UI 设计是创建软件、应用程序、网站或用户与之交互的任何数字界面的视觉布局和外观的过程。UI 组件的例子包括页面上按钮的排列、引导你使用用户名和密码创建账户的步骤说明文案，以及引导你完成购物流程的图标。UI 设计的目标是创建简单、美观且功能性的界面，以帮助用户完成任务。

为什么UI设计很重要？

优秀的设计不仅看起来美观，还能改善你的底线。一项被广泛引用的研究追踪了知名设计驱动型公司十年的表现，发现它们的表现超过了美国证券交易所上市的 500 家最大公司的 219%。强调设计的最直接方式之一就是通过网站的界面。

UI设计与UX设计

UI 设计师通常与用户体验设计师紧密合作。虽然 UI 和 UX 密切相关，但它们是不同的学科。UI 设计侧重于产品的视觉和交互元素，如布局、排版、颜色、图标和按钮；而UX 设计则关注整体用户体验，包括产品的一般目的等宏大概念以及用户对产品的感受。两者对于成功都至关重要：扎实的 UI 设计支持潜在的 UX 策略。

以电话为例。起初，您需要告知接线员您想与谁通话。后来出现了旋转拨号盘，虽然消除了对人工接线员的需求，但增加了一个耗时的旋转机制。最终，按键拨号盘问世，其按钮布局不仅超越了传统电话，还成为手机的标配。快速拨号、联系人列表和语音助手进一步简化了这一过程。

这一演变轨迹反映了电话的用户界面：即按钮及我们与电话互动的方式。另一方面，它的用户体验不仅涵盖设备的 UI，还包括其执行的操作、我们对功能的理解、使用后的满意度等等。例如，你对叫车应用叫车体验的满意度不仅受应用界面的影响，还受找到司机的难易程度、预计到达时间以及司机在乘车过程中的行为等因素的影响。

7个重要的UI设计原则

在过去几十年中，出现了一些UI设计的黄金法则。以下是您应该牢记的七条：

1. 让用户感到舒适
2. 让用户掌控体验
3. 使其直观易懂
4. 确保无障碍访问
5. 让用户知道系统正在运行……
6. ……但也为系统故障做好准备
7. 拥抱迭代

1. 让用户感到舒适

这里的“用户”指的是您的客户。为了提升他们的浏览体验，在网站上营造欢迎的氛围至关重要。以下是如何让导航更加直观和用户友好的方法：

• 少即是多。无论你的艺术品味如何，极简主义都是 UI 设计的核心原则。优秀的用户界面设计要求删除页面上任何不服务于你需求的内容。花哨的字体、不必要的信息和过于冗长的文字是主要的罪魁祸首。
• 保持视觉层次清晰。菲茨定律指出，较大的目标比较小且较远的目标更容易、更快地点击。换句话说，要确保“购买”按钮等重要元素突出醒目，关键照片和信息能自然地吸引眼球。
• 保持简洁。优秀的用户界面使用简单的语言、易读的字体和精简的配色方案，页面上的留白（或空白区域）也同样重要。
• 保持一致性。按钮、微文案、页面布局和配色方案等用户界面设计元素在整个网站中应保持统一，并遵循一般的设计惯例，例如将菜单置于页面顶部。
• 避免使用行话。通过使用不具威慑性且不含多余技术术语的措辞，让访客在你的网站上感到舒适。

换句话说，你的目标是打造一个简洁、美观的设计，其中包含有目的性的视觉元素，以便在用户需要时提供所需的信息。

2. 让用户掌控体验

UI 设计也是了解目标受众的绝佳机会。通过市场营销研究或利用社交媒体账号上可用的用户人口统计信息，你可以深入挖掘他们的需求和兴趣。通过共情用户并梳理他们访问你网站的动机，获取深刻洞察。用户希望前置看到哪些按钮和视觉信息？更有经验的用户可能希望将某些内容隐藏在更深层级？通过优先考虑你的受众，你实际上是让他们的需求来主导界面设计。

另一种让用户掌控体验的方式是允许他们在不产生负面后果的情况下撤销操作。这让探索网站的过程感觉更加无障碍和安全，因为用户知道如果误入了繁琐的数据输入流程，随时可以回退并在稍后返回。所谓的“面包屑导航”（breadcrumb trails）能显示用户曾访问过的页面和当前所在位置，帮助他们建立对网站的心理地图，从而更轻松地找到信息。（参见本文标题上方的示例，其中显示为：Home > Shopify Blog > UI Design Principles。）

3. 使其直观易懂

优秀的用户界面直观易懂，所有元素都位于用户期望的位置。即使是那些最具“颠覆性”的品牌，在其 UI 设计中也不会违背用户的预期。相反，目标应是实现无缝的用户体验。在简化 Shopify 上的导航后，Offbeat Bikes 的创始人 Mandalyn Renicker 表示，配件销售额同比增长了约 400%，并将此归功于“Shopify 提供的更出色的搜索功能以及能够精准展示用户所需商品的集合页面”。

熟悉的模式、模板、字体选择和页面布局能够降低访客的认知负荷。这也意味着你无需重新发明轮子，也无需解释每一项设计决策。每个应用顶部常见的三条横线菜单之所以有效，是因为我们清楚它们的功能。

4. 确保无障碍性

色盲影响着全球约5%的成年男性和0.5%的女性人口。世界卫生组织报告称，2.53亿人患有某种形式的失明或视力障碍，4.66亿人患有失聪和听力损失，另有2亿人患有智力残疾。

设计一个良好的网站意味着为所有人设计良好的网站。WCAG Web无障碍倡议为用户界面设计师提供了详细的指南。一个经验法则是不要依赖单一元素来完成所有沟通。标记为“是”和“否”的两个按钮也可以分别带有对勾和叉号。将它们设为绿色和红色可以增加另一层沟通，确保色盲或阅读能力不会阻碍用户导航网站。

前一个原则——“使其直观易懂”——在此同样适用。标准的符号和短语能让所有人处于稳固的认知基础上。如购物车图标、美元符号和勾选标记等图标被广泛认可，使各类用户都能轻松导航。

5. 让用户知道系统正在运行……

用户希望知道事情正在顺利进行。考虑在点击按钮时添加轻微动画以确认操作，在成功交易或表单填写后提供感谢页面以闭环处理，如果功能加载耗时则显示进度条，或在尝试创建密码时让一系列要求逐渐变绿。所有这些都能给访客带来熟悉的完成感。

6. ……但也要为系统失效做好准备

我们都经历过这种情况：当网站或软件未按预期工作时，愤怒地反复点击。良好的 UI 设计通过提供即时且信息丰富的反馈来缓解这一问题。

计划好当事情未按预期发展时的应对方案。设计良好的错误信息和404页面应清晰且有帮助，将用户重定向到其他内容。这些细节向顾客表明他们处于一个功能正常、值得信赖的购物环境中：它们传达的意思是，“别担心，我们知道问题所在，并且正在处理。”（想想Twitter的失败鲸鱼——那只欢快的白鲸被一群鸟从海浪中托起，曾在平台出现服务中断时出现。该失败鲸鱼于2013年夏季退役，但仍是Twitter早期难以应对高流量时的怀旧象征。）

7. 拥抱迭代

将设计过程视为一个没有真正终点的迭代循环。关键在于重复步骤以持续改进。部署之后，先观察设计的实际运行情况，然后再评估数据并进行调整。

拥抱迭代可以采取多种形式；也许是倾听客户反馈、聘请用户测试网站，或是深入分析数据以查看哪些页面的跳出率高或转化率低于预期。例如，对结账页面设计的微小调整就可以修复漏水的销售漏斗。

所有用户和企业各不相同，因此一定程度的试错是不可避免的。经过适当调整，优秀的 UI 设计可以让你的网站更美观、更易用，并提升盈利能力。