3.3 淘宝布局细节处理

淘宝店铺布局中有许多细节可以为店铺装修加分，如文字的风格、文字的编排、文字的分割及页面的版式设计等。

3.3.1 字体风格打造精致店面

当登录店铺首页时，是否会有意或者无意地留意到这个店铺特定的字体设计或者使用，从而影响对这个店铺最直观的感受，是精致、优雅、科幻、古典，还是粗糙难看呢？

字体风格形式多变，如何有效地设计与运用字体，是字体更改最为关键的问题。网店装修中常见的字体风格有线型、手写型、书法型、规整型等，不同的字体可以表现出不同的风格。

1.线型文字

线型的字体是指文字笔画每个部分的宽窄都相当，表现出简洁、明快的感觉，在网店装修设计中较为常用，常用的线型字体有“方正大黑简体”“黑体”等。

图3-24所示的线型字体与纤细的线条来修饰画面中的矩形相配，呈现出文字精致、简介的视觉效果，两者风格一直，给人很容易留下清爽的印象。

2.规整型文字

标准、整齐外形的字体能够准确、直观地传递出商品或者店铺的信息，同时可以给人规整的感觉。在淘宝网店的版面构成中，利用规整字体的排列间隔，结合不同长短的文字可以很好地表现出画面的节奏感，给人大气、端正的印象。

在如图3-25所示商品的详情页面中，使用工整的文字对细节进行说明，让画面信息传递更准确、及时，也让画面显得饱满。

3.手写型字体

手写体是一种使用硬笔或者软笔纯手工写出的文字，手写体文字代表了中国汉字文化的精髓。手写体文字大小不一、形态各异，在计算机字库中很难实现手写体的效果。手写体的形式因人而异，带有较为强烈的个人风格。

在网店中使用手写体，可以表现出不可模仿的随意和不受局限的自由性，适当使用手写型字体，可以让店铺的风格表现得淋漓尽致。如图3-26所示，随意的手写体表现出画面原汁原味的自然风情。

4.书法字体

书法字体就是书法风格的字体。书法字体分为行书字体、草书字体、隶书字体、燕书字体、篆书字体和楷书字体五大类。每大类中又细分为若干小的门类，如篆书分为大篆、小篆，楷书有魏碑、唐楷之分，草书又有章草、今草、狂草之分。

图3-27为双十一期间设计的店铺公告，使用了书法字体进行表现，颇有美感。

书法字体是中国独有的一种传统艺术，字体外形自由、流畅，且富有变化，笔画间会表现出洒脱和力道，是一种传神的精神境界。在网店装修的过程中，为了迎合活动的主题，或者是配合商品的风格，很多时候使用书法字体可以让画面的文字设计感增强，表现出独特的韵味。

3.3.2 网店文字的编排准则

为了让网店的画面布局变得更有条理，同时提高整体内容的表述力，使顾客有效地阅读以及接受其主题信息，在装修中还需要考虑整体编排的规整型，并适当加入带有装饰性的设计元素，提升画面美感，让文字编排更加具有设计感。

要做到这些要求，就必须深入了解网店的文字编排规则，即文字描述必须符合版面主题的要求、段落排列的易读性以及整齐布局的美观性。

1.准确性

在网店装修设计中，文字编排不但要达到主题内容的要求，其整体排列风格还必须符合设计对象的形象，这样才能保证版面文字准确无误地传达出信息。

在图3-28所示的商品详情页面中，使用简洁的词组来介绍商品的功能特点，让词组与图片产生关联性，同时利用准确的文字描述来提高顾客对商品的认识和理解。

2.易读性

易读性是指通过特定的排列方式使文字能带给顾客更好的阅读体验，让顾客阅读起来更加流畅。在实际的网店装修过程中，可以通过宽松的文字间隔、设置大号字体、多种不同字体进行对比阅读等方式，让段落文字之间产生一定的差异，使文字信息主次清晰，增强文字的易读性，让顾客更快地抓住店铺或商品的重点信息。

