1.3 电商视觉设计黄金构图法

在现实生活与自然界中，我们随处可见几何图形的存在，简单的三角形、正方形、长方形和圆形，甚至几根线条就可以组成很多有趣的图形，也很符合现代审美的要求，适当的画面切割能给页面带来动感与节奏感。在页面中加入几根线条或几个块面，就能起到意想不到的效果。

好的页面构图能够让页面设计更加出彩，也能让设计工作事半功倍。说起构图原理，大致可以分为以下几种：对称切割构图法、组合切割构图法、整体场景构图法、多重切割构图法、简单切割构图法、流程构图法、放射构图法、物体轮廓构图法等。下面将分别对其进行简要介绍。

1.3.1 对称切割构图法

对称切割构图法的前提一般是将内容分为对立的两部分，将整个页面一分为二，内容划分明确。这种设计具有视觉冲击力，可以使画面具有平衡不失重的效果，如图1-8所示。

1.3.2 组合切割构图法

组合切割构图法是通过集中而有规律的排列，从整体上抓住人们的视觉，让整个页面设计更具有立体感。这种构图方式适合每个区块中的内容属于平级关系产品的展示，用这种组合的排列能够保持各种内容的并列关系，也能让布局更具创意，如图1-9所示。

1.3.3 整体场景构图法

整体场景构图法专题内容不多，适用于促销、节日、活动等页面。整体场景构图法可以将目标客户快速地带入到页面氛围中，使宝贝信息更加精准、流畅。

在设计这种页面时，设计人员的头脑中对专题内容要有画面感，首先搭建大的画面关系，再往里面添加细节和内容。切记场景不要抢了内容的视觉焦点，在适当的时候可以做些减法，如图1-10所示。

1.3.4 多重切割构图法

多重切割构图法，其不规则的构图稳定而锐利，干净的排版易于识别，让单一的页面变得生动，复杂的页面变得时尚，能够避免画面出现生硬感，不宜产生审美疲劳，如图1-11所示。不同的形状和排列，呈现出来的视觉效果也不一样。这种构图方式使用最多的一般是为了体现时尚感、科技感与锋利感觉的专题。

1.3.5 简单切割构图法

简单切割构图法使用简单的线条或图案整齐地分割整个页面，使画面变得有趣、生动起来，内容区域也能得到有效的划分。这类构图方式对内容没有过多的要求，可以随意安排，具体排版可根据内容来处理。这类构图法同样具有不可忽视的视觉冲击力，如图1-12所示。

1.3.6 流程构图法

如果设计创意需要按照循序渐进的方式展现产品，不妨采用流程构图法。千言万语不如一张图，运用这种构图方式能够将步骤、关系、各个节点及整体流向展示清楚，再配合图片，一个枯燥的流程瞬间变得个性十足，用户浏览起来简单明了，且充满了趣味性，如图1-13所示。

1.3.7 放射构图法

放射构图法能展示出由一个中心点向四周扩散的效果，起到导向的作用，让整体页面呈现出立体与空间感，画面冲击力强，富有动感。需要注意的是，放射状的排版不太适合文字阅读，要注意文字排版的方式。在文字数量较少的情况下可以选择这种构图，其效果如图1-14所示。

1.3.8 物体轮廓构图法

物体轮廓构图法主要适用于活动、节日或新品创意等专题。根据专题的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓，将内容巧妙地填充进去。

物体轮廓构图法能让整体页面更加生动、形象、有趣，如图1-15所示。需要注意的是，设计时要将形状进行轮廓化，加以强调突出。主体不需要太抽象，应舍弃一些烦琐的、次要的元素，以免影响用户阅读内容。

在视觉设计越来越注重个性、趣味性及视觉冲击力的今天，专题页面的构图也已经千变万化，以上只是列举出了其中较为常见的一部分。不同的主题，不同的内容，构图排版的出发点也不尽相同。上面列举出来的方法也可以混合搭配使用。

在构思时可以大胆尝试，先考虑内容和风格，确定构图，再往里面添加内容。应充分考虑到内容的排版，尽量做到让一个专题有大创意的同时又兼顾小细节，实现整体的和谐与统一。