认识达内从这里开始

临摹对于初级设计师来说是技术提升的一个主要方式之一。而今天我们就一起来了解和学习一下，设计师在选择临摹素材的时候都有哪些方法。

一、怎么找临摹素材

临摹重要的就是找素材，素材的好坏直接影响到后期的效果。建议临摹线上APP，线上APP的页面在落地前经过很多人的打磨，特别是那些大厂的APP，直接找一些自己喜欢的、觉得好的临摹就好，并从中找到规律所在。

二、临摹四步曲

很多人临摹的时候，总喜欢“描摹”，比照着原图进行临摹，但这样的成效有限，没有经过太多的思考。我建议可以和上面我讲述的学画画的故事一样，描摹完之后再凭借记忆画一遍，画完之后再比照着原图进行修改。

在临摹UI界面时，需要有侧重点，我自己的经验是可以先从临摹图标开始，然后再扩展到布局、字号、间距等，逐个击破。之所以推荐从图标开始，是因为它是每个APP中不可或缺的，画不好会直接导致页面不精细，没有细节，而画的好的话也能直接提升页面质感。

2.1图标

初期只需要单一的只临摹图标，不过需要注意的是不要只临摹一个两个，而要整套临摹，一个两个图标看不出来整体性，而UI界面上的图标也是整套出现，不会单独存在。

过程中也需要有意识的找一些当前不会画的、和之前风格不一样的图标，扩展宽度以及转换思维。不把自己限制在一个局限的空间里。

等手头功夫练到一定阶段的时候，再去和页面相结合了。以我的经验来说，前期练手头功夫很重要，相当于打地基，单纯的临摹图标会让你更在意图标本身，是否和原图一致，怎么画才是方便快速的。

如果一开始就临摹一整个页面，就会过多的去关注页面，而忽略了图标的细节。

2.2页面

当这一步攻克的时候，就可以到下一步了，临摹整套页面。去找几个线上的图标多的页面了，常见的就是个人中心页面以及视频类APP的频道页。去临摹整个页面。这个时候就要多去注意图标和页面风格是否一致、和字体是否匹配等等

2.3分析总结

临摹完了之后，要学会总结，比如个人中心图标一般多大、配多大的文字以及颜色等等，不然久了之后就都忘了，白临摹了。比如拿刚刚京东金融和陌陌的页面举例：京东金融是40*40px的图标配32px的文字，cell的高度100px。

而陌陌是48*48px的图标配36px的文字，cell的高度100px

再对比两个产品，你会发现虽然他们字号和图标大小不一样，但是他们的cell高度都是100px，那下次自己做的时候就可以优先尝试100px的cell高度。这样等积累的素材够多时，自己再做页面的时候就心中有谱了，就不用闷头苍蝇一样乱做了。

再额外扩充一点，如图两个APP图标距离文字和图标距离页面边距是一样大的，一个都是32px，一个都是30px。

按照我们正常的理解肯定是图标距离文字更近点，为什么这两个APP是一样的呢?是不是所有的APP都是这样的。这个时候我们就可以再多去截图几个加以对比。如下图虾米音乐的间距一个是48px，一个是28px，图标到文字的距离小于页边距。

得到的一个是36px，一个是28px，图标到文字的距离也小于页边距。

那是不是我们就可以大致得出一个结论，图标到文字的距离小于或者等于页边距，而不能大于页边距。

在这里只是给大家提供一个思路，在临摹的时候遇到任何问题，觉得不对劲的地方，可以再多去找几个APP进行对比，从中找到规律所在，当这些规律是你自己总结出来的，而不是别人直接告诉你的时候，印象也会更加深刻。

2.4举一反三

颜色

当总结完图标的大小以及和间距、字体等之后，其实还有一个很关键的元素需要注意，那就是图标的颜色，颜色非常能体现一个APP的气质，一套的配色只看颜色就能让人一眼认出来，而颜色重要的一点就是需要和产品的调性相符合，如下图，作为金融类产品，跟钱相关的京东金融配色就很稳重，而陌陌的配色就更年轻、活泼。

平时我们多积累几套配色，培养自己的色彩感觉，也可以尝试在临摹完一套图标的时候，重新给它配一套颜色，你会发现当颜色改变的时候，图标整体的感觉也截然不同。

当然你也可以尝试用同一套配色，但是图标造型不同的方式，尽情去尝试你觉得想做的方向，你会发现其实这过程很有意思。在这过程中你也会感悟到很多，方法已经说了，那至于具体什么感悟就需要自己去意会了。

概念稿

总是做一些线上的落地稿的时候，难免会限制自己的思维，所以我们需要做一些概念稿，放飞一下自我。比如在临摹完一张界面的时候，可以基于这个页面的功能自己重构一个，这样的好处是页面功能可以落地，也能锻炼自己的产品思维。

三、如何整理素材库

当临摹四步曲做完之后，我们需要将产出物整理好。如果你在素材库里一分钟内找不到想要找的那个，那么你的素材库多半是没用的。素材不在于多，而在于质量，我们自己曾经画过的图标、页面，都需要加以整理，以备不时之需。现在大部分设计师都是用sketch做图，所以我们可以改变一下管理素材的方式，不用PS时代的那种一个需求一个源文件的方式。

这种方式在我看来极大的浪费了sketch对于做UI来说先天的优势。其实我们完全可以把所有图都放置到一个文件中，在这个文件里建page来区分，我自己是习惯用年份来区分，一年做的东西都放到一个page里，然后会在每个不同的项目前加上说明，后期找的时候容易定位。

这样我们就可以把一些通用的页面元素做成组件，比如上下导航、时间栏等。而且还可以把所有的图标整理到一起，一目了然，对于那些返回、搜索也就不用每次单画了。

按照这样的方法整理的话，源文件的个数就会少很多，只需要按类别把每个种类建一个sketch文件就好。

特别是对于写文章的我来说，当我把所有文章的配图放到一起，在做新的图的时候，就可以直接调用之前的素材，对于一些图片大小、图片下方文字的大小、颜色都可以做成规范，就不会出现每次做的不一样的情况了。

总结

工作的越久，越会发现UI是有规律可循的，只要平时你多注意、多积累，一步一个脚印不要急。技法只要肯花时间都能学会。越到后面看的其实是思维方式，善于思考的人，总能从过往的经历里总结出一套方法论。

当你长期需要重复做一件事情的时候，就拿我们编辑文章来说，只需要把文字和图分开，按照顺序编辑好，难度上几乎为零，就是比较麻烦，早期编辑一篇可能需要1个小时，但是当你总结了规律之后，整理好规范，图片做多大、图片上下左右是否留边距、标题字号行高、文字距离图片的间距等等。

定好之后，后续就只要按照这个规范走，过程中都不需要动脑了，不需要动脑也就意味着你可以在编辑的时候做其他的事情，比如：和爸妈打电话聊家常、追剧等等，提高了效率从而节省了时间成本。而这些如果你没有意识到需要总结规律的话，那么每次你都需要花费那么多时间，看起来很努力，但其实只是感动了自己。

作者：橙子的橙子

节选：公众号：海盐社

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!