《界面设计》，第3版

第 11 章 用户界面系统和原子设计 用户界面系统和原子设计

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

上一章列举了许多例子，指出了界面设计中的一个重要模式：屏幕界面通常是由一个常用组件系统组成的。设计人员和开发人员在界面设计方法上的最新发展，正是基于这种将设计作为一个系统的趋势。在本章中，我们将介绍基于组件的前端用户界面框架。理解并使用这种方法将有助于为你的软件提供一致性、可扩展性和更好的可用性。因此，本章包括以下内容：

• 基于组件的用户界面（UI）系统概述

• 以组件为基础的原子设计理念概述

• 您可能会用到的网页和移动网络专用 UI 框架（组件库）精选介绍

如今，设计软件应用程序意味着为消费者和企业客户创造丰富的交互体验，无论他们使用什么设备，也无论他们身在何处。人们期望这种体验始终处于开启状态，始终与周围的世界交流，与其他人交流，并每秒对用户做出动态响应。

如今，为了利用基于 Cloud 的强大信息处理、存储和通信功能，软件从一开始就是为了连接互联网而创建的。移动设备是最主要的消费计算平台。客户希望特定的应用程序能充分利用本地设备的功能，如摄像头、语音输入、实时位置数据、他们自己先前的活动和偏好等。他们还希望通过多种设备（手机、平板电脑、台式机、手表、电视等）访问相同的软件，实现无缝过渡，并获得相同的体验。他们也不希望在使用小型设备时功能和性能受到影响。在这种环境下，设计人员需要创建用户界面系统来设定用户界面标准。

设计和开发方法的核心是组件和小工具，以及与其他系统的实时连接，以实现通信、交易、实时数据和存储。我们的想法是设计和建立一个由组件组成的系统，让用户能够完成他们的任务，而无需考虑许多不同的设备、屏幕尺寸、操作系统或网络浏览器。

用户界面系统

用户界面系统或用户界面设计系统是用户界面风格和标准系统，可帮助公司的设计师、开发人员和合作伙伴保持软件产品外观和感觉的质量和一致性。它们使用基于组件的方法。它们的重点是尽可能实现功能和外观的标准化，同时还能与不同的操作系统（OS）标准保持一致。他们不指定实施技术，如使用何种编程语言。

对于交互设计师来说，重点在于基于组件的界面和设计方法是目前的标准方法（至少对于填写表格、选择日期和时间等基本功能来说是如此）。让我们来简单了解一下。

微软、苹果、谷歌等科技公司的用户界面系统涵盖多个操作系统、多种设备和屏幕：

• 微软的流畅设计系统（Fluent Design System）为 Windows 操作系统、网络、iOS 和 Android 提供了标准化的样式库和代码模块。

• 苹果的《用户界面指南》涵盖 macOS 和 iOS 应用、watchOS（用于 Apple Watch）和 tvOS（用于 Apple TV）。

• 谷歌的 Material Design 系统通过其 Flutter UI 框架覆盖了网页、安卓、iOS 以及现在的原生桌面操作系统应用程序。

基于组件的用户界面系统示例：微软的 Fluent

让我们以一个UI 系统和其中的一个组件为例。2017 年，微软发布了其 UI 系统 Fluent。它的目标是帮助微软软件生态系统中的任何产品，无论是在 Windows 桌面上、安卓系统上、iOS 系统上还是在网页上，看起来都像微软的产品。

只要浏览一下 Fluent UI 系统的网站，就会发现它的适用范围（图 11-1）。假设你是微软的交互设计师，正在设计一个需要日期和时间选择器的应用程序。如果你的设计是针对网页的，那么你需要查看 ...