设计干货 | 从零基础学习 UI 设计

两年前，在知乎写过这篇《从零基础如何自学UI设计》的文章，期间收到了大量的咨询和转发，也收到了很多人的感谢信。

每当知悉上路的新人们通过我的回答选择了自己喜欢的职业，找到自己喜欢的工作，顺利入行，我就由衷的为他们感到高兴。

这两年对职业发展的规划和当时相比已经有了相当大的出入，但在16年底的某个失眠的午夜，我收到了下面这个回复，再次激发了我做设计分享的动力：

那么，这篇回答就是首先要进行完善的部分，两年后回头重新审视， 当中的诸多不足之处，也在此进行修缮和整理，使从零基础或在职业生涯前期遭遇瓶颈的同学们，可以更好的构建自己的知识体系和学习流程。

第一部分：职业三观——启蒙

学习一项技能，尤其是已经有一定沉淀并在各行各业有广泛应用的技能，就一定要对它先有充分的宏观认知，并形成健康良性的三观（如拒绝速成的幻想，认为设计是吃年轻饭的消耗型职业）。

在开始正式学习前，你需要花足够的精力去了解和查阅它的起源、发展、应用和未来。UI 作为平面设计的一部分，再往上又从属于美术学这一大类。因此，首先要先去了解整个美术史的发展。

达芬奇的维特鲁威人

从人类起源的各个阶段中，美术经历了什么样的变化；在各自的时代发挥了什么作用；近代美术史又经历了哪些波折；平面设计艺术是如何发展壮大走进千家万户；并且有哪些经验成功过渡到后来的UI设计中；那些享誉中外的艺术大师有何过人之处；他们为美术学发展做出了哪些贡献；他们的名作到底有何动人之处…

之所以一口气抛出这么多问题，是为了让大家明白，UI 设计师群体作为专业的美学职业，绝大多数从业者却缺失基础美术知识及基本素养，这是我们的浅薄，也是我们的羞耻。了解美术史，学会入门的美术鉴赏，目的是为了以正三观。

美术史中包含了很多基础知识起源与应用，远远超出我们的想象。例如黄金比例的发现和实践作品，可以追溯到古希腊爱琴海文明，并且当时已经通过数学的解释直接应用于美术创作之中，而不是如大家想象一般，通过他们惊人的“天赋”和“手感”的指引。

而在近代的设计中，设计师通过黄金比例的规则，以尺规制图的形式来绘制 LOGO，却没有被多数人所了解，以至于见到下面图例的时候依旧有大多数设计师觉得那些参考线只是为了使作品看起来高大上，是用来自卖自夸的把戏， 而不清楚这些只是规范制图和度量的标准形式。

通过黄金比例圆裁切出来的 LOGO

UI 设计是个前沿的职业，有前所未有的影响力和受众群体，这也容易造成我们轻视那些看起来古老、过时的守则与标准，这种轻视也为我们挖好了井，将头顶的视线收束到方寸之间，遮挡我们发现更广阔的世界。

再者，UI 设计是现代企业活动中的组成环节，我们的所作所为是和商业行为、用户需求密切相关的，现在网上和各种书籍里都在持续强调UI 设计是用来解决问题的，这也已经成为具有政治正确含义的共识。

只以视觉冲击力为出发点的 UI 设计

但是，口号只是口号，以目前的经历来看，绝大多数设计师解决问题的目光停留在视觉层面的表现，设计得更精良更酷炫的表层问题上，而实际应用价值的问题又在哪里呢？这需要每个人自己去体会！

哲学有三大哲学问题，“我是谁？” “我从哪里来？” “我要到哪里去？”，构成了哲人在探索人世真理时的基础框架。我们也一样，要在初始阶段给自己提出三个问题，并花至少一个月的时间弄清楚：

UI 设计是什么？

UI 设计是如何产生的？

UI 设计可以解决哪些问题？

推荐书目：

