Components

Components 指用户界面中反复出现、使用的独特 UI 元素，是设计系统的关键构成部分。按照组件属性，可分为系统组件与业务组件。此系统仅提供系统组件，即，系统自带的原生组件与在此基础上进行功能扩展的扩展组件，主要分为 Navigation、Data Entry、Data Display 和 Feedback 四个主要部分。利用这些组件可创建具有一致性的界面，引导用户顺利、有效地使用产品。

广义上，任何告知用户他在哪里，他能去哪里以及如何到达那里的方式，都可以称之为导航。

设计原则

尽可能提供标识、上下文线索，避免用户迷路。
保持导航样式和行为一致或者减少导航数量，降低用户学习成本。
尽可能减少页面间的跳转，让用户的移动距离保持简短。

Overview 总览

此系统中一共提供了 10 种导航组件，分别为 Header、Global Footer、Title Bar、Breadcrumb、Tabs、Steps、Menu、Dropdown、Pagination 和 Back-to-Top。下面将分别介绍这些组件相应的使用指南。

Header 页头

主要用于展示管理系统名称、当前登录用户信息，也可包含「消息中心」的入口。一般情况下，所有页面都会展示页头。

Global Footer 全局页脚

全局页脚一般用于以下情况：

声明版权信息、法律信息或隐私条款
提供网站地图或拓展导航
提供联系信息、地址或地图
展示社交媒体链接

Title Bar 标题栏

主要用于声明当前页面主题，或承载与当前页相关的操作项（包含页面级操作，页面间导航等）。

用于显示当前页面在系统层级结构中的位置以及父子级页面间的关系。当系统层级结构超过两级，且需要向上导航时，使用面包屑。

注：
层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级。
尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。

Tabs 标签页

标签页提供了平级的区域来分类展示大量的信息。分类可根据业务类别、业务状态或者操作类型等并列关系来分。分类标题长度建议为 2-6 个汉字。

以下三种选项卡，分别适用于不同的场景：
线性标签页，属于页面级标签页，用于主功能切换。
卡片式标签页，用于页面中的局部展示。
分段按钮，可作为更次级的标签页使用，通常用于卡片内的选项切换。

Steps 步骤条

步骤条是引导用户按照流程完成任务的导航条，可帮助用户对操作流程长度和步骤有个预期，并且知道自己当前在哪个步骤，同时也可以对用户的任务完成度有明确的度量。

当任务复杂或者存在先后关系时，将其分解成一系列步骤，以简化任务。

横向步骤条：步骤多于 2 步时使用，但建议不超过 5 步，每阶段文字长度保持在 6 个汉字以内。

导航菜单为页面和功能提供导航，用户依赖导航在各个页面中进行跳转。

侧边导航菜单：垂直导航较横向的导航更灵活，易于向下扩展，且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的后台管理系统。

当菜单项过多时，可在顶部提供搜索框，帮助用户快速找到所需菜单项。

当页面上的操作命令过多时，可用此组件收纳操作元素。点击或移入触点，会显示一个下拉菜单，可在列表中选择操作，并执行相应的命令。

Pagination 分页

当有大量内容需要展现时，进行分页加载处理，分页器可让用户清楚地知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。

目前有以下两种规格的分页器：
简易分页器，用于数据量较小的情况，如 10 页之内。一般用于卡片或者浮层。
标准分页器，用于信息条目较多的情况，可允许用户自定义每页的条目数，以提高用户查看和检索信息的效率和灵活性。常与表格、卡片搭配使用。

Back-to-top 回到顶部

允许用户快速导航至页面顶部的一种快捷方式。

使用指南：
当页面内容超过 4 屏，且用户需要频繁返回顶部查看相关内容时，使用此组件。
仅在最需要的时候显示。当用户滚动了几页并表现出想要向上滚动的意图（如，向上移动滚动条，向上滚动页面）时，显示此按钮。

Data Entry 数据录入

数据录入是获取对象信息的重要交互方式，用户会频繁地增加、修改或删除信息。多种多样的文本录入和选择录入方式可帮助用户更加清晰和高效地完成这项体验。

设计原则

为初级用户／偶尔访问的用户提供简单易懂的文案作为「标签（Label）」；为领域专家提供专业术语作为「标签（Label）」。
当需要用户提供敏感信息时，提示用户为什么系统要这么做，例如：需要获取身份证号码、手机号码时。
让用户能在上下文中获取信息，帮助他完成输入：使用「良好的默认值」、「结构化的格式」、「占位符文本」、「输入提醒」等方式，避免让用户在空白中猜测输入。

Overview 总览

此系统中一共提供了 9 种数据录入组件，分别为 Button、Input、Picker、Selectors、Upload、Select、Form、Toolbar 和 Data Filtering。下面将分别介绍这些组件相应的使用指南。

Button 按钮

按钮用于触发某个操作。用户可通过点击按钮或者按下某些特定的键，比如 Enter 或者空格键，来触发操作。

Input 输入框

输入框为用户提供了编辑文本的控件，是录入数据最基础和常见的方式。

一般有以下几种输入框：

