1. 首页
  2. 高级教程

如何快速走进设计之路-电商(淘宝)美工构图分析

电商设计,比较通俗的讲法讲得最多的就是淘宝美工,很多新手在开始转入电商设计这一行业的时候,总是苦恼如何开始自己的设计生涯,不知从何下手,是先学技术,理论还是直接实操,反正从哪一方面都觉得自己无从下手,想成为一个好的美工,好的设计师,有这个决心就被一道无形的墙堵住了自己的前路。别担心,今天我们就一起来理清一下我们的思路,告诉你如何快速走进设计之路——从模仿别人的设计开始自己的设计生涯——这就是你入行电商设计的一个捷径。下面我们就一起来分析一下。

为什么我会说从模仿别人的设计开始自己的设计生涯呢?我们先从一个好的设计是如何构成的,去分析我们入这一行需要走的路有哪些。如下图。

如何快速走进设计之路-电商(淘宝)美工构图分析 

So nice!看到上图的时候,你的感观是不是触动了,就像是看到了一个黑长直的美女一样,叫你忍不住的想多看一眼!那么,美女美在哪里你应该知道吧?如果你不知道,那只能说你真的瞎了,虽然每个的眼光都不一样,但是共同的美的感观肯定还是存在的,那么我们就一起来分析一下吧,上图如此高大上是怎么做到的!

通过上图我们可以看到的一个设计可以分为几个元素组成:

❶ 产品,就是你要围绕着它为主题来设计的东西,是整个设计的主心骨(当然这个不一定,主次关系,可能因为不同的需求来把控,但是我们首先把它定位在第一位先)。

❷ 背景,背景就是为了衬托出产品的价值,以为整个设计的氛围的一个元素,它是整个设计中好像最不显眼却最重要的一个元素,也是让人非常头疼的一个东西,但是你记住,它终究是配角,不能让它占了主人的位置。

❸ 颜色,在电商设计中,颜色可以说是重中之重,它是体现一个设计水平的重要条件,因为颜色带有感情,能影响人的情绪,所以如何用色,如何布局颜色也是一个重要的课程。

❹ 排版,一个好的排版,能让人的视觉得到舒缓,不易疲劳,且看起来很舒服,所以一个好的排版也是构成一个好设计的重要元素之一

❺ 感情,这个概念有点模糊,上面我们也说了,颜色可以影响我们的情感,但是我为何要分开这一部分来说呢?因为感情除了颜色外还有另外一层的意思,下面我们就会讲到。

现在我们来总结一下如何去入行电商设计:

首先实操就是必不可少的,其次就是理解设计的一个思路,(今天我们会把模仿构图讲完,请大家耐心看完),然后我们必须要掌握的设计基础技能(有很多人说,技能那么多,我应该从何学起,那么你平时练习就必不可少了,不知道从何学起,就从模仿人的设计开始,哪个效果不会就在网上找教程,及时练习即时学就是提升最快的一种方式,平时多交流,分享自己的心得,有助于你提高自己的能力),必须要掌握色彩理论,还有构图的技巧。

然后把课程表排下来就简单多了:首先每天多看好的设计,理解一个好设计好在哪里,做好笔记!然后多练习,多学习各种不同的效果的制作方法,提升自己的工具设计能力,学习色彩理论,理解颜色的情感,颜色与颜色之间的关系,把握设计动向,现在的设计往哪个方向走,现在流行的元素有哪些?

总之一句话,如果你真的不知道应该怎么办,那就先去模仿别人的设计,什么不会就现学什么?现在网络传播如此强大,基本上想学的东西都应有尽有,放开你的心来去做吧,别怕自己设计的东西不好,都需要一个过程,慢慢就会好了。

下面我们就来分析一下,如何时去模仿一个好的设计,我们还是拿上图来分析一下:

首先我们要正确理解一下,我们说的模仿不是让你抄,其实是让你理解,其实我们抄的只是作者的想法,用色关系和布局,而不是叫你完全的把它抄下来,我们一起来再看一下下图:

如何快速走进设计之路-电商(淘宝)美工构图分析 

首先整个图的设计,我们先来大概的分析一下,是一件夏天穿的圆点连衣裙,主题是波尔卡圆,轻松感,那么我们很快就可以发现作者需要突出的一个氛围就是轻松感。我们来通过上图来大胆猜测一下设计师的设计思路如下:

由于是现在是夏季,所以蓝天白云打造的氛围是最好不过的一个轻松氛围了,于是刚好黄色与蓝色成对比色,这样黄色就容易突出了,产品的视觉点也就有了,于是背景用蓝色,但是我们来看看,如果大面积的使用蓝色的话,肯定会造成一个视觉疲劳,太刺眼了,我们想像一个蓝天白云是什么样子的?如何快速走进设计之路-电商(淘宝)美工构图分析 

当我们想到蓝天的时候,白云总是不可缺少的一个元素之一,如果单单只有蓝色,肯定会造成的我们的视觉疲劳,所以我们用白色来辅助一下的话就会达到更好的效果,而且还能营造出静谧轻松的感觉来,所以我们看到上图作者使用了比较大面积的白色来衬托蓝色。

我们再来理清一下作者的配色思路,因为产品(这里我要把产品看作是坐在椅子上的模特)本身橙色与黄色占的面积较大,所以取了蓝色大面积来压制一下,同时作到一个突出的效果。由于蓝色太刺眼,而且我们需要营造一种轻松的气氛,所以通过蓝天白云的构想,使用白色(略带点粉)玫瑰来点缀背景,使蓝色与白色结色营造出轻松的气氛。

