用户界面设计

用户界面设计也称为用户界面工程。用户界面设计是指为软件和机器（如移动设备、家用电器、计算机和其他电子设备）设计用户界面的过程，旨在提高可用性和改善用户体验。

用户界面设计的目的是使用户体验尽可能简单，同时仍然成功实现用户目标（以用户为中心的设计）。

精心设计的用户界面设计使完成手头的任务更容易，而无需引起不必要的注意。图形设计和排版用于通过影响消费者如何与其交互来影响其效用，并提高设计的审美吸引力。设计美学可以增强或削弱用户使用界面功能的能力。设计过程应平衡技术功能和视觉元素（例如，心智模型），以构建一个不仅可操作而且可用且适应不断变化的用户需求的系统。

界面设计应用于各种项目，包括计算机系统、商用飞机、汽车；其中许多项目包含许多相同的基本人机交互，但它们通常包含某些特殊技能和经验。因此，无论是软件设计、工业设计、用户研究还是网页设计，设计师都倾向于专注于这些类型的项目，并根据其经验拥有相应的技能。

选择界面组件

用户已经习惯了界面组件以某种方式运行，因此请尽量在我们的选择和布局中保持可预测性和一致性。因此，任务完成度、满意度和性能将得到提高。

界面组件可能包括

1. 输入控件
2. 导航组件
3. 信息组件
4. 容器

输入控件：输入控件包括按钮、开关、下拉列表、复选框、日期字段、单选按钮和文本字段。

导航组件：导航组件包含滑块、标签、分页、搜索字段、面包屑、图标。

信息组件：信息组件包含工具提示、模态窗口、进度条、图标、通知消息框。

容器：容器包括手风琴。

许多组件有时可能适合显示内容。发生这种情况时，考虑这种权衡至关重要。例如，有时，有助于您腾出空间的组件会更注重用户，迫使他们猜测下拉菜单是什么或元素可能是什么。

界面设计最佳实践

一切都始于了解您的用户，这包括了解他们的兴趣、能力、倾向和习惯。如果您已经了解您的客户是谁，那么在设计界面时请记住以下几点

• 始终如一地创建并使用通用UI组件
• 使用排版来创建层级和清晰度。
• 确保系统传达正在发生的事情
• 策略性地使用颜色和纹理
• 保持界面简洁
• 页面布局要精心设计

始终如一地创建并使用通用UI组件

如果我们在UI中使用通用组件，用户会感到更自在，并且能够更轻松地完成任务。在整个网站上生成语言、设计和布局模式也很重要，以帮助提高生产力。如果用户掌握了一项能力，他们应该能够将其应用于网站的其他区域。

使用排版来创建层级和清晰度

考虑我们将如何使用字体。不同大小、字体和排列的文本有助于提高可读性、易读性和可扫描性。

确保系统传达正在发生的事情

始终让您的用户了解其状态、位置、错误、操作等方面的变化。使用各种UI组件来传达状态以及（如果需要）后续步骤将有助于您的用户减少沮丧感。

策略性地使用颜色和纹理

利用对比度、光线、颜色和纹理的优势，我们可以吸引或转移对物体的注意力。

保持界面简洁

大多数出色的界面对用户来说是不可见的。它们避免不必要的组件，并在标签和消息传递中使用简单的术语。

页面布局要精心设计

考虑页面上对象之间的空间关联，并根据重要性组织页面。仔细定位对象可以通过吸引对最相关信息的注意力来帮助扫描和可读性。

为用户设计用户界面

用户界面是用户和开发人员之间的交互点。它们有三种不同类型的格式

1. 图形用户界面（GUI）
2. 基于手势的界面
3. 语音控制界面（VUI）

1. 图形用户界面（GUI）

在图形用户界面中，用户可以通过数字控制面板上的视觉表示进行交互。GUI的示例是计算机的桌面。

2. 基于手势的界面

在基于手势的界面中，用户可以通过移动身体与3D设计空间进行交互。基于手势的界面的示例是虚拟现实（VR）游戏。

3. 语音控制界面（VUI）

在语音控制界面（VUI）中，用户可以通过语音进行交互。语音控制界面（VUI）的示例是亚马逊设备上的Alexa和iPhone上的Siri。

用户界面设计流程

用户界面设计需要对用户需求有深入的理解。它主要关注平台的需求和用户偏好。用户界面设计有几个阶段和程序，其中一些比其他的更具挑战性，具体取决于项目。

功能需求收集

创建设备功能列表，这些功能是实现用户项目目标和规范所必需的。

用户和任务分析

