UI设计职业技能体系

UI设计职业技能体系的思维导图，介绍了banner/海报、移动端、用户体验、交互设计、动效设计、网页端、图标、沟通能力等。

UI设计职业技能体系（UI学什么）

1. banner/海报

1. 概念

1. Banner图片主要是指的是网页导航图片，这通常可以体现网站的中心主旨，由背景图、LOGO和标语（或单位）构成。

2. 设计分类

1. 色彩分割

2. 几何边框

3. 2.5D

3. 分类

1. 字体

1. 字体变形

1. 子主题

2. 子主题

2. 遮盖阴影

3. 文字底部加背景

4. 字体描边

5. 投影，立体字

6. 其他字体

2. 主图

1. 主图要与文字相辅相成，图片要传达文字所要表达的内容，一般banner上会是左图右文/左文右图（在金融、信息等领域会使用这种表现方式）、中间图文等方式展现。

2. 主图可以放：人物（相关人物、电商模特等）、产品、插画（鼠绘、手绘）等。

3. 点缀元素

1. Banner中必不可少的还有点缀元素，可以是点线面的配合、虚实的变化、还有前后进深的变化。点缀元素带有方向性，通过对点缀元素的调整引导用户视觉。

4. 背景

1. banner中面积最大的要数背景了，那么背景也有几种表现形式，可以是纯色背景、位图背景、渐变背景、底纹背景等。

2. 移动端

1. UI文字使用规范

1. 字号： 在一款APP中字号范围一般在20-36之间（@2x）,字号还是要根据产品属性酌情设定。所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号

2. 字体： 一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体来区分重要信息和次要信息，进行信息层级的划分

2. UI颜色使用规范

1. 3种使用场景：重要，一般，较弱

3. UI输出规范

1. 标注示例

1. 页面标注

1. 标注工具

1. Mark Man

2. PX Cook

2. 标题栏

3. Banner

4. 菜单图标

5. 模块间隔

6. 图片+文字

2. 切图规范

3. 输出切片

4. 切片命名

1. 切片命名的通用规范是，界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接

5. 切图格式

1. 位图格式：PNG 24，PNG 8

2. 矢量图格式：PDF，SVG，WEBP

6. 优化

4. UI交互介绍

1. 交互设计

2. 信息架构

3. 流程图

4. 页面流

5. 线框图

5. UI版式设计规范

1. 版式设计（版面编辑）

1. 在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列

2. 原则

1. 对齐

1. 对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验

2. 对称

3. 分组

1. 将同类别的信息组合在一起，直观的呈现在用户的面前，能够减少用户的认知负担

3. 用户体验

1. 表现层

2. 框架层

3. 结构层

4. 范围层

5. 战略层

4. 交互设计

1. 需求分析

2. 设计实施

3. 动态用户界面设计文档输出

4. 成果检验

5. 动效设计

1. 按使用场景分类

2. 按动效功能分类

3. 按表格风格分类

4. 按呈现方式分类

6. h5+css

7. 切图与标注

1. 切图

1. 工具

1. cuntterman

1. 是一款在Photoshop中的插件

2. pxCook(像素大厨)

1. 是一款标注工具，也会是十分好用的切图工具

3. Sketch(Mac用户)

1. 如果你用的是Mac，也可以用stetch来切图，可以直接导出各个尺寸的切图。

2. 需求

1. 只要是没有办法通过代码来实现的就需要切图。什么是代码无法实现的呢？比如图标。如果你不清楚，请跟开发沟通，一般开发都会知道哪些是需要的。

3. 数量

1. 理论上，IOS我们需要切3套图，分别是@1x，@2x和@3x，这样做是为了更好的适配；而在实际工作中，iOS只需要切2套图就可以，分别为：@2x和@3x

4. 输出格式

1. 切图输出格式必须为png24位、png8位、jpg 3种格式，推荐PNG。

5. 压缩

1. 为了减小包的大小，所有切图尽量压缩后再给开发。图片大了，多了，不利于用户在使用app过程中加载页面，因此图片切图要尽量压缩图片文件的大小。

6. 尺寸

1. 切图输出大小必须保持为偶数。单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远。

2. 标注

1. 文字

1. 字体大小和颜色

2. 布局控件属性

1. 控件的宽高，背景色，透明度，描边和圆角大小（如果有圆角）等

3. 列表

1. 列表的高度，颜色，内容上下间距等

4. 间距

1. 控件之前的距离，左右边距

5. 段落

1. 行距

6. 全局属性

1. 如导航栏文字大小、颜色，左右边距，默认间距等，如果你之前跟开发合作过，在这方面开发了解就可以省略了

7. 工具

1. PxCook(像素大厨)

1. 有点可以将标注切图集成在一个软件中完成，支持Windows和Mac双平台

2. Parker

1. 尺寸，距离，文字大小，阴影，描边圆角，行高等

3. Mark Man

1. 高效设计稿标注工具，需要收费，免费版体验差

8. 网页端

1. 网页规范

