根据ant design梳理的UI规范，自己留用

UI设计规范

整体设计风格

提供几种主题选择

全局布局

布局整体：采用T子型设计风格布局，布局规范采用统一的设计元素和间距降低学习成本，并能够适配不同的屏幕尺寸。根据业务的不同将页面划分为背景层、全局控制层、二级控制层、内容层、内容弹层。根据T字型布局，整体上下布局，下面采用左右布局。顶部为全局控制层，主体左侧为二级控制层，右侧为内容层。

分辨率：1440x900（最低支持）设计使用的1920*1080

网页栅格系统：24栅格体系，页面栅格的gutter值随着浏览器的扩大或者缩小保持不变，栅格Column宽度会随之扩大和缩小。

模度：UI模度，保持着8倍数的原则，具备动态韵律感，所以的尺寸都保持在8的倍数（这里的尺寸是指块的尺寸）

字体

开发默认全部使用系统默认字体，可提供备用字体供选择，备用字体采用等线体

主字体：14px

字阶和行高：

​ 主要字体：font-size：14px，line-height：22px

​ 系统使用的字阶不超过五种，不低于三种

自重：字体加粗使用regular和medium两种字体重量，英文字体采用semibold，三种字体分别对应代码中的400，500，600。

字体颜色：参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
主要文字：65%，85%

​ 次要文字：45%，65%

​ 禁用状态：25%，45%

​ 边框颜色：15%，25%

​ 分隔线：9%，15%

​ 背景：4%，9%

​ 表头：2%，4%

图标

暂时没有使用到自制图标，直接使用阿里图标库中现成的图标。（后面需要自制图标在添加具体的自制标准）

阴影

根据不同的高度层级，将阴影分为四个等级（离地面越远，阴影越大，等级越高）

第0层：物体紧贴地面，投影与物体完全重叠，如：输入框等

第1层：物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover ，不被操作的时候就是出于第0层，被操作之后变成第1层；

第2层：物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；

第3层：物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。

阴影向下：常规场景用法，组件内部、组件本身

阴影向上：底部导航、工具栏

阴影向左：右边导航栏、抽屉组件、固定表格栏

阴影向右：右边导航栏、抽屉组件、固定表格栏

常见阴影设计表：https://ant.design/docs/spec/shadow-cn#%E5%B8%B8%E7%94%A8%E9%98%B4%E5%BD%B1%E8%AE%BE%E8%AE%A1%E8%A1%A8

相关设计原则

间距

纵向间距：使用三种规格：8px（小号间距，基础间距）、16px（中号间距）、24px（大号间距），在以上三种不满足的情况下，可通过加减基础间距的倍数或者增加分割线来拉开层次。

横向间距：横向采用栅格布局来排布组件，增加布局的灵活性

对齐

文案对齐：段落较短时，需要确定一个统一个视觉起点（正文和标题对齐）

表单类对齐：冒号对齐（右对齐）

数字类对齐：数值取相同的有效位数，并且右对齐

对比

主次对比：针对需要用户做出决策的场景，保持中立，统一使用次按钮，防止诱导用户做出选择

编辑

不要为了修改而打开新的页面，需要在哪里输入就要允许在哪里输入。

单字段行内编辑

当「易读性」远比「易编辑性」重要时，可以使用「单击编辑」

当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」

多字段行内编辑

拖放

拖放列表：只能限制在一个维度（上/下或者左/右）进行拖放

拖放图片/文件

覆盖层

二次确认覆盖层：简单地确认操作不要滥用modal进行二次确认，提供以下两种确认方式

详细信息展示覆盖层：当鼠标点击或者悬停时展示详细信息，鼠标移出后关闭覆盖层

输入覆盖层：对于少量的字段输入，直接在覆盖层上修改

弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程

交互

实时可见：对于很重要的操作，应当放在界面中，并且实时可见

悬停即现：对于不是很重要的又必须要有的操作，使用「实时可见」影响阅读，可以在鼠标悬停时显示操作项

开关显示：如果某些操作只需要在特定模式时显示，可以通过开关来实现

可视区域和可操作区域：可视区域不能和可操作区域一样给人一种可点击的感觉，在某些情况下，可增加可点区域来增加响应范围

过渡

在视图变化时保持上下文

滑入滑出：可以有效构建虚拟空间

传送带：可极大的扩展虚拟空间

折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间

解释刚刚发生了什么