文本框：需输入较少的字符总数时，使用单行的输入形式。
文本域：需录入长篇幅的单一的文本时，使用多行的文本域。
搜索：可让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。

注：输入框通常与标签和占位符文本搭配使用。标签默认放于输入区域的左侧，当文案过长时可放于在上方，但同个系统中需保持统一；占位符文本显示在输入框内部，用于帮助、提醒用户。

Picker 选择框

日期、时间和颜色选择框可为用户提供一种可视化的方式来浏览和选择一个时间、日期，或时间、日期范围，或一个颜色。

Selectors 选择控件

此系统中，将以下三种控件统称为选择控件：

单选按钮：允许用户从多个选项中选择一个选项。所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。单选按钮的选项一般少于 5 个，一定多于 2 个。
复选框：用于在一组可选项中进行多项选择。
开关：用于切换单个选项的状态。

注：复选框单独使用时也可表示两种状态之间的切换。与「开关」的区别是，开关会直接触发状态改变，而复选框一般用于状态标记，需与提交操作配合。

Upload 上传

上传是将本地的相应信息（包含本地和云储存）通过网页或者上传工具发布到远程服务器上的过程。

一般有以下三种上传方式：

点击上传：一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。
显示缩略图上传：一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
拖拽上传：把文件拖入指定区域，完成上传，同样支持点击上传。

此系统目前仅包含「点击上传」和「显示缩略图上传」。

注：文件上传需提供明确的文件大小和文件格式（如：请选择大小不超过 5M 的文本文件，支持 PDF、ZIP、EXL 格式），上传时需要有明确的进度提示。

Select 选择器

允许用户从列表中选择一个或多个选项，为用户在选项的数量选择上提供了更多的灵活性。

选项多于 5 项时使用；选择列表中的选项需按照逻辑排序，并尽量让内容显示完整。

注：当选项少于 5 项时，使用单选按钮，直接将选项平铺；当选项大于 5 项时，使用选择器；当选项大于 20 项时，使用可搜索的选择器。

Form 表单

用于数据收集、数据校验和提交数据，包含复选框、单选框、输入框、选择器等元素。

大部分情况下，表单标签采用右对齐方式。

标签对齐方式一般有以下四种：
左对齐：适用于表单标签长度基本一致的情况。
右对齐：适用于表单标签长短差异较大的情况。
顶部对齐：适用于水平方向空间拮据的移动端长表单。
居内对齐：即省略表单标签，仅通过文本框内的占位符文本提示用户。适用于表单项目较少，或用户对该表单较熟悉时（如，登录、注册）。

始终显示在屏幕底部，用于承载影响整个页面或表格数据的操作项。

主要包含以下两种：

表格工具栏：包含影响整个表格数据的操作（如，批量删除），以及分页器。
页脚工具栏：包含表示关闭或完成的全局操作（如，保存、发布）。

Data Filtering 数据筛选

用于对列表（通常是表格）中的数据进行筛选，包含搜索、日期选择框、选择器等等。

Data Display 数据展示

合适的数据展示方式可帮助用户快速地定位和浏览数据，从而更高效地协同工作。

设计原则

依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等。

Overview 总览

此系统中一共提供了 7 种数据展示组件，分别为 Data Table、Empty State、Tag、Badge、Tooltip、Scrollbar 和 Divider。下面将分别介绍这些组件相应的使用指南。

Data Table 表格

常与排序、搜索、筛选、分页等其他界面元素一起协同，用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。表格结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

主要包含以下几种形式的表格：

固定表头：上下滚动表格时，表头固定显示。时刻指示每列数据的类别属性，方便用户浏览数据，尤其是有多列数据类型相似或数据类型对用户来说不很熟悉、不好分辨的时候。
水平滚动：当列数过多不可避免需要使用水平滚动时，可将具有标志性的数据放在首列，固定首列和操作列。用户可以以固定列的数据为基础，横向滚动查看数据、在行与行之间对比数据。
可选择行：允许用户对表格中的特定行进行特定操作，包括「单选」和「多选」两种选择方式。可多选表格的首列为联动的复选框，可选中多行数据后对数据进行批量操作；可单选表格的首列为单选按钮。
可展开行：当表格内容较多不能一次性完全展示时，可将次要的、不需要在行与行之间对比的数据折叠起来。
可筛选列：筛选条件单一的表格，可使用列筛选器，以便直观筛选单列数据。包括「多项筛选」和「单项筛选」两种筛选方式，前者的下拉列表为多选列表，后者的下拉列表为常规单选列表。
可排序列：允许用户按不同数据类型的不同排序方式组织表格数据。
行内编辑：允许用户快速编辑表格中的各个字段，但仅适用于修改与上下文关联不大的内容，强关联的内容可在对话框或新页面中修改。包括「可编辑单元格」和「可编辑行」两种编辑方式，修改完成并保存后，立即更新该行数据。
自定义列：当数据列数过多，或需要满足多个角色在不同情况下的业务需求时，可使用自定义列。自定义列允许用户选择他们想要查看的列并对这些列进行排序，将用户的自定义设置保存为预设以供下次使用。