《艺术的故事》[英]贡布里希 重点阅读

《西方美术简史》[美]亨德里克·威廉·房龙

《近代设计史》[美]瑞兹曼

《设计心理学3:情感设计》[美]唐纳德·A·诺曼

第二部分：绘画技巧——洞察

曾经和很多同行争论过，UI设计到底需不需要手绘能力？有很多大家都认识的国内知名站酷、追波设计师，都是没有手绘经验，非科班出身的。但是，这只是众多优秀设计师群体当中的一小部分，并且是具有不可复制性的。随着经验和眼界的积累，你会发现缺乏手绘技能的缺点在时刻制约他们设计的广度。

如果让我用自己的体会来总结，那么手绘不是决定你设计水平下限的东西，而是用来决定你以后设计能力上限的隐性天花板！那么从实际角度出发，说说我们在学手绘时，掌握的知识是什么——锻炼我们对物体正确轮廓、形体、光影的理解。

我们看看下面这样的案例：

光影、轮廓、透视准确的素描作品

即使很简单的物体，也有复杂而严谨的构造和光影关系，需要通过在学习绘画的过程中，掌握这种对细节的观察和驾驭能力，后期我们自己在绘制一些视觉图形时，才可以从基础构造上保证其合理性。我们也能在作画的过程里开始对排版、构图有基本的实践过程。

再者，绘画技能在日后实际工作的应用中，是有非常大的作用的！并不是如大家想象一般，用来画企业卡通形象，活动插画，APP节日启动页。而是成为帮助我们确定设计内容的快速试错方式。

每当团队或者自己在纠结一个设计需求需要具体包含什么样的图形，什么样的创意点时，我们就可以通过纸笔快速的找出方向并进行演示，效率远远高于在软件中操作。

画出多版图形形式进行筛选 将筛选的形式进行设计

那应该如何学习绘画能力呢？根据实际的经验，整理了一个适合目前时间比较充足，考虑长期自学的同学们的学习计划。

1、一定要从最简单的几何石膏开始画起，第一步掌握具体的轮廓，明暗关系。

几何石膏素描

2、然后画相对复杂的静物，重点理解物体的摆放，还有更复杂立体结构的呈现，光、影和更丰富的表现形式。

静物素描作品

3、学结构素描去解构物体，掌握快速打稿的能力。

而结构素描的基础脱离不开前面素描绘画的意识训练，对物体形体的认识越深刻，结构素描就越准确，这也是将来我们日常工作中被应用得最多的实用技能。

这个技能也同样适用于未来要学习3D软件的情况，3D的建模的水平和技术不止是让你们掌握各种操作工具，更重要的是意识，对物体立体结构的拆解、组合意识。

结构素描作品

4、可选项，学习速写。更适合经过一些简单训练的设计师，然后通过在日常中的随手练习，可以拓展出一些意想不到的效果。

野生动物的速写

当然，如果时间不足，包括想短期入行和职业提升的同学们，没办法投入大量精力的话，那就推荐给自己量身制定每天的绘画目标。在午休或者睡前，用水笔在笔记本上进行简单的涂鸦，绘制的内容可以是你们身边的任何事物，比如桌面的文具，由简入难不厌其烦的进行重复的训练， 同样可以掌握我们所需要的绘画能力（只是结果比较不可控）。

再次提示你们，学习绘画是为了通过实践来锻炼相应的思考能力。有时候画得不是太好没关系，重点是一直带着思考去学习，每一次实践都应该让你感觉到，自己在加深对物体的理解。所以，在学习绘画时的错误做法也是需要被指出来的。

我们学习绘画，是为了 UI 设计师的日常工作的产出，很多新手在这个过程会跑偏，开始学习插画、CG，这种做法都应该被坚决克制住的，一定要在绘画的时间里只使用纸和笔来操作，远离数位板。

推荐书目：

《人体绘画：设计与创造》

