2.5 布局版式：网店版式布局技巧
在网店的运营过程中，可以通过制作美观、适合商品的页面，达到吸引顾客、提高销售业绩的效果，而关键之处就在于装修设计的版式布局。
2.5.1 网店布局元素分类
在一个完整的网店布局中，通常包括这些元素：店招、促销栏（公告、推荐）、产品分类导航、签名、产品描述、计数器、挂件、欢迎欢送图片、商家在线时间、联系方式等，这些元素的布局没有固定的章法可循，主要靠设计师的灵活运用与搭配。
只有在大量设计实践中熟练运用，才能真正理解版式布局设计的形式原则，并善于运用，从而创作出优秀的网店装修作品。
1．对称与均衡
对称又称“均齐”，是在统一中求变化；平衡则侧重在变化中求统一。对称的图形具有单纯、简洁的美感，以及静态的安定感。对称给人以稳定、沉静、端庄、大方的感觉，产生秩序、理性、高贵、静穆之美。对称的形态在视觉上有安定、自然、均匀、协调、整齐、典雅、庄重、完美的朴素美感，符合人们通常的视觉习惯。
均衡的形态设计让人产生视觉与心理上的完美、宁静、和谐之感。静态平衡的格局大致是由对称与均衡的形式构成。均衡结构是一种自由稳定的结构形式。一个画面的均衡是指画面的上与下、左与右取得面积、色彩、重量等量上的大体平衡。
在画面上，对称与均衡产生的视觉效果是不同的，前者端庄静穆，有统一感、格律感，但如过分均等就显得呆板；后者生动活泼，有运动感，但有时因变化过强而易失衡。因此，在设计中要注意把对称、均衡两种形式有机地结合起来灵活运用，如图2-43所示。
图2-43 对称与均衡的布局表现形式
专家指点
对称与均衡是一切设计艺术最为普遍的表现形式之一。对称构成的造型要素具有稳定感、庄重感和整齐的美感，对称属于规则式的均衡的范畴；均衡也称平衡，它不受中轴线和中心点的限制，没有对称的结构，但有对称的重心，主要是指自然式均衡。在设计中，均衡不等于均等，而是根据景观要素的材质、色彩、大小、数量等来判断视觉上的平衡，这种平衡给视觉带来的是和谐。对称与均衡是把无序的、复杂的形态组构成秩序性的、视觉均衡的形式美。
常用的版式布局的对齐方式有左对齐、右对齐、居中对齐和组合对齐，各自具体的特点如下。
● 左对齐：左对齐的排列方式有松有紧，有虚有实，具有节奏感，如图2-44所示。
图2-44 左对齐布局
● 右对齐：右对齐的排列方式与左对齐刚好相反，具有很强的视觉性，适合表现一些特殊的画面效果，如图2-45所示。
图2-45 右对齐布局
● 居中对齐：是指让设计元素以中心轴线对齐的方式，可以让顾客视线更加集中、突出，具有庄重、优雅的感觉，如图2-46所示。
图2-46 居中对齐布局
2．节奏与韵律
节奏与韵律是物质运动的一种周期性表现形式，有规律的重复、有组织的变化现象，是艺术造型中求得整体统一和变化，从而形成艺术感染力的一种表现形式。韵律是通过节奏的变化来产生的。对版面来说，只有在组织上符合某种规律并具有一定的节奏感，才能形成某种韵律。
在网店的装修设计中，合理运用节奏与韵律，就能将复杂的信息以轻松、优雅的形式表现出来，如图2-47所示。
图2-47 节奏与韵律的版面布局表现形式
3．对比与调和
从文字内容分析，对比与调和是一对充满矛盾的综合体，但它们实质上却又是相辅相成的统一体。在网店的装修设计中，画面中的各种设计元素都存在着相互对比的关系。但为了找到视觉和心理上的平衡，设计师往往会在不断的对比中寻求能够相互协调的因素，让画面同时具备变化与和谐的审美情趣。
● 对比：对比是差异性的强调。对比的因素存在于相同或相异的性质之间，也就是把相对的两要素互相比较之下，产生大小、明暗、黑白、强弱、粗细、疏密、高低、远近、动静、轻重等对比。对比的最基本要素是显示主从关系和统一变化的效果，如图2-48所示。
图2-48 对比布局的表现形式
● 调和：调和是指适合、舒适、安定、统一，是近似性的强调，使两者或两者以上的要素相互具有共性，对比与调和是相辅相成的，如图2-49所示。在网店的版面构成中，一般整体版面宜采用调和，而局部版面宜采用对比。
图2-49调和布局的表现形式
专家指点
画面中下面采用两张较小的图片排列整齐，且大小一致，虽然与上方较大的图片在色彩与外形上采用了同样的表现形式，但是整体画面却既对立又和谐地组合在一起。
4．重复与交错
在网店的版面布局中，不断重复使用相同的基本形或线，它们的形状、大小、方向都是相同的。重复使设计产生安定、整齐、规律的统一，如图2-50所示。
图2-50 重复布局的表现形式
但重复构成后的视觉感受有时容易显得呆板、平淡、缺乏趣味性的变化。因此，我们在版面中可安排一些交错与重叠，打破版面呆板、平淡的格局，如图2-51所示。
图2-51 交错布局的表现形式
专家指点
网店装修设计的整体思路如下。
● 店铺装修目标：做一个客户喜欢、值得信赖的店铺。
● 指导思想：从客户的角度来装修店铺。
● 实现方法：从店铺中布局、色调、产品图片、产品描述、公司介绍等任何一个细节处处体现专业化、人性化。
5．虚实与留白
虚实与留白是网店的版面设计中重要的视觉传达手段，主要用于为版面增添灵气和制造空间感。两者都是采用对比与衬托的方式将版面中的主体部分烘托而出，使版面结构主次更加清晰，同时也能使版面更具层次感，如图2-52所示。
在商品的描述页面中，将商品细节以曲线的方式排列在画面的左下方，右上方则利用背景图片进行修饰，在画面中表现出明显的轻重感，让顾客的注意力被左下方的信息所吸引，给人留下深刻的印象。
任何形体都具有一定的实体空间，而在形体之外或形体背后呈现的细弱或朦胧的文字、图形和色彩就是虚的空间。实体空间与虚的空间之间没有绝对的分界。画面中每一个形体在占据一定的实体空间后，常常会需要利用一定的虚的空间来获得视觉上的动态与扩张感。版面虚实相生，主体得以强调，画面更具连贯性。
中国传统美学上有“计白守黑”这一说法。就是指编排的内容是“黑”，也就是实体，斤斤计较的却是虚实的“白”，也可为细弱的文字，图形或色彩，这要根据内容而定。留白
则是版面未放置任何图文空间，它是“虚”的特殊表现手法。其形式、大小、比例决定着版面的质量。留白给人一种轻松的感觉，最大的作用是引人注意。在排版设计中，巧妙地留白，讲究空白之美，是为了更好地衬托主题，集中视线和造成版面的空间层次。
图2-52虚实与留白布局的表现形式
2.5.2 网店页面主图处理
在网店的装修设计中，图片是除了文字外的另一个重要的传递信息途径，也是网络销售和微营销中最需要重点设计的一个设计元素。店铺中的商品图片不但是其装修画面中的一个重要组成部分，而且它比文字的表现力更直接、更快捷、更形象、更有效，可以让商品的信息传递更简洁。
1．裁剪抠图，提炼精华
在网店装修设计中，大部分的商品图片都是由摄影师拍摄的照片。它们在表现形式上大都是固定不变的，或者是内容上只有一部分符合装修需要，此时就需要裁剪图片或者进行抠图处理，使它们符合版面设计的需求，如图2-53所示。
图2-53 抠图并重新布局商品图片
将手表从繁杂的背景中抠取出来，以直观、直接的方式呈现出来，让顾客能够一目了然，对商品的展示具有非常积极的作用，也让商品的外形、特点更加醒目，避免过多的信息影响顾客的阅读体验。
2．缩放图片，组合布局
对同一种商品照片的布局设计来说，如果进行不同比例的缩放，也会获得不同的视觉效果，从而凸显出不同的重点，如图2-54所示。
图2-54 缩放图片进行组合布局
专家指点
例如，通过将实物商品放置在画面中，并将周围留白，使画面具有一种真实的氛围感，这样也让版面具有很强的空间感。
将图片进行缩放，展示出商品的细节，让顾客对商品的材质了解更清晰，真实地还原商品的质感，更容易获得顾客的认可，给人逼真的触感。在处理图片的过程中，通过实拍照片展示商品的整体效果，凸显出商品的外形特点，让顾客对商品的注意更加集中。
需要注意的是，网店装修设计与普通的网页设计不同，它重点需要展示的是商品本身。因此，在某些设计的过程中，适当对商品以外的图像进行遮盖，可以让商品的特点得以凸显，获得顾客更多的关注，如图2-55所示。
图2-55 对商品以外的图像进行遮盖以突出商品
画面中心的商品造型在粉色留白背景中显得轮廓清晰而醒目，利用光影的强弱对比，使得主体商品突出又富有立体感。
2.5.3 网店布局版式引导
在网店的装修设计过程中，视觉流程是一个宏观上的重要设计因素。视觉流程是指布局对顾客的视觉引导，指导顾客的视线关注范围和方位，这些都可以通过页面视觉流程的指向规划来实现。版式布局的视觉流程可以分为单向形版面指向和曲线形版面指向。
1．单向形视觉流程
单向形版面指向可以将信息在有安排的情况下一一地传递给顾客，是网店布局设计中的必不可缺的视觉流程。它可以通过竖向、横向、斜向的引导，使顾客更加明确地了解店铺中的内容，如图2-56所示。
图2-56 单向形视觉流程
2．曲线形视觉流程
曲线形视觉流程是指将画面的所有设计要素按照曲线或者回旋线的变化排列，可以给人一种曲折迂回的视觉感受，如图2-57所示。
图2-57 曲线形视觉流程