这是一种实地研究。它研究系统的潜在用户如何执行设计将服务的任务，并进行访谈以了解他们的目标。

典型问题包括

• 您认为用户希望系统做什么？
• 系统在用户的日常活动或工作流程中扮演什么角色？
• 用户技术水平如何，用户已经使用哪些其他系统？
• 您认为用户喜欢哪种用户界面外观和感觉？

信息架构

流程开发或系统信息流（对于电话树系统，这将是电话树系统的选择树流程图，对于网站，这将是显示页面层次结构的网站流）。

原型设计

线框图的开发可以是简单的交互式屏幕或纸质原型。为了专注于界面，这些原型剥离了所有外观和感觉组件以及大部分内容。

可用性检查

允许评估员检查用户界面。与可用性测试相比，它的实施成本通常更低，并且可以在开发过程的早期使用。它可以在开发过程的早期用于确定系统的需求，这些需求通常无法在用户身上进行测试。有各种可用性检查程序，例如认知演练，它侧重于新用户使用系统完成任务的难易程度；多元演练，它涉及一群人逐步完成任务场景并讨论可用性问题；启发式评估，它使用一系列启发式方法来发现UI设计中的可用性问题。

可用性测试

原型在真实用户身上进行测试，通常使用一种称为“大声思考协议”的方法，我们可以在体验过程中要求用户说出他们的看法。用户界面设计测试允许设计人员从观看者的角度了解接收情况，从而更容易创建有效的应用程序。

图形用户界面设计

这是最终图形用户界面（GUI）设计的实际外观和感觉。这些是设计的控制面板和界面；语音控制界面包含口头-听觉交互，而基于手势的界面用户通过物理动作与3D设计空间交互。这可以基于用户研究期间发现的结果，并根据测试结果发现的可用性问题进行修正和完善。此过程通常包括一些计算机编程，以便根据正在开发的界面类型验证表单、建立链接或执行所需的操作。

软件维护

部署新界面后，可能需要进行例行维护，以修复软件错误、添加新功能或完全更新系统。当决定更新界面时，遗留系统将经历一个新的设计过程迭代。界面生命周期的阶段将继续重复。

用户界面设计要求

系统的动态特性根据人体工程学标准ISO 9241第10部分的7项原则中包含的对话要求进行定义。该标准为对话技术以及高级概念、示例和实现提供了一套人体工程学“原则”。对话原则反映了界面的动态方面，通常被认为是界面的“感觉”。以下是七个对话原则

1. 任务的适用性

当对话帮助用户高效有效地完成任务时，它就适合该任务。

2. 自我描述性

当每个对话阶段由于系统反馈而立即可理解或应用户要求向用户澄清时，对话是自我描述性的。

3. 可控性

当用户能够启动和监控交互过程和速度直到达到目标时，对话是可控的。

4. 符合用户期望

如果对话可靠并符合用户的特征，如经验、教育、任务意识和普遍接受的惯例，则它符合用户期望。

5. 容错性

如果尽管输入中存在明显错误，但无需用户操作或只需有限操作即可实现预期结果，则对话是容错的。

6. 个性化适用性

如果界面软件可以更改以满足用户的工作需求、个人兴趣和能力，则对话能够实现个性化。

7. 学习适用性

对话支持学习，因为它协助并指导用户学习如何使用系统。

ISO 9241标准将可用性定义为有效性能和消费者满意度。以下是第11部分中对可用性的解释。

• 整个系统预期使用目标的实现程度（有效性）。
• 为实现预期结果必须花费的资源（效率）。
• 用户对整个系统的可接受程度（满意度）。

可用性因素包括有效性、效率和满意度。为了评估这些因素，必须首先将它们分解为子因素，然后分解为可用性度量。

ISO 9241标准的第12部分通过七个属性规定了信息的组织，例如对齐、排列、位置、分组、排列、图形对象的显示以及信息的编码（颜色、形状、视觉提示、大小、缩写）。所呈现信息的属性反映了界面的静态方面，可以称为界面的“外观”。这些属性在标准的建议中进行了详细定义。七个质量中的每一个都由一个或多个建议支持。七个呈现特征如下

• 清晰度： - 信息内容传达轻松且正确。
• 可区分性： - 显示的数据可以精确分离。
• 简洁性： - 用户不会被无关数据超载。
• 一致性： - 一致性意味着独特的设计符合用户的期望。
• 可检测性： - 用户的注意力被引导到必要的重要信息。
• 可读性： - 可读性意味着信息易于阅读。
• 可理解性： - 含义直截了当、可识别、明确且易于理解。