《素描的诀窍》

《力量——动画速写与角色设计》

《构图的艺术》

《绘画构图学》

第三部分：掌握软件——手段

这一步就正式开始进入学习软件的步骤。如果学习的是UI，那么我们只要将目光聚焦在下面三种软件上就可以了：

Adobe PhotoShop

Adobe Illustrator

Sketch

很多人说软件只是“术”，而思维和经验是“道”。这话没毛病，但我得给大家泼泼冷水，因为大多数设计师对软件的掌握，连一个合格的美工都够不上。

PS 和 AI 代表了两个领域的集大成者，前者是图像合成，后者是矢量绘图。它们主要承担的作用一定不能弄混，虽然有很多功能相同的交集，但是围绕的核心都是以这两点进行展开的。

而Sketch则是主要用来设计 APP 界面的专用工具，对于页面较多较杂的项目有更好的针对性。所以，不要再纠结哪个工具比较好用，哪个可以忽略。这些都需要我们精通，以应对多样化的设计情景。

而在具体展开学习软件课程之前，推荐大家先搞懂和 UI 相关的前置条件，就是对光、色、分辨率、数码显示的理解。可以在网上搜索李涛的《PS高手之路》，先看完他的前三课，并将知识点做好笔记背熟。后面的课程需要进阶后再回来看下去。

接下来就可以开始找具体的学习教程了，前期不要自己盲目的去看东拼西凑碎片化的教程，这是无序且混乱的，PS、AI 都可以通过淘宝搜索对应的教程进行全套购买（尽可能支持正版教学视频）。

入门教程基本大同小异，完整的看完几套视频教学，并根据演示进行练习，那么基本就可以在很短的一段时间内掌握软件的大部分功能和基础的操作思路。

那么什么才是我们学习 PS、AI 的要点，和这个阶段的重心呢？下面几个内容我觉得是最重要的：

色彩通道

图像滤镜

图层蒙版

钢笔路径

路径查找器

而我们需要通过在学完成套的基础教学之后，再开始看一些碎片化的技法教程，比如如何绘制一个拟物的图标，如何设计金属质感的特效文字等。衔接好绘画的成果，以及上方所涉及的软件要点，已经足以让我们临摹任何实物或者作品了。下面是几年前我的拟物练习：

Bose MINI 音响拟物训练

大量的临摹训练，是帮助我们掌握软件功能和技法的最佳途径。如果学习得再深入一点，还能帮助我们掌握相当多的风格和技法特点，为以后的工作产出提供更多的广度。

掌握了 Adobe 系列的两款软件后，sketch 就几乎没有什么上手难度了，只需要找出官方的中文文档，仔细看一遍就可以上手，它只需要被用来设计成套的 APP 或 WEB 页面，不要花精力学习如何用 Sketch 绘图，这些工作应该是由前面的两个软件承担的，不应该本末倒置！

Sketch 软件界面

好好去理解每个软件可以实现什么，优势是什么，极限在哪里？然后你就再也不会跑去作品评论区里问：好牛逼，请问这是PS做的吗？请和我默念这是本世纪设计界里最愚蠢的评论，不要让它发生在自己身上。

结尾再强调一次，软件只是一种手段，在此基础上还不是真正的设计！

推荐视频：

李涛光和色的关系 1

李涛光和色的关系 2

色彩模式图像分辨率 3

第四部分：设计理论——实践

狭义上来说，有了理论支撑的设计才是真正的设计。

因为看过艺术史，所以你会知道，每个时代流行的艺术创作有各自的手法特点，有共性，所以可以被归纳和总结，也就可以传授，培养出相同的艺术家。换句话说，美术家是可以被量产的。

在理论不断被完善的今天，要做出好的设计一样是可以通过理论学习结合实践产生，一定不要认为这是天赋上的差距，别人就比自己更有艺术细胞。

