网店美工教程-页面构图技巧.ppt

《网店美工教程-页面构图技巧.ppt》由会员分享，可在线阅读，更多相关《网店美工教程-页面构图技巧.ppt（79页珍藏版）》请在三一办公上搜索。

1、,第 5 章,美工构图,5.1 页面构图,内容导航,5.2 海报布局,5.3 海报排版技巧,5.4 设计思路,5.1 页面构图,一个成功的专题页面，大部分会具有以下几个出彩的要素：色彩丶构图丶风格创意，细节等。一个页面从无到有，设计师需要对整个页面有全盘的设计和把控，良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引，甚至不用浏览具体内容就能了解这个页面的很多信息。,在现实生活与自然界中，我们随处可见几何图形的存在，简单的三角形、正方形、长方形和圆形甚至几根线条就可以组成很多有趣的图形，也很符合现代审美需求，适当的画面切割能够给页面带来动感与节奏感。加入几根线条，几个块面就能令页面起到意

2、想不到的效果。,5.1.1 几何切割,A.简单切割,5.1.1 几何切割,实现的时候需要注意的是素材不适合太过复杂和花哨，一般会是纯色大块搭配渐变，主要突出形状和区块。,用一个形状或者素材切分整个页面，画面瞬时变得有趣生动起来，内容区域也能得到有效划分。这类构图方式对内容没有过多要求，可随意安排。具体排版可根据内容来处理，也是现在专题页面用得最多，最普遍的一种构图方式,这种构图方式的前提一般是内容分主要两部分，并且这两部分是对立关系的情况下，比如说：对战，男女，冷热等等。页面一分为二，内容划分明确也更加具有视觉冲击力。,B.对称切割,5.1.1 几何切割,5.1.1 几何切割,集中而规律的排列

3、，从整体上抓住人们的视觉。这种构图方式适合那种每个区块中的内容属于平级关系的专题，用这种组合的排列能够保持各内容的关系，也能让布局更有创意,C.组合切割,不规则的构图，稳定而锐利，干净的排版，易于识别，不规则的构图方式，避免了画面生硬，不易产生审美疲劳。不同的形状和排列，呈现出来的视觉效果也不一样。这种构图方式使用最多的一般是为了体现时尚感，科技感，与锋利感觉的专题，例如时装，家电，以及游戏战斗类的专题等等,5.1.2 主题轮廓,根据专题的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓，将专题内容巧妙的填充进去。这种处理方式能够让用户一眼就能了解到一些信息，符合专题主题，并且能够让页

4、面更有设计感，生动且活泼。需要提醒的是设计的时候将形状尽量轮廓化，加以强调突出，主体不需要太具象，舍弃一些繁琐的、次要的元素，以免影响用户阅读内容。,5.1.2 主题轮廓,这类构图方式一般针对那种主体内容很明确具象，能够用物品或轮廓直接代表，比如:中秋可以用月饼丶玉兔；会员可以用皇冠，钻石等等等等，可根据具体的内容来进行尝试,5.1.2 主题轮廓,5.1.2 主题轮廓,5.1.3 放射及透视,通过整体放射状加透视构图，使画面呈现立体与空间感，视觉焦点明确，画面冲击力强，富有动感。,5.1.3 放射及透视,需要注意的是放射状的排版不太适合文字阅读，要注意文字排版。建议在文字数量较少的情况下选择此

5、种构图。一般游戏激战类的专题会较多的使用这种构图，突出动感,5.1.4 整体场景,专题内容不多，要突出趣味性，又怕用户无聊，那就设计成一副美妙的插画吧！让用户迅速置身在搭建的场景中，带动情绪，参与互动，直观获取有用信息。这种处理方式会使页面信息表现的更加准确顺畅，快速有效的把目标用户带入到页面氛围当中。,5.1.4 整体场景,5.1.4 整体场景,5.1.4 整体场景,需要注意的是场景搭建对素材的要求比较高，明暗，阴影，透视以及层次感，体积都需要用心处理。这类专题大多都会搭配动画一起实现，在带入感上更进一层。在设计的时候，对专题内容头脑里要有画面感，先搭建大的画面关系，再往里头添细节和内容，切

