ui design

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

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

本⽂摘录⾃：

1.设计原则

1.1亲密性

纵向关系：三种间隔

横向关系：栅格布局

1.2对齐LawofContinuity

⽂案对齐：松散时确定统⼀的视觉起点

表单类对齐：冒号对齐

数字类对齐：右对齐，相同有效位数

1.3对⽐

主次关系对⽐

系统保持中⽴不要诱导⽤户做出选择

总分对⽐关系

状态对⽐关系-静态和动态对⽐

1.4重复

相同元素在整个界⾯重复，识别关联性

1.5直截了当AlanCooper所⾔：『需要在哪⾥输出，就要允许在哪⾥输⼊』

直接操作的原理

页内编辑（单击编辑）

1.6⾜不出户变化盲视（ChangeBlindness）⼼流（Flow）定义是⼀种将个⼈精神⼒完全投注在某种活动上的感觉

能在这个页⾯解决的问题，就不要去其他页⾯解决（changeblindness）

覆盖层

⼆次确认覆盖层，让⽤户有尝试的机会

详情覆盖层

输⼊覆盖层

嵌⼊层

流程处理：渐进式展现，配置程序，弹出框覆盖层

1.7简化交互费茨法则（Fitts'sLaw）

1.8提供邀请

意符（Signifiers）：⼀种额外的提⽰，告诉⽤户可以采取什么⾏为，以及应该怎么操作；必须是可感知

可供性（Affordance）：也被翻译成『⽰能』，由提出，

定义为物品的特性与决定物品⽤途的主体能⼒之间的关系；其中部分可感知（此部分定义为PerceivedAffordance

静态邀请

漫游探索邀请

动态邀请

悬停邀请，推论邀请，更多内容邀请

1.9巧⽤过渡

⼈脑灰质（GrayMatter）会对动态的事物（eg：移动、形变、⾊变等）保持敏感

Adding:新加⼊的信息元素应被告知如何使⽤，从页⾯转变的信息元素需被重新识别。

Receding:与当前页⽆关的信息元素应采⽤适当⽅式移除。

Normal:指那些从转场开始到结束都没有发⽣变化的信息元素。

在试图变化时保持上下⽂

滑⼊滑出

传送带

折叠窗⼝

解释刚刚发⽣了什么

对象增加

对象删除

对象更改

对象呼出

改善感知性能

当⽆法有效提升『实际性能』时，可以考虑适当转移⽤户的注意⼒，来缩短某项操作的感知时间，改善感知性能。

1.10即时反应

提供邀请-交互之前给出反馈，解决易发现问题

即时反应-交互之后⽴即给出反馈

2.视觉

2.1⾊彩⾊彩在使⽤时更多的是基于信息传递、操作引导和交互反馈等⽬的

系统级⾊彩体系

2.1基础⾊板

1-10red/volcano/organge/gold/yellow/lime/green/cyan/blue/geekblue/purple/magenta

2.2中性⾊板⽩灰⿊

1-10gray

2.3⾊板⽣成⼯具

color-1/10

产品级⾊彩体系

2.4品牌⾊的应⽤

第六个主⾊作为产品⾊

功能⾊-blue-link/green-success/gold-warning/red-error

中性⾊title-primarytext-condarytext-disable-border-dividers-background-tableheader

2.2布局

布局系统

2.2.1统⼀的画板尺⼨1440

2.2.2适配⽅案主流分辨率1920/1440/1366/1280

左右布局的适配⽅案左边的导航栏固定，右边的⼯作区域进⾏动态缩放fixedauto

上下布局的适配⽅案两边留⽩区最⼩值定义，主内容区域动态缩放

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,'SegoeUI','PingFangSC','HiraginoSansGB',

'MicrosoftYaHei','HelveticaNeue',Helvetica,Arial,sans-rif,'AppleColorEmoji',

'SegoeUIEmoji','SegoeUISymbol'

数字字体-fot-variant-numeric设置为tabular-nums等宽字体

2.3.2主字体

基于电脑显⽰器阅读距离（50cm）以及最佳阅读⾓度（0.3）

12-14

2.3.3字阶和⾏⾼

字阶是指⼀系列有规律的不同尺⼨的字体

⾏⾼可以理解为⼀个包裹在字体外⾯的⽆形的盒⼦

字阶的选择尽量控制在3-5种之间，保持克制的原则

fontsize-lineheight

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

英⽂字体加粗mibold-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概览

完整的设计模式将包含⽰例，模板，组件三⼤实体部分

antdesignpro-解决⽅案

antdesigncomponents-reawct实现，基础组件

antdesignlibrary-代码配套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个

侧边导航菜单-容易向下扩展，操作切换频率⾼的应⽤layoutcomponent

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选择录⼊

单选框radiobutton

复选框checkbox

开关switch-⽴即⽣效

选择列表dropdown-选项多于五项时使⽤，按照逻辑排序，内容完整

滑块选择slider-⾳量、亮度、⾊彩饱和度

穿梭框transfer-两栏中移动元素

⽇期选择器datepicker

4.3⽂件上传upload

简单点击上传

显⽰略缩图上传

拖拽上传-需要提供明确的⽂件⼤⼩和格式、进度提⽰

5.数据展⽰

合适的数据展⽰⽅式可以帮助⽤户快速地定位和浏览数据，以及更⾼效得协同⼯作

注意：

依据信息的重要等级、操作频率和关联程度来编排展⽰的顺序

注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等

5.1表格table

表格中的时间、状态、操作栏需保持词语完整不过⾏

当数据为空时，可使⽤『--』来表⽰暂⽆数据

5.2折叠⾯板collap

如果折叠内容彼此关联，使⽤⼿风琴

5.3卡⽚card

适合较为轻量级和个性化较强的信息区块展⽰

卡⽚使⽤栅格排列：⼀⾏不超过四个

有限的卡⽚空间注意信息之间的距离，可做截断处理

5.4⾛马灯caroul

平级内容的并列展⽰，常⽤于图⽚或卡⽚轮播，适⽤于官⽹⾸页产品介绍页等展⽰区

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对话框反馈

除失败时避免显⽰不必要的提醒弹窗。弹窗是很强的反馈机制，

只有在传递⾮常重要，且可操作的信息时才需要使⽤它