写给 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 使用场景：
- 设计中需要快速使用到图标，可搜索并下载所需的 SVG 格式 icon，方便在设计中灵活更改
- Web 端的项目需要，将设计图中的图标上传至项目文件夹，方便前端下载和使用。
iconfont 图标制作要求
- icon 必须以填充方式输出
- 不可为描边，需轮廓化
- 使用整数值
- 不可用渐变和透明度
Iconfont 项目新建
- 选择资源管理
- 选择我的项目
- 选择新建项目文件夹
- 输入项目名称后新建
- 添加成员
- 输入成员昵称（昵称需要确认是否本人）
- 管理员可进行人员权限分配
Iconfont 图标上传要求
多色 icon：选择保留颜色提交（可保留设计样式）
单色 iocn：选择去除颜色提交（1.统一上传后的视觉观感。2.防止白色 icon 上传后不方便预览）
2. 邮件的正确使用
邮件发送必须为公司邮箱，不可使用个人邮件
一经发送不可撤回更改，内容需确认无误
3. 图标的设计与切图
图标的网格和参考线：
放大四倍进行图标设计。如果我们想设计一个 48dp 的图标，那么我们可以把画布放大到 400％（192 x 192 dp）来设计，这时可以显示 4dp 的边缘。通过保持这个比例，任何变化都将按比例放大或缩小，这样可以在画面恢复到 100％（48dp）时保持锋利的边缘和正确的对齐。
图标边距：
图标应该留出一定的边距，保证不同面积的图标视觉显示一样大。如果多个图标具有类似的逻辑层级，且同时在界面出现，注意它们的大小应尽量相等。
解决视觉差：
调整面积，解决视觉差。形态不一的图标会导致一定的视觉差，以下为不同形状的参考宽距。
*调节不同形态 icon 视觉差例子：