6、记场景不要抢了内容的视觉焦点，在适当的时候做些减法,5.1.5 流程图,如果你拿到的专题是渐进以及流向又或者是展示各节点的内容，用别的形式总感觉不够具象，那何不干脆做成一个个性化的流程图？俗话说，千言万语不如一张图，专题运用这种构图方式能够将步骤，关系，各个节点以及整体流向展示清楚，配合图片展示，一个枯燥的流程瞬间变得个性十足，用户浏览简单又明了，并且充满了趣味性。,5.1.5 流程图,在网页设计越来越注重个性丶趣味性以及视觉冲击力的今天，专题页面的构图也已经千变万化，以上只是列举出了其中较常见的一部分，不同的主题，不同的内容，构图排版的出发点也不尽相同，上面列举出来的方法也可以搭配使用。,5

7、.1 页面构图,所谓构图就是将表现主题的各个构成要素按照主次关系放置在画面相应的区域，形成视觉感受，达到设计意图。所有的构图方式追根究底都是为内容服务，构图必须要服从主题表现的要求，设计师在设计的时候要注意在追求创意构图的同时也别影响到用户阅读内容。,总结,5.2 海报构图,文案产品图海报尺寸,一张海报一般首先要问客户要下面3个东东：,在设计的过程中最主要也就确定以下2个方面：,1：排版构图（文案+产品）,2：海报配色（背景+文案 与产品色的协调）本文主要针对这2个方面进行解读。,一张电商海报基本有3部分组成，产品、背景、文案。确定好了构图版式，也就成功了一半。常见的版式有3种左文右图、左图右

8、文、中间文两边图。,5.2 海报构图,5.2.1 左文右图,这张海报是左文右图式，这张海报的左边文案排版非常典型，字体上粗下细，上大下小，上下主次分明，形成对比。文案四四方方架构非常稳重，非常平衡。,5.2.1 左文右图,5.2.1 左文右图,5.2.1 左文右图,5.2.1 左文右图,5.2.2 左图右文,这张海报属于左图右文也是很典型的，淘宝官方引导的那种典型排版。字体也是上粗下细，上大下小。下面的价格打折部分排版很稳重丶结实。,5.2.2 左图右文,5.2.2 左图右文,5.2.2 左图右文,5.2.3 中间文两边图,这张海报是两边图中间文字的排版，常见于多模特海报中。一般是一边近景另外

9、一边是远景模特产生对比和呼应。,5.2.3 中间文两边图,5.2.3 中间文两边图,5.2.3 中间文两边图,5.2.3 中间文两边图,放这张海报我想表达的是背景是风景的情况下，文字直接打上去会显得太乱。可以直接画一个半透明的框框，如图所示。然后再在里面排文案。模特也是一边远景，另一边近景。,5.2.4 斜切式构图,斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控制。一般斜切式的文案倾斜角度最好不要大于30，不然得歪着头阅读。另外根据阅读习惯，文字一般是往右上方的倾斜，文字这样有一种上升感。,5.2.5 其他构图,当海报上要放置过多的促销产品，可以采用这种版式。中间是一个半透明的

10、框输入文案。,5.2.5 总结,在海报设计过程中版式的平衡感极为重要，同时还要处理好不同物体之间的对比关系。比如文案字体的大小对比丶粗细对比丶模特的远近对比。好比我们画素描静物的时候，静物的摆放也是前后层次分明，有主物体，有陪衬的对比分明。关于文案：文案中要说清这个宝贝的属性，给消费者带来的益处等，关于文案大家可以百度FAB法则看下，这里不多说了。,5.3 海报排版技巧,5.3.1 对齐,5.3.1 对齐,5.3.1 对齐,5.3.1 对齐,5.3.1 对齐,5.3.1 对齐,居中式的排版在生活中最常见就是房地产和一些珠宝海报，居中排版会给人正式，大气，高端，有品质感觉。在电商海报中，居中排版

11、经常会见到文案直接打在产品上面，文案的遮挡会和后面的产品营造出一前一后的层次感，加上一些光效会让整张画面空间感提升许多。居中对齐并不适合入门的新手，因为这对画面的布局把控有一定的要求。,5.3.2 对比,无对比不设计。人们的眼睛不喜欢看平淡无奇千篇一律的东西，喜欢看有对比的画面！使用对比的排版技巧可以最有效的增加画面的视觉效果。对比原则包含的内容很多，比如虚实对比，冷暖对比等等，这次我们只谈关于字体的大小对比和粗细对比。,5.3.2 对比,5.3.2 对比,5.3.2 对比,观察使用对比前后的效果，在排版中仅仅运用对齐这一个原则是不够的，第二步就要用到对比！第一张图片由于缺少对比，整体显得很乏

