写给 UI 设计实习生的成长指南（中篇）

为一名在互联网行业摸爬滚打年的一位 UI 设计师，也在团队里带过众多 UI 设计师和实习生，所以深刻认识到论于团队是实习生个来说，制定这个《实习生入职白皮书》是相必要。

团：高效的管理+高质的项目输出
于实习生：快速了解团队+习系统性知识+质量成工作
于人：作一辈对后浪的社会责任+致力于提高内互联网设环境的理

掌握基础知识（入职前）

1. 阅读并掌握设计基础原则

学会站在巨肩膀上成长，多读书和多沉淀刚入新成长是至关要。

入职前必读书籍：

《写大家看设计书》

设计的基础原则，虽是很年前关平面的书籍，但是依适用 UI 界面设计。即便很多理论知识是大家很了解，是在运用却没法及时运用。基础原则将会成为后续检验设计合格与否基础标准。

《一个 APP 的诞生》

对落化移动端项目设流程的入门书籍，因部分的新人入行之很难接触落项目的验，都停留于学校的小组项目设或自发的 Redesign，这些与公司的落化项目还一的验知识差。所以，提形项目设的流程意识，后续作打好理论知识。

沉淀读书笔（按照章节）

沉淀是与自己意识流的一个程，辩证和有效的识吸收是与前人的思对，形成沉淀的习惯是诸位未来是否在业或思上进步的验证，有着各方面的意义与价值。就现在，你与我也在一番对…

设计 4 大基础原则

先当下设计的目的为何？当下互联网境的特殊在效率至上，而界面视设计传达上也为此服务。

提高人机交互下的界面操作效率，减少人机交互时间，设让人的时间释出多意义的事（陪伴家人，朋友的交流，感受自然的妙……）

情化计，针对哪些必须长期在人机交互下的用户提供高效的服外，同注情化计的注入，让人机的交流不至于枯燥无味的人文情关怀。

设计的目的为何？如何发挥设计的值？是在做设计过程中需要一直在心里发问的命题。

1. 亲密性原则（擅于使用距处理信息分组关系）

亲密为彼此相关的元素归组在一，成为一个视单元。「亲密」有助组织信息，减少混乱，为读者提高清晰的结构。

2. 齐原则（像素眼养成是 UI 设计师基本素养）

任何元素不能在页面上随意安放，每一项应当与页面上的某个内容存在某种视联系。对齐原则不仅仅是对用户视浏览习惯的考量，还是对页面中信息组织的考量。

利用对齐，符合用户的视觉惯性，降低用户阅读负担；利用不同的对齐形式，能效组织信息，让页面规整序、严谨观。

3. 重复（擅分析页面级结构，对级的定义与划分）

重复原则指：版面中的视觉素重复出，可以重复颜色、字体、图形、形状、质、空间关系。运用「重复原则」把同一级别的文字设置相同的文字样式，增加条理性，加强统一性。页面重复使用可以义不同层级的字体、字、字重。可以很直观把的信息分四信息层级：主标题、小标题、文、辅明文字。

4. 对比（对主要信息的强处理方法）

「对比」强调事之间的差异性，设时避免页面的视觉元素太过相似，如果元素之间了所不同，那么加反差，确保对比明显、页面清晰很必的。可以突出重点，丰富画面层次，打破呆板、活泼动。

2. 掌握基础设计软件+快捷键

UI 设计师需要掌握基础设计软件：Sketch/AI/PS/XD/AE/C4D

Sketch 快捷键

PS 快捷键(AI/XD 乎相同)

3. 深读设计规范

为一名 UI 设计师需要具备基础的设计规范识。基各个平台和各个优的设计规范，在此基础上辩证的学习及使用，打牢基础的战技能。

iOS 设计规范

IOS： https://developer.apple.com/ios/

Android 控件规范

• Material Design： https://material.io/components
• Ant Design： https://mobile.ant.design/components/white-space-cn/

Web 端控件规范

• Material Design： https://material.io/design
• Microsoft Design： https://www.microsoft.com/design

#基开对接的设计规范#

• antdesign： https://ant.design/components/layout-cn/
• element： https://element.eleme.cn/#/zh-CN/component/installation
• youzan： https://youzan.github.io/vant/#/zh-CN/tree-select

小程序设计规范

微信小程序： https://developers.weixin.qq.com/miniprogram/dev/framework/

入职前练习题（入职前必做）

入职前进设计练习和个设计不风格扩展思维训练，提前进入设计状态。所有练习题在入职日提交设计审核并作后续改。

1. 输出 3 套不风格图标设计

我/主页/数据/管理/设

2. 输 3 套同格的占位图设计

暂无结果/载失败

3. 输 1 套 APP 设计界面

工具类/社交类/音乐类

4. 输 1 套 web 设计界面

工具类：数据/列表/列…#官类#大屏展示类

入职第一日：软件与插件安装

1. 基础软件安装

• Sketch
• Adobe：AI/PS/XD/AE/
• C4D：（学版，自行官网用学证下载，一免费使用）

2. 插件安装