对象增加：在表格或列表中，新增一个对象时，需要高亮新增项，并且高亮在几秒之后消失

对象删除：在表格或列表中，删除一个对象的时候，需要将删除的过程呈现出来（向左滑出，向右滑出）

对象更改：在表格或列表中，更改一个对象，能直接在表中修改最好不要以弹窗的形式来修改，修改完之后需要高亮显示修改项以提示用户修改内容

对象呼出：点击页面中的元素，呼出一个新的对象，以弹框的形式来呈现

反馈

查询模式

自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为「确定类目」、「不确定类目」两种类型

实时搜索：随着用户输入，实时显示搜索结果。「自动完成」、「实时建议」

反馈模式

实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入

渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。有些不是很必须的内容可隐藏在界面之下，当用户点击或停留在某个按钮上时在显示

进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。常见的进度指示：「按钮加载」、「表格加载」、「富列表加载」、「页面加载」。可根据操作的量级和重要性，展示不同类型的进度指示

点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容，新内容需要高亮显示几秒钟

定时刷新：无需用户介入，定时刷新内容，刷新内容需要高亮显示几秒钟

实时刷新：在添加信息的时候需要实时刷新，添加的内容，之后需要高亮显示几秒钟

数据输入

文本输入

文本框（Input）：输入的字符数较少的时候使用单行输入形式

文本域（Textarea）：长篇幅的单一文本的录入使用多行的文本区域

输入提示和帮助：为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户（注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一）

• 在输入框内增加暗提示以帮助提醒用户

• 在输入框末尾提供输入提示的图标供用户点击查看输入提示信息

• 在输入框下面显示帮助信息提醒用户

  注意：这里做一个规范：输入提示文案较少的直接在输入框中加暗提示用户。提示文案较长统一放在输入框末尾，借助一个图标或者提示工具显示提示文案。输入错误提示统一放在输入框的下方。

搜索（Search）

搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。

选择录入

单选框（radio button）：所有选项默认可见，单选框应多余2个，少于5个

复选框（checkbox）：在表单提交，和状态转换情况下使用

开关（switch）：当用户切换「开关」按钮将直接触发状态改变

选择列表（Dropdown）：允许用户选择一个或者多个选项，选项应该多余五个，选项按逻辑排序，内容显示完整。

滑块选择（Slider）：设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项，当用户需要精确数值的时候可以和数字输入框配合使用

穿梭框（Transfer）：穿梭框用直观的方式在两栏中移动元素，完成选择行为。穿梭框正常使用左右布局，如有需要可上下布局

日期选择器（DatePicker）：日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。尽量比较主观性的存在

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

数据展示

数据展示需要注意：

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

表格（Table）：表格中的时间、状态、操作栏需保持词语完整不过行；当数据为空时，可使用『- -』来表示暂无数据。

折叠面板（Collapse）：导航中使用，适合冗长的，无规则的内容管理。对于折叠内容批次之间关联度较低时，使用手风琴模式，手风琴模式只允许单向内容区域展开。

卡片（Card）：根据栅栏进行排列，一行最多不超过四个。在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』

走马灯（Carousel）：适用于官网首页和产品介绍页等展示型区块。轮播的数量控制在3-5个之间，设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知。

树形控件（Tree）：用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。

时间轴（Timeline）：垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。每一条信息以时间为主轴，内容可涵盖主题、类型、相关的附加内容等等。适用于包括事件、任务、日历标注以及其他相关的数据展示。

数据格式

设计目标

规范数据表达，保证直观准确一致的理解数据

数值

数值用来表示计量大小，可单独出现或搭配数字符号进行使用。

• 使用千分位帮助用户阅读（123133：123,133）
• 计量单位使用小写字母（123133kg：123,133kg）
• 用分数的形式表示事项的进展（12/33）
• 表格中的数值分布排列时，统一采用右对齐方式，方便用户快捷读取比较数据
• 表格中的数值计量单位需要放在表头中，默认右对齐

金额

货币单位的使用和表示

• 重要的结算凭证和各种交易票据需要使用大写数字确保数据无法被修改，格式「货币名称+金额数字」

• 小写金额格式「货币符号+数字」

• 大额计量中，如果有万亿级别可以使用万亿作为单位(千不能作为单位)

日期和时间

绝对时间

针对时间进度较高的用户，强调时间发布的精确时间点，有回顾过去内容并通过绝对时间检索信息的诉求

