前端 UI 设计原则（基于Ant-design）

前端 UI 设计原则（基于Ant-design）

本文摘录自：AntDesign官网

1. 设计原则

1.1 亲密性
    纵向关系：三种间隔
    横向关系：栅格布局
1.2 对齐 Law of Continuity
    文案对齐：松散时确定统一的视觉起点
    表单类对齐：冒号对齐
    数字类对齐：右对齐，相同有效位数
1.3 对比
    主次关系对比
    系统保持中立不要诱导用户做出选择
    总分对比关系
    状态对比关系 - 静态和动态对比
1.4 重复
    相同元素在整个界面重复，识别关联性
1.5 直截了当  Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』
    直接操作的原理
    页内编辑（单击编辑）
1.6 足不出户 变化盲视（Change Blindness）心流（Flow）定义是一种将个人精神力完全投注在某种活动上的感觉
    能在这个页面解决的问题，就不要去其他页面解决（change blindness）
    覆盖层
    二次确认覆盖层，让用户有尝试的机会
    详情覆盖层
    输入覆盖层
    嵌入层
    流程处理：渐进式展现，配置程序，弹出框覆盖层
1.7 简化交互 费茨法则（Fitts's Law）
1.8 提供邀请 
    意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知
    可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，
    定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance
    静态邀请
    漫游探索邀请
    动态邀请
        悬停邀请，推论邀请，更多内容邀请
1.9 巧用过渡
    人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感
    Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
    Receding:  与当前页无关的信息元素应采用适当方式移除。
    Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
    在试图变化时保持上下文
        滑入滑出
        传送带
        折叠窗口
    解释刚刚发生了什么
        对象增加
        对象删除
        对象更改
        对象呼出
    改善感知性能
        当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
1.10 即时反应
    提供邀请 - 交互之前给出反馈，解决易发现问题
    即时反应 - 交互之后立即给出反馈

2. 视觉

2.1 色彩 色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的
    系统级色彩体系
    2.1 基础色板
        1-10 red / volcano / organge / gold / yellow / lime / green / cyan / blue / geekblue / purple / magenta
    2.2 中性色板 白 灰 黑
        1-10  gray
    2.3 色板生成工具
        color-1/10
    产品级色彩体系
    2.4 品牌色的应用
        第六个主色作为产品色
        功能色 -  blue - link  / green - success / gold-warning / red - error
        中性色 title - primary text - secondary text - disable - border- dividers - background - table header
2.2 布局
    布局系统 
    2.2.1 统一的画板尺寸 1440
    2.2.2 适配方案 主流分辨率 1920 / 1440 / 1366 / 1280
        左右布局的适配方案 左边的导航栏固定，右边的工作区域进行动态缩放 fixed auto
        上下布局的适配方案 两边留白区最小值定义，主内容区域动态缩放
    2.2.3 网格单位 网格基数是8
    2.2.4 栅格
        24栅格体系，为页面中栅格的gutter设置定值，column宽度随之扩大和缩小，gutter的宽度固定不变
        思想：
            清晰的定义动态布局范围
            尽量保持偶数思维
            关键数据的交付 gutter / column
            区块的定义从 column - column 结束
    2.2.5 常用模度 - 8倍数原则
2.3 字体
    2.3.1 字体家族
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol'
        数字字体 - fot-variant-numeric 设置为 tabular-nums 等宽字体
    2.3.2 主字体
        基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）
        12 - 14
    2.3.3 字阶和行高
        字阶是指一系列有规律的不同尺寸的字体
        行高可以理解为一个包裹在字体外面的无形的盒子
        字阶的选择尽量控制在 3-5 种之间，保持克制的原则
        font size - line height
        12 - 20
        14 - 22
        16 - 24
        20 - 28
        24 - 32
        30 - 38 
        38 - 46
        46 - 54
        56 - 64
        68 - 76
    2.3.4 字重
        regular - 400
        medium - 500
        英文字体加粗 semibold - 600
    2.3.5 字体颜色
        将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度
2.4 图标
    将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度
    2.4.1 设计原则：准确、简单、节奏、愉悦
    2.4.2 设计规格
        artboard - 1024*1024
        出血位 - 64px内边距 896*896
    2.4.3 分层
        artboard / 透明图层 / keyline 层 / 图形层
    2.4.4 轮廓线和模板 三角形和圆

3. 模式

3.1 概览
    完整的设计模式将包含示例，模板，组件三大实体部分
    ant design pro - 解决方案
    ant design components - reawct 实现，基础组件
    ant design library - 代码配套axure 资源包
3.2 文案
    从用户角度出发
    表述一致
    重要的信息放在显著位置
    专业、精准、完整
    精简、友好、正面
    3.2.1 语言
        明确立足点 - 用户和他们能用你的产品做什么，而不是你为他们做什么
        精简语句 - 省略无用词汇
        使用用户熟悉的语言 - 简单、直接、易于理解的词汇
        表述一致 - 描述同一事物词汇保持统一
        重要的信息放在显著的位置
        完整、直接的阐述信息
        用词精准完整
    3.2.2 语气
        拉近彼此的距离 - 你我他，你我不混用
        友好、尊重用户 - 多给用户支持和鼓励
        表述不要过于极端
    3.2.3 大小写和标点符号
        产品名称全称 首字母大写
        产品名称缩写 全部大写
        专有名词大小写规范
        全英文的标题、标签首字母大小规范
        统计数据使用阿拉伯数字
        省略不必要的标点
        谨慎使用感叹号
        基本标点规范