ISO 9241标准第13部分中的用户指导指出，它应该易于与其他显示信息区分开来，并且必须准确地用于当前上下文。可以使用以下五种方法提供用户指导

• 提示系统可用于输入，显式（特定提示）或隐式（通用提示）。
• 及时、无侵入且可感知的用户输入相关反馈。
• 有关应用程序当前状态、系统硬件和软件以及用户活动的详细信息。
• 错误管理包含错误检测、错误纠正、错误消息和用户对错误管理的支持。
• 针对系统发起和用户发起请求的在线帮助，以及当前使用上下文的详细信息。

如何制作出色的用户界面

在创建令人惊叹的GUI时，请记住用户是有人性需求（如舒适度和心理容量限制）的人。应遵循以下准则

1. 创建按钮和其他行为可预测的常用组件（具有捏合缩放等响应），以便用户无需思考即可使用它们。形式必须服从功能。
2. 保持高可发现性。清晰标记图标和明确定义的示能，例如按钮的阴影。
3. 界面应简单（包括帮助用户实现目标的元素）并营造“隐形”感。
4. 在布局方面，尊重用户的眼睛和注意力。强调层级和可读性

• 使用正确的对齐方式：通常选择边缘（而不是中心）对齐。
• 使用以下方法突出显示关键功能
  • 颜色、亮度和对比度都是需要考虑的重要因素。应避免过度使用颜色或按钮。
  • 字体大小、斜体、大写、粗体/字重和字间距都用于创建文本。用户应该能够通过扫描简单地推断出含义。
  • 无论上下文如何，始终提供用户可以自然推断出的下一步。
  • 使用正确的UI设计模式来帮助用户导航并减少负担，例如预填充表单。应避免使用暗模式，例如难以看到的预填充选择加入/退出复选框，以及将对象偷偷放入用户购物车。
  • 通过反馈让用户了解系统响应/操作。

用户界面设计原则

以下是用户界面设计原则

1. 清晰是首要任务

界面的首要也是最重要的任务是提供清晰度。为了有效使用您设计的界面，人们需要识别它是什么，无论他们为什么使用它，理解界面在与他们互动时正在做什么。它帮助他们预测他们使用时会发生什么。然后有效地与它互动以达到有效。在界面中，有神秘和延迟满足的空间，但没有不确定性的空间。清晰度灌输信任并鼓励持续使用。一百个整洁的屏幕优于一个杂乱的屏幕。

2. 保持用户控制

人类在控制自己和周围环境时最自在。不体贴的软件通过将人们拖入意想不到的遭遇、意想不到的结果和令人困惑的路径中，剥夺了他们的舒适感。通过定期显示系统状态、解释因果关系（如果您这样做会发生什么）并提供对每个转折点的预期洞察力来保持用户控制。不必担心陈述显而易见的事情......显而易见的事情很少是显而易见的。

3. 尽一切可能保持注意力

我们生活在一个不断被打扰的世界。如今，在没有任何东西试图转移我们注意力的情况下，很难安静地阅读。注意力是一种宝贵的商品。分散注意力的内容不应散落在应用程序的侧面……请记住屏幕首先存在的目的。如果有人正在阅读，请让他们读完后再显示广告。如果您关注，那么您的读者会更快乐，您的表现会更高。当主要目标是使某物有用时，关注是必须的。不惜一切代价保留它。

4. 界面旨在实现互动

人类与我们世界之间的互动是通过界面实现的。它们可以支持、解释、允许、显示关联、阐明、将我们聚集在一起、将我们分开、处理期望并提供服务访问。设计用户界面不是一种艺术尝试。界面不是独立的标志。界面具有功能，其效率可以计算。但是，它们不仅仅是功利主义的。最好的用户界面可以鼓励、神秘化、唤起和加深我们与世界的联系。

5. 保持次要操作次要

带有单个主要操作的屏幕可以添加多个次要操作，但它们必须保持次要。您的文章的目的是让人们阅读和理解它，而不是让人们在Twitter上发布它。次要操作应该通过赋予它们较轻的视觉权重或在主要操作完成后显示它们来保持次要。

6. 提供自然的下一步

很少有交互是最后的，所以考虑为与您的界面一起使用的每次交互设计最后一步。预测下一次交互是什么并设计以适应它。就像我们对人类对话感兴趣一样，提供更多讨论的机会。不要让任何人悬而未决，因为他们做了您希望他们做的事情……为他们提供自然的下一步，这将帮助他们实现目标。

7. 直接操作是最好的

