写在之前：“大家好，我是学UI网创始人虎哥，2004年入行设计至2020年已经有16个年头了。作为一个行业前辈，从建立学UI网那天起（2013年11月11日），学UI网定位是：专为新人准备的免费学习UI的学习资料站。一直努力影响着千千万万怀揣设计梦想的新人，希望大家少走一些弯路，提高认知水平，能早日入行UI设计，并成为资深设计专家。这是一篇改变了很多人命运的学习指南，从2014年至今一直在不段的优化更新，阅读量破225万的爆款文章，太多人从这里起航！阅读这篇爆文可以让你快速掌握UI学习思路和方法，是很好的启蒙老师。“

如果希望根据你的情况帮你指导学习方向和建议的，请提前写好个人详细情况，沟通起来才畅通。有时候比较忙回复不一定及时，但肯定会回复，请耐心等待并谅解！

（请备注来意，不然不通过哦）

首先先来快速分析一下UI行业的过去、现状和未来

过去：UI从iPhone 4发布以后迅猛发展，2013年随着国家号召全民创业的口号响亮喊起来以后，掀起了移动互联网创业风潮，同时大量风投机构挥洒大量的金钱注入移动互联网产业。

招聘市场甚至出现有钱却招不到UI设计师，供不应求导致UI持续高收入（入职就是8-10k很普遍），吸引了大量人员转行到UI设计行业。学习UI成了高薪走捷径的一个手段。

但到了2018年夏季，全球经济遇到发展的瓶颈，出现了危机。加上中美贸易战的影响，国内风投机构开始冷静，不再轻易投钱给创业公司。很多公司出现资金链断裂，陆续传出倒闭或裁员。

现在：目前公司在招聘UI的时候比较冷静，会认真对比选择性价比最高的UI设计师。同时UI同行间的竞争也逐渐激烈，没有系统学习过UI设计的同学，或者作品集拿不出手的同学，就失去了竞争力，找工作自然就困难了。

UI行业并没有饱和之说，只是很多人能力达不到现在的行业要求罢了。优胜略汰是必然的市场调节现象。试问哪行哪业人不多呢？

总之从2018年下半年开始，UI设计入门的门槛明显感觉提高了不少，主要是从UI就业情况得出的结论。所以，如果你想吃这碗饭，要付出很多努力和时间，特别是非设计专业或者学历低的同学更要明白一个道理：“你只有比设计类专业毕业的同学，花费更多的时间去学习专业知识，并多创作些原创成套的设计练习作品，才有机会跟他们抗衡。”当然，有很多跨行的同学通过刻意的练习，一步一步的成为了大神（zcool上挺多转行学设计的大神）。其实说到根上，就是一句话：“兴趣是最好的老师，你有兴趣学，想好就是干！

另外如果你已经30+岁了，还是0基础（软件也不会），我的建议是再考虑考虑，不要急着学，如果实在没有其它选择了，非要想做设计不可，那更要摆正心态，不能急躁，先从最基础软件开始，先感受一下，不要一次性花2万块去参加学习班，很容易就打水漂了。

如果你已经30+岁了，之前是做设计的，也是打算长期靠这个生活（其它的也不会），那就尽量早点学习吧，越晚越吃亏，越没有优势。

这个薪资统计还算比较靠谱，从2015-2017年开始入行UI的人到现在也有3-5年工作经验了，那2年是市场最缺UI设计师的时候（国家号召全民创业），也是进入UI设计行业人数最多的2年，他们现在是行业内最主要的一群人。

不过我个人觉得，20-30k的人数统计上稍微偏高了，合理区间在5%。一般新手入行薪资在5-7k算是比较合理的价位了。学的稍微好一点，作品做的丰满一点可以在6-9k。当然你如果本身就是做电商或者平面的，再学了UI，那薪资肯定是要更上一层的。

未来：5G普及后，UI会成为一项非常基础的一门技能，人们越来越离不开手机，和智能穿戴设备，5g、大数据、物联网、人工智能越来越落地，有需求就会有市场，也会增加更多就业机会。

当然，对UI设计师的综合能力挑战更大，咱们只能通过刻意练习、终身学习，不断根据市场的变化跟进学习新知识，才能不被市场淘汰。

5年后的UI设计圈会怎样？

看到这里，我想大家脑海里应该觉得，UI已经离不开人们的生活了，UI设计会成为一门非常普及且非常基础的入门知识了。任何公司想做生意都需要UI设计的支持，因为未来智能手机、VR、AR、各种智能终端设备会越来越普及。

虎哥认为，学UI设计的人每年只会越来越多，以后的大学都会慢慢把这当做一门专业课，甚至在中学就开始普及教育了。

如果你现在学UI还是和前几年一样，是冲着钱多来的，那请你马上打消这个念头，那个遍地捡钱（会临摹几个图标，会画几个界面）的时代（2014-2017）已经过去了，现在学UI是要真的喜好这个行业，要做好终生学习的心态，因为这个行业正在飞快的发展，要学的东西只会越来越多，当然也更加有趣！