12、味，除了标题略大一点下面的文本太长而且没有吸引读者的地方。第二张海报则运用对比的手法，使得页面更吸引人。而且文案的组织结构一目了然，更便于读者阅读。第二张海报中的标题加大加粗，与引标题2014夏装形成大小和粗细的对比。下面的正文采用小字，但是价格部分加粗强调再次形成对比。最下面的包邮说明部分采用最细最小的字与顺丰包邮又形成一种粗细大小的对比。只要将重点文字提炼出来放大加粗之后就是的整个版面信息主次分明，富有层次和组织性，就会在视觉上引导消费者向下浏览。,5.3.2 对比,1、找出文案中最重点的语句，运用粗细对比和大小对比加以强调和区分！2、字体既然要对比就要对比分明，把标题设置12号字，把正文

13、设置为10号字毫无意义，既然用对比就要大足够大，小足够小，细足够细，粗足够粗，让人眼一看就看出他们的对比关系。3、对比不光会让画面更加美观，而且会增加页面的可读性，不要担心对比后的读者不会去读小字，假如画面所有文字一样大，没有重点，没有逻辑，顾客往往一撇而过。只要你强调的部分吸引顾客，顾客也会下意识的往下看。,注意事项：,5.3.2 对比,5.3.2 对比,5.3.2 对比,5.3.2 对比,5.3.2 对比,5.3.3 分组,当文案过多的时候就考虑将文案分组，将相同信息的文案摆放到一起，这样不仅使整个页面富有条理性，也会看上去非常美观，更加有利于消费者阅读。,5.3.3 分组,5.3.3 分

14、组,5.3.3 分组,5.3.3 分组,一般来说一张海报基本就运用这三个原则，对齐，对比，分组。切记，画面中每个元素的存在以及它的摆放都是有道理的。画面是你设计的，你应该说出你这么做的来由！所有带有震撼效果的画面都是源自对比，如果有人说你画面太平淡了，那么就请运用对比，对比是最有效的改变你画面的救命草！,最后总结：,5.4设计思路,很多新手刚刚转入电商设计这一行业的时候，总是苦恼如何开始自己的设计生涯，不知从何下手，别担心，下面我们就一起来理清一下思路，告诉你如何快速走进设计之路。,5.4设计思路,产品背景颜色,通过上图我们可以看到的一个设计可以分为几个元素组成：,排版感情,5.4设计思路,产

15、品：就是你要围绕着它为主题来设计的东西，是整个设计的主心骨,背景：就是为了衬托出产品的价值，以为整个设计的氛围的一个元素，它是整个设计中好像最不显眼却最重要的一个元素，也是让人非常头疼的一个东西，但是你记住，它终究是配角，不能让它占了主人的位置。,颜色：在电商设计中，颜色可以说是重中之重，它是体现一个设计水平的重要条件，因为颜色带有感情，能影响人的情绪。,知识要点,5.4设计思路,知识要点,排版：一个好的排版，能让人的视觉得到舒缓，不易疲劳，且看起来很舒服。,感情：这个概念有点模糊，上面我们也说了，颜色可以影响我们的情感，但是我为何要分开这一部分来说呢？因为感情除了颜色外还有另外一层的意思，下

16、面我们就会讲到。,5.4设计思路,如何去入行电商设计：,首先实操就是必不可少的，其次就是理解设计的一个思路，然后我们必须要掌握的设计基础技能，必须要掌握色彩理论，还有构图的技巧。如果你真的不知道应该怎么办，那就先去模仿别人的设计。我们说的模仿不是让你抄，而是理解，其实我们抄的只是作者的想法，用色关系和布局，而不是叫你完全的把它抄下来。,5.4设计思路,思考：模仿什么？,5.4设计思路,5.4设计思路,5.4设计思路,我们在模仿设计的时候，也可以这样把内容分开一下，容易理解一个设计的布局是怎样形成的，同时我们平时有时间的时候，也可以把一些好的设计拿出来分析一下布局，并存好档，这样当我们在需要设计的时候，就可以通过平时的积累来丰富我们的设计。,5.4设计思路,5.4设计思路,谢谢观看,页面布局,