从第一篇，也是最早的一篇零基础学 UI 文章《设计干货 | 从零基础学习 UI 设计》到现在已经过去很多年了，UI 设计师的职能、工具、知识体系，都经历了大量的变更和革新。不仅越来越碎片化，也越来越难上手学习，零基础入门成本大幅提升了。

所以，我们打算开启一个新的系列，输出一部完整的 UI 零基础学习指南。根据 UI 新手系统学习 UI 设计的顺序，陆续会输出 12-15 篇不同模块的系列性文章。

系列文章声明

1. 写作目标：

我们的目标是通过这个系列，帮助新手高效、系统性地完成对 UI 职业的知识的入门。

UI 是一个完全面向职场的工作技能，它基本无法成为个人陶冶性情的爱好。学习这个技能，就是为了在真实的工作环境中进行应用，是一门以实用主义为内核的学科。

所以，在内容制定上我会避开过于概念、学术性的内容，完全以职业市场的实际需要为导向。同时我自己也非常讨厌 “不讲人话” 的写作风格，全篇避免 “高大上” 的专业词汇和行业黑话过度使用。

2. 面向人群：

这套干货内容，适合从零开始想接触或学习 UI 的同学。当然，如果已经接触过一段时间但感觉自己的基础知识体系还是非常不牢固的同学也适合。

同时，如果是和 UI 相关联的岗位，如产品、交互、用研、运营、前端开发，也可以通过这套分享来了解 UI 设计师的知识体系、工作方法和思维逻辑，更好的配合 UI 设计师完成工作。

3. 内容声明：

除用来举例的线上案例外，所有知识点和图文内容都由我们原创输出，会整合部分我们以前创作过的内容进来。如 UI 尺寸、字体规范、项目管理等。

因为网上有大量洗稿、抄袭和无声明转载我们的内容的账号，所以如果当你觉得看到的内容好像在别的地方看过，那只可能是我写的或者别人转载的。

4. 免费声明：

这套分享将是完全免费的，不用担心写到一半变成付费内容。同时，文章中包含的各类网盘素材，一方面受不可抗力的影响，链接会不断失效，另一方面我们会持续变动更新（如软件安装包）。

整篇内容完成以后，也会合并成一篇完整的 PDF 电子文档供大家查阅。

UI相关概念知识扫盲

1. UI 与设计

UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。

理解 UI 是什么，我们只要关注 2 个重点（敲黑板，划重点）：

• 如何有效输入信息
• 如何有效获取信息

计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1 1 等于几，你就要考虑你怎么输入 1 1 并让计算机处理结果，计算机又要通过什么形式告诉你结果是什么？有效的把指令、结果进行传递是非常困难的事情。

早期人类使用打孔卡片的方式做信息的媒介，人类和机器通过打孔来完成信息的输入和识别。随着技术的进步，屏幕成为新的媒介，我们可以直接往计算机中输入更复杂的英文字母了。

于是，计算机开始支持命令行的输入形式，即使用一些固定的单词、语法，来完成信息的输入，计算机再以文本形式返回对应的计算结果。

虽然这一步大大优化了信息输入、获取的流程，但是依旧不能让我们满足。因为它的门槛太高了，需要背下一整本操作指令手册，而且用途非常有局限性。

再往后，就是图形界面被发明了出来。比如桌面有个我的硬盘图标，你使用鼠标或键盘打开，那么打开的窗口就会显示该硬盘下级包含的文件或文件夹，你可以轻松选中这些文件再进行操作。

这个发明是跨越性的，因为它让信息输入、获取变得更高效，也让使用计算机设备的门槛更低，为计算机设备进入普通群众生活提供了必要条件。

之后伴随智能手机的兴起，智能设备的普及。UI 界面已经成为了我们日常生活不可或缺的一部分，我们通过界面来操控设备、获取信息，它是我们驾驭智能硬件、复杂程序的桥梁。

图形界面的本质是信息的载体，完成信息的输入和获取的 “使用价值” 才是它的核心价值。UI 设计的目标，即根据信息输入和获取的需要，设计相关图形样式和排版的设计。

