2.5 布局版式：網(wǎng)店版式布局技巧

在網(wǎng)店的運(yùn)營(yíng)過(guò)程中，可以通過(guò)制作美觀、適合商品的頁(yè)面，達(dá)到吸引顧客、提高銷售業(yè)績(jī)的效果，而關(guān)鍵之處就在于裝修設(shè)計(jì)的版式布局。

2.5.1 網(wǎng)店布局元素分類

在一個(gè)完整的網(wǎng)店布局中，通常包括這些元素：店招、促銷欄（公告、推薦）、產(chǎn)品分類導(dǎo)航、簽名、產(chǎn)品描述、計(jì)數(shù)器、掛件、歡迎歡送圖片、商家在線時(shí)間、聯(lián)系方式等，這些元素的布局沒(méi)有固定的章法可循，主要靠設(shè)計(jì)師的靈活運(yùn)用與搭配。

只有在大量設(shè)計(jì)實(shí)踐中熟練運(yùn)用，才能真正理解版式布局設(shè)計(jì)的形式原則，并善于運(yùn)用，從而創(chuàng)作出優(yōu)秀的網(wǎng)店裝修作品。

1．對(duì)稱與均衡

對(duì)稱又稱“均齊”，是在統(tǒng)一中求變化；平衡則側(cè)重在變化中求統(tǒng)一。對(duì)稱的圖形具有單純、簡(jiǎn)潔的美感，以及靜態(tài)的安定感。對(duì)稱給人以穩(wěn)定、沉靜、端莊、大方的感覺，產(chǎn)生秩序、理性、高貴、靜穆之美。對(duì)稱的形態(tài)在視覺上有安定、自然、均勻、協(xié)調(diào)、整齊、典雅、莊重、完美的樸素美感，符合人們通常的視覺習(xí)慣。

均衡的形態(tài)設(shè)計(jì)讓人產(chǎn)生視覺與心理上的完美、寧?kù)o、和諧之感。靜態(tài)平衡的格局大致是由對(duì)稱與均衡的形式構(gòu)成。均衡結(jié)構(gòu)是一種自由穩(wěn)定的結(jié)構(gòu)形式。一個(gè)畫面的均衡是指畫面的上與下、左與右取得面積、色彩、重量等量上的大體平衡。

在畫面上，對(duì)稱與均衡產(chǎn)生的視覺效果是不同的，前者端莊靜穆，有統(tǒng)一感、格律感，但如過(guò)分均等就顯得呆板；后者生動(dòng)活潑，有運(yùn)動(dòng)感，但有時(shí)因變化過(guò)強(qiáng)而易失衡。因此，在設(shè)計(jì)中要注意把對(duì)稱、均衡兩種形式有機(jī)地結(jié)合起來(lái)靈活運(yùn)用，如圖2-43所示。

專家指點(diǎn)

常用的版式布局的對(duì)齊方式有左對(duì)齊、右對(duì)齊、居中對(duì)齊和組合對(duì)齊，各自具體的特點(diǎn)如下。

● 左對(duì)齊：左對(duì)齊的排列方式有松有緊，有虛有實(shí)，具有節(jié)奏感，如圖2-44所示。

● 右對(duì)齊：右對(duì)齊的排列方式與左對(duì)齊剛好相反，具有很強(qiáng)的視覺性，適合表現(xiàn)一些特殊的畫面效果，如圖2-45所示。

● 居中對(duì)齊：是指讓設(shè)計(jì)元素以中心軸線對(duì)齊的方式，可以讓顧客視線更加集中、突出，具有莊重、優(yōu)雅的感覺，如圖2-46所示。

2．節(jié)奏與韻律

節(jié)奏與韻律是物質(zhì)運(yùn)動(dòng)的一種周期性表現(xiàn)形式，有規(guī)律的重復(fù)、有組織的變化現(xiàn)象，是藝術(shù)造型中求得整體統(tǒng)一和變化，從而形成藝術(shù)感染力的一種表現(xiàn)形式。韻律是通過(guò)節(jié)奏的變化來(lái)產(chǎn)生的。對(duì)版面來(lái)說(shuō)，只有在組織上符合某種規(guī)律并具有一定的節(jié)奏感，才能形成某種韻律。

