 -Yeeeees,我们是你的设计生涯加油站！- 自计算机诞生以来，开发人员和设计师就梦想着创建友好的人机交互（HCI）。这些HCI使计算机操作直观且易于学习，而无需事先练习或了解特定的计算机语言。 创建图形用户界面（GUI），允许用户直接与其设备交互并通过操作图标和滚动条等元素来完成某些任务，是设计人员提高其数字设备效率和可用性的一种方式。 在本文中，YES将带大家回顾 GUI 的概念、它的工作原理、GUI 设计过程以及创建 GUI 时要遵循的原则。  什么是图形用户界面？ 简而言之，GUI 可帮助您的用户在您的设备、平台、程序或应用程序中执行操作，而无需键入命令或了解操作背后的编码。 一些具体的例子是： ● 将文档移至桌面上的“废纸篓”文件夹 ● 单击图标以启动应用程序 ● 将文件从一个文件夹移动到另一个文件夹 为了更好地理解这种界面的基本思想，我们需要深入研究图形用户界面的历史。 虽然GUI没有单一的创建者，但这些想法源于Vannevar Bush在第二次世界大战期间在麻省理工学院的工作。Bush描述了一种名为memex的设备的概念，人们可以在其中存储各种类型的信息。他将memex描述为“对记忆的扩大的亲密补充”。Bush的想法影响了计算机科学家伊万·萨瑟兰（Ivan Sutherland），他创建了一个名为Sketchpad的系统。Sketchpad是GUI的前身。  Ivan Sutherland Sketchpad demo. 然而，图形用户界面设计的第一个工作概念来自1970年代的施乐帕洛阿尔托研究实验室。请看下面的视频： Xerox Alto GUI Demo. 这个概念基于桌面隐喻——设计师试图模拟桌面环境。文件和文件夹的隐喻用于以结构化方式组织内容。后来，苹果和微软将这一概念纳入了他们的操作系统。  Apple Lisa was the first computer from Apple that had a graphical user interface. 图形用户界面如何工作？ GUI 由用户与之交互的图形元素组成。最常见的 GUI 范例是窗口、图标、菜单和指针 （WIMP）。WIMP范式是指由物理指针设备（鼠标）、内容容器（窗口）和用于启动某些操作（图标和菜单）的图形对象控制的虚拟输入设备。 大多数图形用户界面都引用模型—视图—控制器 （MVC） 模式。此模式将信息的内部表示（模型）与用户接收信息的方式（视图）分开。控制器充当双方之间的媒介。  The model-view-controller pattern in GUI design. MVC 允许灵活的结构，因此您可以在不对模型进行任何更改的情况下重新设计元素。然后，视图几乎变得像一个视觉皮肤，设计人员可以将其应用于应用程序的相同业务逻辑。  The visual design of system dialog in MacOS can be changed in the next version of the OS without introducing any changes to the business logic (functionally). 图形用户界面的优缺点 与command-line UI相比，GUI 具有许多优点： ● 较低的学习曲线。使用 GUI，用户无需学习特定命令或具备专业的计算机技能。 ● 降低交互成本。用户不必使用键盘键入命令;他们可以导航到图形对象，然后单击或点击它以执行操作。 ● 即时反馈。用户实时操作对象，并可以看到其操作的结果。 但是这种模式也有一些缺点： ● 更容易出错。要在命令行界面中出错，您需要键入命令并执行它。要在 GUI 中出错，您需要做的就是单击错误的按钮。 ● 内置限制。与GUI不同，命令行界面为有经验的用户提供了更多的自由度和灵活性，允许他们执行一些复杂的操作或调整系统确认。  图形用户界面设计过程 不可能将GUI设计与使用它的产品分开考虑。因此，下面的设计过程只是产品设计团队使用的设计思维过程的一般五个阶段（移情、定义、构思、原型和测试）的摘录。 # 需求收集 好的UI设计是关于了解用户的需求。设计师需要考虑用户将使用产品完成的任务（用户需求），以及何时（用户环境）和如何（设计人体工程学），并将这些信息转化为功能需求。在此步骤结束时，产品设计人员应该能够回答以下问题： ● 用户希望系统做什么？ ● 产品应支持哪些功能？ ● 产品将如何适应用户的日常活动？ ● 用户将在哪里与系统交互？ # 设计信息架构 用户体验心理学在GUI设计中起着至关重要的作用。与GUI的交互应该让用户感觉自然，只有当功能和内容与用户心智模型保持一致时，才会发生这种情况。这就是为什么在了解系统要求后，以对用户有意义的方式构建内容和功能非常重要。 一种方法是创建页面层次结构，以帮助用户轻松查找信息。例如，当用户启动文档编辑应用程序时，他们希望在顶级菜单中找到所有编辑选项。隐藏或更改关键控件的位置将使用户与产品的交互更加困难。  Design information architecture at play: Google Docs features the most important actions in the top panel. # 成型 在此步骤中，我们尝试创建 GUI 的可视化表示。产品设计是一个迭代过程，根据产品设计的阶段，原型可以是任何东西，从低保真可点击线框到高保真编码原型，其外观和工作方式几乎与成品相似。  Prototyping in Adobe XD. # 测试 产品设计是一个迭代过程，几乎不可能从第一次尝试开始就创建一个完美的解决方案。与代表目标受众的人进行测试将帮助您了解您的产品对用户的效果以及您有哪些需要改进的领域。优秀的设计团队遵循构建—度量—学习循环，直到他们创建了一个对用户来说足够好的解决方案。 设计 GUI 时要考虑的原则 正如前文所解释的，GUI设计的目标是改善人与机器之间的通信。我们将在下面深入探讨图形用户界面设计的一些普遍接受的原则。  Golden Krishna的这句话指的是最好的界面对用户几乎不可见的想法。对 GUI 设计本身的任何关注都会干扰用户的主要任务，即在尽可能短的时间内实现他们的目标。这就是为什么必须删除所有不必要的元素并润色现有元素以获得最大的清晰度。 以下是创建尽可能简单的界面的一些建议： ● 通过删除所有不必要的细节来减少屏幕拥挤。 仅保留对用户任务最重要的元素。 ● 使用户更容易发现重要的元素或操作。突出重要功能，隐藏不常用功能。 # 美观性效果 人们通过封面来判断一本书。这适用于我们世界上的许多事物，包括图形用户界面。我们在美学可用性效应中看到了这一点，这表明当用户发现界面在视觉上吸引人时，他们会更容忍小的可用性问题。良好的美学可以改善用户对 GUI 的感知，因此创建一个让用户满意的设计非常重要。 # 一致性 一致性原则指出，系统在整个过程中的外观和工作方式应该相同。不一致会使即使是最漂亮的 GUI 设计也完全无法使用。因此，设计视觉（类似组件应具有相似外观）和功能（类似组件应具有相似用途）一致性至关重要。设计系统（包括组件库和样式指南）可以帮助解决这个问题。 Example of visual and functional consistency across Excel in both desktop and mobile uses. # 熟悉 好的用户界面设计也应该专注于帮助用户实现他们的目标。在 GUI 设计方面，创建熟悉的体验是重中之重。 这意味着什么： ● 使用单个元素的提示来帮助用户解码其含义。 提示是对象的可视属性，用于向用户显示他们可以执行的操作。熟悉的功能（例如按钮上的阴影）可帮助用户仅通过查看元素来了解元素的作用。 A button with a shadow helps users understand the functional purpose of the element. ● 遵循平台约定。 当设计师打破惯例时，他们使用户更难与产品交互。 Follow platform default visual styles for function elements: in this picture you can see default toggle switches in Android and iOS. # 消化能力 在设计 GUI 时，使 UI 易于消化非常重要。尽量不要用太多信息使其过载，并确保优化内容和功能元素以实现快速扫描。 以下是一些实用提示： ● 确保所有文本都清晰易读。信息应易于扫描和阅读。 ● 创建适当的元素视觉层次结构。页面上元素的排列和对齐应引导用户首先、其次等需要的内容。 ● 优化内容和功能元素，实现快速视觉扫描。最常见的扫描模式是 F 形和 Z 形。 # 效率 通过 GUI 预测用户的需求将帮助他们更快、更轻松地实现目标。如下所示： ● 练习预期设计。预测任务的自然进展，并在用户需要时准确提供相关信息和操作。 ● 通过将屏幕元素对齐到组中来最大程度地减少眼球运动。 ● 最小化交互成本（手或手指运动）。菲茨定律指出，用户将指针（鼠标光标或手指）移动到目标所需的时间是到目标的距离除以目标大小的函数。将控件放在用户要控制的对象附近。 Fitts’ Law states that the time required to move to a target area is a function of the ratio between the distance to the target and the width of the target. # 响应能力和控制 响应能力和控制是有助于保持人机对话良好节奏的两个原则。系统应始终传达正在发生的事情，因为它可以帮助用户保持控制感。 以下是需要记住的几点： ● 提供良好的性能。用户希望快速、无延迟地执行操作。 ● 控制交互。允许用户中断或终止操作，并允许支持“撤消”操作。 ● 提供适当的反馈。 您设计的系统应通过相关反馈（视觉、音频或任何其他类型）快速响应用户的请求。反馈可帮助用户了解系统已收到其命令。如果没有反馈，用户可能会多次进行相同的操作（即两次单击同一按钮）。 # 可及性 使所有类型的用户（包括残障用户）都可以访问 GUI 也至关重要。您需要考虑视力、听力和移动性问题，才能进行无障碍 HCI 设计。 以下是 GUI 设计人员的两个基本资源，它们提供了一组辅助功能要求： ● Web 内容可访问性指南 （WCAG） 2.0 指南。遵循这些准则将使更广泛的残障人士能够访问您的设计。 ● 可访问的富互联网应用程序 （ARIA） 规范。本规范涵盖有助于向残疾人传达信息的辅助技术。 结论 图形用户界面是个人计算史上最重要的创新之一。今天，GUI为人机交互提供了一个基本的平台，几乎无法想象没有它人们会如何生活。本文中列出的 GUI 设计原则将帮助您设计人与机器之间简单高效的交互。 文章参考： https://xd.adobe.com/ideas/principles/human-computer-interaction/graphical-user-interface-gui-definition/ END |
|
|
