前端 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 / magenta2.2 中性色板 白 灰 黑1-10  gray2.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 统一的画板尺寸 14402.2.2 适配方案 主流分辨率 1920 / 1440 / 1366 / 1280左右布局的适配方案 左边的导航栏固定，右边的工作区域进行动态缩放 fixed auto上下布局的适配方案 两边留白区最小值定义，主内容区域动态缩放2.2.3 网格单位 网格基数是82.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 - 142.3.3 字阶和行高字阶是指一系列有规律的不同尺寸的字体行高可以理解为一个包裹在字体外面的无形的盒子字阶的选择尽量控制在 3-5 种之间，保持克制的原则font size - line height12 - 2014 - 2216 - 2420 - 2824 - 3230 - 38 38 - 4646 - 5456 - 6468 - 762.3.4 字重regular - 400medium - 500英文字体加粗 semibold - 6002.3.5 字体颜色将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度
2.4 图标将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度2.4.1 设计原则：准确、简单、节奏、愉悦2.4.2 设计规格artboard - 1024*1024出血位 - 64px内边距 896*8962.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 component3.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 气泡卡片 popover6.1.5 文字提示 tooltip
6.2 过程反馈操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感6.2.1 加载状态进度反馈若加载时间较长，应提供取消操作6.2.2 录入反馈反馈文字紧跟着要说明的区块（反馈内容一般是错误说明），不自动消失（当用户进行相应的交互操作后才消失6.2.3 气泡确认框 Popconfirm在目标元素附近弹出浮层提示，询问用户
6.3 结果反馈操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感6.3.1 顶部全局提示反馈 message顶部剧中显示并自动消失，不打断用户操作的轻量级提示比较重要的失败通知，使用对话框的形式进行通知，以避免用户遗漏信息6.3.2 对话框反馈除失败时避免显示不必要的提醒弹窗。弹窗是很强的反馈机制，只有在传递非常重要，且可操作的信息时才需要使用它

前端 UI 设计原则（基于Ant-design）相关推荐

基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
Joshua Porter 20条UI设计原则
原文链接地址: http://www.niushe.com/news/show-3683.html,转载请注明出处,侵权必究,谢谢! 设计师Joshua Porter发表了一篇文章--<P ...
软件工程·UI设计原则专题
由于UI设计原则很多而且微妙复杂,再加上自己本身对概念的理解也不是很充分,所以写这篇博客专门复习一下,因为有很多感觉都是其他原则的一个具体案例,所以详细程度是不一样的一.设计原则(UI design ...
Redux案例-基于Ant Design React
1.Ant Design介绍和环境初始化 Ant Design是一套面向企业级开发的UI框架,视觉和动效作的很好.阿里开源的一套UI框架,它不只支持React,还有ng和Vue的版本,我认为不论你的前 ...
UI设计原则背后的认知心理学
了解人的感官和大脑是如何工作的,去衡量及判断那些设计原则更靠谱;UI设计师需要确定哪个设计原则更适用于给定的环境,从而优选应用,UI设计师必须深思熟虑,而不是盲目的应用设计原则,应该理解其基本原则并有 ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
APP的UI设计原则及UI界面适配步骤
本文转载自http://www.cyzone.cn/a/20140619/259323.html 从最初的AppStore仅有不到500个APP,到现在,据统计APP近几年增加的数量已经超过3000, ...
优秀设计师应了解的UI设计原则！
没了解UI设计之前你是不是也曾经这么误解过UI设计师:为什么UI设计师的工资可以那么高?明明只是对着交互界面画色块跟线条吗?其实,真正优秀的UI设计师,是能够站在用户的角度做产品设计的,能力可是胜于美 ...

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

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

本文摘录自：AntDesign官网

1. 设计原则

2. 视觉

3. 模式

4. 数据录入

5. 数据展示

6. 反馈

前端 UI 设计原则（基于Ant-design）相关推荐

最新文章

热门文章