网店美工教程——页面构图技巧

5.1.5 流程图
21
如果你拿到的专题是渐进以及流向又或者是展示各节点的内容，用别的形式总感觉不够具 象，那何不干脆做成一个个性化的流程图？俗话说，千言万语不如一张图，专题运用这种构图方 式能够将步骤，关系，各个节点以及整体流向展示清楚，配合图片展示，一个枯燥的流程瞬间变
得个性十足，用户浏览简单又明了，并且充满了趣味性。
62
5.3.3 分组
63
5.3.3 分组
64Biblioteka 5.3.3 分组65
5.3.3 分组
66
最后总结：
一般来说一张海报基本就运用这三个原则，对齐，对比，分组。切记，画面中每个元素的存在以及它 的摆放都是有道理的。画面是你设计的，你应该说出你这么做的来由！ 所有带有震撼效果的画面都是源自对比，如果有人说你画面太平淡了，那么就请运用对比，对比是最
5.4设计思路
知识要点
70
产品：就是你要围绕着它为主题来设计的东西，是整个设计的主心骨 背景：就是为了衬托出产品的价值，以为整个设计的氛围的一个元素，它是整个设 计中好像最不显眼却最重要的一个元素，也是让人非常头疼的一个东西，但是你记 住，它终究是配角，不能让它占了主人的位置。 颜色：在电商设计中，颜色可以说是重中之重，它是体现一个设计水平的重要条件， 因为颜色带有感情，能影响人的情绪。
5.3.2 对比
55
注意事项：
1、找出文案中最重点的语句，运用粗细对比和大小对比加以强调和区分！ 2、字体既然要对比就要对比分明，把标题设置12号字，把正文设置为10号字毫无意义，既然用对比就 要大足够大，小足够小，细足够细，粗足够粗，让人眼一看就看出他们的对比关系。
3、对比不光会让画面更加美观，而且会增加页面的可读性，不要担心对比后的读者不会去读小字，假
5.2 海报构图
一张海报一般首先要问客户要下面3个东东：
24
文案 产品图 海报尺寸
5.2 海报构图
25
在设计的过程中最主要也就确定以下2个方面：
1：排版构图（文案+产品）
2：海报配色（背景+文案 与产品色的协调）本文主要针对这2个方面进行解读。
一张电商海报基本有3部分组成，产品、背景、文案。确定好了构图版式， 也就成功了一半。常见的版式有3种左文右图、左图右文、中间文两边图。
繁琐的、次要的元素，以免影响用户阅读内容。
5.1.2 主题轮廓
12
这类构图方式一般针对 那种主体内容很明确具 象，能够用物品或轮廓 直接代表，比如:中秋可 以用月饼丶玉兔；会员 可以用皇冠，钻石等等 等等，可根据具体的内 容来进行尝试
5.1.2 主题轮廓
13
5.1.2 主题轮廓
14
5.1.3 放射及透视
5.1.2 主题轮廓
11
根据专题的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓，将专题内容巧
妙的填充进去。这种处理方式能够让用户一眼就能了解到一些信息，符合专题主题，并且能够让
页面更有设计感，生动且活泼。 需要提醒的是设计的时候将形状尽量轮廓化，加以强调突出，主体不需要太具象，舍弃一些
5
6
用一个形状或者素材切分整个页面，画
面瞬时变得有趣生动起来，内容区域也能
得到有效划分。 这类构图方式对内容没有过多要求，可 随意安排。具体排版可根据内容来处理， 也是现在专题页面用得最多，最普遍的一 种构图方式
5.1.1 几何切割
B. 对称切割 这种构图方式的前提一般是内容分主要两部分，并且这两部分是对 立关系的情况下，比如说：对战，男女，冷热等等。页面一分为二，内
76
我们在模仿设计的时候，也可以这样把内容分开一下，容易理解一个设计的布局是怎样形成 的，同时我们平时有时间的时候，也可以把一些好的设计拿出来分析一下布局，并存好档，这样 当我们在需要设计的时候，就可以通过平时的积累来丰富我们的设计。
38
5.2.3 中间文两边图
39
放这张海报我想表达的是背景是风景的情况下，文字直接打上去会显得 太乱。可以直接画一个半透明的框框，如图所示。然后再在里面排文案。
模特也是一边远景，另一边近景。
5.2.4 斜切式构图
40
斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控 制。一般斜切式的文案倾斜角度最好不要大于30，不然得歪着头阅读。
5.2.1 左文右图
26
这张海报是左文右图式，这张海报的左边文案排版非常典型，字体 上粗下细，上大下小，上下主次分明，形成对比。文案四四方方架构非 常稳重，非常平衡。
5.2.1 左文右图
27
5.2.1 左文右图
28
5.2.1 左文右图
29
5.2.1 左文右图
30
5.2.2 左图右文
31
这张海报属于左图右文也是很典型的，淘宝官方引导的那种典型排版。 字体也是上粗下细，上大下小。下面的价格打折部分排版很稳重丶结实。
5.1.1 几何切割
4
在现实生活与自然界中，我们随处可见几何图形的存在，简单的三角形、正方形、长 方形和圆形甚至几根线条就可以组成很多有趣的图形，也很符合现代审美需求，适当的画 面切割能够给页面带来动感与节奏感。加入几根线条，几个块面就能令页面起到意想不到 的效果。
5.1.1 几何切割
A.简单切割 实现的时候需要注意的是素材不适合太过复杂和花哨，一般会是纯 色大块搭配渐变，主要突出形状和区块。
5.3.2 对比
51
无对比不设计。人们的眼睛不喜欢看平淡无奇千篇一律的东西，喜欢看有对比的画面！使
用对比的排版技巧可以最有效的增加画面的视觉效果。对比原则包含的内容很多，比如虚实对比，
冷暖对比等等，这次我们只谈关于字体的大小对比和粗细对比。
5.3.2 对比
52
5.3.2 对比
53
5.3.2 对比
5.4设计思路
知识要点
71
排版：一个好的排版，能让人的视觉得到舒缓，不易疲劳，且看起来很舒服。
感情：这个概念有点模糊，上面我们也说了，颜色可以影响我们的情感，但是我为 何要分开这一部分来说呢？因为感情除了颜色外还有另外一层的意思，下面我们就 会讲到。
5.4设计思路
如何去入行电商设计：
72
• 首先实操就是必不可少的，其次就是理解设计的一个思路，然后我们必须要掌握的设
另外根据阅读习惯，文字一般是往右上方的倾斜，文字这样有一种上升
感。
5.2.5 其他构图
41
当海报上要放置过多的促销产品，可以采用这种版式。中间是一个半透
明的框输入文案。
5.2.5 总结
42
在海报设计过程中版式的平衡感极为重要，同时还要处理好不同物体之间的对比关系。比
如文案字体的大小对比丶粗细对比丶模特的远近对比。好比我们画素描静物的时候，静物的摆放
计基础技能，必须要掌握色彩理论，还有构图的技巧。
• 如果你真的不知道应该怎么办，那就先去模仿别人的设计。
• 我们说的模仿不是让你抄，而是理解，其实我们抄的只是作者的想法，用色关系和布
局，而不是叫你完全的把它抄下来。
5.4设计思路
73
思考：模仿什么？
5.4设计思路
74
5.4设计思路
75
5.4设计思路
如画面所有文字一样大，没有重点，没有逻辑，顾客往往一撇而过。只要你强调的部分吸引顾客，顾客也 会下意识的往下看。
56
5.3.2 对比
57
5.3.2 对比
58
5.3.2 对比
59
5.3.2 对比
60
5.3.2 对比
61
5.3.3 分组
当文案过多的时候就考虑将文案分组，将相同信息的文案摆放到一起，这样不仅使整个页面 富有条理性，也会看上去非常美观，更加有利于消费者阅读。
的更加准确顺畅，快速有效的把目标用户带入到页面氛围当中。
5.1.4 整体场景
18
5.1.4 整体场景
19
5.1.4 整体场景
20
需要注意的是场景搭建对素材的要求比较高，明暗，阴影，透视以及层次感，体积都需要用 心处理。这类专题大多都会搭配动画一起实现，在带入感上更进一层。在设计的时候，对专题内 容头脑里要有画面感，先搭建大的画面关系，再往里头添细节和内容，切记场景不要抢了内容的 视觉焦点，在适当的时候做些减法
7
容划分明确也更加具有视觉冲击力。
8
5.1.1 几何切割
C.组合切割 集中而规律的排列，从整体上抓住人们的视觉。这种构图方式适合 那种每个区块中的内容属于平级关系的专题，用这种组合的排列能够保
9
持各内容的关系，也能让布局更有创意
10
不规则的构图，稳定 而锐利，干净的排版，易 于识别，不规则的构图方 式，避免了画面生硬，不 易产生审美疲劳。不同的 形状和排列，呈现出来的 视觉效果也不一样。这种 构图方式使用最多的一般 是为了体现时尚感，科技 感，与锋利感觉的专题， 例如时装，家电，以及游 戏战斗类的专题等等
54
观察使用对比前后的效果，在排版中仅仅运用对齐这一个原则是不够的，第二步就要用到
对比！第一张图片由于缺少对比，整体显得很乏味，除了标题略大一点下面的文本太长而且没有
吸引读者的地方。第二张海报则运用对比的手法，使得页面更吸引人。而且文案的组织结构一目 了然，更便于读者阅读。 第二张海报中的标题加大加粗，与引标题2014夏装……形成大小和粗细的对比。下面的正 文采用小字，但是价格部分加粗强调再次形成对比。最下面的包邮说明部分采用最细最小的字与 顺丰包邮又形成一种粗细大小的对比。只要将重点文字提炼出来放大加粗之后就是的整个版面信 息主次分明，富有层次和组织性，就会在视觉上引导消费者向下浏览。
5.1.5 流程图
22
在网页设计越来越注重个性丶趣
味性以及视觉冲击力的今天，专题页面