在图3-29所示的商品详情页面设计中，可以将版面中的部分文字设定为大号字体，并配以适当的间距，同时使用修饰元素对文字的信息进行分割，提高它们的阅读性，让顾客便于掌握重要信息。

3.审美性

页面的美感是所有网店设计工作中必不可缺的重要因素。整齐布局的审美性就是指通过事物的美感来吸引顾客，使其对画面中的信息和商品产生兴趣。在字体编排方面，可以为字体本身添加一些带有艺术性的设计元素，以从结构上增添它的美感。

在图3-30所示的网店店招设计中，利用色彩之间的设计和位置的巧妙安排，通过添加一些清新的元素，并将其与单一的文字组合在一起，增强其趣味，同时提升了整个文字的艺术性。

3.3.3 掌握文字分割方式

在网店的装修设计中，运用合理的文字分割方式，可以对图文进行合理的规划，并使它们之间的关系得到有效协调，从而把握好商品或者模特的图片与文字的搭配效果。根据切割走向的不同，可以将文字的编排方式划分为水平分割和垂直分割两种。

1.水平分割

水平分割主要包括“上文下图”和“上图下文”两种，下面进行简单介绍。

●“上文下图”在文字的编排中，通过水平切割将画面划分成上下两个部分，同时将文字与图片分别排列在视图的上部和下部，从而构成“上文下图”的排列方式。这种方式可以使视觉结构变得更为沉稳，给人带来上升感，以增强版面整体的表现力。设计者利用“上文下图”的编排方式，加强标题文字和商品介绍在视觉上的表现力，并使顾客能够自然地从上到下阅读，突出文字的重要性。

●“上图下文”将画面进行水平分割，分别将图片与文字置于画面的上端与下端，从而构成“上图下文”的编排方式。这种方式可以从形式上增强它们之间的关联性，同时借助特殊的排列位置，增强文字整体给人带来的安稳、可靠的感觉，从而增强顾客对版面信息的信赖度。

图3-31中的各组商品使用上图下文的方式进行编排，以突出图片信息在视觉上的表现力，同时选用轴对称来对齐文字与图片，加强商品图片与文字之间的空间关联性。

2.垂直分割

垂直分割主要包括左图右文和左文右图两种类型，下面进行简单介绍。

●左图右文

通过垂直切割将版面分列成左右两个部分，把商品或者模特图片与文字分别排列在版面的左边与右边，从而形成左图右文的排列形式。这种方式使版面产生由左至右的视觉流程，符合人们的阅读习惯，在结构上可以给顾客带来顺遂、流畅的感觉。

图3-32所示的商品详情页面设计，以左图右文形式排列在画面中，依次形成由左至右的阅读顺序，该排列方式不仅迎合了顾客的阅读习惯，也增强了商品发夹和文字在版面上的共存性。

●左文右图

该分割方式与左图右文相反，而是将文字放在画面的左侧，把商品或者模特的图片放在右侧。左文右图的分割方式可以借助图片的吸引力，使画面产生由右至左的视觉效果，与人们的阅读喜好相反，可以在视觉上给顾客带来一种新奇的感觉，也是网店首页海报常用的一种方式。

如图3-33所示，以左图右文的排列方式打破人们常规的阅读习惯，从而在视觉上形成奇特的布局样式，给顾客留下了深刻的印象。

3.3.4 页面版式设计的形式原则

一个完整的网店布局通常包括店招、促销栏（公告、推荐）、产品分类导航、签名、产品描述、计数器、挂件、欢迎欢送图片、商家在线时间、联系方式等元素，这些元素的布局没有固定的章法可循，主要靠设计师的灵活运用与搭配。

只有在大量的设计实践中熟练运用，才能真正理解版式布局设计的形式原则，并善于运用，从而创作出优秀的网店装修作品。

1.对称与均衡

对称又称“均齐”，是在统一中求变化；平衡则侧重在变化中求统一。对称与均衡是统一的，都是让顾客在浏览店铺信息的过程中有心理上的稳定感。

