【全局样式】
（一）色彩
- 品牌色的应用
- 功能色
- 中性色
（二）布局
在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：
- 统一的画板尺寸
- 适配方案
- 网格单位
- 栅格
- 常用模度
- 统一画板
为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440。
- 适配
在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
一、左右布局的适配方案
左边的导航栏固定，对右边的工作区域进行动态缩放
二、上下布局的适配方案
当留白区域到达限定值之后再对中间的主内容区域进行动态缩放
- 网格单位
布局 - Ant Designant.design
（三）字体
字体 - Ant Designant.design
（四）图标
设计原则
- 准确：
- 简单：
- 节奏：
- 愉悦：
图标 - Ant Designant.design
（五）阴影
阴影 - Ant Designant.design
（六）暗黑模式
暗黑模式 - Ant Designant.design
【全局规则】
（一）关于数据录入
- 为初级用户／偶尔访问的用户提供简单易懂的文案作为「标签（Label） 」；
- 为领域专家提供专业术语作为「标签（Label） 」。
- 当需要用户提供敏感信息时，通过「暗提示」来说明系统为什么要这么做，让用户能在上下文中获取信息，帮助他完成输入，避免让用户在空白中猜测输入。
1）文本录入
输入框为用户提供了编辑文本的控件，是录入数据最基础和常见的方式。
文本框（Input）
输入较少的字符总数，使用单行的输入形式。
注：可以对一些文本（如数字和网址）运用特别的样式。详见 输入框（Input）。
文本域（Textarea）
提示与帮助
在输入框内增加暗提示以帮助提醒用户
当说明文案较长时，使用「信息」图标或者提示工具
短的输入提醒（短于一句），放置在输入框的下方
搜索（Search）
让用户在巨大的信息池中缩小目标范围
2）选择录入
让用户在一个预定的范围中进行选择。
单选框（Radio Button）
单选框（Radio Button）一定多于 2 个，一般少于 5 个
复选框（Checkbox）
复选框一般用于状态标记，需要和提交操作配合；单个复选框可以表示两种状态之间的切换。
开关（Switch）
用于切换单个选项的状态，「开关」的内联标签应该显示清楚
正确示范
错误示范
切换「开关」结果会立即生效，无需与操作按钮搭配使用。
选择列表（Dropdown）
当选项多于 5 项时使用，列表选项按照逻辑排序，并尽量让内容显示完整
滑块选择（Slider）
滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值
在用户需要精确数值时，可与「数字输入框」搭配使用
穿梭框（Transfer）
穿梭框用直观的方式在两栏中移动元素，完成选择行为
日期选择器（DatePicker）
3）文件上传（Upload）
简单点击上传
一般用于单个上传且不需要预览效果的文件上传
显示缩略图上传
一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图
拖拽上传
同样支持点击上传
（二）关于数据显示
- 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
- 注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等。
表格（Table）
表格被公认为是展现数据最为清晰、高效的形式之一。
折叠面板（Collapse）
使界面保持整洁的同时增加空间的有效利用率
卡片（Card）
如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。
- 卡片通常根据栅格进行排列，建议一行最多不超过四个
- 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。
传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示
走马灯（Carousel）
- 轮播的数量不宜过多以免造成用户厌烦，控制在 3~5 个之间为最佳
- 建议在设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知
可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
树形控件（Tree）
展现信息的层级关系，高效且具有极佳的视觉可视性
时间轴（Timeline）
垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。
（三）关于按钮
- 指导用户采取你希望他们采取的行动。
- 帮助用户避免犯错。
常规按钮
① 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
② 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
③ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列。
④ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。
- 需要在较小的空间内展示尽量多的按钮。
- 使用纯图标按钮必须有 Tooltip 提示按钮含义。
⑤ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
强调按钮
常规按钮类型呈现出不同的强调程度，使用者可以据此变化出合适的按钮类型：
特殊按钮
- 虚线按钮 Dashed button
用于引导用户在一个区域中添加内容。
- 危险按钮 Danger button
警示用户该操作存在风险。
用户的主要意图是删除
当系统不推荐用户执行删除操作时，可将取消按钮设置为主按钮。
- 幽灵按钮 Ghost button
置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
- 行动号召按钮 Call to action
经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于 landing page 或者 一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮。
按钮位置
- Header：主题的标题和摘要信息内容区的导航等
- Body：具体内容
- Footer：主题的补充信息和工具栏等
将按钮区放置在不同的区域，有不同的含义
将“完成”主题类的动作放在 Header 区。例如，编辑器中为了最大化编辑空间，将“完成”类动作放到了右上角。
什么时候需要在 Footer 中放置按钮区？
- Body 区部分内容被折叠或隐藏，例如单屏无法展示完整内容；
- 需要将该主题的“完成”操作从 body 区区分出来，避免混淆按钮所能影响的内容范围。
如何确定按钮顺序？
- 对话习惯：优先询问用户可能需要执行的操作，或你希望用户执行的操作，最后向用户提供存在风险的操作。
- 方向性含义：例如，具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
按钮分组
当需要布置的按钮数量过多，可以把相关的动作组成一组，并采用相似的视觉设计。当某一个按钮是首要动作时仍可使用主按钮强调。
- 按主次折叠部分按钮
- 平铺每个按钮：优先推荐通过间距来区隔分组，也可以使用分割线来区隔视觉相似的按钮组。
正确示范
错误示范：无需分组时不要使用短竖线分割
按钮文案
- 必须使用动词。（下拉按钮除外）
- 与语境紧密关联，用语简练。
- 描述任务结果。
- 主要操作也为否定含义时，强调后果。
（）关于数据格式
数据格式 - Ant Designant.design
文案 - Ant Design
（）关于文案
文案 - Ant Designant.design
