AD UI
设计语言组件库

UI 设计

设计系统

AD UI 是一套针对后台系统而设计的视觉语言及组件库。AD UI 基于 “Less, but better” 的思路，确定了 “简易、秩序、效率” 三种设计准则，搭建良好的后台系统体验环境，打磨工具的美感。

视觉上，AD UI 从字体、色彩、投影、质感、布局等方面，定义了一套简明清爽的视觉风格，保留基础质感，去除冗余，化繁为简，让用户能更好地专注自己的任务。工程上，AD UI 搭建了完整、高效的组件代码架构，支持在业务中灵活调用，稳定更新。

设计语言

AD UI 从字体、色彩、投影、质感、布局等方面，定义了一套清爽而简明的视觉风格，在保留基础质感的前提下，去除冗余，化繁为简，让用户能更好专注自己的任务。

采用轻拟物质感，暗喻组件的用法，同时保留一种沉静、优雅的普通工具之美感。

以无色系黑白灰搭建整体环境，色相仅用于表示功能语义，如成功、提醒、危险等。

因应后台系统的复杂性，提供较丰富的字体尺寸区间，以及遵循系统原生的 Web 字体回退方案。

投影以标准化的 Z 轴层级，表示模块之间的关系，引导用户注意力、理解页面、操作。

丰富的组件尺寸，满足后台系统复杂的场景。为了更高的界面空间利用率，AD UI 默认使用小尺寸。

AD UI 制定了几种标准的布局规范，同时包含整体和局部模块的功能区划分。

Figma 组件库 & 可交互开发文档

从设计到实现的生产流程，面向设计师与工程师，AD UI 提供了更完整的效率工具，方便各种工作角色使用。

基于 Figma 的能力，在线进行设计、管理和更新，支持设计师调用最新版本的组件。

完整的开发文档，内置可交互的组件调试器，方便工程师熟悉组件，调用组件代码。