image

写在之前：“这篇教程内容比较多，如果你是新手，能坚持每个知识点都搞明白的话，起码要半年的时间！如果你进来随便看一看就走了，那不能怪别人，是你自己不努力_！~已经有很多新人在这里学完找到了高薪工作。”阅读量破180万的文章，太多人从这里起航！学UI网就是这么一个专为新人准备的免费学习UI的网站。

从2018年下半年开始，UI设计入门的门槛明显感觉提高了不少，主要是从UI就业情况得出的结论。所以，如果你想吃这碗饭，要付出很多努力和时间，特别是非设计专业或者学历低的同学更要明白一个道理：“你只有花费比设计类专业毕业的同学更多的时间学习专业知识和创作原创成套的设计作品，才有机会跟他们抗衡。”

具体什么是原创成套的案例作品看这里>>

另外虎哥还要推荐大家收藏这个 hao.xueui.cn UI学习网址导航，虎哥整理，必须精品。这里面都是我常用的网址，工作找参考，找资料非常方便。

今天来谈谈这个话题，学UI第一阶段到底要掌握哪些知识和技能。

QQ群里大多数学生都还在入门阶段，感到很迷茫，不知道从哪里开始学起。网上的海量信息，全是教程，都不知道先看什么，后学什么。非常的无助。虎哥拥有10多年UI设计实战经验，也亲自带出了很多优秀的徒弟，大大小小也做了很多项目，借这个机会，给新人们指引一个方向，希望能帮助到大家。

下边我们先说说UI到底是什么？

很多同学不知道UI是什么，以为画个ICON图标就是做UI了，导致很多人都忙着画各种各样的图标。这样很容易让那些新人们走错路，最后我想说的是icon不是全部，不要沉迷其中，要学的还有很多。

User Interface（用户界面)，简称UI，是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UI设计分三个分支：

1、研究界面—-图形设计师Graphic UI designer，简称GUI,国内目前大部分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计），每天工作做着各种界面设计。

2、交互设计师，做整个项目的交互流程。

3、用户体验研究师，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策的。

用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性；即要符合用户的心智模型。

所以一个优秀的UI设计师，从技能上讲，不仅能画图标，还能做好界面，会很多交互知识。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

图标，界面，交互知识都是需要长期的经验积累，所以UI这条路很长，要学的技能很多，大家加油吧！！

image

从上张可以看出UI设计师工作日常的主要内容是和各种屏幕打交道，多终端设备的UI界面设计。

那么UI设计师工作中都做些什么事？

uishisha

图片来自国际知名设计师平台 https://www.behance.net/

在日常工作中，UI设计师一般要做的事情还挺多的（手机端UI和网页UI大多数情况由同一人完成，大公司分工比较细，会分开）

1. IOS和安卓，两大平台的UI界面设计工作。
2. APP界面设计并标注尺寸（手机端或是网页平台或软件）
3. APP切图资源导出给程序员（手机端）
4. 图标设计（启动图标和界面功能图标）
5. 提交到各大平台的推广图（活很多，各种尺寸，横竖屏）
6. 网页设计（产品类、平台类、介绍类）
7. 后台界面设计（主要是管理APP和网页上的内容发布的后台系统界面）
8. 小程序界面设计
9. 展会海报，易拉宝，等平面
10. 有些小公司老板为了省钱可能需要你会画原型图会UI 一起做，有交互逻辑思维。（原型绘制不难，就是一个软件掌握就行，难在要有交互逻辑思维，这需要多思考。）
11. 会做一些AE小动画（比如加载刷新小动画啥的，局部的）。

UI设计师要学很多，才能独当一面。一般的创业型公司只会招一个网页和手机端都会的UI设计师。总之，只要你肯花心思、费时间、有兴趣就一定学的好！加油~！

看到这里，总算明白为什么UI设计师比平面和电商设计师的薪资普遍要高一截的原因了，技能上要掌握的实在是太多了。

从2018年整个职场招聘的要求来看，UI设计师需要掌握四大核心知识结构才能找到UI工作：APP、网页、后台界面、小程序。

看到这里很多同学会觉得UI设计还挺复杂的，要学的东西好多哦。没错，确实很多东西要学习，并不是一个简单的工作。

很多人在群里会问，我是自学还是报班啊。这个问题回答的嘴都软了。

虎哥的建议是分二步走。

第一步学常用软件

很多新人都特别对软件感兴趣，先来看看UI设计平时都会用到哪些软件。工欲善其事，必先利其器。

image