如果我们可以直接访问宇宙中的物理对象，就不需要界面。我们构建界面来帮助我们与对象交互，因为这并不总是那么容易，而且对象变得越来越信息化。很容易在界面中添加比所需更多的层，创建过于复杂的按钮、附件、选项、图形、窗口、偏好设置、chrome和其他杂物，导致我们操作界面。与其专注于重要的事情，不如包含UI组件，不如回到直接操作的目标……设计一个占用空间最小的界面，同时识别尽可能多的自然人类动作。在理想的世界中，界面如此轻巧，以至于用户感觉他们正在直接操纵他们关注的对象。

8. 用颜色突出显示，不要决定

当光线变化时，物理物体的颜色也会变化。在白天充足的光线下，我们看到与日落截然不同的树木轮廓。就像在真实世界中，颜色是多色调的物体一样，颜色在界面中并不能决定任何事情。它可以用于突出显示和引导焦点，但不应该是区分对象的唯一方法。长时间使用屏幕时，使用浅色或柔和的背景颜色，将更鲜艳的色调留作点缀。当然，有时需要使用明亮或鲜艳的背景颜色；只需确保它们适合目标受众。

9. 渐进式披露

在每个屏幕上，只显示所需的内容。如果人们必须做出决定，请给他们足够的信息来做出该决定，然后在后续屏幕上提供更多详细信息。避免过度解释或一次性显示所有内容的常见陷阱。尽可能通过根据需要逐步显示信息来将决策推迟到后续屏幕。因此，您的体验将更加清晰。

10. 强大的视觉层级效果最佳

当计算机上的视觉元素以简单的查看顺序排列时，它会创建一个强大的视觉层级。这意味着用户始终以相同的顺序看到相同的对象。弱视觉层级提供了一些关于应该注视何处以及放松和感觉杂乱和困惑的指导。在快速变化的环境中很难保持清晰的视觉层级，因为视觉权重是相对的；如果什么都不是粗体或所有都是粗体。如果屏幕中包含单个视觉沉重的元素，那么设计师必须重置所有其他元素的视觉权重，以便再次实现强大的层级。

11. 在线帮助人们

在理想的交互中不需要帮助，因为界面是可用和易学的。低于这一点的，事实上，是内联和上下文帮助，仅在需要时和需要的地方可访问，在所有其他时间隐藏。当你要求人们去寻求帮助并找到他们问题的答案时，你是在把理解他们想要什么的责任推给他们，而不是在需要的地方提供帮助。只需确保它不会妨碍已经熟悉您的界面的人。

12. 建立在其他设计原则之上

视觉和平面设计、可视化、排版、信息架构和文案撰写，所有这些学科都是界面设计的一部分。它们可能会被简要讨论或培训。不要陷入地盘之争或排斥其他学科；相反，从它们那里获取你需要的东西并继续前进。还要融入来自看似无关领域的想法……我们可以从书籍装帧、出版代码、滑板、空手道、消防中学到什么？

13. 优秀的设计是无形的

优秀设计有趣的地方在于，使用它的人通常不会注意到它。其中一个原因是，如果设计有效，那么用户将能够专注于自己的目标而不是界面……当他们实现目标时，他们会很高兴，并且不会本质上反思情况。作为设计师，这可能很困难，因为当我们的工作成功时，我们获得的赞扬会更少。另一方面，优秀的设计师对一个使用良好的设计感到满意，并明白满意的用户总是沉默的。

14. 界面旨在被使用

界面设计，像大多数设计学科一样，当人们使用您创建的东西时才是有效的。如果人们选择不使用它，设计就会失败，就像一把坐着痛苦的漂亮椅子一样。因此，界面设计可能更多地与构建用户友好的体验有关，而不是设计一个有用的工件。一个界面仅仅满足设计师的自我意识是不够的：它必须被使用！

15. 关键时刻：零状态

用户第一次与界面交互至关重要，但设计师经常忽略它。最好为零状态（即尚未发生任何事情的状态）做好计划，以极大地支持我们的用户快速适应我们的设计。这不应该是一个空白画布……它应该为您提供指导，并为您快速上手指明正确的方向。最初的接触点是许多摩擦发生的地方……一旦人们掌握了规则，他们成功的机会就会大得多。

UI设计中要避免的错误

以下是我们在UI设计中必须避免的错误