在網(wǎng)店的裝修設(shè)計(jì)中，合理運(yùn)用節(jié)奏與韻律，就能將復(fù)雜的信息以輕松、優(yōu)雅的形式表現(xiàn)出來(lái)，如圖2-47所示。

3．對(duì)比與調(diào)和

從文字內(nèi)容分析，對(duì)比與調(diào)和是一對(duì)充滿矛盾的綜合體，但它們實(shí)質(zhì)上卻又是相輔相成的統(tǒng)一體。在網(wǎng)店的裝修設(shè)計(jì)中，畫面中的各種設(shè)計(jì)元素都存在著相互對(duì)比的關(guān)系。但為了找到視覺和心理上的平衡，設(shè)計(jì)師往往會(huì)在不斷的對(duì)比中尋求能夠相互協(xié)調(diào)的因素，讓畫面同時(shí)具備變化與和諧的審美情趣。

● 對(duì)比：對(duì)比是差異性的強(qiáng)調(diào)。對(duì)比的因素存在于相同或相異的性質(zhì)之間，也就是把相對(duì)的兩要素互相比較之下，產(chǎn)生大小、明暗、黑白、強(qiáng)弱、粗細(xì)、疏密、高低、遠(yuǎn)近、動(dòng)靜、輕重等對(duì)比。對(duì)比的最基本要素是顯示主從關(guān)系和統(tǒng)一變化的效果，如圖2-48所示。

● 調(diào)和：調(diào)和是指適合、舒適、安定、統(tǒng)一，是近似性的強(qiáng)調(diào)，使兩者或兩者以上的要素相互具有共性，對(duì)比與調(diào)和是相輔相成的，如圖2-49所示。在網(wǎng)店的版面構(gòu)成中，一般整體版面宜采用調(diào)和，而局部版面宜采用對(duì)比。

專家指點(diǎn)

4．重復(fù)與交錯(cuò)

在網(wǎng)店的版面布局中，不斷重復(fù)使用相同的基本形或線，它們的形狀、大小、方向都是相同的。重復(fù)使設(shè)計(jì)產(chǎn)生安定、整齊、規(guī)律的統(tǒng)一，如圖2-50所示。

但重復(fù)構(gòu)成后的視覺感受有時(shí)容易顯得呆板、平淡、缺乏趣味性的變化。因此，我們?cè)诎婷嬷锌砂才乓恍┙诲e(cuò)與重疊，打破版面呆板、平淡的格局，如圖2-51所示。

專家指點(diǎn)

5．虛實(shí)與留白

虛實(shí)與留白是網(wǎng)店的版面設(shè)計(jì)中重要的視覺傳達(dá)手段，主要用于為版面增添靈氣和制造空間感。兩者都是采用對(duì)比與襯托的方式將版面中的主體部分烘托而出，使版面結(jié)構(gòu)主次更加清晰，同時(shí)也能使版面更具層次感，如圖2-52所示。

在商品的描述頁(yè)面中，將商品細(xì)節(jié)以曲線的方式排列在畫面的左下方，右上方則利用背景圖片進(jìn)行修飾，在畫面中表現(xiàn)出明顯的輕重感，讓顧客的注意力被左下方的信息所吸引，給人留下深刻的印象。

任何形體都具有一定的實(shí)體空間，而在形體之外或形體背后呈現(xiàn)的細(xì)弱或朦朧的文字、圖形和色彩就是虛的空間。實(shí)體空間與虛的空間之間沒(méi)有絕對(duì)的分界。畫面中每一個(gè)形體在占據(jù)一定的實(shí)體空間后，常常會(huì)需要利用一定的虛的空間來(lái)獲得視覺上的動(dòng)態(tài)與擴(kuò)張感。版面虛實(shí)相生，主體得以強(qiáng)調(diào)，畫面更具連貫性。

中國(guó)傳統(tǒng)美學(xué)上有“計(jì)白守黑”這一說(shuō)法。就是指編排的內(nèi)容是“黑”，也就是實(shí)體，斤斤計(jì)較的卻是虛實(shí)的“白”，也可為細(xì)弱的文字，圖形或色彩，這要根據(jù)內(nèi)容而定。留白