蓝湖插件：Sketch/PS/XD/（蓝湖：上传设计及切图，用于多协）

必备协同基础知识

1. iconfont 图标库使用方法

iconfont 是阿巴巴旗下的一个在线图标库，支持矢量图标的上传和下载。

iconfont 使用景：

1. 设计中需要快速使用到图标，搜索并下载所需的 SVG 式 icon，方便在设计中灵活更改
2. Web 端的项目需，将设图中的图标传至项目文件夹，方便端下载使用。

iconfont 图标制作要求

1. icon 必须以填充方式输出
2. 可为描边，需轮廓
3. 使用数值
4. 不用渐变和透明度

Iconfont 项目新建

1. 选择资源管理
2. 选择我的项目
3. 选择新建项目文件夹
4. 输入项目名称后建
5. 添加成员
6. 输成昵称（昵称需要确认是否人）
7. 理员可行人员权限分配

Iconfont 图标上传要求

多色 icon：择保留颜色交（可保留设计样式）

单色 iocn：选择去除颜色提交（1.统上传后视觉观感。2.防止白色 icon 上传后不便预览）

2. 邮件的正确使

邮件发送必须为公司邮箱，可使个人邮件

经发送不可撤回更改，内容需确认误

3. 图标的设计与切图

图标的格和参考线：

放大四倍进图标设计。如我们想设计个 48dp 图标，那么我们可以把画布放大到 400％（192 x 192 dp）来设计，这时可以显示 4dp 边缘。过保持这个比例，任何变化都将按比例放大或缩小，这样可以在画恢复到 100％（48dp）时保持锋利边缘和正确齐。

图标边距：

图标应该留出一定的边距，证不同面积的图标视显示一样大。果个图标具有类似的逻辑级，且同时在界面出现，注意它们的大小应尽量相等。

决视差：

调整面积，解决视觉差。形态不一的图标会导致一的视觉差，以下不同形状的参考宽距。

*调节不同形态 icon 视觉差例子：

统一图标的设计 DNA 原则

01 图标的类型：

Material Design 把图标分填充图标（Filled）、线性图标（Outlined）、圆角图标（Rounded）、调图标（Two-Tone）、尖角图标（Sharp）。无论什么类型的图标都统一图标的设 DNA，如线的粗细，圆角的小，图标的角度，图形的结合形式…

例：线性图标

02 描边粗细统一

图中的图标使了 2dp 的描边保持图标的一致性。如没有特殊原因，要使一种上的描边粗细，保证图标视觉上的统一。

icon 的切图

一. 移动端的切图：iOS、Android

视觉图标要和切图本身周留有间距，保证级别 icon 尺寸统一。或着整个切图还要和周围保持距离（通两倍），开发给的时候直接输大面积空白即可，这样就算他再马虎给你留间距，你的切图没有问题。

*例子：类 icon 保持统尺寸

01 sketch 制作移动端切图

1. 使形状工具
2. 画出需要切图区域
3. 将区域形状和需输出的 icon 编组
4. 选择导出区域图层
5. 将域形状透度调整为“0”
6. 择需要切图的元素/分组
7. 将区域形状与相应素材编组 – 添加导出标记

02 PS 制作移动端切图

方法一：

1. 使用形状工
2. 画需要切图区域
3. 将区域形状和需输出 icon 编组
4. 将区域形状透明度整为“0”
5. 选择需切图的元素/分组
6. 使用蓝湖插件切图标记

方法二：

1. 选择需要切图元素/分组
2. 将确定的长宽数值输对应框内
3. 点击标记切图

03 XD 制作移动端切图

1. 使形状工具
2. 画出需要切图区域
3. 选择导出区域形状图
4. 将区域形状透明度调整“0”
5. 将域形状相对应的素材编组 – 添加导出标记

. Web 端切图

Web 端 icon 为便开发使用与后期 UI 维护管理，需要将 iocn 上传至 iconfont（里巴巴图标库），上传至图标库需使用 svg 格。般将 icon 使用 AI 进新绘制导出，为保证 icon 级大小统，需要将画板进独立输出。

*注意事项：

论在 Ai，Ps，Sketch，XD 绘制矢量图标，图标边缘必须贴紧像素边缘，否则会出现显示模糊情况，从而降低设计质量。

. 点九切图法

点九是 Andriod 平台开发里的一种特殊的图片形式，件扩展名为：.9.png。如有一个气泡 bubble，那么它的.9 切图命名格式就是：bubble.9.png。这种图片告诉程序这个图片哪分可被拉伸，哪分要拉伸。我们要做的就是使 Photoshop 的铅笔工具，把铅笔设置成 1px 大小，透明 100%，颜色择#000000 纯黑色，然后在我们的切图边缘画 1 像素的横竖线，然后把这张图命名后缀上.9，就和系统打好了暗号了。后续，开发人员在开发环境就可设置哪些分可拉伸哪些需要保留了。噢对了，我们画的黑色「暗号」是会显示给户的。

结语

以上享了的《UI 实习入职皮书 2.0》1～4 章节，主要针对一些基础知识的总结和整理，希望能给 UI 新和管理者一些受用。