UI&UE设计规范

前言

本人是一名移动端开发人员，根据自身10年开发经验结合对UI、UE的学习，总结出一套通用设计文档，持续更新改进中…

1、什么是设计规范

设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。 设计规范是针对特定产品指定的一整套标准，也就是说不同的类型产品规范会有所差异！

2、设计规范的目的

给产品内部的成员提供统一的规范和指导，使得设计人员能形成良好的思考习惯和设计习惯，提高整个产品质量，使操作更加人性化、减轻用户认知负担，改善产品用户体验，提示产品核心竞争力

3、使用范围

系统所有产品开发人员，包括：产品经理、UE工程师、需求人员、UI工程师和其它相关技术开发人员。规范可以帮助个人、团队以及整个企业提高效率和产出质量!

4、字体字号使用规范

1.字体与展示级别

相同级别、相同功能、相同模块中字体要统一字号、字体、行高及颜色。 文本文字一般设有三种颜色：基本文字颜色（标题#333333，内文#666666）和辅助不可编辑颜色（#999999），特殊需要突出文字可使用辅 助蓝#33ACFB或点睛绿色#8DC21F。 字体的行距统一为字体大小的1.5倍～2倍

2.字体与用途

一般下划线文本代表跳转链接，划线字体表示废弃

3.字重

是指字体笔画的粗细，字体中很重要一个概念，不同字重传递出来视觉感受完全不一样。一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等

在这里插入图片描述

5. 配色使用规范

5.1 确定主色调

主色是决定了画面风格的色彩，但往往不会大面积使用，通常在导航栏、按钮、icon、特殊页面等位置出现，会有点睛、定调的作用

在这里插入图片描述

5.2 色彩一致性

界面设计中，出现过多配色会使界面显得有些杂乱，在色相不改变的情况下，可以设置颜色的透明度、明暗度的关系，这样既能保证界面设计的一致性，又能避免限制视觉设计师的发挥空间，是界面更加色彩内容更加丰富。 统一的主色调也能让用户找到品牌感的归属。

在这里插入图片描述

在这里插入图片描述

4.3 颜色配用根据颜色自身具有的特性来使用

例如：红色具有危险／橙色具有警告／蓝色具有平稳／绿色具有舒畅等特性，符合用户的习惯性认知，不用做过多解释用户就能懂，从而节省培训成本。

在这里插入图片描述

6 界面与布局

1.移动端

1.移动端以750*1282分辨率为基准，对界面展示进行设计

在这里插入图片描述

2.底部Tab和顶部导航区域的展示规范

在这里插入图片描述

在这里插入图片描述

3.内容区域移动端常见的交互框架

在这里插入图片描述

4.内容区域展示为空的时候可以用一些空状态图表标来占位，一般根据黄金分割比进行放置

在这里插入图片描述

5.列表展示，列表是移动端最常见的表现方式

在这里插入图片描述

6.弹窗

在这里插入图片描述

2.网页端

1.网页基本布

页面整体模块布局以对齐方式，上下左右对齐布局。避免垂直分隔线不规整的现象。导航布局方式以文字、导航条背景为主用隔线分开。导航文字字号16px，背景条高度32px。 界面风格：采用当下流行的扁平化设计，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.模态框

广泛用于二次确认，二级表单操作等场景，其展示,布局一用于比较简单的弹窗，如退出登录，较复杂的表单采集可用布局二、三来展示。

在这里插入图片描述

3.内容区展示

. 界面中模块外及模块内都设置15px的留白，使内容有规律、有空间地摆放在一起，减轻用户的视觉疲劳！图标和图标之间间隔20px； 图标和文字组合之间间隔10px； 图标文字和图标文字之间间隔20px；

在这里插入图片描述

在这里插入图片描述

7 组件、控件规范

1.基础功能按钮

1.按钮根部不同功能、优先级和不同状态对按钮的展示进行区分，能在视觉和感官上给用户以更优的体

在这里插入图片描述

1.必填项标识*（如果整个项都是必填项，不用添加标识*，系统中用到的*号都统一放置到字符串的前上方位置）； 2. 底框是可以点击编辑内容的，鼠标滑入效果参考表单详细规范，点击后要有光标闪烁提示在此输入内容信息； 3. 默认不可编辑时底色变成灰色（#f5f5f5）文字低亮（#999999）显示； 4. 点击弹出日历控件（参考日历规范）； 5. 按钮操作区域统一居右显示； 6. 当提交出现问题时，无法提交，用红色标注问题处，修改正确后再提交； 7. 按钮点击后要出现反馈弹出层 例如：提交成功 保存成功 让发出去的动作得到很好的回应，提高用户体验；

在这里插入图片描述

在这里插入图片描述

8 图的使用规范

1 图标

线条和色彩的不同组合可能形成线性、面性、彩色、写实四类图标，内容复杂的界面适合更简单的线性图标内容较少则适合面性图标展示

移动端常用的图标和类型

2 插图