日期格式：标准化如下：

• 年月日：默认使用「yyyy-mm-dd」格式，如：2020-04-09

• 专用名词：含有月日的专用名词，应采用间隔号「·」将月、日分开，并加引号，如：“6.1 儿童节”

• 日期范围：两个时间通过波浪号连接～，如：2020-04-09～2020-04-10

  时间格式：默认使用二十四小时制

• 二十四小时制：HH:mm:ss，如：14:28:00

• 十二小时制：h:mm:ss，如：2:28:00 PM | 2:28:00 AM

标准格式：日期和时间连在一起时，两者之间用空格隔开，如：2020-04-09 14:28:00

相对时间

时间精度并不是很重要，重要的是信息的即时性

• 一分钟以内，展示形式：刚刚
• 一个小时以内，展示形式：N分钟前
• 24小时以内，展示形式：N小时前
• 24小时以外的时间，展示形式：用 mm-dd HH:mm 的形式表示，即「04-09 14:28」
• 超过一年的时间，展示形式：用 yyyy-mm-dd HH:mm 的形式表示，即「2020-04-09 14:28」

数据脱敏

数据脱敏是指对一些比较敏感的数据进行变形虚化等相关操作，实现对敏感数据的可靠保护。这里将按照通用的产品规范进行脱敏操作，可根据实际的业务场景进行调整。

全部脱敏：对于金额、时间等重要敏感信息，需要对所有的数字进行脱敏操作，数据用一个「***」代替。

部分脱敏：一般用于需要部分信息进行识别的状况，只需要对部分信息进行脱敏处理，但数字真实位数保留。数据脱敏部分用「*」代替。

• 姓名，两个字的显示第一个字符，后面的隐藏，三个字的显示第一个和最后一个，中间隐藏
• 手机号，保留手机号前3位与后4位
• 身份证号，保留前三位和后三位，仅能识别该人的省市与是男是女
• 联系地址，保留省市区
• 邮箱，保留主机名和前三位字符
• 银行卡号，保留前六位和后六位，仅能识别发卡行与小部份个人账号标识

数据状态

无数据

无数据使用「--」表述

数据加载

数据加载用「骨架屏」显示，骨架屏是和loading一样的功能，不过骨架屏可以提前让用户知道页面的布局

文案

在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。 在使用和书写文案时有以下几点需要注意：

• 从用户角度出发
• 表述一致
• 重要的信息放在显著位置
• 专业、精准、完整
• 精简、友好、正面

按钮

设计目标

• 指导用户采取你希望他们采取的行动。
• 帮助用户避免犯错。

常规按钮

次按钮：用于非主要动作，如果不确定选择哪种按钮，次按钮永远是最安全的选择

主按钮：突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮

文字按钮：弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列

图标按钮：图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面

• 需要在较小的空间内展示尽量多的按钮
• 使用纯图标按钮必须有 Tooltip 提示按钮含义

按钮中添加图标：用于对按钮含义补充解释，提高按钮识别效率，不要强行为了美观给按钮添加图标

按钮强调

常规按钮类型呈现出不同的强调程度，使用者可以据此变化出合适的按钮类型

Do&Don't

• 不要在一个按钮区放置超过一个主按钮
• 不要在按钮中放置两个图标
• 操作无主次，次按钮是最安全的选择
• 按照主次展开全部操作，将次要操作收纳至下拉按钮中

特殊按钮

危险按钮：警示用户该操作存在风险

幽灵按钮：置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式

行动号召按钮：经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于 landing page 或者 一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮，例如：模板显示界面的新建模板按钮

按钮位置

将按钮区放置于用户浏览路径中，便于被用户发现，如 “F 浏览模式” 和 “Z 浏览模式”

• 表单中的按钮跟随，头部和尾部按钮需要靠右放置
• Header：主题的标题和摘要信息内容区的导航等
• Body：具体内容
• Footer：主题的补充信息和工具栏等
• Body 区部分内容被折叠或隐藏，例如单屏无法展示完整内容；
• Body 区的内容复杂度高，例如有多个分组，分组中又有独立的按钮区，这时候需要将该主题的“完成”操作从 body 区区分出来，避免混淆按钮所能影响的内容范围。

按钮顺序

• 对话习惯：按钮放置顺序类似于电脑和用户的对话，优先询问用户可能需要执行的操作，或你希望用户执行的操作，最后向用户提供存在风险的操作。