則是版面未放置任何圖文空間，它是“虛”的特殊表現(xiàn)手法。其形式、大小、比例決定著版面的質(zhì)量。留白給人一種輕松的感覺，最大的作用是引人注意。在排版設(shè)計(jì)中，巧妙地留白，講究空白之美，是為了更好地襯托主題，集中視線和造成版面的空間層次。

2.5.2 網(wǎng)店頁(yè)面主圖處理

在網(wǎng)店的裝修設(shè)計(jì)中，圖片是除了文字外的另一個(gè)重要的傳遞信息途徑，也是網(wǎng)絡(luò)銷售和微營(yíng)銷中最需要重點(diǎn)設(shè)計(jì)的一個(gè)設(shè)計(jì)元素。店鋪中的商品圖片不但是其裝修畫面中的一個(gè)重要組成部分，而且它比文字的表現(xiàn)力更直接、更快捷、更形象、更有效，可以讓商品的信息傳遞更簡(jiǎn)潔。

1．裁剪摳圖，提煉精華

在網(wǎng)店裝修設(shè)計(jì)中，大部分的商品圖片都是由攝影師拍攝的照片。它們?cè)诒憩F(xiàn)形式上大都是固定不變的，或者是內(nèi)容上只有一部分符合裝修需要，此時(shí)就需要裁剪圖片或者進(jìn)行摳圖處理，使它們符合版面設(shè)計(jì)的需求，如圖2-53所示。

將手表從繁雜的背景中摳取出來(lái)，以直觀、直接的方式呈現(xiàn)出來(lái)，讓顧客能夠一目了然，對(duì)商品的展示具有非常積極的作用，也讓商品的外形、特點(diǎn)更加醒目，避免過(guò)多的信息影響顧客的閱讀體驗(yàn)。

2．縮放圖片，組合布局

對(duì)同一種商品照片的布局設(shè)計(jì)來(lái)說(shuō)，如果進(jìn)行不同比例的縮放，也會(huì)獲得不同的視覺效果，從而凸顯出不同的重點(diǎn)，如圖2-54所示。

專家指點(diǎn)

將圖片進(jìn)行縮放，展示出商品的細(xì)節(jié)，讓顧客對(duì)商品的材質(zhì)了解更清晰，真實(shí)地還原商品的質(zhì)感，更容易獲得顧客的認(rèn)可，給人逼真的觸感。在處理圖片的過(guò)程中，通過(guò)實(shí)拍照片展示商品的整體效果，凸顯出商品的外形特點(diǎn)，讓顧客對(duì)商品的注意更加集中。

需要注意的是，網(wǎng)店裝修設(shè)計(jì)與普通的網(wǎng)頁(yè)設(shè)計(jì)不同，它重點(diǎn)需要展示的是商品本身。因此，在某些設(shè)計(jì)的過(guò)程中，適當(dāng)對(duì)商品以外的圖像進(jìn)行遮蓋，可以讓商品的特點(diǎn)得以凸顯，獲得顧客更多的關(guān)注，如圖2-55所示。

畫面中心的商品造型在粉色留白背景中顯得輪廓清晰而醒目，利用光影的強(qiáng)弱對(duì)比，使得主體商品突出又富有立體感。

2.5.3 網(wǎng)店布局版式引導(dǎo)

在網(wǎng)店的裝修設(shè)計(jì)過(guò)程中，視覺流程是一個(gè)宏觀上的重要設(shè)計(jì)因素。視覺流程是指布局對(duì)顧客的視覺引導(dǎo)，指導(dǎo)顧客的視線關(guān)注范圍和方位，這些都可以通過(guò)頁(yè)面視覺流程的指向規(guī)劃來(lái)實(shí)現(xiàn)。版式布局的視覺流程可以分為單向形版面指向和曲線形版面指向。

1．單向形視覺流程

單向形版面指向可以將信息在有安排的情況下一一地傳遞給顧客，是網(wǎng)店布局設(shè)計(jì)中的必不可缺的視覺流程。它可以通過(guò)豎向、橫向、斜向的引導(dǎo)，使顧客更加明確地了解店鋪中的內(nèi)容，如圖2-56所示。

2．曲線形視覺流程

曲線形視覺流程是指將畫面的所有設(shè)計(jì)要素按照曲線或者回旋線的變化排列，可以給人一種曲折迂回的視覺感受，如圖2-57所示。