而 UI 作为平面的分支，平面当中的基础理论是可以完整应用到 UI 的设计创作中去的，只是 UI 对创作划出了特定的边界，但并没有超出其范畴。可以很肯定的说，提升我们的平面设计能力，也就是同时在提升我们的 UI 设计水平。

那么理论知识我们该学习什么呢？包含以下五个要点：

三大构成

设计几何

构图排版

字体设计

配色基础

每个方向都需要阅读相应的教材，重要性无以复加，你需要在观看的时候一边做练习，巩固看过的知识点。在你的设计观念足够成熟前，绝对不要上网看 《设计的XX法则》，《做好网页设计需要掌握的XX个技巧》，《新手一周成大师的配色方式》这些文章，完全就是设计界的鸡汤文。它们看着挺有道理，但完全没办法给新人提供实践指南。它们是用来遗忘的，即使看再多这类鸡汤文，你也做不好设计。

而关于具体交互类的理论总结，这阶段也不需要太过关注。

UI 设计的本质也是视觉设计师，当我们在研究产品和交互的职能前，优先要保证的是我们有良好的视觉产出能力。如果只有平面理论知识，那么很可能日常的工作会沦为只是将图片、素材、文字拼贴到画布中的 “拼图师”。

之所以还要强调上方提到的五个要点，还在于绝大多数公司的 UI 设计师，日常工作的内容是不止 APP 界面设计的。

随着通过设计来扩大 APP 用户量的方式越来越微弱，大多数互联网企业目前对设计的需求都集中在日常的运营设计之中，包含投放的广告，活动图，H5 和Banner 等。这些都已经是我们工作的一部分了，势必会增强我们的平面设计能力，奠定我们在求职群体中的优势地位。

日常运营图片设计

设计理论需要阅读的是明确以讲解知识点为主的教学书，而不是某些设计师的自传、感想、日常…那都不是在这个阶段所应该接触的。因为你缺乏对应的经历，所以难以引起共鸣。最好在有几年工作经验之后再捡起来阅读会有更深刻的感触，类似《设计中的设计》等。

推荐书目：

《三大构成》

《造字百万》

《好字体》向玫玫

《文字设计的原理》[日]伊达千代，内藤孝彦

接着就是关乎排版，栅格化_百度百科、传统网页布局栅格化设计分析，这也是UI设计师必须掌握的基础技巧之一。对栅格化有充分理解，就可以设计出足够安全而和谐的页面，下面书目：

栅格排版法：

《版面设计的原理》[日]伊达千代，内藤孝彦

《超越平凡的平面设计 版式设计原理与应用》[美]麦克韦德

《形式感+：网页视觉设计创意拓展与快速表现》晋小彦

《在你身边，为你设计：腾讯的用户体验设计之道》

第五部分：逻辑取舍——平衡

上一个部分说到了，UI 对于平面设计多出了一些边界，而这种边界就是限制，某些客观条件下无法被实现出来，以及被强制的统一元素、参数的限制。如果没有搞清楚这个边界的范围，那么设计出来的作品就会像脱缰的野马，远远超出可用的范畴，或者包含不切实际的实现成本。

比较有代表的，就如追波、站酷等地的许多设计师经过精心设计的“飞机稿”。

常见的 UI 飞机稿展示图

这类稿件很多时候作为练习是没有关系的，但和我们实际应用存在着诸多背离的情况，无论是配图的持续提供、开发的可实现性、开发的工期成本、平台的操作习惯。如果我们将这些设计当成应该应用的优秀作品，那在工作中一定会有大量碰壁的情况。

为了对这种限制有清晰的认识，首先你必须先了解下面几个问题：

分辨率的像素换算规则

iOS APP 的设计规范

Android APP 的设计规范

标准的切图方法

以此作为依托，再开始进行 APP 设计的练习，而不要只是单纯因为某些设计作品好看就要朝这个方向盲目的努力，并将它收录进自己的作品集之中，实际上这么做会造成在面试过程里被一些严苛的面试官挑剔得哑口无言的窘境。

