本文框架如下：

• 一、怎么临摹图标？

  •      1、拟物图标

    •      2、功能图标（线性/面性图标）

• 二、怎么临摹界面？

•      1、临摹界面时“三不要”

•      2、组件化临摹

• 三、怎么临摹插画？

• 四、临摹教程和交流群

• 
  

临摹这个事情，说简单也简单，找到一个参考，直接上软件操作就行。说复杂也很复杂，你要把临摹的作品分析透，彻底掌握，并不容易。

对于 UI 设计学习者来说，临摹的内容主要是：图标、界面、插画这三种。每一种都有临摹的技巧和注意事项，掌握了这些，不仅可以帮你快速完成高质量的临摹，还能真正从临摹中提升 UI 设计能力。

在进入具体的技巧之前，我们先要明确对临摹的态度：临摹是为了体会、学习优秀作品的设计思路和技巧，而不是为了做得跟原作一模一样，完成任务。临摹最忌讳只动手，不懂脑，那样完全是浪费时间。

一、怎么临摹图标？

设计图标是 UI 设计师的基本功，图标的分类方式如下：

①按照应用场景来分：功能图标、启动图标、装饰图标；

②按照风格来分：线性、面性、混合、扁平、拟物、2.5D 等主要的几种。

在各种风格的图标中，临摹起来难度最高的是「 拟物图标」 ，最常用的是以“线性 ”和“面性 ”为主的「 功能图标」 。

今天，我们就来说说这两种练习价值最大的图标，应该怎么临摹。

1.拟物图标

现在很多 UI 设计大神，都是从临摹「 拟物图标」 开始学习 UI 设计的，因为它在各种图标中，难度最大，做好了成就感最高，而且能帮你快速的熟悉软件。

临摹「 拟物图标」 建议使用 PS，因为它涉及到非常丰富的图层和样式效果，用 PS 做是最方便的。如果你对软件不熟悉，可以先去看看基础的 PS 教程，再开始临摹。

拟物图标的特点是非常复杂，给人的感觉是无从下手，所以在临摹之前，要先进行充分的「 观察」 和「 拆解」 ，去找到构成这个作品的最基础、最细小的元素。

比如上面这个相机图标，看着很复杂，我们要先把它最基础的形状找出来，再考虑如何添加细节。如下图，几个矩形经过切割，拼在一起，再添加渐变，就成了相机的基本形态。

临摹拟物图标的时候，非常建议先在纸上画草图，不仅能练习手绘能力，还是一个揣摩和构思细节的过程。当然，刚开始不可能像下图画的这么好，至少我们可以从简单的开始练习。

对于纯纯的新手来说，拆解也不容易，这个时候建议从教程和源文件开始。

上面那个相机图标，在其它网站可以找到图文教程，可以跟着教程一步步做下来。

在一些资源网站上，也可以找到拟物图标的 psd 源文件，去源文件里拆解图层，寻找组成图标的最基础元素，再学习原作者是如何添加细节的，这个思路会比较容易。

2.功能图标（线性图标、面性图标）

临摹「功能图标」的时候尽量使用能绘制矢量图形的工具，比如 AI，还有 Sketch、Adobe XD、即时设计这样的 UI 设计专业软件。

绘制这些图标，最常用的功能就是图形工具、布尔运算、钢笔工具，这些软件都是包含的，而且比 PS 更精简，更好用。

临摹功能图标的时候要注意：

1.选择一套高质量的图标，临摹一整套，才能体会到原作者的设计思路，不要这套临摹一个，那套临摹一个。

2.评价一套图标质量高低的几个维度，包括识别性、规范性、统一性、呼吸感、品牌感，我们临摹的时候也要考虑这些问题，如果原作品哪一条做得不好，可能是它质量不行，不适合你临摹学习，如果你的临摹作品哪一条做得不好，那就对照着找找原因，差在哪里。

识别性：用户能不能在没有文字提示的情况下，一眼看明白这个图标代表的意思。

规范性：同一套图标，在视觉大小上，是不是一致的，像素对齐、圆角大小、描边粗细这些细节，是不是一致的。

统一性：图标的复杂程度、颜色规范、设计语言这些，是不是统一的。

呼吸感：有没有适当的留白。

品牌感：有没有把品牌元素，巧妙的融入到图标设计中。

3.临摹图标时要注意，规范性很重要，要做到规范性，就要合理运用「布尔运算」 。布尔运算其实很好理解，就是把两个基础图形相加、相减得出新的图形，具体是下面这几种关系，合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。