• 不要实施以用户为中心的设计。这是一个很容易被忽视的部分，但它是UI设计最关键的方面之一。在设计时应考虑用户的愿望、期望和问题。避免这样做，否则可能会对您的公司产生负面影响并导致其消亡。
• 过度使用动态效果：使用大量动画效果并不总是好设计的标志。因此，限制装饰性动画的使用将有助于改善用户体验。
• 过早准备过多：尤其是在设计的早期阶段，我们只需要在脑海中有一个适当的设计图像并开始工作。然而，这种策略并非总是成功的。有时，探索其他来源可能会显示一些意想不到的结果。
• 不了解目标受众： - 这一点再次说明了我们刚刚讨论的内容。与其根据自己的愿望和品味进行设计，不如将自己想象成消费者。只需考虑消费者会喜欢什么，如果可能的话，采访或调查一些潜在客户，以更好地了解他们的需求。

用户界面设计的基本工具

用户界面设计有各种基本工具

1. Sketch
2. Adobe XD
3. Invision Studios
4. UXPin
5. Framer X

1. Sketch

它是一个用户设计工具，主要被众多UI和UX设计师用于设计和原型制作移动和网络应用程序。Sketch是一款矢量图形编辑器，允许设计师高效快速地创建用户界面。

Sketch有各种功能

• 切片和导出
  Sketch为用户提供了大量的切片控制，允许他们选择、切片和导出他们想要的任何图层或对象。
• 符号
  使用此功能，用户可以构建预先设计好的元素，这些元素可以轻松地在任何画板或项目中重复使用和复制。此功能将帮助设计师节省时间并为潜在项目构建设计库。
• 插件
  也许您正在寻找的功能在默认的sketch应用程序中不可用。在这种情况下，您不必担心；有许多创建的插件可以从外部下载并添加到我们的sketch应用程序中。选择是无限的！

2. Adobe XD

它是一个基于矢量的工具。我们使用这个工具为移动应用程序和网络设计界面和原型。Adobe XD就像Photoshop和Illustrator一样，但它专注于用户界面设计。Adobe XD的优势在于包含了适用于Windows、Apple和Google Material Design的UI工具包，这有助于设计师为每个设备创建用户界面。

Adobe XD的功能

Adobe XD有各种功能

• 语音触发
  语音触发是Adobe XD引入的一项创新功能，它允许通过语音命令来操纵原型。
• 响应式调整大小
  使用此功能，我们可以根据所需的屏幕尺寸或平台自动调整和重新调整画板上存在的对象/元素的大小。
• 协作
  我们可以将Adobe XD连接到其他工具，如Slack，允许团队跨Windows和macOS等平台进行协作。

3. Invision Studios

它是一个简单的基于矢量的绘图工具，具有设计、动画和原型制作功能。Invision Studios是一个相对较新的工具，但它通过其众多可用功能和卓越的原型制作能力已经展示了高水平的抱负。能够将文件从Sketch移动和打开到Invision是一个额外的好处，允许您创建比单独使用Sketch更沉浸式的用户界面。

Invision Studios的功能

Invision Studios有各种功能

• 高级动画
  工作室提供的各种动画使您的原型动画制作变得更加激动人心。我们可以期待通过此功能实现更高保真度的原型，包括自动图层链接、时间线编辑和智能滑动手势。
• 响应式设计
  响应式设计功能节省了大量时间，因为它消除了为多个设备进行设计时对多个画板的需求。Invision Studios允许用户创建一个可以根据预期设备进行调整的单个画板。
• 同步工作流
  工作室支持所有项目的同步工作流，从开始到结束，以支持团队协作。这包括实时更改和实时概念协作，以及提供即时反馈的能力。

4. UXPin

另一个用于设计用户界面的出色工具是UXPin，它具有设计和原型制作能力。与其他用户界面工具相比，此工具更适合大型设计团队和项目。UXPin还附带UI元素库，可让您访问Material Design、iOS库、Bootstrap和各种图标。

UXPin的功能

UXPin有各种功能

• 移动支持
• 协作
• 演示工具
• 拖放
• 模型创建
• 原型创建
• 交互元素
• 反馈收集
• 反馈管理

5. Framer X

Framer X 于 2018 年发布。它是最新颖的设计工具之一，用于设计从移动应用程序到网站的数字产品。此工具的有趣之处在于其原型制作能力以及高级交互和动画，同时还集成了代码组件。React.js 用户感觉他们可以在同一平台上设计和编码。此外，Framer X 允许用户构建高度逼真的原型，可用于向客户或利益相关者展示最终产品。

Framer X 的功能

以下是 Framer X 的功能

• 从模型到原型，全部在一个画布上
• Framer X 更好地支持所有类型的网络字体
• 使用标尺和参考线实现像素完美设计
• 通过精确的颜色管理发挥创意