1.3 店铺的搭配布局

一个电商店铺包含有大量的图片、文字等信息，所以进行网店装修设计前，需要掌握网店装修中的图像、文字、配色与版面的搭配布局，从而设计出美观、漂亮的电商店铺。

1.3.1 装修版面布局

好的版面布局设计能够更快、更准确地传达信息，是提高店铺点击率和商品销量的一个重要因素。因此，在装修电商店铺时，需要将商品页面的组成元素进行合理安排，组成各种不同的版面编排形式，以此来体现店铺的品位，从而达到吸引顾客的目的。目前，店铺装修的版面布局为单向型版面布局、S曲线型版面布局和对称型版面布局3种，下面分别进行介绍。

1．单向型版面布局

单向型版面布局是最为普遍的页面布局方式，一般分为水平排列和垂直排列两种。垂直排列的单向型版面布局可以让画面产生稳定感，使版面条理更为清晰；而水平排列的单向型版面布局具有更强的条理性，也更符合人们的阅读习惯。一般情况下，为了让画面更丰富，往往会将水平排列和垂直排列的布局方式结合使用。

在图1-8所示的店铺版面布局中可以看出，整个店铺的版面布局采用了垂直排列的布局方式，让顾客的视线随着画面的下移而发生改变，同时，在细节的处理上又采用了水平排列的布局方式，调节了垂直排列布局的单调感，让顾客被画面所吸引。

2. S曲线型版面布局

在装修电商店铺时，为了营造一种曲折迂回的视觉感受，有时还会用到S曲线型版面布局方式，这样的版面布局可以让画面产生一定的旋律感，方便顾客快速灵活地查看店铺的产品，从而增强设计感。

在图1-9所示的店铺版面布局中可以看出，整个店铺的版面布局采用了S曲线，从而为整个版面添加曲折迂回的视觉感受，吸引浏览者选购产品。

3．对称型版面布局

对称型版面布局在商品详情页中经常会被用到，这种版面布局可以保证版面各构成元素之间的平衡感，使版面具有统一、规整的视觉效果，利用均衡的版面传递消息。

在图1-10所示的店铺版面布局中可以看出，整个店铺的版面布局采用了对称型的版面布局方式，该布局方式将产品图片放置在了中间，而产品细节元素则采用了左右对称的方式布局在产品图片的两侧，可以让画面中商品的细节得到更直观的展示。

1.3.2 图片与文字布局

在装修电商店铺时，不论是装修店铺首页还是商品详情页，都离不开文字与图片的搭配使用。如果一个页面只有图片而没有文字，则不能展现出产品图片所要表达的内容；而如果大量地使用文字，没有图片，则容易使顾客在浏览产品时产生视觉疲劳，也无法感受到产品的实物效果。在布局店铺中的图片与文字时，有左文右图、左图右文、上文下图、上图下文等多种布局搭配方式。

1．左文右图

左文右图的布局方式是将文字放置在画面的左侧，图片放置在画面的右侧，该布局方式遵从了顾客从左至右的阅读习惯，使顾客从阅读文字开始了解产品的特征和卖点等信息。如图1-11所示为左文右图的店铺布局效果。

2．左图右文

左图右文是将要展现的产品图片或者模特图像置于画面的左侧，而文字放置在了画面的右侧，通过这种布局方式可以更好地对商品进行分析和说明。如图1-12所示为左图右文的店铺布局效果。

3．上文下图

上文下图的布局方式是将文字置于图片的上方，通过这种布局方式可以将文字醒目地表现出，使版面呈现出上轻下重的视觉效果，从而带给人稳重感。如图1-13所示为上文下图的店铺布局效果。

4．上图下文

将文字与图片按上图下文的方式搭配，可以有效地使观赏者的视觉重心落到图片上，可以使人感受到图片的魅力，文字放置在图片的下方进行有规律的排列，可以给人端正、规整的感觉。如图1-14所示为上图下文的店铺布局效果。

1.3.3 配色方案布局

在装修电商店铺时，色彩对于店铺装修同样重要，正确运用色彩之间的差异对比才能产生相应的效果。如图1-15所示为色相对比配色的店铺装修效果。

在网店装修设计中，常用的色彩搭配方案有色相对比配色、明度对比配色以及纯度对比配色等，下面分别进行介绍。

● 色相对比配色：使用色相对比配色方案可以将两种以上的色彩放在一起，由色彩相互之间的差异产生醒目的效果。通过这种配色方案，不仅可以使画面显得富有生机，而且能够表现出丰富的层次感。

● 明度对比配色：使用明度对比配色方案可以利用明度差异对比不同区域的色彩。在应用了明度对比配色方案后，整个店铺画面可以给人和谐、自然的舒适感。

● 纯度对比配色：使用纯度对比配色方案可以将不同纯度的色彩搭配使用，从而使画面中要突出展示的商品更加醒目。