所以我们在配色的时候,我们也可以通过这一种思路来进行配色,首先取我们首要突出的颜色,然后对其进行分析,得出我们需要用到的其它颜色。

接下来我们来看设计的布局,通过上面的布局,我们可以画出一个作者的布局图来:

如何快速走进设计之路-电商(淘宝)美工构图分析 

上图我把作者的布局用数字标示出来,也是方便大家理解作者的布局思路,主次突出的顺序分别从1-3,所以我们来看一下,产品在页面占的位置大概是占了整个页面的3分,(以黄金分割比例来说,我们大概把内容的主次分成3/7,也就是说重点和非重点之间的一个关系,)我们用一个比较直观的图来分析一下,其实这个图的布局相对也是非常简单的:

如何快速走进设计之路-电商(淘宝)美工构图分析

我们在模仿设计的时候,也可以这样把内容分开一下,容易理解一个设计的布局是怎样形成的,同时我们平时有时间的时候,也可以把一些好的设计拿出来分析一下布局,并存好档,这样当我们在需要设计的时候,就可以通过平时的积累来丰富我们的设计,例:

如何快速走进设计之路-电商(淘宝)美工构图分析

我们再来看一下作者的文案排版,由于作者需要突出的产品元素是圆点,那么为了突出这一个元素,他把圆这个元素融入到了文字当中,通过文字更直面的表达出这个元素,于是作者字体改用准圆体并把文字的圆的的正四方改成了一个加圆,同时用一个曲线来勾勒其形状,达到一个优雅的效果(产品本身的效果就是优雅,高贵),所以当我们在使用字体的时候,要注意与产品的情感结合在一起,而不是盲目的使用自己喜欢的字体。

刚才我们也说了,这个设计出发点是突出夏天的静谧气氛,但同时我们也不能忽略了产品本身的气质,在选取配色的时候,我们选用了蓝天白云的这个概念,但是产品是优雅高贵系列的,如果我们用白云的话,就略显调皮了,所以作者用了一朵玫瑰花来代替白云,白中带点淡淡的粉色,衬托出优雅高贵的气质,并用了阴影色来点缀玫瑰花,增加了对比与静谧的感觉,这里就是我之前所提到的感情元素,我们可以从平时的很多设计中看到,例:

如何快速走进设计之路-电商(淘宝)美工构图分析 

上图中的绿叶,这样的一种动感效果,带给我们一种春天的气息一样的感觉,代表了一种纯净美感。

如何快速走进设计之路-电商(淘宝)美工构图分析 

上图中的玫瑰花,带给我们不一样的视觉感受,同时也影响了我们的情感,这其实就是一种视觉情感,由静到动的一种引导。

聊到这里,我们大概也理清了作者的思路,其实本文我们讲得很长,实际我们总结出来,也不过就是一两句话的事情,重要的还是学会从哪些方面去分析一个好的设计,下面我们来总结一下:

产品:颜色黑白橙黄(这里我们把椅子也当成是产品的一部分)要突出夏天的静谧的感觉→于是我们得出颜色(采用夏天的天空)蓝色为背景主色,用白色来辅助→产品亮点是波尔卡圆点,于是我们把字体定位成准圆体,并对其进行修饰,突出圆点这个概念元素→产品本身是优雅高贵的气质,于是我们摒弃了白云这个元素,改用玫瑰花来点缀(白色带点淡粉色的玫瑰花本身就有高贵静谧的感觉,再加上阴影的衬托,对比感觉使得这个元素带来的感觉更加直观)→注意留白,来大家足够的思维空间来创造他需要赋予这个设计的情感,别总是把设计堆得满满的,让人的眼睛都不知道往哪里放,在看官看到一个元素后,要给他足够的空间去思考,创造他自己的情感,千万不能让他情绪急躁了。

关于构图这一块,想说的东西太多了,说上来有些长篇大论的感觉,也感觉有点急躁了,可能会有一些讲得不到位的地方,大家看完后,麻烦把自己的感想告诉我一下吧,我看看还有什么要补充和改进的,请多多与我交流,我希望大家能我一起共同交流成长,共同创造出我们行业的价值。


作者:你丫才是美工 来源:新浪微博  本文版权归作者所有,转载请注明出处。

原创文章,作者:铁木珍,如若转载,请注明出处:https://www.ren3.cn/14603.htm

发表评论

电子邮件地址不会被公开。

评论列表(8条)

  • 映
    2014年7月30日 下午6:08

    嗯嗯。文章写得很详细,很清晰。
    的确是初入电商设计的童鞋的良贴。
    受益了。
    希望作者继续写相关文章。
    谢谢。

  • SINCE
    SINCE 2014年8月17日 下午2:19

    楼主分析很透彻,受益颇多啊。谢谢~ 😉

  • 扇
    2014年8月18日 上午10:54

    受益匪浅,收藏起来,无从下手的时候再看看

  • 太阳花
    太阳花 2014年9月1日 下午9:06

    很不错!值得学习,感谢作者的分享!

  • 恬玮little
    恬玮little 2014年9月18日 下午3:57

    很不错啊 很好

  • 名望献品
    名望献品 2014年9月26日 下午3:38

    好文章,收益了,谢谢…

  • 幻
    2015年1月6日 下午5:20

    分析得很好啊,一时吃不透,收藏起来,迷茫的时候再看看。

  • yang_216
    yang_216 2015年2月13日 下午8:10

    :mrgreen: “从模仿别人的设计开始自己的设计生涯”。

联系我们

181-7282-8533

在线咨询:点击这里给我发消息

邮件:154526627@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code