并且在实际工作环境里，需要 UI 设计师可以很好的配合程序员一起完成项目，有快速响应程序员疑问的能力，那么你还需要尽可能了解他们思考的方式，而最容易了解的途径莫过于自己也动手 “ Coding ”，在 W3C 学院（比较权威的编程入门网站）里学完 HTML + CSS3 还是相当有必要的。

w3cschool 界面截图

HTML 和 CSS 作为静态网页的基础语言，相对简单，可以帮助我们快速掌握如何通过编写代码将设计还原出来，这为我们和程序员沟通起到了重要的桥梁作用。所以掌握这门前端技巧，也是众多互联网公司的 UI 设计师招聘 JD 必备条件。

某知名互联网企业 UI 设计师招聘需求

最后，还有一点应该注意的是，几年前大量兴起的 APP 交互动效热潮，对于 APP 设计的发展起到的作用是相当有限的。尤其是大量飞机稿式的动效，对于实际项目是没有帮助的，在前期学习阶段，也不推荐大家学习 AE 这个特效软件，因为它的参数设定是不能被软件还原出来的，所以做的越酷炫，那么离实现越遥远。

而实际制作演示动效的话应该用一些特定的软件来完成，如 Flinto 、Principle 、Origami Studio 等。不仅制作起来方便，而且上手也相当容易，只要看它们的官方学习文档，一两天就可以学会。

推荐阅读：

视觉设计师是怎样让前端工程师 100% 实现设计效果的？ - 酸梅干超人的回答

HTML 在线教学

CSS 在线教学

CSS3 在线教学

Javascript 在线教学

JQuery 在线教学

第六点：鉴赏模仿——超越

特地把这点放到后面，也是有理由的，前面的步骤都是一个设计师基础素养的实现，而一个出色设计师还需要掌握既定的套路和找到自己的风格，那最快的方式莫过于站在巨人的肩膀上——分析优秀作品并进行海量的临摹训练。

首先你要学会如何辨别优秀的作品，可以从多个渠道收集优秀作品和案例，首推使用：

花瓣（可以关注我的账号：酸梅干超人）

花瓣收集的灵感图片

擅长翻墙的同学可以出去外面看看 PIN，但是由于翻墙的不便和网速慢，不建议作为主要收集图集的工具。

其它诸如站酷、Behance、CSS Winner 等，也可以日常多关注关注，提升眼界。

学会看优秀的案例，用它们给你提供设计的燃料，然后你要做的就是反复的“借鉴”、“临摹”。好的设计思路和手感，不是光靠看可以看出来的，而是需要经过大量的练习得出的。

而如果一个新手从刚掌握了点软件就一直想原创各种新奇好玩的设计，我是不推荐的。理由是在设计过程里你会有大量的时间在思考一些细碎而又无用的环节，对于产出结果及进步都是低效的。

就像美术的学习，必须经过大量的实体、原画临摹，才有脱稿原创的能力，而临摹的功底越深，最终原创的效果和能力也就越强。所以抄是一个必备的练习过程，这不是创作，而是让你们明白怎么创作。

用你学过的设计理论在实践中对案例进行分析，只有发现了它们的优点并自己动手实践了，才对你的提升有实际帮助。你每天抄一个案例，BANNER、ICON、APP界面，那么不出几个月，你就能对现有的设计套路了如指掌，原创也可以设计出风格多样化，视觉效果稳定的作品（飞机稿），类似这样的：

视觉冲击力较强 “好看” 的作品

而不会做出这样的：

不及格的界面设计

同时，必须提醒一点就是，我们在设计过程中对美的追求往往和现实需要是背道而驰的，需要有足够的经验去判断什么样的设计已经足够了，什么样的是过度设计。你不止要在网上搜索优秀的案例，一定要持续关注这些那些最简单，但是最受欢迎的网站和应用。例如：知乎、INS、微信、淘宝等等。去不断讨论、查阅，来理解为什么是当前的呈现式样，而不是自己预想的那样。