• 方向性含义：例如，具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。

• 多个按钮形成一组时，将按钮排列在一起即可。

• 当需要布置的按钮数量过多，可以把相关的动作组成一组，并采用相似的视觉设计。

按钮文案

文案需清楚传达用户按下按钮时系统将执行的操作。

• 必须使用动词。（下拉按钮除外）

• 与语境紧密关联，用语简练。

• 描述任务结果：发布、登录、注册

  发布、登录、注册

• 主要操作也为否定含义时，强调后果：你确定要删除它吗？删除 / 取消

  你确定要删除它吗？删除 / 取消

数据展示模板

设计原则

• 组织性：有逻辑地定义布局，有组织地排布内容
• 突出重点：将视图重要部分放在页面的顶部和左上方
• 信息准确：使用正确的图表类型和注释保证数据的准确性、清晰度和完整性

注意：

• 数据高度概括时，通过指示卡+数值的方式展示
• 页面中尽量突出核心指示
• 页面总模块需要控制在5-9个之间，防止信息过少过载
• 使用查询功能，让用户在观察全局的同时也能查看细节

典型模板

概览

指标重要性平均时采用左图布局，需要强调主题时采用右图布局

模板-指标大盘：用来监控全局数据，并附带图表来辅助解读。涉及核心数据；指标卡模块；筛选器；图表区；

模板-监控：用来监控全局数据，通常是围绕着一个主题，展现多个维度的关键指标，并帮助用户快速发现异常。涉及核心数据；指标卡模块；图表区；地图；仪表盘；

分析

根据”总-分“结构将数据分析页面拆解成多个部分，多维度展示数据全貌

模板-多维分析：针对同一主题的多维度分析，涉及核心数据；指标卡模块；筛选器；图表区

明细

数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等。

模板-数据明细：常用语数据报表细节信息展示，涉及筛选器；图表区；数据明细表；

模板设计规范

页面布局

根据使用者身份的不同选择合适的页面类型

卡片组合方式

• 一张卡片放置一个主题内容

• 也可将相关性高的数据组合呈现在一个卡片中，并使用通栏分割线区隔。

可视化组件选择

当设计者对页面的结构有初步的思路之后，可根据信息粒度的大小来选择不同的可视化组件。信息粒度从大到小对应：指标卡和排行榜、图表、文本明细。

详情页模板设计

设计原则

• 直截了当：信息尽量平铺展示，如无必要，不要做大量隐藏、折叠等操作。
• 层次分明：按照接近原则，对信息分层分组展示，降低单个页面内信息复杂度。
• 化繁为简：减少复杂结构的使用，尽量使用相似结构和模块，降低结构差异对用户的干扰，让用户更聚焦于信息本身。

设计思路

基础布局

基础详情单页直接平铺所有需要展示的的信息，推荐使用这种详情展示方式。

模板-基础详情：将主体内容呈现于一整张卡片中，使用不通栏分割线将相关内容分组。需要展示内容量少，复杂度低的信息时使用。

模板-单据详情：展示某个审批单据的详细信息，将内容复杂度较高的各模块使用卡片区割开来。适用于审批流程和审批明细展示，以及部分审批操作。涉及到通过、驳回、转交、加签、挂起、撤回等操作

复杂布局

将信息复杂度较高、相关性较弱的信息拆分为多个部分，并通过 页签 、分步、卡片分区、卡片内分组等形式按照相关性分组，用来处理复杂度较高的详情内容。

模板-高级详情：当详情页内容量大复杂度高时，不得不拆分为多个页签，作为辅助导航引导用户浏览信息。

模板-发布流程：将内容分阶段组织，了解不同阶段的事项。适用于需要协同的流程。

设计建议

模板选择：根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。

区隔方式：根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。

• 不通栏分割线：将相关内容分开；
• 通栏分割线：将内容分成多个部分；
• 卡片：放置一个主题；
• 页签：对象描述信息最顶层组织方式，如按版本组织、按意图组织、按阶段组织；

内容组件：根据不同的信息类型和复杂度选用对应的信息呈现方式。按复杂度由低至高，提供以下组件供选择：

导航栏：200px，背景颜色：#2A333D

顶部控制层：65px，背景颜色：#2A333D

正文部分：左边距：20px，上边距为0px，背景颜色未定

