全面扫盲｜教你如何从零开始学UI设计
「预计阅读时间20分钟」UI设计学习第一篇，教你如何从零开始学UI设计
从最早的一篇零基础学 UI 到现在已经过去很多年了，UI 设计师的职能、工具、知识体系，都经历了大量的变更和革新。不仅越来越碎片化，也越来越难上手学习，零基础入门成本大幅提升了。
所以，我们打算开启一个新的系列，输出一部完整的 UI 零基础学习指南。根据 UI 新手系统学习 UI 设计的顺序，陆续会输出12-15篇不同模块的系列性文章。
写作目标：
我们的目标是通过这个系列，帮助新手高效、系统性地完成对 UI 职业的知识的入门。
UI 是一个完全面向职场的工作技能，它基本无法成为个人陶冶性情的爱好。学习这个技能，就是为了在真实的工作环境中进行应用，是一门以实用主义为内核的学科。
所以，在内容制定上我会避开过于概念、学术性的内容，完全以职业市场的实际需要为导向。同时我自己也非常讨厌 “不讲人话” 的写作风格，全篇避免 “高大上” 的专业词汇和行业黑话过度使用。
面向人群：
这套干货内容，适合从零开始想接触或学习 UI 的同学。当然，如果已经接触过一段时间但感觉自己的基础知识体系还是非常不牢固的同学也适合。
同时，如果是和 UI 相关联的岗位，如产品、交互、用研、运营、前端开发，也可以通过这套分享来了解 UI 设计师的知识体系、工作方法和思维逻辑，更好的配合 UI 设计师完成工作。
内容声明：
除用来举例的线上案例外，所有知识点和图文内容都由我们原创输出，会整合部分我们以前创作过的内容进来。如 UI 尺寸、字体规范、项目管理等。
因为网上有大量洗稿、抄袭和无声明转载我们的内容的账号，所以如果当你觉得看到的内容好像在别的地方看过，那只可能是我写的或者别人转载的。
免费声明：
这套分享将是完全免费的，不用担心写到一半变成付费内容。同时，文章中包含的各类网盘素材，一方面受不可抗力的影响，链接会不断失效，另一方面我们会持续变动更新（如软件安装包）。
所以素材不会直接添加进文章末尾（没法维护），需要大家关注公众号获取。
整篇内容完成以后，也会合并成一篇完整的 PDF 电子文档供大家查阅。
1.1 UI与设计
UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。
理解 UI 是什么，我们只要关注2个重点（敲黑板，划重点）：
如何有效输入信息？
如何有效获取信息？
计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1+1 等于几，你就要考虑你怎么输入 1+1 并让计算机处理结果，计算机又要通过什么形式告诉你结果是什么？有效的把指令、结果进行传递是非常困难的事情。
早期人类使用打孔卡片的方式做信息的媒介，人类和机器通过打孔来完成信息的输入和识别。随着技术的进步，屏幕成为新的媒介，我们可以直接往计算机中输入更复杂的英文字母了。
于是，计算机开始支持命令行的输入形式，即使用一些固定的单词、语法，来完成信息的输入，计算机再以文本形式返回对应的计算结果。
虽然这一步大大优化了信息输入、获取的流程，但是依旧不能让我们满足。因为它的门槛太高了，需要背下一整本操作指令手册，而且用途非常有局限性。
再往后，就是图形界面被发明了出来。比如桌面有个我的硬盘图标，你使用鼠标或键盘打开，那么打开的窗口就会显示该硬盘下级包含的文件或文件夹，你可以轻松选中这些文件再进行操作。
这个发明是跨越性的，因为它让信息输入、获取变得更高效，也让使用计算机设备的门槛更低，为计算机设备进入普通群众生活提供了必要条件。
之后伴随智能手机的兴起，智能设备的普及。UI 界面已经成为了我们日常生活不可或缺的一部分，我们通过界面来操控设备、获取信息，它是我们驾驭智能硬件、复杂程序的桥梁。
图形界面的本质是信息的载体，完成信息的输入和获取的 “使用价值” 才是它的核心价值。UI 设计的目标，即根据信息输入和获取的需要，设计相关图形样式和排版的设计。
所以，UI 设计是一个辅助用户来使用硬件、程序的工具，观赏性并不是它的唯一指标。理解 UI 设计最大的误区就是仅仅以美观角度切入，而忽视它的使用价值（后面会重点解释）。
虽然 UI 设计是针对所有电子设备图形界面设计的统称，包括穿戴设备、智能家电、车机系统等，但它在国内主流语境指的是移动端 APP 界面的设计。
在后续的内容中，我们的核心也将围绕 APP 的界面设计展开解释。
1.2 交互设计是什么
前面声明了，UI 界面本质上是一种工具，它为什么不像平面海报、卡片一样仅仅是用来输出信息或展示视觉效果的？
因为 UI 界面是可以进行 “交互” 的视觉内容。交互（Interaction Design，IXD）这个词汇对于新手来说一直是理解的重灾区，因为它的概念太模糊，且牵扯的其它领域太多。
简单解释，交互就是人和设备相交（产生接触）并进行互动的过程。比如你拿起手机解锁，就是一次交互，打开 APP 是一次交互，点击购买按钮也是一次交互。
交互设计，虽然用的也是 “设计” 一词，但它指的是制定这些交互事件的方法和过程，并不是指视觉样式的制作。
比如关注按钮，在视觉领域中，在意的是它的长宽比、图标样式、文字占比。但在交互领域，关注的是它包含的所有状态和互动反馈。
当然，只关注这些最初级的交互元素非常简单，很难对它展开独立的设计。
难点在于，产品提供的服务往往需要需要非常多的操作步骤才能完成，且整个操作流程中包含了各种状况，需要我们独立展开制定，才能确保后续 UI 界面设计的流畅性。
例如，用购物流程来举例，我们要做一个购物流程的交互设计。先假定产品本身的一些要求：
暂不支持购物车，但商品可以一次购买多个
任何商品都有配送范围和库存，超出就不能购买
根据上面的要求进行交互层面的考虑，就要想在哪个环节增加数量选择，是直接进订单页还是商品页？什么时候判断商品配送范围到没到，如果配送超了怎么让用户知道？库存不够的状态该怎么现实，如果是在订单未付款状态最后一个库存先被别人买了，怎么提示？
可以发现，这些问题和设计出什么视觉风格、配色、创意，并没有什么直接关系，我们要给出的解决方案，就是交互设计的输出内容。
交互设计主要输出的产物是交互原型，用来表现交互流程、事件的原型图例。比如下方，我针对配送范围判断的原型案例：
在这个简单的产品功能中，就需要一系列的交互方案进行配合。
随着产品的复杂度增加，交互的难度也就成几何倍数增加，如果交互没有制定清楚，那么就无法保证产品正常运作或产生系统 BUG（库存没有了还能下单）。
这也是为什么我们不得不重视交互的原因。
1.3 体验设计是什么
体验设计（User Experience Design）在网上搜解释，是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。
但用户体验是一个比交互还抽象的词汇，它描述的范围太模糊，各行各业始终把用户体验挂在嘴边，对我们理解会产生非常大的障碍。
简单来说，用户体验，就是使用产品服务过程中产生的实际感受。这个感受可好可差，受产品的服务质量与各方面细节影响。而体验设计，即通过有目的性的调整产品服务、细节，提升用户实际感受。
例如上方案例，交互层面我们提供了各种防御性措施，提示用户商品没有库存、配送超出范围。虽然在功能上满足业务要求，但不代表它们产生的用户体验一定是优异的。
所以这时候就有两个关键的问题产生了：
如何确定用户对这套方案体验的优劣？
如果体验不佳，应该如何进行的优化？
第一个问题就是整个体验设计中的核心问题，我们要获取用户对某些定向功能、流程的体验评价。那么你就需要展开用户研究，通过制定一个测试、研究方案，来获得想要的结果。到这一步，让人眼花缭乱的科学方法论、研究方式就轮番上阵了。
假设我通过制定了一些用研的方式获取了用户对这套方案的评价，普遍反应体验较差，兴冲冲的要下单结果过一会儿没货，或则是填了老半天收货信息结果告诉他没货。
于是，我就定位到了影响体验的关键因素，在后面我就可以思考该问题的体验改进方案：
用户点击进入下单页面锁商品库存，有5分钟的锁单时间。如果该商品是最后一件，在锁单期间其它用户看到该页面也是无库存的状态，不能点击购买。
配送范围要在下单前就给能否配送提示，直接在商品详情页露出，填写过地址根据上次购买地址判断，没有填写过就以手机当前定位。
这两个改进是今天普遍应用在自营配送的电商、外卖、生鲜等产品，相信大家一点也不陌生。而这些改进，完全是基于改善体验出发，而不是仅仅解决交互的问题，或者界面视觉问题。
上述案例只应用了 “提出问题 - 进行论证 - 给出解决方案” 的基础线性流程，虽然它很实用，但远不足以覆盖真实项目的所有体验设计实践。
所以，为了让体验设计的本身具备更清晰、细致的流程，不同的企业、组织、团队都开始搭建体验设计的标准化（花里胡哨）流程和方法论。
不管你看到的方法论有多复杂，添加了多少辅助线、介绍图形。它们都只是社会科学研究方法的不同拓展形式，没有本质上的区别。
在学习 UI 的前期阶段，并不需要真的去深入理解各个大厂的体验设计流程和思路。只需要知道，体验设计不是直接动手做设计的设计类型，而是一种通过研究分析行为来找出提升用户体验，再输出相关方案的设计。
2.1 UI 对口岗位分析
学习 UI 可以入职的岗位不仅仅是 UI 设计师一种，到目前已经发展出包含 UE、UX、全链路等不同岗位。我们首先要认识一下具体有哪些，以及他们各自的职能。
UI / 界面设计师：
首先介绍老本行，UI 设计师也叫界面设计师。核心职能就是根据老板、产品的需求，提供界面的视觉方案。 并输出相关的设计规范、设计说明、设计切图。
UE / 交互设计师：
理论上，UE 是 User Experience 用户体验的缩写，但在国内招聘中，UE 一直被当成交互设计师头衔来使用。交互设计师的主要输出内容，就是在获得产品需求后输出交互原型和文档。
UX / 体验设计师：
UX 设计师，体验设计师，就是专门针对体验进行设计的岗位。理论上体验设计师是做用户研究和制定体验方案。但不同公司对体验设计师的要求完全不一样，实际工作的内容重心可能是用研，也可能是交互或者界面。
体验设计师是目前职责最难清晰定义的岗位，完全取决于于用人企业对体验设计本身的理解（参差不齐）。
全链路 / 产品设计师：
之前阿里提出了设计全链路的概念，很多人理解成是全知全能的 “全栈设计师”。实际上指的是可以深度参与产品业务和决策中，更好发挥设计商业价值的 UI 或 UX 设计师。
虽然输出内容很接近，但对于业务参与的要求会更高。
UI 动效设计师：
动效设计是 UI 设计的其中一个环节，普通项目对动效的需求和难度要求都不高。但在如直播、社交等特定项目中，需要大量的动效堆砌，这时候就需要有独立的动效的设计师来负责，专注在和产品有关的动效和视觉特效上。
2.2 当前的就业形式
第二个问题，就是新手非常感兴趣的就业形式了。网上对 UI 行业前景的分析大多充满抱怨和负面情绪，认为对新手不友好，对没有背景、基础的人关闭大门等。
一条条反驳这些内容是没有意义的，如果只是听信这些负面情绪而退步，那么确实不适合学习和进入这个行业。因为连自己的立场和坚持也没有，又怎么能顺利面对后面必然会出现的挫折和苦难（任何职业都有）。
UI 设计师是一个完全和互联网行业深度捆绑的职业，现状随互联网行业的起伏而波动。探讨 UI 设计前景，就一定要结合互联网发展的趋势来分析。
首先，撇开宏观的各种政策和分析，我们可以确定一个观点，就是互联网技术的发展与应用，在未来几十年里依旧会突飞猛进。UI 设计师不可能在这个期间被取代和抛弃，要驾驭越复杂的技术和硬件，就越需要优秀的界面作为载体。
其次，UI 设计和编程，都是非常容易衡量真实水平的职业。企业招聘的目的是为了让职业人才输出高质量的成果赚取利润，如果只靠学历和科班，消费者是不买账的。
相比编程来说，UI 设计领域还有个优点（其实应该是悲剧），那就是新人 —— 众生平等。科班设计教育……懂得都懂
总之，完全不需要担心科班生在 UI 产出上能有什么特殊的优势，他们需要学习的 UI 基础，和你没有任何区别，并且依旧要依仗自学或者培训班。
这些外因确保了 UI 设计是互联网产品团队中综合门槛最低的那一个，如果多接触和分析大厂团队，你们就会发现设计永远是团队中学历最差的那一个……
因为门槛低，所以冲高薪想转行的人数也是最多的。经常可以在网上搜索几百个人竞争一个 UI 职位的新闻，但实际上，90% 以上的新人，真实水平是惨不忍睹的，直接可以体现在求职的作品集上。
面向大众渠道招聘收上来的简历，是一场大型的 “菜鸡互啄” 现场，只有头部 10% 以内的人是有机会的。这里并不是强调竞争有多激烈，而是大多数新手不是学习的方向不对，就是作品集滥竽充数，只有剩下的 10% 不到的人，处于真正的竞争状态。
在 UI 行业，“菜” 才是原罪，实力就是硬通货。而后面的系列内容，就是要帮助大家在学习中走上正确的道路……
2.3 职业的薪资发展
受互联网行业影响，UI 设计师的平均工资远高于一般设计行业。在网上各个渠道搜索 UI 薪资的统计，都可以得出这样的结论。
以阿里 P6 的职级来区分，1 线城市15K 以下的设计师，基本只能属于入门阶段。15-30K 的设计师，属于资深阶段。到达 30K 以上的，就进入专家以上水平。当然，这还只是说月薪，不包含年终奖、股票等其它福利。
当然，很多新手 UI 设计师会说自己工资怎么就没那么高，我和姚明平均身高两米，有意义嘛？
答案是有意义。因为工资不是身高，除去天花板，行业中上水平工资，是普通人可以通过努力获得的。高工资也不是 BAT 大厂特有的，有大量中小型规模的优质互联网团队，是会开出有竞争力的工资的。
那么为什么还有很多 UI 设计师处于低薪状态？因为公司的三六九等并不是单纯从规模上来考量的，而是 “互联网化” 程度。
会用心打磨产品的团队，和吃人情关系的外包公司、老板脑子一热做的家族企业是完全不同的。前者和后者的设计师水平，必然也有非常大的差异。就像在广告平面行业，路边广告文印店也有平面设计师，国际 4A 广告公司也有平面设计师，都是平面设计，两者平均下来有价值嘛？
想要获得高薪，除了大厂，就是面向这些围绕在互联网产业输出有价值，有竞争力的产品团队上，他们才能代表这个行业的真实情况和水平。
而如果你所有的面试、Offer，都是来自老板家族型企业、有上顿没下顿的小外包公司，并且薪水微薄。那么主要的问题，不要怨环境，而是因为 —— 菜。
有很多新手，包括我自己，在我们刚开始入行的时候，确实只能进入到这些一言难尽的公司和团队中。但这不是职业的全部，不要将未来和现状捆绑起来。我们是可以通过持续提升自己的硬实力切换所处的环境，提升自己薪资水平的。
如果现在只有 5-6 千，可以朝 1 W 进发，如果已经过 1W 了，就往 1W5 的水平努力，以此类推。这个行业有充分的上升空间和拓展的弹性。
树立正确的认识，建立长远的目标，你才可以在这个行业中走的更远，获得更多的回报。
3.1 UI设计师的技能组成
要成为一名优秀的设计师，包含两部分能力，一部分是显性的，一部分是隐性的。
显性能力即一些容易系统学习并输出的技能，如软件水平、界面设计、动效设计等。隐性能力，是不容易展示且比较难展开学习的技能，包含理论掌握、规范认识、团队协作等。
经过了认真的筛选，UI 设计师在前期需要掌握的这两部分技能如下图所示：
虽然每个细分领域的技能都可以无穷无尽的进行深入，但我们不可能把有限的时间投入到无限的学习里。
所有技能的掌握，都是为了满足在真实项目中有效输出和落地，后续的分享我们也将围绕在这个目标中展开。先掌握每个领域的必要基础内容，对完整的输出流程有概念以后，再开始深入某个领域专研，这才是正确的学习方式。
3.2 显性技能介绍
UI 设计师的显性技能必然是我们首先要掌握的东西，虽然想法、思路、经验都很重要没错。但是想让别人了解你灵魂前，他们肯定更在意外貌……
作为设计师，UI 产出物最直观的就是我们每天都会看见的图标和界面。
图标即出现在界面中的图形标识符号以及应用的启动图标。图标虽然有大量的素材可以用，但是想满足项目自身需求、风格统一的图标，基本只能依靠独立绘制来完成。
界面设计，则是输出界面的视觉能力，我们定义的界面视觉能力是在不受外力干扰下，你可以输出符合规范、基本交互、平面要素的美观界面，简称就是飞机稿输出能力。
动效设计，是在输出静态页面基础上，丰富使用体验的手段。通过增加一些有趣、简单的动效，来让操作效果更生动，或者作为情感化设计的一部分。
在项目设计中，抛开产品、体验这些内容和基本视觉样式，最让人关注的东西是对项目设计规范的搭建与应用。如何在多个页面中保持视觉风格的一致性。
最后，就是前面这些内容都输出完了，需要将设计的内容提交给程序员进行样式的开发，那么就要实现对设计内容进行标注和切图文件的输出。
显性技能对于新手来说，最大的优点就是知识点是相对固定的，练习方法也是固定的，只要通过刻意练习的方法，就可以积累和提前。
3.3 隐性技能
隐性技能相对就是一些比较抽象的能力，它们不再像显性的这些这么容易进行训练和制定客观的标准。
首先就是理解规范，没有规范是必然输出不了界面的。但移动端的设计规范，并不是你们想的官方准备个文档，里面数值写清楚了，你背下来就行。而是理解哪些规范是必要遵守的，哪些是可以灵活变动的（而可以自定义的是大多数）。
交互思维，则是如何让产品和界面操作起来合理的思维能力。平心而论，这种能力是只能依靠自己的 “多学多看” 积累的。交互书籍带来的帮助只是解释你留意到的现象原因，但不会告诉你遇到问题的时候具体应该怎么做。
团队协作能力，则需要比较具体的工作经验和技术认知了。我们如何有效的理解设计的需求，将设计的意图传递给别人，高效的评审和过稿，都是团队协作能力的体现。
审美水平，是一个设计师的品味。品味的高低是可以在作品集中感受出来的，怎么布局，怎么用配图，怎么选用设计风格。审美的落差很多时候可以填补技术上的缺陷。
最后就是理论掌握了，基本上上面所有讲过的细分技能点都有各自的理论、术语。设计领域中，不管多有用的理论，脱离实践都毫无意义。理论掌握的正确时机是在实践过程中查找并融汇贯通的。
隐性技能都是在实践过程中逐步积累的，在后续的分享里，我会将各种观点、理论，融入到具体的案例和实践步骤中说明。尽可能帮助大家增长这方面的知识。
4.1 学习UI用的设备建议
相对其它设计类型来说，UI 设计对硬件的要求可以说相当的低，只要有一台不是太老的电脑，无论是苹果 Mac 还是 Windows，对前期学习来说是毫无压力的。
下面简单介绍下做 UI 所需的电脑配置和系统，如果已经满足这个条件，可以在前期不用考虑买新电脑的事。尽量在未来掌握好基础软件特性，明确的知道配置不够用时，再根据需要升级电脑，降低前期的经济压力。
CPU：15年以后购买的 i5 以上的 CPU
内存：不低于 8G，如果能升级可以换成 16G
硬盘：只要是固态硬盘就可以，对速度没有太大要求
显卡：对显卡没有要求，只要正常能用就行
可以说，如果是苹果电脑用户，15 年以后的 Macbook Pro 笔记本、一体机都没有问题。而 Windows 用户只要不是之前买早期上网本的也大多可以满足。
如果实在是想换设备，就只建议购买 Mac 了，虽然 Windows 有些软件可以替代，但更多的 UI 生产力工具只有 Mac 才有。
Mac 电脑中，主要推荐 Macbook Air M1 和 Mac Mini M1，M1 芯片的性能完全能满足从学习到工作的生产力性能需求，尽量把内存加到 16G 即可。而且相对来讲价格更便宜，到淘宝或者 PDD 找第三方渠道会比官网便宜很多。
最后建议一定要配一块 24 寸以上的外接显示器，至少有 1080P 以上的分辨率，更大的内容区域对于设计软件的学习和输出来说至关重要。至于具体应该什么型号没有限制，对色彩也没有要求，自己外观看着喜欢的即可。
4.2 所需学习软件安装
UI 设计相关的软件主要包含三大类，图形、界面、动效。
图形软件主要指的就是 Adobe 的 PS 和 AI，用来处理复杂图形样式的软件，例如复杂的图标、字体、H5 视觉等。是每个平面相关设计师都绕不开的两座大山。
界面软件，就是设计 UI 界面和排版的专用软件。目前市场主要使用的工具有 Sketch / Figma / Adobe XD 三个，Sketch 只支持 Mac 系统，Adobe XD 因为更新太慢功能太少，已经不建议再花时间了解。所以主要建议从 Figma 开始学习。
动效软件，则是用来处理交互动效的工具。新手多数以为动效必须由 Adobe Effect 来完成，其实它最适合制作的是动效中的矢量动画，但不能输出完整的动效原型。目前市面上做的最好，Windows 也支持的动效工具是 Protopie，掌握它就可以忽略类似 Principle、Origami 等其它同类软件。
软件的安装可以看我们下一篇准备发布的前期学习的说明合集。
至于不是直接涉及到 UI 产出的工具，类似待办事项、番茄、笔记工具，就根据大家自己喜好决定。
4.3 相关材料准备
还有，一些必备的素材、资料也提前帮大家做了筛选，包括下面这些内容。
首先就是苹果 iOS 规范，我们制作了一个独立的翻译 PDF 文件，大概有 200 页，是前期必定要看完的，以及 iOS 官方提供的组件库。
然后就是针对安卓系统的资源，因为安卓的规范变动非常频繁，所以没有做翻译，大家可以打开下面的规范官网，通过浏览器翻译来查看。同时，我们安卓所需的官方组件素材等我们也提供出来了。
https://material-io.cn/
然后就是字体文件，包含苹果官方要求的苹方中文字体，SF 系列英文字体，以及安卓的思源黑中文字体，以及 Roboto 英文字体。
最后，就是常用的图标素材库了，这里建议收藏 iconfont 和 iconpark 两个网站，它们提供了大量的开源图标素材，可以直接应用。
4.4 相关书籍推荐
最后，就是和 UI 有关的书籍推荐了。首先要声明一下，看书仅仅是用来拓展我们的眼界，提供给我们一些视角和方法，只靠看书是无法获得有效提升的。
所以，我不打算推荐一个满满当当的数目，而是对于读者现阶段最有用的几本。排名不分先后，大家可以自己根据喜好阅读。
以上推荐书籍可以到网上书店购买，我们也另外准备了对应 PDF 的电子版本，也在本篇分享内容的素材包中，可以自行查找。
最后，就是顺便推荐下我自己出版的《写给大家看的UI设计书》，在京东可以直接找到，感兴趣的同学可以购买支持一哈！
以上内容就是本系列第一篇，新手应该认识和做的准备内容。到下篇开始我们就要具体针对软件展开说明，介绍 Figma 的具体应用逻辑和学习要点。
本篇提及的对应素材内容，可以在我的公众号里获取。关注 “超人的电话亭”，并回复：零基础学UI
有问题可以在评论区留言，下篇再见！
