后台管理系统UI风格规则--Ant Design “设计” 中的一些实用点

后台管理系统UI风格规则

Ant Design “设计” 中的一些实用点

1.色值

主色调色板 Daybreak Blue / 拂晓蓝

image.png

中性色板

image.png

色彩应用

• 品牌色：建议选择色板从浅至深的第六个颜色作为主色 我们常用默认主色：#1890FF，应用场景：关键行动点，操作状态、重要信息高亮，图形化等场景。

• 功能色：应用场景：成功、出错、失败、提醒、链接等

  
  
  image

• 中性色：应用场景：文字、背景、边框、分割线等。Ant Design 的中性色是按照透明度的方式实现的，具体色板如
  图：

  
  
  image

更多：https://ant-design.gitee.io/docs/spec/colors-cn

2.暗黑模式

何时使用

• 当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
• 当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。

3.布局

• 适配：动态缩放
• 栅格：24 栅格体系，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
• 常用模度：8 倍数的双数组

4.间距

通过「小号间距」（8px）、「中号间距」（16px）、「大号间距」（24px）三种规格来划分信息层次

image

y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」

在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素（e.g. 分割线）来拉开信息层次。

5.表格

• 表格中的时间、状态、操作栏需保持词语完整不过行
• 当单元格数据为空时，可使用 - 来表示暂无数据
• 数值默认使用千分位帮助用户阅读 123,220
• 计量单位默认用小写字母 123,220kg
• 金额、数量等数值通常采用“右对齐”方式，快捷读取,又边于纵向对比
• 计量单位默认放在表头，右对齐，小写字母

image.png

image.png

—————————————————————————————————————————————

6.文案

• 从用户角度出发
• 表述一致（描述同一个事物的词汇、语法、语种、语序、操作的名称和目标页面标题的名称保持一致）

image.png

• 重要的信息放在显著位置
• 专业、精准、完整
• 精简、友好、正面（不应过于极端）

image.png

image.png

7.按钮

按钮类型

image

1）次按钮

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

2） 主按钮

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

3） 文字按钮

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

4）图标按钮

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

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

5）在按钮中添加图标

用于对按钮含义补充解释，提高按钮识别效率。

image.png

6 ）特殊按钮
虚线按钮、危险按钮、幽灵按钮等

按钮位置

image

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

image

什么时候需要在 Footer 中放置按钮区？（为了要和 Body 区区分开来）

• Body 区部分内容被折叠或隐藏，例如单屏无法展示完整内容；
• Body 区的内容复杂度高，例如有多个分组，分组中又有独立的按钮区，这时候需要将该主题的“完成”操作从 body 区区分出来，避免混淆按钮所能影响的内容范围。

image

按钮顺序

推荐操作是阅读的起点，折叠内容始终在最右侧。

image

按钮分组

屏幕快照 2021-01-26 15.48.49.png

---

布局相关：

8.导航

验证导航系统的设计好坏可对其进行压力测试：像跳伞一样跳进网站里，验证导航系统的极限。
1）忽略首页，随机直达网站某一页面；
2）看用户是否能知道当前位置以及与网站其他部分的关系。在哪个网站的哪个部分？上层网页是什么？
3）是否知道这个网页会带你到哪里去？链接文字是否能说明去向?

屏幕快照 2021-01-26 15.52.50.png

屏幕快照 2021-01-26 15.54.25.png

9.列表页

基础布局

image

页级的批量操作影响整个页面，可布置于页底。

模版

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

  
  
  image

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

  
  
  image

• 成员管理

  
  
  image

10.详情页

选择模版

image

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

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

  
  
  页签布局示例

当描述项多于9项时使用表格式，更快速定位到信息

流程类模版

区隔方式

image

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

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

总结

简单总结一下最主要思路和中心思想
1、首选light模式，特定情况（需要沉浸式/暗光）下选择dark暗黑模式
2、导航 按需，目的是帮助用户了解网站可用功能、当前位置、关系、去向
3、给内容区域最大的空间
4、根据内容选用合适模版、组件
5、注意布局与间距
6、注意排序、对齐、按钮、文案等