1. 网页宽度为1920 高度不限，有效可视区：950px~1200px宽度，具体尺寸根据项目，客户要求以及用户群决定。首屏高约为700-750PX 主体内容区域1200。文档建立：文件宽度为1920PX 高度不限，RGB颜色模式， 分辨率72

2. 字体规范

1. 中文常用字体：宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方MAC)。英文常用字体：Times NewRoman、Arial、sans；

2. (1)中文字常用字号： 　　导航文字大小：14px、16px、18px、20px; 　　正文内容：12px、14px; 　　标题：22px、24px、26px、28px、30px; 　　辅助信息：12px、14px; (2)英文字常用字号： 　　标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息);

3. 页面等级

1. (1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个。注意：网站的首页只能有一个

2. (2)二级页面：从首页点击进入之后的页面叫做二级页面

3. (3)三级页面：从二级页面点击进入的页面

4. 视觉美观

1. 最基本的原则

2. 引起浏览者的注意

3. 融合动画、交互设计和三维效果等多媒体形式的UI设计

4. 技巧：对比与调和、对称与平衡、节奏与韵律及留白等

5. 界面效果协调：通过空间、文字、图形之间的相互联系建立整体的均衡状态

6. 页面效果：巧妙运用点、线、面等基本元素，通过互相穿插、互相衬托和互相补充构成完美的页面效果，充分表达完美的设计意境

5. 突出主题

1. 表达出意图和要求，包括简洁的文本信息或采用多媒体表现手法

2. 要求设计简练、清晰和精确，还在凸显艺术性的同时通过视觉冲击力来体现主题

3. 充分了解客户的要求和用户的具体需求，以简单明确的语言和图像体现页面的主题

6. 整体性

1. 内容和形式两方面

2. 网页界面设计中主要是指LOGO、文字、图片和动画等要素

3. 形式则是指整体版式和不同内容的布局方式，内容和形式高度统一

4. ①表现形式要符合主题的需要。一款页面如果只是追求过于花哨的表现形式，过于强调创意而忽略主要内容，或者只追求功能和内容，却采用平淡无奇的表现形式，都会使页面变得苍白无力，只有将二者有机地融合在一起，才能真正设计出独具一格的页面。

5. ②确保每个元素存在的必要性。设计页面时，要确保每个元素都有其存在的意义，不要单纯为了展示所谓的高水准设计和新技术添加一些毫无意义的元素，这会使用户感到强烈的无所适从感。

7. 用户考虑

1. ①使用者优先观念。UI设计的目的就是吸引用户使用，所以无论什么时候都应该谨记以用户为中心的观念。用户需要什么，设计师就应该去做什么。一款界面设计得再具有艺术感，若非用户所需，那也是失败的。

2. ②简化操作流程。依靠界面美观可以吸引浏览者，但是否能够留住用户靠的是界面中的各种功能及操作流程。此处需要遵循3次单击原则，任何操作不应该超过3次单击，如果违背这一原则就会导致用户失去耐心。

3. ③考虑用户带宽及网速。UI设计需要考虑用户的带宽及网速。对于当前网络高度发达的时代,可以考虑在用户界面中加入一些动画、音频、视频和插件等多媒体元素，借此塑造立体丰富的界面效果。在网页界面设计中，要想让所有浏览者都可以畅通无阻地浏览页面内容，那么最好不要使用只有部分浏览器才支持的技术和文件，而是采用支持性较好的技术，例如文字和图像。

8. 快速加载

1. 快速加载也是界面设计中需要考虑的一条准则。就现在的发展趋势而言，最重要的当属图片元素，为了加快界面的加载速度，需要从页面切图和优化图片的存储下手，能够通过代码实现的部分尽量不要切图，能用1像素平铺出来的就不切成2像素，能用32色存储的就不用64色。

9. 设计规范

10. 常见布局形式

1. 布局的原则

1. 网页布局的原则包括：协调、一致、流动、均衡、强调等，另外在进行网页布局设计的时候，需要考虑到网站页面的醒目性、创造性、造型性、可读性、和明快性等因素;

2. (1)协调：将网站中的每一个构成要素有效的结合或者联系起来，给浏览着一个既美观又实用的网页界面。

3. (2)一致：网站整个页面的构成部分要保持统一的风格，使其在视觉上整齐、一致。

4. (3)流动：网页布局的设计能够让浏览者凭着自己的感觉走，并且页面的功能能够根据浏览着的兴趣连接到其感兴趣的内容上。

5. (4)均衡：网页的布局设计要有序的进行排列，UI设计中网页的设计规范总结并且保持页面的稳定性，适当地加强页面的使用性。

6. (5)强调：把页面中想要突出展示的内容在不影响整体设计的情况下，用色彩搭配或者留白的方式将其最大限度地展示出来。

2. 常见布局模式

1. 　1.一栏式

1. 布局页面结果简单、视觉流程清晰，便于用户快速定位，但是由于排版方式的限制，只适用于信息量小，相对比较独立的网站。通常会通过大幅精美图片或者交互的动画效果来实现强烈的视觉冲击效果，从而给用户留下深刻的印象，提升品牌效果，吸引用户进一步浏览。由于首页信息展示量有限，一般需要在首页中添加导航或者重要入口的链接等。

2. 2.两栏式

1. (1)左窄右宽 　　左窄右宽的布局，通常左边是导航，右侧是网页的内容。用户的浏览习惯通常是从左到右、从上至下，因此这类布局的页面更符合操作流程，能够引导用户通过导航查找内容，使操作更加具有可控性、适用于内容丰富、导航分离清晰的网站。

2. (2)左宽右窄 　 内容在左侧，导航在右侧，这种结构是突出内容的主导位置，引导用户把视觉焦点放在内容上，然后才是去引导关注更多的信息。比如搜索网站，采用左宽右窄，重点突出搜索的信息，在右侧放次要信息和广告，体现出信息的主次。

3. (3)左右均等 　　这种一般网页左右两侧的比例相差比较小或者完全一致，适用于两边的信息重要成都均等的情况，不体现内容的主次。

3. 3.三栏式

1. 三栏式的布局方式对于内容的排版更加紧凑，可以更加充分的运用网站空间，尽可能多的展示信息内容，通常用于信息量非常丰富的网站，比如：门户网站、电商网页，学习类网站首页。

11. 常见板块划分

1. (1)头部区域-----top或header 　　Logo、主导航、搜索、注册、登录、版本等信息...

2. (2)主视觉区----banner 　　展示公司品牌形象、新品宣传、主题活动等轮播大图

3. (3)主要内容区---main 　　新闻动态、产品与服务、公司介绍等

12. 网页的颜色

1. (1)来自于LOGO的颜色　　(2)来自于环境的颜色　　(4)来自于产品的颜色 (5)公式：随意选择四个颜色，调整四个颜色的明度和直线色相 (6)选择一个符合你产品的任意颜色图片，然后在这个图片中提出出来四中颜色，来作为网页的主色调 (服装，饰品、化妆品类居多)

13. 需注意的问题

1. (1)高清大图，图片不能有水印 　　(2)有图片的位置最好配有文字说明不要大篇幅的图片摆放 　　(3)文字排版，标点符号不能在一行的第一个，不要一个文字为独立的一行 　　(4)如果色块中有文字，文字必须在色块的中心，不能上或者下留有太多空白空间 　　(5)如果箭头朝下必须有下拉菜单，如果下拉菜单是合起的状态，箭头朝右 　　(6)banner不能是现成图片，需要进行合成和设计，需要有文字的极差关系对比 　　(7)产品分类中必须有不同的产品体现 　　(8)在每一个板块中都必须体现明显的连接 　　(9)在网页设计中不要有重复图片，每个图片必须有一个部分是完整的 　　(10)图片素材不要直接用设计好的图片 　　(11)在板块中不要有纯图片的设计，一定有文字解释，有链接 　　(12)一个版块内的图片要选择同一种类型 　　(13)图片距离文字不要过近

9. 图标

1. 图标风格

1. 面形图标

1. 微渐变图标

2. 双色渐变

3. 不透明度图标

4. 轻拟物图标

5. 拟物图标

6. 图片图标

7. 文字图标

8. 图文图标

9. 折纸阴影图标

10. 插图图标

11. 叠加图标

12. 像素图标

13. YoGa图标

14. 2.5D图标

15. 低面建模图标

16. 扩大图标

17. 背板设计

18. 剪映图标

19. 其他

2. 线性图标

1. 传统线性图标

2. 粗线图标

3. 直角图标

4. 短点图标

5. 高亮图标

6. 中国风图标

7. 一笔速写图标

8. 双色图标

9. 多色图标

10. 插图图标

3. 线面结合图标

1. 线面结合图标

2. MBE风格图标

3. 微投影图标

4. 面型点缀图标

5. 线+轻拟物图标

4. 扁平化图标

1. 纯平面图标

2. 轻折叠图标

3. 轻质感图标

4. 折纸风图标

5. 折叠图标

6. 长投影图标

7. 立体化和厚度图标

10. 沟通能力

1. 1.有一个好的心态

2. 2.时时反思

3. 3.简单地做一下关键的、常用的几个词汇的定义。

4. 4.逐步定义其他“重要的”词汇

5. 5.尽量避免使用复合的词汇，直接切入底层具象的、简单的事情!

11. 表达能力

1. 1.要点突出：观点先行；运用 PREP 结构

2. 2.逻辑清晰：结构化表达；注意句子逻辑

3. 3.语言生动：具象化描述

4. 4.直击人心：抓痛点；说感受

12. 写作能力

1. 1.建立自己的知识框架，尤其是在自己擅长领域

2. 2.长期保持大量阅读输入，并对输入的内容筛选总结

3. 3.不管文笔如何，都要坚持写作，写的时间越长越顺手

4. 4.不断找到作品锚点

5. 5.持续优化，持续放大，才能源源不断收货价值

职业技能

1. 图标

2. banner/海报

3. 网页端

4. 移动端

5. 用户体验

6. 交互设计

7. 动效设计

8. h5+css

9. 切图与标注

10. 沟通能力

11. 表达能力

12. 写作能力