虎哥常用的一些软件给大家看看，看看你会用哪些个?第一排是主流常用软件，第二排是一些辅助小工具，提高效率的。

（新手重点学习PS和AI。这2个学会了，其他的后面阶段在学，不要急，按我说的优先级来学。）

“如果你软件PS、AI都不会用，或很菜的情况，可以先报一个只学软件的在线培训班，一般不会超过2000块，学时在2个月左右。也可以购买在线视频课程只要1-2百元左右，更实惠。但从效率上来说，报在线培训班会掌握的更快一点，主要是老师们把重要的知识点画出来了，少走一些弯路，节约很多时间。千万不要一拍脑袋啥都不清楚的情况下，就花2万块报了宣传语是3个月年薪20万的培训班，那就呵呵哒了，你以为钱是这么好赚的，3个月肯定是不够的，不可能的事儿。3个月也就是能把软件摸熟一点，能不能自己创作设计出来东西，还是有很大困难的。

如果你英文马马虎虎，也可以看看国外大神级的Martin 马丁老师的一套视频教程，本课在海外被誉为Adobe培训第一课。老师讲课非常生动、非常有趣。

Ps大师课：PhotoshopCC2018教程”	Ai大师课：Illustrator 2018教程
image 课程介绍>>	image 课程介绍>>

PS是一定要熟练掌握的 ★★★★★

ps

对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧。因为在日常工作中，用的最多的就是PS了，所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧。

软件安装（建议购买正版软件，以下下载仅供学习使用）

1. Photoshop 2018 软件下载 请到官网下载试用版，然后干啥自己百度
2. 怎样安装Photoshop画笔，形状，动作，滤镜等插件
3. psd 缩略图查看插件（也可以按照美图看看也能看到）

新手先集中精力学习PS和AI。这2个是最基础的工具了。如果要安装的话，建议安装最新版的 CC2018。

1. PS基础视频教程（比较老的一套）
2. PS图标设计教程（上百个案例讲解）

image

插件安装

插件可以帮助我们在工作中快速的完成一些琐碎的事情，节约时间。

1. 一个好用的PHOTOSHOP切图插件（CutterMan插件下载）
2. 标注神器：摹客iDoc 蓝湖，PxCook 像素大厨，Parker，zeplin
3. IconTemplate 启动图标生成插件
4. 安装一个Ps Mirror可以在iphone上实时观看效果。
5. PS 2015圆角神器 Corner Editor 来了（UI设计必装神器）
6. PS 玩转长投影（带PS动作）（现在流行的长投影傻瓜模式）

配置Photoshop参数，做UI更方便

PS-UI

Ps改进UI设计的一些技巧

图片为什么会模糊？

PHOTOSHOP 52个疑难问题解答

PS 真正使用技巧

z78

PSD-layers-1-1

PSD-layers-2-1

10条PS技巧，提高工作效率

怎样在PHOTOSHOP中保持像素的完美

让页面更上档次！网页设计细节大总结

1. 45个设计师需要熟记的ps快捷键
2. PS真正实用技巧
3. Ps改进UI设计的一些技巧（必看）
4. 设计新手在PS中最常犯的6个错误
5. 你的PS很卡吗？来瞧下这10个加速技巧

AI是必须掌握的 ★★★★

ai

1. AI快捷键下载>>
2. 布尔运算由浅入深，有它就够了！
3. AI混合教程【教程】
4. 如何在Adobe Illustrator中绘制水果图案
5. 教你用AI绘制喝咖啡的女孩
6. 线性小插画绘制【教程】
7. 用AI绘制扁平线性风格化图标
8. 教你用AI制作灯泡文本效果
9. 教你用AI打造YOGA风图标【AI教程】
10. 教你用AI制作萌萌哒的MBE风格图标（第一弹）【AI教程】
11. 教你用AI制作萌萌哒的MBE风格图标（第二弹）【AI教程】
12. 渐变透明图形设计【AI教程】
13. 用AI绘制扁平化太空流星风海报
14. 教你绘制写实的牛奶和燕麦饼干【AI教程】
15. 仅需5步！手把手教你如何用AI绘制3D效果形象

image

zhongdian

新手重点是学好PS和AI。上图中Zeplin是一键标注插件，Axure、Principle和Flinto都是原型设计工作，可以做动态的演示。原型制作工具还有比如MockPlus，墨刀等等。

Photoshop的知识点太多了，用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。比如做CG原画的，做网页设计，照相馆处理照片的等等用到PS功能都不太一样。