对称的图形具有单纯、简洁的美感，以及静态的安定感，对称给人以稳定、沉静、端庄、大方的感觉，产生秩序、理性、高贵、静穆之美。对称的形态在视觉上有安定、自然、均匀、协调、整齐、典雅、庄重、完美的朴素美感，符合人们通常的视觉习惯。均衡的形态设计让人产生视觉与心理上的完美、宁静、和谐之感。静态平衡的格局大致由对称与均衡的形式构成。均衡结构是一种自由稳定的结构形式，一个画面的均衡是指画面的上下、左右取得面积、色彩、重量等量上的大体平衡。

在画面上，对称与均衡产生的视觉效果是不同的，前者端庄静穆，有统一感、格律感，但如过分均等就易显呆板；后者生动活泼，有运动感，但有时因变化过强而易失衡。因此，在设计中要注意把对称、均衡两种有机地结合起来灵活运用。

如图3-34所示的商品详情页面使用左右对称的形式进行设计，但不是绝对的对称，画面中的布局在基本元素的安排上赋予固定的变化，对称均衡更灵活。更生动，是设计中较为常用的表现手段，具有现代感的特征，也让画面中的商品细节与文字搭配更自然和谐。

常用的版式布局对齐方式有左对齐、右对齐、居中对齐和组合对齐，具体特点如下。

●左对齐

左对齐的排列方式有松有紧，有虚有实，具有节奏感。

图3-35所示的网店详情页面设计图，文字与设计元素都使用左对齐的方式，让版面具有很强的节奏感。

●居中对齐

居中对齐是指设计元素以中心轴线对齐的方式，使顾客视线更加集中、突出，具有庄重、优雅的感觉。如图3-36所示。文字与设计元素都使用居中对齐的方式，给人带来视觉上的平衡感。

●右对齐

右对齐的排列方式与左对齐相反，具有很强的视觉性，适合表现一些特殊的画面效果。

图3-37所示的店铺主图装修设计效果，文字与设计元素都使用右对齐的方式，整个画面的视觉中心向右偏移，让人们的阅读习惯产生新鲜感，显得新颖有趣，可以提高顾客的兴趣。

2.节奏与韵律

节奏与韵律是物质运动的一种周期性表现形式，有规律的重复、有组织的变化现象，是艺术造型中求得整体统一和变化，从而形成艺术感染力的一种表现形式。韵律是通过节奏的变化来产生的，版面只有在组织上符合某种规律并具有一定的节奏感，才能形成某种韵律。

在网店的装修设计中，合理运用节奏与韵律，可以将复杂的信息以轻松、优雅的形式表现出来。

在图3-38所示的商品展示装修设计图中，图片的色彩和布局统一，相同形式的构图体现出画面的韵律感，每个画面中的商品形态和内容各不相同，这样又表现出节奏的变化，节奏的重复使组成节奏的各个元素都能够得到体现，让商品信息的展示更加轻松。

3.对比与调和

从文字内容分析，对比与调和是一对充满矛盾的综合体，但它们实质上又是相辅相成的统一体。在网店的装修设计中，画面中的各种设计元素都存在相互对比的关系，但为了找到视觉和心理上的平衡，设计师往往会在不断地对比中寻求能够相互协调的因素，让画面同时具备变化和和谐的审美情趣。

●对比

对比是差异性的强调。对比的因素存在于相同或相异的性质之间，也就是把相对的两要素互相比较之下，产生大小、明暗、黑白、强弱、粗细、疏密、高低、远近、动静、轻重等对比。对比的最基本要素是显示主从关系和统一变化的效果。

图3-39所示商品与左侧的文字，在明度上相似，但是在面积和疏密关系上存在明显的差异，因此整个画面既有色彩和面积上的对比，又显得和谐、统一。

●调和

调和是指适合、舒适、安定、统一，是近似性的强调，使两者或两者以上的要素相互具有共性。对比与调和是相辅相成的，在网店的版面构成中，一般整体版面宜采用调和，局部版面宜采用对比，画面中下面采用两张较小的图片排列整齐，且大小一致，虽然与上方较大的图片在色彩与外形上采用了同样的表现形式，但是整体画面既对立，又和谐地组合在一起。如图3-40所示。