所以，UI 设计是一个辅助用户来使用硬件、程序的工具，观赏性并不是它的唯一指标。理解 UI 设计最大的误区就是仅仅以美观角度切入，而忽视它的使用价值（后面会重点解释）。

虽然 UI 设计是针对所有电子设备图形界面设计的统称，包括穿戴设备、智能家电、车机系统等，但它在国内主流语境指的是移动端 APP 界面的设计。

在后续的内容中，我们的核心也将围绕 APP 的界面设计展开解释。

2. 交互设计是什么

前面声明了，UI 界面本质上是一种工具，它为什么不像平面海报、卡片一样仅仅是用来输出信息或展示视觉效果的？

因为 UI 界面是可以进行 “交互” 的视觉内容。交互（Interaction Design，IXD）这个词汇对于新手来说一直是理解的重灾区，因为它的概念太模糊，且牵扯的其它领域太多。

简单解释，交互就是人和设备相交（产生接触）并进行互动的过程。比如你拿起手机解锁，就是一次交互，打开 APP 是一次交互，点击购买按钮也是一次交互。

交互设计，虽然用的也是 “设计” 一词，但它指的是制定这些交互事件的方法和过程，并不是指视觉样式的制作。

比如关注按钮，在视觉领域中，在意的是它的长宽比、图标样式、文字占比。但在交互领域，关注的是它包含的所有状态和互动反馈。

当然，只关注这些最初级的交互元素非常简单，很难对它展开独立的设计。

难点在于，产品提供的服务往往需要非常多的操作步骤才能完成，且整个操作流程中包含了各种状况，需要我们独立展开制定，才能确保后续 UI 界面设计的流畅性。

例如，用购物流程来举例，我们要做一个购物流程的交互设计。先假定产品本身的一些要求：

• 暂不支持购物车，但商品可以一次购买多个
• 任何商品都有配送范围和库存，超出就不能购买

根据上面的要求进行交互层面的考虑，就要想在哪个环节增加数量选择，是直接进订单页还是商品页？什么时候判断商品配送范围到没到，如果配送超了怎么让用户知道？库存不够的状态该怎么显示，如果是在订单未付款状态最后一个库存先被别人买了，怎么提示？

可以发现，这些问题和设计出什么视觉风格、配色、创意，并没有什么直接关系，我们要给出的解决方案，就是交互设计的输出内容。

交互设计主要输出的产物是交互原型，用来表现交互流程、事件的原型图例。比如下方，我针对配送范围判断的原型案例：

在这个简单的产品功能中，就需要一系列的交互方案进行配合。

随着产品的复杂度增加，交互的难度也就成几何倍数增加，如果交互没有制定清楚，那么就无法保证产品正常运作或产生系统 BUG（库存没有了还能下单）。

这也是为什么我们不得不重视交互的原因。

3. 体验设计是什么

体验设计（User Experience Design）在网上搜解释，是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。

但用户体验是一个比交互还抽象的词汇，它描述的范围太模糊，各行各业始终把用户体验挂在嘴边，对我们理解会产生非常大的障碍。

简单来说，用户体验，就是使用产品服务过程中产生的实际感受。这个感受可好可差，受产品的服务质量与各方面细节影响。而体验设计，即通过有目的性的调整产品服务、细节，提升用户实际感受。

例如上方案例，交互层面我们提供了各种防御性措施，提示用户商品没有库存、配送超出范围。虽然在功能上满足业务要求，但不代表它们产生的用户体验一定是优异的。

所以这时候就有两个关键的问题产生了：

• 如何确定用户对这套方案体验的优劣
• 如果体验不佳，应该如何进行的优化

第一个问题就是整个体验设计中的核心问题，我们要获取用户对某些定向功能、流程的体验评价。那么你就需要展开用户研究，通过制定一个测试、研究方案，来获得想要的结果。到这一步，让人眼花缭乱的科学方法论、研究方式就轮番上阵了。

