活动2　构图与布局

在进行网店视觉设计与制作时，合理的构图与布局能让网店视觉效果更加符合消费者的审美，也更能凸显网店中的商品。因此，老李向小艾介绍了构图与布局的相关方法、技巧与原则。

1.构图方式

良好的构图是指各元素通过一定的方式构成一个协调、完整的画面。使用不同构图方式的图片会给人留下不同的视觉感受。

●横向构图。横向构图是指将多个不同商品或不同款式的同一种商品横排一字摆放的构图方式，常用于展现拥有多种颜色的小件日用品（如鞋袜、瓶罐等），如图1-13所示。

●竖向构图。竖向构图是指将商品竖向放于画面中心的构图方式。这种构图方式会使商品显得修长、美观，常用于展现具有垂直线条的商品，如图1-14所示。

●三角形构图。三角形构图是指以3个视觉中心为主要位置摆放商品，形成一个稳定的三角形的构图方式。该三角形可以是正三角形、斜三角形或倒三角形，其中，斜三角形较为常用，也更灵活。这种构图方式具有稳定、均衡，但不失灵活的特点，如图1-15所示。

●疏密相间构图。疏密相间构图是指将多个商品同时摆放在同一个画面中的构图方式。注意，不能将多个主体物放置在同一位置，要使它们错落有致、疏密相间，让画面紧凑的同时还能够主次分明，如图1-16所示。

●中心构图。中心构图是指在画面中心位置放置主元素（如商品或促销文案）的构图方式。这种构图方式可以产生中心透视感，给人稳定、端庄的感觉，如图1-17所示。

●对角线构图。对角线构图是指将主体放于画面的对角线上的构图方式，能够很好地表现画面的立体感。与中心构图相比，对角线构图能够打破视觉平衡，让画面更加活泼、生动，如图1-18所示。

●对称式构图。对称式构图是指将商品放于画面对称轴的两侧，形成对称效果的构图方式。该构图方式可以给人稳定、协调的感觉，如图1-19所示。需要注意的是，对称式构图并不需要将商品严格地对称放置，而是在大致对称中寻求变化，使画面更加生动，避免呆板。

●九宫格构图。九宫格构图是指将画面平均分成9个格子，在4个交叉点中选择一个或者多个点放置商品，同时还应适当考虑其他点的平衡与对比等因素的构图方式。这种构图方式能呈现变化与动感，是常用的构图方式，如图1-20所示。

2.页面布局原则

一个完整的网店页面中多种元素，为了合理地布局这些元素，给消费者营造舒适的视觉体验，页面布局需要遵循以下5个原则。

●主次分明、中心突出。视觉中心一般在页面的中心位置或中部偏上的位置。将网店促销信息或主推商品等重要信息安排在最佳视觉位置，无疑会迅速吸引消费者的视线。在视觉中心以外的地方可以安排次要信息，这样可以在页面中突出重点，做到主次分明。

●大小搭配、相互呼应。展示多个商品时，可通过大小搭配、相互呼应的方式使页面看起来错落有致。

●区域划分明确。合理、清晰地划分区域可引导消费者快速找到目标商品。

●保持一致性。保持页面的一致性是页面布局的基本原则，如统一主色调与辅助色，使页面中的文本、商品、图形、标题之间的留白大小一致。

●合理使用页面元素。页面元素的选用要合理、精确，元素在页面中的大小、间距与位置也要合适。

3.页面布局方式

图像和文本的排列与布局会影响网店页面的整体氛围，为了有效进行页面布局，需要根据具体需求，合理运用以下页面布局方式。

●居中对齐式布局。居中对齐式布局是指将图像和文本在页面的水平方向或垂直方向上居中排列，如图1-21所示。水平居中对齐式布局能带给消费者稳定、安静、平和与含蓄之感，垂直居中对齐式布局能带给消费者强烈的韵律感。

●对称式布局。对称式布局是指以页面的横向或纵向的中心线为对称轴，将页面组成要素按照彼此相对的方式排列，如图1-22所示。这种布局方式能带给消费者稳定、庄重、理性之感。对称式布局不要求左右两侧或上下两侧完全对称，只要求两侧的宽度和重量感大致平衡即可。

●模块式布局。模块式布局又叫作卡片式布局，其中的每个模块都包含文本、图像、视频或按钮等相同类型的内容，每个模块相对独立，具有自己的专属空间，页面能根据模块的大小、间距、数量产生变化，如图1-23所示。这种布局方式能以易于浏览的方式呈现大量信息，适用于具有许多相同层级的内容的页面。

●分屏式布局。当图像和文本同等重要时，可以采用分屏式布局，将它们进行左图右文或右图左文的排列，产生整齐划一又简洁的效果，如图1-24所示。

●Z式布局。Z式布局是指将消费者视线吸引到页面顶部，遵循消费者从左到右、从上到下的阅读习惯的布局方式。它以Z字形引导消费者视线，交替排列文本和图像，如图1-25所示。