学UI第一阶段到底要掌握哪些知识和技能。

如果你也想成为一名UI设计师，却感到很迷茫，不知道从哪里开始学起，那这篇集合贴就是为你准备的。

先说说UI到底是什么？

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

UI设计分三个分支：

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

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

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

用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。

用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性；即要符合用户的心智模型。

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

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

从上张可以看出UI设计师工作日常的主要内容是和各种屏幕打交道，多终端设备的UI界面设计。还有比如车载导航操作界面、大屏幕数据展示后台界面、线下购物结算界面、VR、智能设备、银行自动取款机等等，只要是在屏幕上操作的就算UI的范畴。

UI和平面有啥区别了？通俗解释一下，UI是在屏幕上可交互可操作，用户操作后要有及时反馈。而平面一般是在纸质或者特殊材质只能看却不能交互操作，主要是印刷品。应该理解了吧。

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

虎哥为大家绘制了一个非常详细的UI技能树，归纳了UI知识点。

0基础是指完全小白，软件也不会的。

有基础是指有一定的设计功底，能临摹基础的图标和界面，或者做过平面设计、电商设计、网页设计等。

点击图片看高清大图

最终一定要做出拿的出手的作品集，才能找到工作。

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

IOS和安卓，两大平台的UI界面设计
小程序界面设计
H5页面设计
网页设计（产品类、平台类、活动页、介绍类）
后台界面设计（主要是管理APP和网页上的内容发布的后台系统界面）
大屏幕大数据展示屏界面设计
界面视觉规范，标注尺寸（手机端或是网页平台或软件）
APP切图资源导出给程序员（手机端）
图标设计（启动图标和界面功能图标）
会画基础性的原型图，有交互逻辑思维。（原型绘制不难，就是一个软件掌握就行，难在要有交互逻辑思维，这需要多思考。）
会做一些基础的AE小动画（比如加载刷新小动画啥的，局部的）。
提交到各大平台的运营推广图（运营设计的活儿一般比较频繁，各种尺寸，横竖屏）
展会海报、易拉宝、logo、名片等平面

UI设计师要学很多才能独当一面。一般的创业型公司都会招一个综合性比较强的UI设计师，导致UI设计师入行的难度在逐渐提升。整个行业知识也在更新迭代，所以2020年入行的UI设计师比前几年难度要大了几倍。

最近流行一个名词，全栈设计师或者全路链设计师，其实就是身兼多项技能的尊称，一方面随着已经入行UI的人员越来越多，能力普遍也越来越强，大家都在不段的累加技能，特别是高级设计师一般都具备多项技能，一个人顶几个人用，设计考虑的也更深入一些。对于从业人员来说，工作量是变大了，要做的事儿多了嘛，对于企业来说，捡了大便宜了，花最少的钱获得身兼多项技能的设计师，随时时间的推移，未来发展我觉得会慢慢趋向于多项技能与一体的综合设计师会很多，这是时代的发展趋势，也是竞争出来的结果。

如果是进入中小型公司，目前2020年的行情，一般都要设计+交互都要涉及到，交互上一般只要能绘制基础的原型图，能读懂设计需求，或者是能对需求进行归纳分析制作成原型图就行了，不会像大公司的专业交互设计那样那么严格的要求。

另外来看一看目前大公司UED团队的分工（见下图）。分工比较明确，专业的人干专业的事儿。效率更高，产出的价值更大，为企业创造更大的利润。

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

现在还有一个非常尴尬的事情：“目前行业里在职UI基本上都能做一些平面和电商的设计工作，反之就不行了。”

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

上面这个视频是虎哥徒弟们做的一个动效作品集合，目前UI设计师越来越注重动效的表现，前提是你的界面一定要做工精致、交互合理、视觉舒服。

看到这里很多同学会觉得UI设计还挺复杂的，要学的东西好多哦。没错，确实很多东西要学习，并不是一个简单的工作。因为有挑战，所以才更有趣，更好玩！

虎哥录制了一个学习方法的视频：8个学习建议

需要学习多久可以达到找工作的要求呢？

这个问题大家一定非常的关心了，在这里和大家说一下，你要注意这个时间节点，不要报侥幸心理。下面的时间，是按照我们自己的课程设计来举例的。UI学堂 http://www.xueui.cn/xuetang，也可以了解一下我们的课程安排，心里有一个数。

如果你是完全0基础的新人：先学下面的几个UI常规软件，如果有ps ai基础，学另外几个就很容易了，正常来说至少需要2-3个月时间的。（可能很多人还只能勉强会用，说不上特别熟）

咱们学UI网推出了性价比极高的UI软件训练营，系统学习软件，有需要的同学可以点击下图了解课程详情。

如果你已经掌握了基础软件，或者本身就是做平面或者电商、网页等有设计基础的：至少需要系统学习4个月，主要是UI内容非常多，不难，就是需要时间去一点点消化。