所有图标大小：width：30px；height：30px，图标颜色未定

标签栏：60px；，标签颜色未定

标签大小：width：78px；height：32px，上下边距：14px

面包屑：50px，面包屑颜色未定

剩余部分：正文

色彩体系

颜色映射原则

色调（H）：通过颜色的不同色调来描述不同的分类数据，数据本身之间没有高低之分，如：水果中的苹果、桃子、猕猴桃，可以使用红黄绿来分别表示，红黄绿就是三种不同的色调。

饱和度（S）：对于有序的数据类型建议使用饱和度来区分

明度（B）：对于无序数值型建议使用明度来表示

饱和度和明度一般会混合使用，为了更好地区分。

色板类型

分类色板

常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等

基础10色：

扩展20色：

顺序色板

用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等

单色顺序色板：

邻近色顺序色板：通过两个或两个以上的色相，可产生更多色彩分级，表达更多的连续数值，常用于热力图中的热度变化

发散面板

一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化，常用于气温的冷热、海拔高低、股票涨跌等

叠加色板

将两个顺序色板通过图层叠加产生一组新的色板，一个颜色表示两种变量数据，一个色板表示两种数据的变化。常用于观察一个事物两个维度变化的相关性，如胖瘦和高矮两个维度的人数分布中，瘦且高的人群分布。

例如：下图，越往右上角的颜色表示身高越高体重越重，越往左下角表示身高越低体重越轻，也间接的显示了体重和身高的大致关系

强调色板

对比突出重点和特定数据，将重点关注的数据标以高饱和度的强调色，其他普通数据标以低饱和度、低透明度的基本色，以此突出重点关注的数据，常用在不同类型之间的对比。

推荐9色：

推荐19色：

语义色板

色彩规范

避免使用过多颜色：高亮数据不超过8个，多余的默认使用灰色，通过交互查看

数据映射规则从简：同种数据映射规则只能使用一种

选择准确的色板：选择准确的色板类型，如下图使用分类色板不适用连续色板

解释使用到的颜色：当图表中出现不同颜色时，需要向读者解释颜色代表的含义

保持颜色的一致性：对于统一度量，使用同样的颜色方案，而且在整个页面（通常是仪表盘）使用时，注意保持整体颜色方案的一致性

顺序色板需均衡：均衡选色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不变，调节 L 值进行等距取色

组件设计模式

导航

全局导航

侧边导航

• 很多菜单时使用，建议菜单多于 6 项时使用；

• 可以承载多个层级，但建议 1-3 个层级；

• 企业级产品推荐使用侧栏导航，其可见性更好易于扫读，各菜单重要性受菜单排列顺序影响较小。

  

顶部导航

• 各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次；

• 建议 2~7 项内容使用；

• 建议 1-2 个层级；超出 2 个层级时，建议采用弹出式导航。

  

弹出式导航

• 用于拓展导航承载层级，适用于大型网站。

• 站点地图式导航可以让用户对整个网站的可用功能一目了然。

• 不要让用户延着狭窄的悬停路径获取导航菜单；

• 不要让用户逐层打开每层菜单去查找，低效又困难；

  真确使用：

  错误使用：

实用工具：通常放在网站的右上角。内容通常包括：全局搜索，通知中心，网站帮助，客服信息、购物车，收藏夹，登录工具，语言切换。注意：不要将页面内的操作放到实用工具中。

子站点导航

沉浸式导航：用于处理较为复杂或需要较大工作空间的任务。

多级站点导航

• 菜单数量较多的子站点使用；

• 子站点设计上，应明显区别于全站导航，使得进入子站点需要成较大的过渡波动，提示用户进入了新的空间。

  

页内导航

页头：页头位于页内容上方，主要作用是申明页面主题、页内信息导航、页面级内容操作。

树形控件：页面内多层次结构展示

锚点：在各个页面分区之间跳转，当平铺呈现的内容过长时使用。

回到顶部：快速回到页面顶部

走马灯：循环播放一系列内容

下钻式导航

点击进入信息架构下层内容，默认站内跳转，站外新开标签页，典型场景为列表下钻至详情。

返回类导航

面包屑：反映当前页面在网站结构中的位置，在少于三个层级是无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。

返回按钮：一般标题会和面包屑一起出现，有面包屑时标题默认不推荐使用返回按钮。页头中的返回按钮相当于一个短面包屑，用于返回上一层级页面。适用于子站点场景，该场景隐藏了全站导航，用户需要通过返回按钮回到上级页面。