软件方面从重要级别上用5颗星（满分）来说明一下，新手心里有个数：

1. PS ★★★★★
2. AI ★★★★
3. SKETCH ★★★★ （轻量级专业UI设计工具，插件多、运行快、资源丰富，只能在MAC上使用）
4. XD ★★★（和SKETCH类似，好处是WIN10系统可以使用，MAC系统也可以使用）
5. AE ★★★（动效工具，主要做一些小动画比如下拉刷新、图标微动画、loading等等）
6. Principle和Flinto ★★
7. Axure ★★（原型图工具，也可以用磨刀、MockPlus、sketch、xd等替代）

AE的学习可以稍微往后放一放，我个人建议是界面做的拿得出手了，再来学习AE，目前在工作中用到AE的地方还是比较少的。

image

最近2年也流行用SKETCH来设计界面，好处很多，坏处就一点，你得先有一台mac电脑。目前国内绝大多数公司还没办法给设计师们都配上高大上的mac电脑。

1. SKETCH中文设计手册
2. 四步上手设计神器 Sketch
3. 硅谷大神教Sketch三剑客炫酷设计

硅谷大神教Sketch三剑客炫酷设计	AfterEffect2018零基础入门AE
image 课程介绍>>	image 课程介绍>>

UI设计 入门阶段先要学会以下几个功能，一定要玩的很熟练。

第一：布尔运算绘制图标

1. 布尔运算由浅入深，有它就够了！
2. 布尔运算实战教学（干货篇）
3. 教你从四个方面来评价图标设计的质量
4. 如何绘制功能图标基础篇？
5. 超全面讲解应用图标设计九大原则
6. 如何系统学习功能图标？
7. 教你如何绘制风格统一的APP界面图标
8. 如何画好一组线性图标
9. 如何学习Yoga Style？
10. 设计师进阶笔记：关于图标你了解多少？
11. AI绘制图标小技巧
12. 图标绘制基础指南，一篇就够！
13. 绘制扁平图标竟然有这么多小秘密？
14. 五分钟教你快速掌握三维图标
15. 如何系统地设计界面图标
16. 新手福利！系统图标的9种风格设计实例讲解
17. 我们可以这样学习别人的图标风格
18. 图标设计-快速分析设计APP
19. 新手福利！超详细解析系统图标设计的6大原则
20. 4个规律快速画好断线图标！
21. 标签栏ICON的设计与应用

学UI网公开课视频教程：https://space.bilibili.com/26890291/#/video

第二：图层样式

上面做的百度这个页面，看着简单，却用到了好几种的图层样式。那么像下边这样的按钮。

ui-lava-tabs-menu-design

用到的就更多了。所以想打怪升级，还是要把图层样式玩的很熟悉，入门阶段要分析的出来，用到了什么效果。

看到什么好的界面或是ICON，就立马分析一下，它用到什么图层样式？

相关的教程：

1. 一个按钮有话说（PSD下载）
2. 还在担心按钮设计吗？来看看这十条基本准则
3. 教你画一个开关
4. 如何与像素打交道
5. 透明导航设计讲解

第三：图层的混合模式

1. Photoshop的混合模式（详细解答）

第四：形状工具

1. 玩转PS形状图层UI设计师必看
2. 虚线的画法
3. 设计师必须掌握的贝塞尔曲线的秘密（分分钟学会钢笔工具）

