设计系统，包括用于创建遵循原则、设计语言和最佳实践的用户界面的资源。 开发人员可以专注于应用程序逻辑而不是像素，而设计人员可以专注于用户体验、交互和流程。

目录 概述 动画库 样式 样式指南 颜色 颜色 数据输入 数据输入 数据 数据输出 布局 加载 本地化和样式 标记和样式消息 概述 类型 类型 组件状态搜索 全局搜索 上下文搜索 导航 排版 语音和语气 语音和语气 1. 概述

设计系统反映了支持产品的模式和组件。 在生态系统中设计应用程序和产品时，这些模式和组件提供了统一的语言和一致的外观。

设计原则

在做出设计决策时，我们会牢记这些核心原则，并且我们鼓励您也采用它们。

清晰度：消除歧义。 让人们放心地看到、理解、行动。

效率：简化和优化工作流程。 需要智能预测来帮助人们更好、更智能、更快地工作。

一致性：通过对相同问题应用相同的解决方案来增加熟悉度并增强直觉。

美：通过深思熟虑和优雅的工艺表现出对人们时间和注意力的尊重。

2. 动画

2.1 画廊

2.2 风格风格指南

3.颜色颜色

提供适合我们的 UI 设计并与我们的品牌颜色相协调的全系列调色板。

灰色 中性灰色

我们的灰色可用于大多数用户界面元素，但应限于：

品牌 品牌颜色

我们的品牌颜色应该适用于大多数 UI 元素。理想情况下，它们仅限于应用程序中的主要操作或强调

用法

(1)视觉信息

虽然我们认识到文化差异很大，但某些颜色对大多数用户来说具有固有的意义。 例如，我们使用红色来传达错误。

(2)视觉区分

将多种辅助颜色与图像结合使用，可以在视觉上区分相似类型的内容，例如不同对象类型的记录。 然而，重要的是不要总是依赖颜色来提供视觉差异。 如果太多用例以这种方式使用颜色，颜色就会失去意义。

(3)可视化层次结构

我们很少使用颜色来吸引人们对重要元素和我们希望用户采取行动的元素的注意。 由于大多数应用程序都是灰色的，流行的颜色会吸引用户的注意力。

(4) 无障碍

重要的是，我们的产品符合所有网络可访问性标准，包括 WCAG 2.0 规定的文本和背景颜色组合的最低对比度。 这种合规性有助于色盲或弱视用户更好地与其交互，同时也提高了所有用户的可用性和可读性。

您可以在 CSS 框架主题部分找到一些最常见的文本和背景颜色组合。 它们都经过审查以通过最低对比度，包括普通文本和链接文本样式。

4. 数据输入 数据输入

用户需要频繁地添加、更改和删除信息。 各种各样的文本输入和选择选项可以清晰有效地促进体验。

4.1 基本文本输入 基本文本输入

用于单行和多行文本的自由格式数据输入的最简单方法。

要限制文本量，请使用单行输入。 要限制输入类型，您可以指定格式，例如数字或电子邮件地址。

多行文本区域允许用户输入长文本。 您无法指定格式来限制内容类型。

在字段上方或左侧标记输入区域。 在大多数情况下，堆叠标签（顶部标签）更易于阅读且更清晰。 仅当您需要节省垂直空间且域数量少于 10 个时才使用水平标签。

2 个堆叠基本文本输入的示例。

要将相关字段分组在一起（例如地址的一部分），请使用复合输入

长度

默认文本大小在标签文本和输入文本之间创建视觉层次结构。 较小的输入大小也可用于节省垂直空间，或者当宽度受限的侧边栏中有一长串字段时。

输入宽度取决于标签的位置。 输入宽度为容器的 100%。

输入帮助 输入帮助

为了帮助用户，您可以添加帮助文本。 如果说明很长，请使用信息图标和工具提示。 如需简短说明（短于句子），您可以将文本放置在字段下方。

您还可以使用占位符文本来提供所需输入类型的示例。 例如，在名称字段中，以正确的格式显示名称。

4.2 文本输入 复杂文本输入

复杂的文本输入为用户提供特定类型数据输入的额外帮助。

日期日期选择器

日期选择器不是强迫用户手动输入日期，而是为用户提供了一种可视化的方式来浏览和选择单个日期或日期范围。

寻找

查找允许用户在数据库中搜索记录以填充字段。 查找可以将用户限制为单个记录或允许多个记录填充单个字段。

4.3 输入选择输入

选择输入允许用户在给定字段的有限数量的选项之间进行选择。

复选框

使用布尔字段的单个复选框，用户只能在 true 和 false 之间或 on 和 off 之间进行选择。

无线电列表 无线电列表

收音机列表允许用户从简短列表（少于 10 个选项）中选择一个选项。 您必须有足够的空间来一起显示所有选项，以便比较简单。 通常，广播列表作为独立字段提供，例如提要内的轮询，而不是以更大的形式使用。

复选框切换

切换开关与复选框类似，它为用户提供了项目的二元选择。 然而，切换是独立的 - 将其视为只有一个字段的简短形式。 当用户打开或关闭开关时，对项目的更改会立即保存。

切换对于减少歧义很有用。 由于切换会立即保存，因此用户始终会在页面上看到干净的状态（永远不会出现未保存/脏状态）

4.4 使用方法

如果您要创建的字段使用切换：

页面上不得以未保存状态显示任何其他表单组件。

可以独立于页面上的其他字段保存

语义上适合开/关模型

4.5 标签