准备作品集：至少需要1-2个月，找工作就靠作品集了，每一页1920-1080尺寸的pdf格式文件，一般要准备50页左右，才丰富有说服力。

找工作需要准备的原创成套的案例作品看这里>>

数学好的人，一看就知道时间怎么相加了，也就是完全0基础的同学，至少需要学习6-8个月，并且是系统的学习。自学的话时间更难计算了，给不了建议。

记住我说的：任何少于这个学习时间的课程，都是达不到入职要求的。这句话你若仔细理解了，你就不会被人骗了。

现实世界其实有很多坑，很多小白啥也不懂，一激动一拍脑袋就入坑了，欠一屁股债不说，最后还没找到UI工作，只能去做小美工了。哪里出错了？

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

虎哥的建议是分二步走。

第一步学常用软件

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

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

目前行业里做界面主要是用Figma（mac和pc都能用），Sketch（mac电脑）或者XD（mac和pc都能用），处理图片（活动页之类的）还是以PS为主。交互原型工具目前挺多种选择，比如Axure、Mockplus、xd、Sketch都可以做常规的交互原型图，但是要想做逼格高的动效交互原型可以用ProtoPie、Principle、Flinto。标注用蓝湖，图片素材管理用Eagle，字体管理用HelloFont。

软件太多了？不知道怎么选择，那就按下图来吧，这是目前最主流的必备软件，我们的高级UI课程就是以这个为主。没有标MAC的就是PC电脑都能用的。

如果你软件PS、AI都不会用，或很菜的情况，可以先报一个只学软件的在线培训班，可以了解我们的软件基础班>>

有老师们把重要的知识点圈出来了，少走很多弯路，节约更多时间。现在在线学习也非常方便，效果也挺好的。

千万不要一拍脑袋啥都不清楚的情况下，就花2万块报了宣传语是3-4个月年薪20万的培训班，那就呵呵哒了，你以为钱是这么好赚的，3-4个月肯定是不够的，几乎不可能的事儿。3个月也就是能把软件摸熟一点，能不能自己创作设计出来东西，还是有很大困难的。现在UI行业要求越来越高了。

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

对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧，这是所有软件的基础，学会了以后再学其他的软件就非常容易上手了。所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧。

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

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

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

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

插件安装

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

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

配置Photoshop参数，做UI更方便

AI是必须掌握的 ★★★★

zhongdian

0基础新手重点先学好PS和AI。上图中Axure、Principle和Flinto都是原型设计工作，可以做动态的演示。原型制作工具还有比如MockPlus，墨刀等等，Zeplin是国外的一键标注插件，国内用蓝湖切图标注比较多。

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

PS ★★★★★
AI ★★★★
Figma ★★★★★（Figma 是一个基于浏览器的协作式 UI 设计工具，是一款真正意义上的可以协作的设计工具。）
SKETCH ★★★★ （界面设计神器，轻量级专业UI设计工具，插件多、运行快、资源丰富，只能在MAC上使用）
XD ★★★★（和SKETCH功能类似，好处是WIN10系统可以使用，MAC系统也可以使用）
AE ★★★（动效工具，主要做一些小动画比如下拉刷新、图标微动画、loading等等）
ProtoPie★★★（动效原型工具，目前腾讯开始推行这个，做的原型可以在手机上模拟真实的开发效果）
Principle和Flinto ★★
Axure ★★（原型图工具，也可以用磨刀、MockPlus、sketch、xd等替代）

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

最近2年也流行用Figma和SKETCH来设计界面，SKETCH坏处就一点，你得先有一台mac电脑。目前国内很多公司已经给UI设计师配了mac电脑。

Figma优势更明显，建议大家优选学习Figma，mac和pc都能用，因为他是基于浏览器操作的。

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

硅谷大神教Sketch三剑客炫酷设计

AfterEffect2018零基础入门AE

课程介绍>>

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

第一：布尔运算绘制图标

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

第二：图层样式

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

ui-lava-tabs-menu-design

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

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

第三：图层的混合模式

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

第四：形状工具

第五：安装字体（虎哥整理的）

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

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

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

开始练习！先学会技法。

cover：2017-07-05

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

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

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

UI设计师工作流程：

kaihui

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

设计流程：

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

更多设计流程点我查看>>

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

插图来自mixpanel团队

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

学会切图

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

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

设计标注神器：

蓝湖、摹客iDoc 、PxCook 像素大厨、Parker、zeplin、Cutterman

IOS移动端重要知识：

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

各类尺寸规范大合集：

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

平台规范大合集：

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

网页端：

色彩的学习

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

最后推荐一些书单

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

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

什么是成套的作品集了？

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

可以参考http://www.xueui.cn/laohubang-zuopin

作品集为什么要包装了？

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

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

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

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

（请备注来意，不然不通过哦）

整理编写：学UI网虎哥

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

登录收藏