假设我通过制定了一些用研的方式获取了用户对这套方案的评价，普遍反应体验较差，兴冲冲的要下单结果过一会儿没货，或是填了老半天收货信息结果告诉他没货。

于是，我就定位到了影响体验的关键因素，在后面我就可以思考该问题的体验改进方案：

• 用户点击进入下单页面锁商品库存，有 5 分钟的锁单时间。如果该商品是最后一件，在锁单期间其它用户看到该页面也是无库存的状态，不能点击购买。
• 配送范围要在下单前就给能否配送提示，直接在商品详情页露出，填写过地址根据上次购买地址判断，没有填写过就以手机当前定位。

这两个改进是今天普遍应用在自营配送的电商、外卖、生鲜等产品，相信大家一点也不陌生。而这些改进，完全是基于改善体验出发，而不是仅仅解决交互的问题，或者界面视觉问题。

上述案例只应用了 “提出问题 – 进行论证 – 给出解决方案” 的基础线性流程，虽然它很实用，但远不足以覆盖真实项目的所有体验设计实践。

所以，为了让体验设计的本身具备更清晰、细致的流程，不同的企业、组织、团队都开始搭建体验设计的标准化（花里胡哨）流程和方法论。

不管你看到的方法论有多复杂，添加了多少辅助线、介绍图形。它们都只是社会科学研究方法的不同拓展形式，没有本质上的区别。

在学习 UI 的前期阶段，并不需要真的去深入理解各个大厂的体验设计流程和思路。只需要知道，体验设计不是直接动手做设计的设计类型，而是一种通过研究分析行为来找出提升用户体验，再输出相关方案的设计。

当前就业形式分析

1. UI 对口岗位分析

学习 UI 可以入职的岗位不仅仅是 UI 设计师一种，到目前已经发展出包含 UE、UX、全链路等不同岗位。我们首先要认识一下具体有哪些，以及他们各自的职能。

UI / 界面设计师：

首先介绍老本行，UI 设计师也叫界面设计师。核心职能就是根据老板、产品的需求，提供界面的视觉方案。并输出相关的设计规范、设计说明、设计切图。

UE / 交互设计师：

理论上，UE 是 User Experience 用户体验的缩写，但在国内招聘中，UE 一直被当成交互设计师头衔来使用。交互设计师的主要输出内容，就是在获得产品需求后输出交互原型和文档。

UX / 体验设计师：

UX 设计师，体验设计师，就是专门针对体验进行设计的岗位。理论上体验设计师是做用户研究和制定体验方案。但不同公司对体验设计师的要求完全不一样，实际工作的内容重心可能是用研，也可能是交互或者界面。

体验设计师是目前职责最难清晰定义的岗位，完全取决于用人企业对体验设计本身的理解（参差不齐）。

全链路 / 产品设计师：

之前阿里提出了设计全链路的概念，很多人理解成是全知全能的 “全栈设计师”。实际上指的是可以深度参与产品业务和决策中，更好发挥设计商业价值的 UI 或 UX 设计师。

虽然输出内容很接近，但对于业务参与的要求会更高。

UI 动效设计师：

动效设计是 UI 设计的其中一个环节，普通项目对动效的需求和难度要求都不高。但在如直播、社交等特定项目中，需要大量的动效堆砌，这时候就需要有独立的动效的设计师来负责，专注在和产品有关的动效和视觉特效上。

2. 当前的就业形式

第二个问题，就是新手非常感兴趣的就业形式了。网上对 UI 行业前景的分析大多充满抱怨和负面情绪，认为对新手不友好，对没有背景、基础的人关闭大门等。

一条条反驳这些内容是没有意义的，如果只是听信这些负面情绪而退步，那么确实不适合学习和进入这个行业。因为连自己的立场和坚持也没有，又怎么能顺利面对后面必然会出现的挫折和苦难（任何职业都有）。

UI 设计师是一个完全和互联网行业深度捆绑的职业，现状随互联网行业的起伏而波动。探讨 UI 设计前景，就一定要结合互联网发展的趋势来分析。

