1.3 版面布局设计
网店页面的设计主要在编排和布局上，虽然网店的页面设计不如网页页面设计灵活，但是它们有许多相近之处，最终的目的还是在视觉上赏心悦目，让买家进入店铺就能被其吸引。网店的整体布局可以按照淘宝为大家提供的功能进行设计与操作。在布局中可以进行设置的页面包含“首页”“默认宝贝详情页”“宝贝分类页”和“店铺活动页”，可以自定义布局编辑的页面是“首页”和“默认宝贝详情页”，如图1-23所示。按照系统提供的布局管理样式，可以根据店铺经营的种类进行与之对应的布局设计，使店铺能够吸引更多的客流量，在制作之前先绘制一个草图，之后在此基础上再详细设计各个区域，如图1-24所示。
图1-23 排版布局
图1-24 首页与详情页草图
1.3.1 版面布局的原则
版面布局，就是以最适合买家浏览的方式将图片和文字排放在页面的不同位置。在设计网店页面布局时，需要注意以下几个原则。
1 主次分明，中心突出
在设计网店页面布局时，必须要考虑整个页面的视觉中心，大多数的网店都会以促销广告作为页面的第一屏视觉点，通常会将其放置在页面的中心或中心偏上位置，在视觉中心以外的区域可以放置稍微次要的内容，这样页面中就会形成主次分明的效果，如图1-25所示。
图1-25 主次分明
2 图文搭配，相互照应
对于重点推销的商品，一般都会制作一张促销广告放置到版面的醒目位置，如果只是图片会使广告看起来比较突兀，不知道想要表达的内容；如果只用文字进行说明，会让买家比较迷茫，此时要将图片和文字相搭配，让人看得清晰，看得赏心悦目，如图1-26所示。
图1-26 图文搭配
3 文字、栏目与背景的色彩
考虑到大多数人使用256色显示模式，因此一个页面中的色彩最好控制在3个色系以内，如果颜色太多会让页面看起来比较凌乱，如图1-27所示。
图1-27 版面色系
4 简洁一致性
保持页面简洁的常用方法是使用醒目的标题，这个标题常常会采用图形表示，但图形同样要求简洁；另一种保持简洁的方法就是限制字体与颜色的数目。
要保持一致性，可以从页面的版式排列着手，每个区域的文本、图形之间保持相同的间距，主要图形、标题或符号旁白留下相同的空白，如图1-28所示。
图1-28 版面一致
1.3.2 网店页面内容的排版
网店页面，除了淘宝本身提供的布局格式以外，更加细致的内容排版无非就是文字和图片了。
1 文字排版的作用
相对于图像，文字同样具有吸引力，在浏览一个网店的时候，能够直接吸引用户目光的有时并不一定是图像。大多数通过偶然点击进入你的网店的用户，他们是来寻觅相关信息的而不是图像。因此，保证网店页面设计凸显出最重要的信息板块，这点同样是店主设计的首要原则，文案布局大体可以分为对齐布局、参照布局、对比布局和分组布局4种，每种布局都有自己的特点，具体说明如下。
1）对齐布局
文案对齐布局在常规中通常会以边对齐和居中对齐两种形态存在，每种对齐方式都是与产品本身图片作为依据的。
边对齐，通常会以文本的一端作为对齐线，使文本与整体看起来给人以稳重、有力量、统一和工整的感觉，是淘宝中最常见的一种文案布局方式，如图1-29所示。边对齐比较适合新手操作，只要掌控画面整体，文本部分在主体边上只要注意对齐即可。
图1-29 边对齐
居中对齐，通常会以文本的水平居中位置作为对齐线，或者文本与整个画面进行居中对齐，使文本与整体看起来给人以正式、大气、高端、有品质的感觉，在淘宝海报中居中对齐通常要把文字直接放置在商品上面，文案部分的遮挡会与主体部分形成一个前后的感觉，看起来更加具有层次感，在不遮挡主体时，单纯的文字居中对齐，同样会使整幅海报具有大气上档次的感觉，如图1-30所示。
图1-30 居中对齐
2）参照布局
参照布局通常是指利用美工得到图片的类型，根据文本部分与图片特点进行合理位置布局的方法，文本在图像中主要起到平衡整体的作用，如图1-31所示。此布局方法不适合初学者。
图1-31 参照布局
3）对比布局
在一幅作品中如果不体现对比，那么就不能说此作品中存在设计。人们不喜欢欣赏平淡无奇的东西，喜欢存在对比效果的画面。
使用有对比效果的排版技巧，可以瞬间增加画面的视觉效果，对比原则包含的内容很多，如虚实对比、冷暖对比、字体粗细对比等，如图1-32所示。不同类型的对比局部，视觉效果也会不同，如图1-33所示。
图1-32 对比布局
图1-33 对比布局
提示：通过两张图片的对比，可以看出，在排版时单单使用对齐是远远不够的。在对齐的基础上再通过对比布局，可以使图像的视觉感增加一个层次。在两张海报的对比中，可以发现第二张图片运用了对比原则，画面更加吸引人，文案的组织结构也一目了然，更便于浏览者阅读。
注意：
● 找出文案中重点的语句，运用大小对比和粗细对比，加强文字的强调和区分。
● 字体部分如果要对比就要选择对比较分明的字体，既然要对比就要显示出大的够大、小的够小、粗的够粗、细的够细，让浏览者更加容易记住。
● 对比不光增加视觉效果，而且还加强了文案的可读性，不要担心字小而错过浏览者的阅读，只要强调的部分吸引住了顾客，对于小的文字会下意识地进行阅读。
● 对比还可以通过文本以背景的高反差效果进行显示，背景如果按不同的颜色形状进行绘制，文字与背景色作为对比参照物，这样更能吸引浏览者，加强整体视觉效果。
4）分组布局
在图像中如果存在的文案过多，就不能单纯地使用对齐加对比等布局效果了，此时只要将文本进行分类，将相同的文本信息文案摆放在一起，就不仅能使整个画面看起来有条理、非常美观，而且更加便于浏览者阅读。每个分类可以作为一个元素进行重新的布局，如图1-34所示。
图1-34 分组布局
2 图像排版的作用
图像可以直接看到商品的效果，在排版时可以对图像进行详细的设置，因为图片的宽度与高度过大时，浏览者在本网店浏览时会出现等待时间，所以一定要把图片的大小进行相应的控制，这样才能让买家以最快的速度浏览商品图片而不会受网络带宽的限制，如图1-35所示。
图1-35 图像分布
提示：在对网店页面布局时，应注意以下几点。
● 从上向下，从左向右，按照内容的重要性优先有序地展开。
● 眼球的第一运动聚焦于页面的左上角。
● 花哨的文字字体和颜色常常会被忽视。
● 避免呈现大块的文本，简短的段落相对于长段落来说有更好的表现力。
● 根据视觉锁定，一栏格式比多栏格式拥有更好的表现力。
● 将广告语放置于最佳内容一旁也可以提升注意力。
● 越大的图像吸引越多的注意力。
● 干净、清晰的特写图片能吸引更多的视觉注意。