3.3 导航
    任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航
    注意：
        1. 尽可能提供标识、上下文线索，避免用户迷路
        2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本
        3. 尽可能减少页面间的跳转，让用户移动距离保持简短
    3.3.1 导航菜单 menu
        导航菜单是将内容信息友好地展示给用户的有效方式
        适用于浏览性强的门户性质以及比较前台化的应用 一级类目2-7个以内，中文字长2-6个
        侧边导航菜单 - 容易向下扩展，操作切换频率高的应用 layout component
    3.3.2 面包屑 breadcurmb
        告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系
        注意：
            层级过深，隐藏处理，页面保持在三级以内
            尽可能不适用面包屑
    3.3.3 标签页 tabs - 信息分类展示，分类标题长度为 2-6 个中文字
        基本样式 - 主功能切换
        卡片样式 - 包裹
        胶囊样式 - 选项切换
        竖状样式 - 分类较多的选项
    3.3.4 步骤条 steps
        步骤条是引导用户按照流程完成任务的导航条，可以帮助用户对操作流程长度和步骤有个预期
        横向流程 - 2-5步使用，文本长度12个字符
        纵向流程 - 页面左侧，悬浮固定，追加多行文字描述
    3.3.5 分页器 pagination - 表格、卡片搭配使用
        当有大量内容需要展现时进行分页加载处理，分页器可以让用户清楚的知道
        自己所要浏览的内容有多少、已经浏览了多少、还剩余多少
        标准样式
        迷你样式
        简易样式

4. 数据录入

数据录入是获取对象信息的重要交互方式
4.1 文本录入
    文本框 - 单行的输入形式
    文本域 - 多行文本区域
    提示和帮助 - 帮助提醒用户、label搭配
    搜索框
4.2 选择录入
    单选框 radio button
    复选框 checkbox
    开关 switch - 立即生效
    选择列表 dropdown - 选项多于五项时使用，按照逻辑排序，内容完整
    滑块选择 slider - 音量、亮度、色彩饱和度
    穿梭框 transfer - 两栏中移动元素
    日期选择器 datepicker
4.3 文件上传 upload
    简单点击上传 
    显示略缩图上传
    拖拽上传 - 需要提供明确的文件大小和格式、进度提示

5. 数据展示

合适的数据展示方式可以帮助用户快速地定位和浏览数据，以及更高效得协同工作
注意：
    依据信息的重要等级、操作频率和关联程度来编排展示的顺序
    注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等
5.1 表格 table
    表格中的时间、状态、操作栏需保持词语完整不过行
    当数据为空时，可使用『- -』来表示暂无数据
5.2 折叠面板 collapse
    如果折叠内容彼此关联，使用手风琴
5.3 卡片 card
    适合较为轻量级和个性化较强的信息区块展示
    卡片使用栅格排列：一行不超过四个
    有限的卡片空间注意信息之间的距离，可做截断处理
5.4 走马灯 carousel
    平级内容的并列展示，常用于图片或卡片轮播，适用于官网首页产品介绍页等展示区
5.5 树形控件 tree
    逐级大纲的形式来展示层级关系，如文件夹、组织架构、生物分类、国家地区
5.6 时间轴 timeline
    垂直展示的事件流信息，倒叙记录事件
    适用于事物、任务、日历标注等

6. 反馈

为用户在各个阶段提供必要、积极、即时的反馈
避免过度反馈，以免给用户带来不必要的打扰，能够及时看到效果的、简单的操作，可以省略反馈提示
6.1 提示信息
    6.1.1 警告提示 alert
        关闭按钮可根据业务需要增加或隐藏
    6.1.2 通知提醒 notification
        系统主动推送的重要的全局性通知信息，在系统右上角显示
    6.1.3 徽标数 badge
        聚合型的消息提示
        权重不高和不是用户特别关心的消息提示，使用红点做提示
    6.1.4 气泡卡片 popover
    6.1.5 文字提示 tooltip
6.2 过程反馈
    操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感
    6.2.1 加载状态进度反馈
        若加载时间较长，应提供取消操作
    6.2.2 录入反馈
        反馈文字紧跟着要说明的区块（反馈内容一般是错误说明），不自动消失（当用户进行相应的交互操作后才消失
    6.2.3 气泡确认框 Popconfirm
        在目标元素附近弹出浮层提示，询问用户
6.3 结果反馈
    操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感
    6.3.1 顶部全局提示反馈 message
        顶部剧中显示并自动消失，不打断用户操作的轻量级提示
        比较重要的失败通知，使用对话框的形式进行通知，以避免用户遗漏信息
    6.3.2 对话框反馈
        除失败时避免显示不必要的提醒弹窗。弹窗是很强的反馈机制，
        只有在传递非常重要，且可操作的信息时才需要使用它