联想类导航

步骤条：按照预先定义的顺序引导用户一步一步前后移动。在一系列页面的每一页上都展示步骤条，并标记当前页面在这条线性路径上的位置。适用于：

• 用户访问路径是线性的；

• 步骤条将复杂的任务分解为易于处理的小任务，减少用户出错，更快完成任务。

上下篇：协助我们移动到其他关系紧密的网页。

消息反馈

用于在必要时向用户反馈操作结果或传达消息。

设计目标

在不同事件下用户都能感知与操作场景和紧急程度匹配的结果反馈或消息提示，做到合理有效的信息传达。

反馈方式

在设计时需要考虑用户试图完成的任务以及需要引起注意的方式，采用何种反馈方式。反馈方式列举如下图：

使用方式

成功

对话框：在不跳转页面打断用户工作流程的前提下，告知用户重要的成功结果。

全局提示Message：在不希望在用户执行操作时中断用户前提下显示一条简短的提示消息。

跳转：独占式 Inline Text & Illustration

• 长流程步骤表单在最后告知用户成功结果；

• 需要展示较复杂的补充信息（例如配置信息详情）。

  

失败

对话框：提醒用户完成当前工作流之外的重要操作（例如警告信息不安全）。

警告提示alert：提醒用户系统中需要立即引起注意的错误信息。

表达校验提示

• 用户输入的内容不符合字段或表单的要求；

• 用户跳过了必填字段；

• 系统检测到表单数据中的错误。

  

通知提醒框 Notification

• 向用户告知重要的问题或失败状态，希望用户立马做出决策；

• 反馈后台进程失败&告警结果。

  

跳转

独占式 Inline Text & Illustration

• 长流程步骤表单最后出现第三方原因造成的失败结果（例如应用引擎创建失败）；

• 需要展示失败详情。

  

后台操作

通知提醒框 Notification

• 向用户告知重要的问题或失败状态，希望用户立马做出决策；

• 反馈后台进程结果。

  

通知中心

向用户通知相关活动信息（例如用户需要审批的项目或者用户申请的审批进程）。

空状态

简介

任何内容区域（页面、区块、组件、单数据）没有内容/数据显示给用户时，就会出现空状态。

• 空状态应给予提示，帮助让用户了解空状态原因，避免产生误解与迷失；

• 给予用户推荐操作提示，帮助用户摆脱空状态。

使用场景

新手引导：首次使用应用或功能场景的空状态非常有用，因为它向用户展示了该功能和流程，并且可以帮助用户快速上手。为了帮助首次使用新用户，空状态可以使用功能引导、帮助文档等方式填充原本为空的页面。

完成或者清空：这种空状态是用户自愿从功能上删除数据的情况。例如，客户完成了任务清单上的所有项目，阅读了所有通知。一般此类场景不需要进行操作引导，只需要用图形元素或提示信息进行空状态说明。

无数据：内容区域无数据的场景使用，由图形元素、提示信息、建议操作三类元素组合展示，根据使用场景决定是否提供建议操作。

表单页

简介

表单页是一种用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。

设计目标：帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。

设计原则

• 高效：通过合理地信息组织形式和表单组价应用，使用户可以快速完成表单页任务
• 明确：快速定位重要信息和目标选项；标题、选项、提示等内容准确传达含义；让用户感知不同大小操作的前因后果，并及时响应相关反馈。
• 安全感：合理的操作后果保障机制，例如针对复杂表单提供分布或即时保存机制；针对不同场景任务提供返回、重置、取消、清空、撤销等后悔药和速效药功能。

注意事项

• 一个表单页中针对同一种内容类型的表单项不要使用不同的组件或表现形式，会增加用户理解成本。

• 表单项的标题、提示不要使用不易理解的词汇或过长，造成理解成本，如不可避免使用少见词汇，可使用帮助说明等元素辅助设计。

• 预填提示避免正确的废话，例如一个叫姓名的表单项输入提示是“请输入姓名”。

布局设计

表单类页面模板聚焦于提交一次表单的过程体验。按照任务的复杂度，提供四种解决问题的布局方式：

• 普通布局
• 任务拆解和编排
• 特定场景

普通布局

平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。

模板-基础表单：平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。

任务拆解和编排