我们经常会看到一些优美的图标设计，它不是直接画出来的，而是用各种大大小小的基础形状相加、相减得出来的，这就是运用了布尔运算，这样设计出来的图标会更有吸引力和说服力。

再举一个简单的例子，先画三个同心圆圈，再画一个正三角形，相交就得到了 Wi-Fi 图标。我们在临摹的时候要注意，不要凭感觉去画，而要找到运用布尔运算的方法。

当然，除了布尔运算，用钢笔工具去绘制图形也很常用，这里就涉及到一个「贝塞尔曲线」的概念。我们用钢笔工具画出来的图形，就是由贝塞尔曲线组成的，贝塞尔曲线包括节点、控制点、控制线、曲线这几部分。

说起名字来复杂，其实操作起来很容易，如果你之前用过 PS 里的钢笔工具，那对这些应该很熟悉了。如果你是纯纯的新手，那就多练练吧，上手之后，会发现用起来很方便。

二、怎么临摹界面？

每一个界面都是由图标、图片、文字、几何图形这四种元素组成的，设计师要做得是把这些元素排列组合，放到合适的位置上。

临摹界面的时候，不要选太简单的页面，也少选追波上的飞机稿，最好临摹上线产品的页面，选择带图标、色彩丰富的页面，比如美团、滴滴、支付宝这些 App 的首页。

临摹界面时，有“三不要”：

1.不要在原图上描形状。有的同学把原图降低透明度，放在底下当背景，然后在上面描，这样无脑的临摹，对你提高水平，帮助是很小的。

2.不要去原图直接吸取颜色，自己在色板上调，培养色感，哪怕不能完全一样，也没关系，你是为了学习，不是为了完成作业。

3.文字大小也不要严格比照原图去缩放，自己去设置数值，对比原图做调整。

组件化临摹

组件化临摹，简单来说，就是一边临摹界面，一边建立一个临摹产品的小组件库，不仅能提高临摹的效率，还能让你的临摹作品更加规范化。

我们通常不会只临摹某 App 的一个界面，很可能是临摹它的多个界面，这些界面里一定有很多可以复用的模块，哪怕是只临摹一个界面，这个界面上，也有可以复用的模块（比如下图中的头像），对于这些模块，我们就可以直接把它们做成组件，添加到组件库里，在需要的时候，直接引用。

再举个最通俗的例子，在「即时设计」 的资源广场，我们能获取到 iOS 的官方组件库，在做设计的时候，有一些页面上的基础元素，就不用自己从头做了，直接从组件库里拿出来就好了，比如每个页面都有的顶部状态栏。

每一个成熟的产品，都会有自己规范化的设计系统，组件库就是其中的重要内容。我们临摹时建立的小组件库，不需要像 iOS 组件库那么丰富完善，用到什么就做什么即可。

对于刚刚开始临摹的同学来说，还不理解组件的意义，考虑这些还有点早，那就一步步来吧，这里也只是简单提一下。

三、怎么临摹插画？

对于绘画小白来说，临摹插画最难的点，就在于不知道如何拆解构图，不知道从何下笔。

这个时候，最好的方式就是先跟着教程练习，等有一定基础了，再去找自己喜欢的图临摹。这里推荐一本书《插画教室：专业插画设计基础教程》，作者鱼雨桐。

里面有从零开始，绘制一幅插画的详细步骤，真的超级详细，哪怕没有绘画基础，跟着这个步骤，也能画个八九不离十，非常适合入门。

而且书里面从画植物开始，到画动物，再到画人，由易到难，循序渐进，非常科学。

这本书在微信读书上有电子版，不想买纸质书的同学，可以看电子版。

《插画教室》教的插画，是用 PS 来画，主要是让大家入门的，UI 设计师在工作中，用得最多的还是矢量插画，用 AI 画的比较多，这里再给大家推荐两个 AI 矢量插画入门课程，都是免费的。

有个网站原来叫站酷高高手，现在叫站酷学习，主要看刘若森（包子老师）那节，了解一个简单的矢量插画的绘制过程和用到的工具，师傅领进门，练习在个人，接下来就自己练吧。

四、临摹教程和交流群

临摹贵在坚持，也难在坚持，这个时候，你需要的是能一起临摹，一起进步的小伙伴。

在公号「设计深度精选」回复“临摹” 可以和上千位好友一起参加“每周临摹”活动，还有机会赢礼品哦！！

另外，回复“抽奖”还有机会免费拿到各种UI设计书籍哦~

最近一期是牛Mo王的《视界·无界2.0：写个UI设计师的设计书》

Powered by Froala Editor