你要在练习和思考中进步，不要盲目的追求视觉表现，这样的UI设计师是很难真正成长起来的。设计的终极目的是解决问题，而不是盲目的自我表达。所以我一直不推荐新手去看只上传飞机稿的网站：UI 中国、追波等等。

需要说到，当前主流设计平台的趋势就是，少数大神驱动庞大的底端设计群体，如果你已经在前几个步骤得到提升，那么这些网站的多数设计师已经在思想上没法和你并驾齐驱，不要去这些地方混迹。

这些网站不会有真正有价值、对等的交流和见解，只有设计师在自己圈子里找自信刷存在感的证明，你去扫两眼评论，就知道不会有“落霞与孤鹜齐飞，秋水共长天一色”这种回答，只有“哎呀，我草，牛逼”，“请问这是用数位板画的吗？”，“请问这是AI做的吗？”。这些大神的飞机稿和普通练习的迅速流传，很可能会产生诸多的不良印象。

那么 UI 设计师应该具体抄哪些、抄的顺序是怎样的？以下是我的推荐：

线性图标

简单的拟物

中英文字体

文章排版

banner 海报

网页设计

APP 设计

当这些方向都得到充分的临摹训练，就会给原创设计提供更多的机会，可以开始准备自己的简历和作品集。而且对于刚入行的新手而言，优秀的临摹作品一样是可以放进作品集来表现自己功底的方式。所以，多看、多想、多抄，从这里开始真正走进设计的大门吧！

推荐阅读：

为什么国内电商APP设计五花八门，界面那么繁杂？ - 酸梅干超人的回答

[ISUX转译]设计追波风

第七点：阅读思考——扩展

整个UI设计圈，还有一个很致命的缺点，就是对其它行业知识的排斥，科班毕业生尤甚。因为学生时代大多讨厌学习，有艺术生这个庇护伞，就可以合理安慰自己不学习不念书那是放荡不羁爱自由！

艺术史还要教会你们的一点就是，真正的大师绝对不会只是孤陋寡闻而只专注在手中的笔杆和油墨，他们不断的在认识世界，不断的在研究感兴趣的领域和人文社科。就像达芬奇曾说“没有什么能不通过人类的探求而称之为科学的，除非它是通过数学的解释和证明的途径”，“真理只有一个，其不在宗教之中，而是在科学之中”。

不要做一个只关注设计，不闻窗外事的井蛙。

成熟的设计不只是你技巧的表达，还有你对解决问题所展示出来的理性和洞悉。很多设计师和同层次的其它专业人员比较起来显得太幼稚和粗浅，症状也在这里。不要只用设计的角度去看世界，去涉猎更多的专业，让眼界更宽广，有更多的角度去理解世界，所得到的感悟将给你带来难以估量的提升。

正确的入场方式，才能使我们在工作生涯里明确持续进步的源头在哪里，不会被薄弱的眼界基础束缚！祝每一位看完这篇文章并开始学习的人，都可以成为优秀的设计师，做自己热爱的职业！

 ————END————

PS：上面的流程，更适用于有毅力长期坚持的同学。设计终究不是在短短两三个月内就可以达成的技能，有一个长期的渐进的过程，还有太多的细节和心得是这一篇文章无法详细展开讨论的，我会在以后的文章里持续更新内容。

当然，这几年实际上还是遇到相当多的人缺少这样的耐心，或者是某些外部的迫切因素，想要短时间内掌握可以工作的能力，那么在最短的时间应该重点学什么，怎么起个好头，远远比只拼命埋头学软件和凑作品重要！

大家如想交流一些UI设计相关的问题，可以关注我的微信公众号：超人的电话亭，或者加Q群：5537969

知乎ID：酸梅干超人