怎么样的临摹才最有效?这是高手的方法总结! - 优设-UISDC

怎么样的临摹才最有效?这是高手的方法总结!

2018/10/29 16538评论区

橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长有短,但是每个人都必须经历无法避免。

现在回想起来,印象最深的是画室老师让我们上午临摹一张图,下午就立马默写这一张图,刚开始的时候,连画面基本布局都记不清,苹果有几个、分别在哪里都会混乱,但没办法老师要求不能去看原图,只好硬着头皮画。慢慢的到后面,临摹的时候就会下意识的去记一些布局、画面笔触,最后也能还原到百分之八九十了,而且等下次其他同学默写同一张图的时候,还能说出画面某个地方的笔触应该是怎么怎么样的,记得特别牢靠。

在做 UI 的时候,我也发现有很多异曲同工之处。前期都是需要去大量临摹好的页面,然后记忆,形成条件反射,最后再为己用。但很不幸很多新手在入行之初,完全忽略了这点,包括刚入行时的我,拿到原型之后,一味的想自我创新,页面布局、字体大小、间距等都没有深入的去研究,完全凭着感觉来。这做不好也实属正常。

那怎么改善这一情况呢?最好的方法就是从临摹开始。

一、怎么找临摹素材

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

二、临摹四步曲

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

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

1. 图标

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

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

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

如果一开始就临摹一整个页面,就会过多的去关注页面,而忽略了图标的细节。举个例子,如下图1、图2相信大家第一眼看到的肯定是整体的页面风格、调性怎么怎么样,看完之后还会觉得这两个页面是一样的,没有区别?

但其实并不是,注意看一下导航栏上的图标,两个页面的图标在细节上不一样。图1的3个图标描边粗细、大小都不一致。而图2是调整后的,看起来整体统一很多。这些小细节在整体页面中很容易忽视,自己也很难意识到,但是当把它们单拎出来时,就很容易发现问题所在了。

以上只是列举的一个小例子,在实际工作中还有很多很多,所以我建议是先临摹整套图标,把一整套图标放到一起,看看是否统一。

2. 页面

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

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 进行对比,从中找到规律所在,当这些规律是你自己总结出来的,而不是别人直接告诉你的时候,印象也会更加深刻。

4. 举一反三

颜色

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

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

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

概念稿

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

三、如何整理素材库

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

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

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

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

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

四、总结

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

最后送大家和自己一句话「不要用战术上的勤奋,来掩盖战略上的懒惰」。

欢迎关注作者的微信公众号:「海盐社」

「UI设计师的临摹方法」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/the-most-effective-method-of-copying

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 神器下载 海报设计 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里