4.虚实与留白

虚实与留白是网店版面设计中重要的视觉传达方式。

任何形体都具有一定的实体空间，而在形体之外或形体背后呈现的细弱或朦胧的文字、图形和色彩就是虚的空间。主要用于为版面增添灵气和制造空间感。两者都是采用对比与衬托的方式将版面中的主体部分烘托出来，使版面结构主次更加清晰，同时使版面更具层次感。

在如图3-41所示的商品描述页面中，将商品细节以曲线的方式排列在画面的左下方，右上方则利用背景图片进行修饰，在画面中表现出明显的轻重感，让顾客被左下方的信息吸引，给人留下深刻的印象。

中国传统美学上有“计白守黑”这一说法。就是指编排的内容是“黑”，也就是实体，斤斤计较的却是虚实的“白”，也可为细弱的文字、图形或色彩，这要根据内容而定。留白是版面未放置任何图文空间，它是“虚”的特殊表现手法。其形式、大小、比例决定着版面的质量。留白给人轻松的感觉，最大的作用是引人注意。在排版设计中，巧妙地留白，讲究空白之美，是为了更好地衬托主题，集中视线和形成版面的空间层次。

留白即指版面中未配置任何图文的空间，在版面中巧妙地留出空白区域，使留白空间更好地衬托主体，将读者的视线集中在画面主题之上。留白的手法在版式设计中运用广泛，可使版面更富空间感，给人丰富的想象空间。如图3-42所示，设计者利用大面积的白色背景突出画面中心的产品形象，画面干净、简洁，给人留下深刻的印象。

在大面积的空白区域里，实体金手链清晰地展现在画面之中，而利用较虚弱的人手作为虚的背景，很好地突出主体。虚实空间形成良好的互动，画面富有写意感。

任何形体都具有一定的实体空间，而在形体之外或形体背后呈现的细弱或朦胧的文字、图形和色彩就是虚拟空间。实体空间与虚拟空间之间没有绝对的分界，画面中每一个形体在占据一定的实体空间后，常常会需要利用一定的虚的空间来获得视觉上的动态与扩张感。版面虚实相生，主体得以强调，画面更具连贯性。

3.3.5 网店画面的布局与处理

在网店的装修设计中，图片是除了文字外的另一个重要的传递信息途径，也是网络销售和微营销中最需要重点设计的设计元素。店铺中的商品图片不但是其装修画面中的一个重要组成部分，而且它比文字的表现力更直接、更快捷、更形象、更有效，可以让商品的信息传递更简洁。

1.缩放图片，组合布局

同一种商品照片的布局设计如果进行不同比例的缩放，就会获得不同的视觉效果，从而凸显不同的重点。将图片进行缩放，展示出商品的细节，让顾客清晰地了解商品的材质，真实还原商品的质感，更容易获得顾客的认可，给人逼真的触感。在处理图片的过程中，通过实拍照片展示商品的整体效果，凸显出商品的外形特点，让顾客对商品的注意力更加集中，如图3-43所示。

需要注意的是，网店装修设计与普通的网页设计不同，它重点展示的是商品本身，因此，适当遮盖商品以外的图像，可以突显商品的特点，获得顾客更多的关注。如图3-44所示，画面中心的商品造型在粉色留白背景中显得轮廓清晰而醒目，利用光影的强弱对比，使得主体商品突出且富有立体感。

2.裁剪抠图，提炼精华

大部分商品图片都是由摄影师拍摄的照片，它们的表现形式大都固定不变，或者只有一部分内容符合装修需要，此时需要裁剪图片或者进行抠图处理，使它们符合版面设计的需求。

如图3-45所示，将手表从繁杂的背景中抠取出来，以直观、直接的方式呈现出来，让顾客一目了然，对商品的展示具有非常积极的作用，也让商品的外形、特点更加醒目，避免过多的信息影响顾客的阅读体验。