当你看到这里的时候，才真正的开始进行设计阶段！逮到什么画什么，比如打开百度的首页，这个界面不陌生吧(老版本的界面了），照着画一个出来。有人说了，这有什么好画的啊。你还别不服。很多入门级的新人，还真是做不出来。

百度首页

有人连字体都做不出来，宋体12号

文字效果选无

然后输入框的效果放大看看，用了内阴影。

输入框

然后是搜索按钮，用到了什么效果了。

搜索按钮

渐变+描边+投影+内阴影做的白色高光（一个图层样式完成）。小小的一个按钮，尽然有这么多学问在里面。这就是UI的魅力所在。

开始做点什么（临摹阶段）

虎哥耗费了半年的新鞋，啊呸，是心血打造的UI作业网 zuoye.xueui.cn，从此大家伙儿又多了一个好玩的地方啦，嘻嘻。交作业等解答团的大侠们给你点评哦，哪里有错点哪里。

ZUOYE

演示2

先来点励志的

m_1354178017030-220x150	m_1354707539994-220x150	m_1364387618570-220x150

开始练习！先学会技法。

我该如何临摹？	yun	Signal icon1
20170906061	220-150	cover200136
bianping-1-220x150	线性小icon教程	cover：2017-07-05
xiaomao	200X136	cover_xiangji400-272-220x150

jiemianlianxi

1. 还在担心按钮设计吗？来看看这十条基本准则
2. 解密IOS7毛玻璃效果
3. 轻松打造iOS7风格图标
4. PS强大的角度渐变
5. 教你如何画圈圈—–标识设计中辅助参考线入门

除了学习软件操作外，还经常有人咨询我：“虎哥，有没有什么适合新手小白看的UI设计书哇？不知道哪本比较适合？”还真有。

作者田海（B哥），国内知名UI设计师，多次获得国内设计大赛大奖，曾先后在腾讯、阿里工作，2017-2018年编著零基础学UI系列丛书，全网销售超过4万册。

学生、设计小白、电商设计想转UI，平面想转UI，在职UI新人，都适合读这本书。 它可以让你系统的了解UI的知识，背后的逻辑。

image

点击查看这一套书的介绍页面>>

虎哥给你说个时间节点，软件都不会的新人至少要6-8个月的时间学习（参加线上培训班的有老师带的情况下）才可以达到UI设计师的就业要求，这还不能偷懒，多做练习，多动手。记住我说的这个时间范围，少于这个时间段的基本上不可能，别听别个吹牛逼，3个月0基础年薪20万，做梦。

当你软件掌握的差不多了，达到临摹图标和界面没有太大问题了，开始下一步。

第二步学专业UI设计系统知识

UI设计师工作流程：

kaihui

图片来源：https://speakerdex.co

工作中讲究配合，设计师在整个项目里面处于中间的位置，我们的上游是产品交互设计师，我们的下游是前端或者程序小哥。一般在项目立项的时候，设计师就会参与到产品讨论之中，当然有些公司简化了流程从来不带设计师玩的，只给需求让设计师做。我们在拿到设计需求的时候一点要认真看，仔细分析下。

1. 一篇文章玩转UED团队设计流程
2. 国内知名UED团队的设计流程！
3. UI入门必读！工作流程介绍
4. 合理做UI的工作方式与流程
5. UI产品设计流程，一定要看哦！
6. 设计师必看！一个专业设计流程的7个步骤
7. 你对设计规范流程了解多少？

下面我们来讲讲学习方法：

zaxiang

UI设计教程	UI新人疑惑解答	Cover：Article-2015.11.18
zhishiku	思考	gaoxiaoxuexi

1. 设计思考：设计师如何提高产品思维 ？
2. 如何才能做到原创？
3. 提高审美除了多看，有没有捷径
4. 如何做练习才能有效吸收？
5. 新手UI设计师如何快速成长
6. 谈改变，设计师受用一生
7. APP概念设计前后那些事儿（扩充作品集）
8. 更多学习方法大集合>>

学UI网顶部导航栏目——>经验，见下图。没事就多看看。

image

1. UI设计师如何积累知识库？
2. IOS：iOS 9 人机界面指南
3. Android：Android设计规范 Material Design
4. 网页：《网页UI视觉设计规范》
5. 图标设计流程及小技巧
6. 简述实用的网页UI设计流程
7. APP界面设计流程

安装字体（虎哥整理的）

image	131	141

字体是有版权问题的，咱不能瞎用字体，以免公司被告赔钱，不便宜。注意微软雅黑只允许在网站上使用，不能用于其他地方，很多公司因为设计师的疏忽赔了很多钱，几十万的赔。平时练习的时候无所谓，但是商用了就麻烦

1. 免费的商用字体，90%的设计师都不知道！
2. 一份详尽全面的UI设计字体与排版指南
3. 10个排版秘诀搞定你的设计！
4. 字由 字加 字魂（字体管理插件，里面有各种分类，很方便）

学会切图

1. 新手福利！超全面的UI设计切图规范
2. APP界面切图命名和文件整理规范
3. CutterMan插件下载
4. 【详细介绍android和ios平台的切图】
5. Android切图（点9小贴士）
6. 更多切图文章教程
7. IconTemplate 启动图标生成插件

常规网页UI切图(3种方法，各有各的好）

做ui必备–PS切图动作用法	PhotoshopCC新功能 生成图像资源	photoshop切片使用小技巧

移动端UI切图必备教程和工具

qietu1	Android安卓平台的切图小贴士	draw9patch
map-file-naming-and-specification	slice	UI-xinshou1

切图必备插件用Cutterman选中@2x @3x导出。

<iframe src="http://player.youku.com/embed/XMTM2MjQ1MDYyOA==?client_id=d0b1b77a17cded3b" width="100%" height="100%" frameborder="0" allowfullscreen="true" vidtapeorigprops="{"w":"","h":"","t":"","l":"","z":"","p":"","boxShadow":""}" vidtapeabovecount="0" style="padding: 0px; margin: 0px; max-width: 800px; max-height: 667px; width: 800px;"></iframe>

设计标注：

1. 标注神器：摹客iDoc 蓝湖，PxCook 像素大厨，Parker，zeplin

搞明白一些常规的界面尺寸和视觉规范

IOS移动端：

image	image	image
image	image	image
移动端界面设计之尺寸篇	App-visual-optimization-design-wechatcover-220-150	ios10

1. 移动端界面设计之尺寸篇（淘宝版）
2. iPhone6 & 6 Plus 视觉设计适配说明
3. 新手福利！超全面的UI设计切图规范
4. UI适配攻略·教程④一稿配双平台
5. h5移动端页面设计学习文档
6. Dribbble 2016十大设计趋势总结
7. 图标设计的三个小原则
8. 新设计趋势来临，解读 iOS 10 设计指南
9. 一份详尽全面的UI设计字体与排版指南
10. 17大平台设计语言汇总

安卓可以看看下面这几篇文章：

mdzhinan

1. 安卓1080P界面设计规范解读
2. 6个技巧帮你把IOS的UI转换成安卓！
3. Material Design 安卓5.1L （UI kit包下载！）
4. 天天喊着学UI,知道安卓和iOS的区别吗?
5. UI设计师不可不知的安卓屏幕知识

各类尺寸规范大合集：

image

http://www.xueui.cn/design/rule

平台规范大合集：

image

学UI网址导航平台规范板块：http://hao.xueui.cn/

网页端：

web1

1. 网页UI是如何标注的？（附带WEB UI视觉规范文档）
2. 网页UI视觉设计规范
3. 网页设计基础技巧
4. WEB设计指南！
5. 界面设计速成
6. 【新人必知】页面设计的九个要点！
7. 不要让用户思考

色彩的学习

secai

image	image	image	image
image	image	叠柔配色法	如何成为配色达人

1. 设计师必知的色彩基础知识
2. 让配色更加顺畅，你需要记住的7条定律
3. 六种配色方法让你的设计方案666
4. 明亮的色彩如何应用在UI设计中？
5. 一篇正直的基础配色说明
6. 设计中关于颜色搭配的一些小经验
7. 配色秘要：永远不要使用纯黑
8. PS教你做渐变大背景
9. 向大师借鉴的灵感配色

更多色彩搭配的教程，点我点我>>

最后推荐一些书单

好了，差不多了，这些都挨个学一遍。就入门UI了。学UI 要学的真的很多，这些都是基础的知识，这些掌握了，才能到达 ****中级阶段，加油！少年~~！****

最后要是想顺利的转行UI设计，必须要有拿得出的成套的作品。

什么是成套的？

起码要一套15-20页的app界面，交互流程要顺畅，这个需要自己好好研究研究。网页界面1-2个，然后包装一下。

为什么要包装了？

包装其实反映了一个设计师的综合的实力，考验一个人能不能从大的方向把握整体的风格，版式形式感能不能贴切你的产品定位，配色和基础的排版能不能做到整体一致性。视觉规范的统一性如何。等等。当然，看着也是高大上的，把学到的东西串联在一起，写上设计思路和说明，更容易让人理解你的设计思维。你不是一个单纯的做图仔，你是一个有脑子的，会思考的设计师。

包装可以去参考虎哥的徒弟作品集，每一套作品都是自己命题原创作业，经历1-2个月的时间打磨出来的，可能很多人觉得哇，特么要这么久吗？对的，真的要这么久，基本上都是从app的界面主界面开始做15-20个然后整体改了10多遍，然后包装也改了5-10遍，才达到拿得出手的效果和质量。真的不是随便套个模板就搞出来了，没有想象的那么简单。往往很多东西看着简单，真正自己做起来就不是那么回事了，毕竟大部分的人还是很普通的新手。

每个人的基础不一样，激发潜能的深度也不同，原创的设计作品确实不容易，希望大家努力吧~~！

其实吧，你只要稍微努点力，就能甩掉全国90%的懒娃子。学习之一个长期的过程，需要坚持！坚持！还特么是坚持！

hugejianyi

转载自：学UI网 » 学UI入门阶段到底要掌握哪些知识（UI第一阶段课程）