将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。尽管每部分内容单独处理，但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割，可以降低用户出错率。

模板-基础分步表单：将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务。

模板-分组表单：单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。

模板-可编辑列表

• 动态增减：建议条目表单数 ≤3 项，并且每个输入框不需要单独的标题使用。

  

• 可编辑表格：建议条目表单数 2 ~ 5 项 时使用，以使得每行内容可被完整呈现。

  

• 折叠面板编辑：建议条目表单数在 6 ~ 8 项 时使用。

  

• 抽屉编辑：建议条目表单表单数 >8 项 时使用。

  

• 规则树：运用于规则编辑场景，适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。

  

特定场景模板

模板-设置

• 个人档案、应用配置等设置类页面，使用频率较低，一般用户操作后不会频繁修改。

• 每个页面选择一种设计模式：即时生效模式和提交生效模式，设置项之间有关联关系使用提交生效模式

• 根据设置项数量确定是否分组：小于7，不分组；7-15，建议分组；大于15建议使用页签分组

  

模板-登录：Ant Design 标准登录模板

模板-注册：Ant Design 标准登录模板

布局设计建议

在单个表单页中需要根据内容量进行合理地布局，以兼顾页面展示和用户效率。表单页布局可由简到繁划分为 4 个梯度，每一级梯度都兼容前一种布局方式。

基础布局：在一个区域内从上到下单列布局，引导用户纵向阅读。

弱分组：在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。

区域内分组：当一个区域中内容较多且可被分类归纳时，可通过区分标题来进行区域内分组。

卡片分组：当一个页面中内容众多（通常大于两屏）且可被分类归纳时，可通过卡片分组来承载，每个卡片需要包含一个大标题。

布局方式判断：从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。

工作台

工作台常被作为应用的主页，是一个为用户提供便利的交通枢纽。工作台提供常用信息入口，以中心辐射的方式导航至应用的各功能模块；呈现用户当前需要关注的信息，缩短获取关键信息的路径；同时允许用户在工作台直接操作一些高频任务。

• 可寻性：用户是否能定位到他们想要的信息。
• 降低记忆负载：理解用户再次访问的核心目标，为可能的目的地提供最短导航路径。

降低

模板-工作台

什么时候使用

• 为用户再次访问缩短导航路径；
• 为用户提供常用导航入口。

涉及哪些功能

使用帮助；核心数据；快捷入口；待办清单；关注；运营模块。

设计建议

• 展示与日常工作相关模块，将总模块数量控制在 5-9 个；
• 尽量在首屏呈现最常使用的内容；
• 提供基于角色的差异化视图。

设计建议

选择合适的导航方式

这类页面一般会提供两类导航形式。

① 用户知道他想要使用的功能，需要利用导航获取。例如：

② 发现类导航，用户须完成某任务，但不知道使用哪个功能来完成。例如：

按照使用频次布置内容

用户在日常工作中最常使用的内容，按照使用频次将内容布置以下各区域。

列表页

列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。帮助用户更高效的查看、处理、查找条目。

• 易扫读：采用格式一致外观，突出有利于对象识别的关键信息。用富交互分层展示信息以减少认知负荷。
• 可寻性：列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息。

基础布局

单列布局：从上往下堆叠，数据过滤模块在最上方，过滤数据后，用户再由总体到具体的的浏览逻辑理解和分析。

双栏布局：将数据过滤模块放置在侧栏，当过滤条件过多，横向空间充裕时使用。

模板-查询表格：每条条目需要都需要露出很多字段；用户在搜寻条目时有准确的查询范围时使用。

模板-标准列表：提供每条条目的概览信息，点击列表可导航至条目详情。页面内常提供统计功能，供用户了解总体进展。可作为简易版的工作台使用。

模板-卡片列表：用户无需以特定顺序浏览条目，将每个条目以富有吸引力的方式呈现。

模板-搜索列表：以搜索为主寻找特定条目信息，通过关键词一次性在众多主题下的条目中搜寻结果。可对大量不同种类的内容进行搜索和筛选，满足对模糊目标的查找需求。

模板-成员管理：成员管理是用于展示和管理某对象中所包含的成员的基本信息和权限信息的页面，管理操作通常包括添加成员、删除成员、成员角色与权限赋予等。

设计建议

批量操作：页级的批量操作影响整个页面，建议置于页底

结果页

