原副标题：并非吧？你还不晓得提升位数电子设备组织工作效率和易用性的GUIGUI结构设计吗？
-Yeeeees,他们是你的结构设计职业生涯油站！-
自计算机系统问世以来，开发者和结构雕塑家就心愿着建立亲善的可视化式（HCI）。那些HCI使计算机系统操作方式简单且更易自学，而无须预先练或介绍某一的计算机系统语言。建立GUI（GUI），容许使用者直接与电子设备可视化并通过操作方式工具栏和快捷方式等原素来完成这类各项任务，是结构设计相关人员提升其位数电子设备组织工作效率和易用性的一类方式。
在责任编辑中，YES将带大家简述 GUI 的基本概念、它的组织工作基本原理、GUI 结构设计过程以及建立 GUI 时要遵从的准则。
什么是GUI？
具体内容来说，GUI 可协助您的使用者在您的电子设备、网络平台、流程或应用流程中继续执行操作方式，而无须点选指示或介绍操作方式另一面的代码。
一些具体内容的范例是：
● 将文档格式移往桌上的“废泡菜坛”配置文档
● 空格键工具栏以开启插件
● 将文档从两个配置文档终端到另两个配置文档
为了更快地认知这种介面的基本价值观，他们需要深入探讨GUI的历史。
虽然GUI没有单个的建立者，但那些设想来源于Vannevar Bush在二战前夕在斯坦福大学的组织工作。Bush叙述了一类名叫memex的电子设备的基本概念，人们可以在其中储存多种类型的重要信息。他将memex叙述为“对梦境的不断扩大的亲密无间补足”。Bush的设想影响了计算机系统生物学家维克托·斯图尔特（Ivan Sutherland），他建立了两个名叫Sketchpad的系统。Sketchpad是GUI的前身。
这个基本概念基于桌面隐喻——结构雕塑家试图模拟桌面环境。文档和配置文档的隐喻用于以结构化方式组织内容。后来，苹果和微软将这一基本概念纳入了他们的操作方式系统。
Apple Lisa was the first computer from Apple that had a graphical user interface.
GUI如何组织工作？
GUI 由使用者与之可视化的图形原素组成。最常见的 GUI 范例是窗口、工具栏、菜单和指针 （WIMP）。WIMP范式是指由物理指针电子设备（鼠标）、内容容器（窗口）和用于开启这类操作方式（工具栏和菜单）的图形对象控制的虚拟输入电子设备。
大多数GUI都引用模型—视图—控制器 （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).
GUI的优缺点
与command-line UI相比，GUI 具有许多优点：
● 较低的自学曲线。使用 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结构设计的目标是改善人与机器之间的通信。他们将在下面深入探讨GUI结构设计的一些普遍接受的准则。
目标。这就是为什么必须删除所有不必要的原素并润色现有原素以获得最大的清晰度。
以下是建立尽可能简单的介面的一些建议：
● 通过删除所有不必要的细节来减少屏幕拥挤。 仅保留对使用者各项任务最重要的原素。
● 使使用者更容易发现重要的原素或操作方式。突出重要功能，隐藏不常用功能。
# 美观性效果
人们通过封面来判断一本书。这适用于他们世界上的许多事物，包括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为可视化式提供了两个基本的网络平台，几乎无法想象没有它人们会如何生活。责任编辑中列出的 GUI 结构设计准则将协助您结构设计人与机器之间简单高效的可视化。
文章参考：
https://xd.adobe.com/ideas/principles/human-computer-interaction/graphical-user-interface-gui-definition/
END
