管理者寄语：UI实习生成长指南-中篇-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

编辑推荐

管理者寄语：UI实习生成长指南-中篇

0.0°

2021-03-23 原创文章 经验/观点 举报 5556 103 35 2

Blosson 关注

一.掌握基础知识（入职前）

1.1阅读并掌握设计基础原则

学会站在巨人的肩膀上成长，多读书和多沉淀对刚入行的新人的成长是至关重要的。

·入职前必读书籍：

1.《写给大家看的设计书》

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

2.《一个APP的诞生》

是对落地化移动端项目设计流程的入门书籍，因为大部分的新人在入行之前很难有接触落地项目的经验，大都停留于学校的小组项目设计或自发的Redesign，这些与公司的落地化项目还是有一定的经验知识差。所以，提前形成项目设计的流程意识，为后续工作打好理论知识。

·沉淀读书笔记（按照章节）

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

·设计4大基础原则

先了解当下设计的目的为何？当下互联网环境的特殊性在于效率至上，而界面视觉设计传达上也为此服务。

1.提高人机交互下的界面操作效率，减少人机交互时间，设计让人的时间释放出来做更多有意义的事（陪伴家人，和朋友的交流，感受自然的美妙……）

2.情感化设计，针对哪些必须长期在人机交互下的用户提供高效的服务外，同时注意情感化设计的注入，让人与机的交流不至于枯燥无味的人文情感关怀。

#设计的目的为何？如何发挥设计的价值？是在做设计中一个需要一直在心里发问的命题

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

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

文章推荐：https://www.uisdc.com/layout-design-approach-principle

02.对齐原则（像素眼的养成是UI设计师的基本素养）

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

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

文章推荐：https://www.uisdc.com/alignment-principle

03.重复（擅于分析页面层级结构，对层级的定义与划分）

重复原则是指：版面中的视觉要素要重复出现，可以重复颜色、字体、图形、形状、材质、空间关系等。运用「重复原则」把同一级别的文字设置为相同的文字样式，增加条理性，加强统一性。在页面上重复使用可以定义不同层级的字体、字号、字重。可以很直观地把大量的信息分为四个信息层级：主标题、小标题、正文、辅助说明文字。

文章推荐：https://www.uisdc.com/redundancy-principle

04.对比（对主要信息的强调处理方法）

「对比」强调事物之间的差异性，在设计时要避免页面上的视觉元素太过相似，如果元素之间是为了有所不同，那么加大反差，确保对比明显、页面清晰是很有必要的。·可以突出重点，丰富画面层次，打破呆板、活泼生动

文章推荐：https://www.uisdc.com/contrast-principle

1.2.掌握基础设计软件+快捷键（提高效率重要之法）

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

·Sketch快捷键

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

1.3.深读设计规范

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

01.iOS设计规范

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

02.Android控件规范

·Material Design：https://material.io/components

·Ant Design：https://mobile.ant.design/components/white-space-cn/

03.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

04.小程序设计规范

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

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

入职前进行设计练习和同个设计的不同风格扩展思维的训练，提前进入设计状态。所有练习题在入职日提交给设计BODDY审核并作后续的修改。

2.1.输出3套不同风格图标设计

#我的/主页/数据/管理/设置#

2.2.输出3套不同风格的占位图设计

#暂无结果/加载失败#

2.3.输出1套APP设计主界面

#工具类/社交类/音乐类#

2.4.输出1套web设计主界面

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

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

3.1.基础软件安装

·Sketch（下载网址：https://www.sketch.com，序列码照设计Body要）
·Adobe：AI/PS/XD/AE/（已有正版，Adobe账号密码找设计Body要）
·C4D：（学生版，自行官网用学生证下载，一年免费使用）

3.2.插件安装

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

四.必备协同基础知识

4.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上传后不方便预览）

4.2.蓝湖的基础使用

蓝湖是可以上传及阅览项目设计图的第三方平台。主要用来管理项目设计图及对需要看到设计图的人员管理

·蓝湖使用场景：

1.设计团队：根据项目及版本划分，规整功能及设计图的呈现。
2.研发团队：方便查阅项目的设计图，同时调用相关切图与标注信息
3.需求方：方便查阅最终项目的设计，及功能表现的最终设计效果。

·注册规范

·公有版蓝湖：https://lanhuapp.com/web/#/item

·企业版蓝湖：http://xxxxxxxxxxxx/#/item（需要企业购买部署私有服务器）

·蓝湖的注册规则：公邮箱注册 + 事业群 + 实名 + 职位

例: 工程院_UED_陈XX_视觉设计师

·插件下载

1. 网页端进入项目，点击顶部 “+”号
2. 选择设计图
3. 选择不同的设计工具插件下载安装

·新建项目

1. 在自己的“UED的团队”下选择团队组
2. 点击新建项目按钮
3. 输入项目名称、选择设计载体

·插件登录

1. 公有蓝湖：使用个人账号没密登录
2. 企业蓝湖：使用XXXXXX地址登录

4.2.1 Sketch-蓝湖的使用方法（切图、上传设计)

·切图方法

1. 选择需要切图的icon，点击右侧制作导出项
2. 点击筛选icon 可做不同切图属性切换

·上传设计画板

1. 选择需要上传的画板
2. 点击 - 插件 - 蓝湖 - 上传所选/全部
3. 选择正确的团队
4. 选择设计尺寸 WEB、IOS、安卓
5. 选择蓝湖项目名称
6. 选择蓝湖内小组，点击上传

4.2.2PS-蓝湖的使用方法（切图、上传设计）

·切图方法

1. 选择需要切图的元素
2. 打开蓝湖插件
3. 切换至切图功能
4. 点击标记为切图

·上传设计画板

1. 选择需要上传的画板
2. 选择正确的团队
3. 选择设计尺寸 WEB、IOS、安卓
4. 选择蓝湖项目名称

4.2.3XD-蓝湖的使用方法（切图、上传设计）

·切图方法

1. 方法一：鼠标hover 在图层上左侧“分享”icon 也可以作为导出标记
2. 方法二：点击需要导出的icon ，鼠标右键添加导出标记

·上传设计画板

1. 打开独立的蓝湖XD软件
2. 选择需要上传的画板
3. 选择正确的团队
4. 选择蓝湖项目名称
5. 选择设计尺寸 WEB、IOS、安卓
6. 检查是否识别到画板,点击上传

4.3.邮件的正确使用

·邮件格式与内容规范

1. 邮件发送必须为公司邮箱，不可使用个人邮件
2. 一经发送不可撤回更改，内容需确认无误

4.4 Icon/图标的设计与切图

·Icon/图标的设计原则

01.图标的网格和参考线：

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

02.图标边距：

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

03.解决视觉差：

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

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

·统一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上传至confront（阿里巴巴图表库），上传至图标库需使用svg格式。一般将icon使用AI进行重新绘制导出，为保证icon同级别大小统一，需要将画板进行独立输出。

*注意事项：

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

三.点9切图法

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