结果页是用一个页面反馈操作结果，是反馈模式中最强的一种。当完成一个流程操作后，需给与用户明确的结果反馈时使用，例如分步表单的最后一步。当有大量的信息需要在结果页展示时使用。向用户传达任务完成结果，引导用户进行下一步操作，通过有效的反馈建立起用户对系统的信任。

• 慎重使用：仅适用于吸引用户注意程度强、信息量较大、页面永久停留的场景中，其余场景不建议使用。
• 即时结束：当结果状态为成功时，可以默认提供几秒（建议 3-5秒）后自动跳转。
• 精简信息：结果页信息需精简，仅展示结果相关内容，特殊场景可以增加补充信息。

设计建议

• 标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。

• 操作引导建议不超过 2 项，过多操作会对用户选择造成困扰。

• 轻量的反馈不建议使用结果页，可以使用全局提示、警告提示、通知提醒框等交互方式。

• 若结果状态为成功时，可在主按钮上告知用户几秒后自动跳转。

设计模板

基础布局

结果页可提供以下内容：

1. 结果反馈：明确告知用户提交结果；

2. 结果解释（可选）：若需要对结果简要解释使用；

3. 建议操作：引导用户继续完成后续工作；

4. 补充信息（可选）：在通知结果的同时，有补充信息需要反馈给用户；营销模块。

模板-基础结果页

显示结果状态并引导用户进行下一步操作

模板-复杂结果页

除结果状态和引导操作等基础信息外，同时展示相关推荐、流程进度、错误详情等信息。

补充信息类型

图表页

标题

标题内容：言简意赅，不可被截断；
标题位置：正、副标题一般放置于卡片左上角，标题宽度不超过卡片宽度。

注意：如果标题长度真的需要超过卡片宽度，则将标题中间的文字省略，如：我是...标题

注释

注释内容：引用内容、数据来源等，保证正确性；
注释位置：一般放置于卡片左下角

轴

连续轴、时间轴：自动抽样 + 不旋转

分类轴：自动旋转 + 自动省略

元素显示

折线图面积图

柱状图

条形图

散点图

数据标签存在则省略轴标签

图例

图例位置

图例太多：使用翻页功能实现

图形设计指引

图形比例：以柱形图为例，柱子比例和两边间距的比例为 1：2：1，柱子宽度为总宽度的 60%

填充样式：根据图形元素在实际图表中的面积占比，我们定义了相应的填充样式。图形占比越大的图表，对应填充的透明度越高。如，在柱/条形图中，图形的填充比例为 95%；在面积图中，图形的填充比例为 25%。

异常页

用于展示页面异常状态，解释发生了什么异常，为用户提供相应建议或操作，避免用户感到迷失和困惑。

• 友好：使用友好、清晰的语言来表达，不要使用难懂的术语，让用户产生困惑。
• 提供邀请：引导用户进入下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。

异常页

当页面出现异常时展示，其包含以下要素：

1.配图：为沉重的异常增添一点乐趣，缓解用户烦躁心理；

2.异常代码/问题：当异常有具体的 HTTP 错误代码时，可予以展示；

3.异常描述：简明扼要地描述异常原因，方便用户作对问题作反馈；

4.建议操作：协助用户处理异常，或把用户引导回正确的路径上。

模板-404：用户请求访问的页面、项目、资源等未找到。

模板-403：无权限，可能包括无应用权限或无数据权限，根据实际情况向用户反馈。

模板-500：服务器出错，无法向用户提供服务。

模板-浏览器不兼容：当浏览器不兼容导致用户无法打开网页的时候使用。当浏览器不兼容，对操作影响程度不同，当并不严重影响使用时，可使用全局提示，允许用户继续使用。

空状态：当没有内容/数据显示给用户时，展示空状态。空状态也属于一种特定的异常页。

加载失败

当页面因为网络等各种原因加载内容失败时展示，一般结合重试操作。

设计建议

页面的整体交互流程可能是由不同状态构成的，设计者在设计页面时不能只关注理想状态，应完整考虑各类突发场景，防止用户在使用时体验中断。

理想状态：所有页面模块正常展示的状态；

部分状态：部分模块不存在或部分内容为空状态，设计参考空状态

加载状态：用 Spin 或 Skeleton 反馈加载中状态；

错误状态：系统错误、无权限等；

空状态：内容完全为空的状态，建议使用引导类的空状态提示，如果是新用户参考使用新人引导页。