UI设计可以对任何数字产品的用户体验产生巨大影响。它可以鼓励用户去探索，说服用户去购买，同时还可以传达多种情感。
那么设计师是如何创造出这些界面的呢？什么因素起了作用？他们又是如何知道一个设计是可行的？本文我们将围绕UI设计的概念、UI设计师的职责以及UI的创建须知三个方面进行介绍，帮助大家设计出强大的产品界面。
What is UI design?
# 什么是UI设计？
UI设计是通过图形界面将用户与软件和代码连接起来的重要途径。这个图形界面指的是我们熟悉的所有常见界面，比如单选按钮、行为召唤按钮和导航菜单。这些是人们与之互动的东西，是我们与数字产品交流的方式。
UI设计也可以用来处理更新颖的界面类型，如基于语音的界面或虚拟现实界面，这些虽然没有图形界面，但也是需要UI设计的。
一些人声称UI起辅助作用，只是帮助用户完成目标和任务。另一些人则认为它是数字产品的核心部分，为整个产品定下基调并传达产品特性。这两种说法都有一定的道理。虽然UI设计的目的是促进和支持更广泛的用户体验设计，但界面本身也具有巨大的功能。
它可以有一个UI布局，鼓励人们阅读正确的东西；可以有说服人们购买的按钮；可以有比文字更好的视觉层次；它可以提高转化率，让人们乐于看到自己完成任务，如果操作不当，它也可能使人们无法执行任务，并危及到整个产品的使用体验。
Where does UI design differ from UX?
# UI设计和UX的区别
UI设计和UX虽然有着共同的重要联系，但它们却截然不同。
用户体验（User Experience, UX）是关于功能和创造一个良好的产品，涉及许多因素。它关注用户的感受和他们所面临的挑战，以及数字产品如何让主要功能完美运作。
UI设计属于用户体验，致力于创造一个能够提升和完善用户体验的界面。它不是也从来都不等同于UX，而是UX的一个重要组成部分。UX处理的是大而宽泛的内容，而UI则是试图从用户那里获得反应的具体视觉提示。它包括定义一个有效的布局，以有逻辑的方式呈现信息，并支持产品的主要特性。
What does a UI designer do: the job
# UI设计师的工作是什么？
众所周知，UI设计师拥有专业的UI设计工具，但他们的职责远不止创建线框图这样简单。
1.准备设计相关材料
#1 Prepping materials for the design
首先，团队中的所有设计师必须聚在一起，定义产品需求和关键功能。这涉及到大量的用户体验研究，而这通常不属于UI设计师的职责。
但是事实上，在许多缺少UX研究员的设计团队中，UI设计师需要准备整个设计团队将使用的许多材料，比如利用研究人员或设计师收集的所有信息，创建Persona、User Flow或Storyboard。这些将是整个项目的关键，也是使得他们责任重大的原因。
UI设计师也倾向于自己做一些研究。通过对竞争对手进行分析，来优化自己的设计，使其既恰当又独特，从众多竞争对手中脱颖而出。
2.UI布局设计
#2 UI layout design
UI设计师首先需要处理的是UI布局。界面的具体细节甚至目标用户都会对其产生影响。通过创建或绘制不同布局的草图，团队可以比较它们并找到最佳的替代方案。
布局标志着线框图绘制阶段的开始，是定义和设计产品的基础。最终目标是以最好的方式呈现内容，以确保可读性和视觉层次，并创建一个通用的令人信服的设计，同时让关键特性更加明显。
3.视觉设计
#3 Visual design
UI设计师还负责数字解决方案的视觉效果，从游戏的颜色到插图和图标等。他们负责创造一个视觉上一致、有吸引力的、可用的产品，从创建功能切换开关到为移动应用程序选择最佳字体，所有的视觉线索都由UI设计师设计。
视觉效果是UI设计的艺术性所在。比如创建自定义插图，想出一个有效的调色板，或者找到一种戏剧性的方式来呈现数字商店中的物品。UI设计有很大的创造性空间，即使用户的心理模型和关键特性在正确的视觉效果选择中起了一定的作用。
4.设计系统的创建和维护
#4 Design system creation and maintenance
设计系统包含了产品的所有布局、组件和风格，只有规模庞大的产品，比如亚马逊、Yelp或Medium等才需要设计系统。这些网站从一开始就迅速发展壮大，因此迫切需要一种方法来确保整个网站的一致性。在这种情况下，UI设计师通常负责将设计系统组合在一起。
这项工作需要我们以一个批判的眼光去放弃任何不适合或过时的东西，同时还要确保每个小组件确实属于同一个系统。而UI设计师对于品牌身份、产品感觉和外观细节都十分了解，所以没有人比他们更适合这份工作。
UI design: guidelines and rules
# UI设计的指导方针和规则
1.尊重界面设计的启发式
#1 Respect the heuristics of interface design
Nielsen的10种界面设计启发式是众所周知的。虽然也有一些设计师很难理解“该做什么”和“不该做什么”的清单的意义，认为它们是创造路上的障碍。当涉及到任何数字产品的可用性时，Nielsen的界面设计启发式代表了一个特定的标准，这正是它们应该被遵循和尊重的原因。
• 系统状态的可见性
让用户应该知道产品内部发生了什么，即使只是通过一个简单的加载图标。这是通过关注反馈，来维持用户和产品之间的沟通。
• 系统与现实世界的匹配
UI设计应该引用现实世界的参考，使用用户已经知道的语言。这就是为什么拨动开关看起来像真正的物理开关，按钮看起来像真正的按钮。这将帮助用户了解他们的设计方法，使信息感觉更熟悉。
• 用户控制和自由
犯错误是人之常情，所有用户都容易犯错误。设计师要做的是让这些错误可逆，让用户既能控制产品，又能自由犯错，这些错误不会带来永久性的后果。
• 一致性和标准
无论产品的大小，产品中的一切都应该是一致的。用户需要知道组件和元素的行为是一致的，以获得合乎逻辑的体验。
• 错误的预防
设计师应该找出设计中最容易出错的地方，并纠正可以改进的地方，这样用户就不会经常犯错误了。这包括识别和防止高成本的错误，创建良好的错误消息，并确保设计反映用户的心理模型。
• 识别而不是记忆
这说明了一个事实，即人们不想背负记东西的负担。任何对用户重要的东西都应该是可识别的和可见的——比如字段标签和关键按钮。如果信息不是可见的，它也应该很容易被找到。
• 使用的灵活性和效率
为资深用户提供主要任务的快捷方式是个好主意，同时对新手隐藏这些快捷方式以避免混淆。通过为频繁的任务提供量身定制的使用方法，让用户能够更高效地完成它们。
• 美学和极简主义的设计
这意味着你需要在设计的任何屏幕上只保留必要的内容。每增加一个元素，你就会增加所有组件之间争夺用户注意力的竞争，它们的真正作用就会变得更小。
• 帮助用户识别、诊断和恢复错误
这表明错误消息应该清楚地说明哪里出错了，以及用户如何修复问题。你的信息应该是直接的，且能够提供解决方案。
• 帮助和文档
我们的目标是拥有一个不需要进一步解释的产品，但这并不总是可能的。复杂和先进的产品，如专业的线框图工具或Photoshop等必定需要更多的细节，而用户应该能够轻松地找到它们。
2.使产品易于被用户使用
#2 Make products easy for users to use
UI设计师的任务是让产品易于学习和使用。这是可以做到的，因为设计师可以通过做一系列的事情来降低设计的认知负荷。这意味着设计在功能和基调上都要明确，这样所有的东西都能协同工作，从而引导用户体验。
比如，我们可以从屏幕上删除不必要的元素，专注于主要任务，从而创建一个清晰的视觉层次，没有什么比屏幕上的一堆随机元素更能产生巨大的认知负荷了。另外，我们还可以使用各种视觉提示来突出屏幕上最重要的区域，比如关键的CTA，让用户专注于正确的元素。总之，降低认知负荷对可用性非常有利。你的产品在运行时不应该让用户感到沮丧或疲惫，而是让他们专注于体验本身，或者把注意力放在手头的任务上。
3.保证一致性和易学性
#3 Make it consistent and easy to learn
随着新产品的推出，会出现新的学习曲线，这可能是用户成败的关键时刻。根据他们估计的学习过程的复杂程度，他们可能会选择这一产品，或者干脆放弃，寻找更容易的替代产品，这被称为复杂性的初始感知。
众所周知，大多数下载了应用的用户很可能很快就会放弃它，然而UI设计师会尽其所能避免较高的弃用率，这就是UI设计中易学性概念的由来。
对于新用户来说，学习新东西需要付出很多努力，这就是为什么对设计师来说，削减任何可以削减的部件，把它变成更简单、更容易的东西是如此重要。
同时，确保视觉提示和组件行为的一致性也是至关重要的。用户需要知道一个按钮将要做什么，或者某个元素将如何反应。因此可以利用大多数用户已经熟悉的组件，如复选框和汉堡菜单等，帮助新用户更好地了解产品。
另一个可以提高易学性的重要方法是，故意省略复杂的内容，让用户探索和发现产品的伟大之处，让他们投入其中，然后再提供更高级的功能以及复杂的配置选项，这被称为渐进式披露。
4.理解UI模式的角色
#4 Understand the role of UI patterns
UI模式是用于面对常见设计问题的通用解决方案。所有设计师都遇到过这样的问题：展示了许多不同的内容，但却没有足够的空间来展示它们，比如在菜单中提供许多导航选项，但缺乏屏幕空间来显示这些选项。
流行的UI模式包括卡片UI和列表UI等。即使在使用相同的UI模式时，我们也有很多不一样的创作空间。UI模式的真正强大之处在于可以对其进行调整以适应大多数项目，这是非常实用的东西，大多数UI设计师都会有一两个模式库，他们会反复使用它们。
5.注意内容的结构
#5 Pay attention to content structuring
内容的构建与产品的其他几个方面相关联，它会因内容的不同以及屏幕的使用人群而发生巨大的变化。这意味着在UI设计师将所有内容整合到线框中之前，我们需要进行大量的计划和研究。首先，你需要掌握用户角色和他们的心理模型，这样你就可以准确地知道谁将看到屏幕，而不会忽略他们的想法或他们想要的东西。其次，你需要对产品中信息的一般架构有一个清晰的概念，以便了解哪些特性是更重要、更主要的。
你需要考虑的其他因素是内容的可读性。对于基于文本的内容来说尤其如此，因为对于许多用户来说，文本内容非常密集会导致难以阅读。UI设计师必须打破长文本块，添加小的视觉元素，以缓解视觉压力，这样才会有流畅的内容流。
与可读性密切相关的是用户的阅读模式。多年来，眼球追踪研究得到了广泛的开展，产生了一些著名的阅读模式（也称为扫描模式）。这告诉我们用户的眼睛将如何在屏幕上移动，让我们有机会把最重要的内容放在正确的位置。以下是几种最常见的扫描模式：
• F Pattern
这种模式表明，在没有副标题和其他视觉提示的情况下，大多数用户会把注意力集中在段落开头的几个单词上。这种对屏幕右侧的关注创建了一个通用的F模式。
• Spotted Pattern
这种阅读模式代表了人们在浏览文本时，是基于视觉元素和与手头任务相关的特定单词。所以如果他们正在寻找一个地址，大写字母可能会吸引用户的目光。如果他们寻找的是一个年份，则会被一组数字吸引。这表明利用更多的视觉提示，如项目符号或不同的字体来突出内容是引导眼睛浏览页面的好方法。
• Layer-Cake Pattern
这种阅读模式展示出了标题和副标题的重要性，它们帮助用户直接跳转到他们感兴趣的副标题。用户会阅读每个标题，跳过文本块，在热图研究中形成一个分层蛋糕。
Conclusion
# 总结
创建用户喜爱的界面要费很大力气，但它确实带来了极大的满足感。希望通过本篇文章，同学们能对UI设计的主体概念以及设计师的日常工作更加清楚和了解。
3279916262