首先，撇开宏观的各种政策和分析，我们可以确定一个观点，就是互联网技术的发展与应用，在未来几十年里依旧会突飞猛进。UI 设计师不可能在这个期间被取代和抛弃，要驾驭越复杂的技术和硬件，就越需要优秀的界面作为载体。

其次，UI 设计和编程，都是非常容易衡量真实水平的职业。企业招聘的目的是为了让职业人才输出高质量的成果赚取利润，如果只靠学历和科班，消费者是不买账的。

相比编程来说，UI 设计领域还有个优点（其实应该是悲剧），那就是新人 —— 众生平等。科班设计教育……懂得都懂。

总之，完全不需要担心科班生在 UI 产出上能有什么特殊的优势，他们需要学习的 UI 基础，和你没有任何区别，并且依旧要依仗自学或者培训班。这些外因确保了 UI 设计是互联网产品团队中综合门槛最低的那一个，如果多接触和分析大厂团队，你们就会发现设计永远是团队中学历最差的那一个……

因为门槛低，所以冲高薪想转行的人数也是最多的。经常可以在网上搜索几百个人竞争一个 UI 职位的新闻，但实际上，90% 以上的新人，真实水平是惨不忍睹的，直接可以体现在求职的作品集上。

面向大众渠道招聘收上来的简历，是一场大型的 “菜鸡互啄” 现场，只有头部 10% 以内的人是有机会的。这里并不是强调竞争有多激烈，而是大多数新手不是学习的方向不对，就是作品集滥竽充数，只有剩下的 10% 不到的人，处于真正的竞争状态。

在 UI 行业，“菜” 才是原罪，实力就是硬通货。而后面的系列内容，就是要帮助大家在学习中走上正确的道路……

3. 职业的薪资发展

受互联网行业影响，UI 设计师的平均工资远高于一般设计行业。在网上各个渠道搜索 UI 薪资的统计，都可以得出这样的结论。

以阿里 P6 的职级来区分，1 线城市 15K 以下的设计师，基本只能属于入门阶段。15-30K 的设计师，属于资深阶段。到达 30K 以上的，就进入专家以上水平。当然，这还只是说月薪，不包含年终奖、股票等其它福利。

当然，很多新手 UI 设计师会说自己工资怎么就没那么高，我和姚明平均身高两米，有意义嘛？

答案是有意义。因为工资不是身高，除去天花板，行业中上水平工资，是普通人可以通过努力获得的。高工资也不是 BAT 大厂特有的，有大量中小型规模的优质互联网团队，是会开出有竞争力的工资的。

那么为什么还有很多 UI 设计师处于低薪状态？因为公司的三六九等并不是单纯从规模上来考量的，而是 “互联网化” 程度。

会用心打磨产品的团队，和吃人情关系的外包公司、老板脑子一热做的家族企业是完全不同的。前者和后者的设计师水平，必然也有非常大的差异。就像在广告平面行业，路边广告文印店也有平面设计师，国际 4A 广告公司也有平面设计师，都是平面设计，两者平均下来有价值嘛？

想要获得高薪，除了大厂，就是面向这些围绕在互联网产业输出有价值，有竞争力的产品团队上，他们才能代表这个行业的真实情况和水平。而如果你所有的面试、Offer，都是来自老板家族型企业、有上顿没下顿的小外包公司，并且薪水微薄。那么主要的问题，不要怨环境，而是因为 —— 菜。

有很多新手，包括我自己，在我们刚开始入行的时候，确实只能进入到这些一言难尽的公司和团队中。但这不是职业的全部，不要将未来和现状捆绑起来。我们是可以通过持续提升自己的硬实力切换所处的环境，提升自己薪资水平的。如果现在只有 5-6 千，可以朝 1 W 进发，如果已经过 1W 了，就往 1W5 的水平努力，以此类推。这个行业有充分的上升空间和拓展的弹性。

树立正确的认识，建立长远的目标，你才可以在这个行业中走的更远，获得更多的回报。