5.2 淘寶美工設(shè)計(jì)要素

通過上面的學(xué)習(xí)，我們了解了平面設(shè)計(jì)與美學(xué)的相關(guān)基礎(chǔ)知識(shí)，那么如何將這些知識(shí)應(yīng)用到淘寶店鋪裝修設(shè)計(jì)中呢？在店鋪裝修設(shè)計(jì)中應(yīng)該注意哪些問題呢？下面我們來學(xué)習(xí)淘寶美工設(shè)計(jì)的相關(guān)設(shè)計(jì)要素。

5.2.1 淘寶店鋪設(shè)計(jì)要素

淘寶店鋪的設(shè)計(jì)實(shí)際上就是一個(gè)網(wǎng)站的設(shè)計(jì)。而網(wǎng)站三要素就是內(nèi)容、功能和表現(xiàn)，如下圖所示。低保真原型解決了基礎(chǔ)內(nèi)容層面的問題，而高保真原型則規(guī)劃了網(wǎng)站的功能和表現(xiàn)；內(nèi)容是網(wǎng)站最基本、最重要的核心部分，是網(wǎng)站的頁面邏輯。

5.2.2 淘寶店鋪的布局

做淘寶店鋪裝修，設(shè)計(jì)版面布局是第一步，如何做到版面布局既有創(chuàng)意又美觀大方呢？這就需要一定的版面布局處理功底。版面布局的具體操作步驟如下。

1．草案

淘寶店鋪的頁面就像一張白紙，沒有任何東西，設(shè)計(jì)師需要盡可能地發(fā)揮自己的想象力，將想到的“內(nèi)容”表現(xiàn)上去。這屬于創(chuàng)作階段，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。

2．粗略布局

在草案的基礎(chǔ)上，將淘寶店鋪需要放置的功能模塊安排到淘寶各頁面上，放置的過程中需要遵循突出重點(diǎn)、平衡協(xié)調(diào)的設(shè)計(jì)原則，先將淘寶店鋪標(biāo)志LOGO、主菜單、特價(jià)寶貝、活動(dòng)推廣、熱銷寶貝等最重要的模塊放在最顯眼、最突出的位置，再考慮次要模塊的擺放。

3．定案

將粗略布局精細(xì)化、具體化。

在版面布局的過程中，需要遵循的原則如下。

① 正常均衡。通常情況下，需要在布局中達(dá)到上下、左右對(duì)稱的形式，主要強(qiáng)調(diào)平衡穩(wěn)定，能達(dá)到使人感覺平穩(wěn)、可信的效果，如下圖所示。

② 異常平衡。通常是指在布局中既要有對(duì)比也要達(dá)到平衡，即在對(duì)比中求統(tǒng)一，此種布局能達(dá)到強(qiáng)調(diào)性、對(duì)比性和高注目性的效果，如下圖所示。

③ 對(duì)比。通常是指在布局中利用色彩、圖形和色調(diào)等元素來作對(duì)比效果，如下圖所示。在所表現(xiàn)的內(nèi)容上也可產(chǎn)生對(duì)比效果，比如古與今、新與舊等對(duì)比。

④ 空白?？瞻椎牟季旨瓤梢詫?duì)比其他淘寶店鋪表示突出卓越，又可以表示淘寶店鋪的高品位，這種表現(xiàn)方法對(duì)體現(xiàn)淘寶店鋪的格調(diào)十分有效，如下圖所示。

⑤ 凝視。通常是指利用布局中的人物視線，使觀者產(chǎn)生跟隨注意的心理，以達(dá)到注視產(chǎn)品的效果，一般多由明星做凝視狀，如下圖所示。

⑥ 用圖片解說。用圖片解說可以更加快捷、準(zhǔn)確地表達(dá)淘寶店鋪的產(chǎn)品內(nèi)容和形象，更能夠深層次地表達(dá)情感，并傳達(dá)給買家更多的心理因素，如下圖所示。

如果能將以上的版面布局設(shè)計(jì)原則領(lǐng)會(huì)并靈活應(yīng)用到頁面布局中，效果會(huì)非常好。

常用的版面布局形式有以下幾種。

① “T”結(jié)構(gòu)布局。“T”結(jié)構(gòu)布局是指頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局構(gòu)圖方法，如下圖所示。因?yàn)椴藛螚l背景比較深，所以整體效果類似英文字母“T”，故稱為“T”形布局。這種布局是淘寶店鋪網(wǎng)頁設(shè)計(jì)中用得最廣泛的一種布局方式?！癟”結(jié)構(gòu)版面布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)比較清晰，主次分明，其缺點(diǎn)是整體頁面較呆板，容易給人枯燥乏味的感覺。

② “口”形布局?！翱凇毙尾季质且环N形象的比喻，網(wǎng)頁布局中一般上下各有一個(gè)廣告條，上面是主菜單，下面放友情鏈接等，中間則是主要表現(xiàn)的內(nèi)容，這樣就形成了個(gè)“口”字形，如下圖所示?！翱凇毙尾季值膬?yōu)點(diǎn)是可以充分利用版面，表現(xiàn)出的信息量大，其缺點(diǎn)是頁面比較擁擠，不夠靈活。

③ “三”形布局?！叭毙尾季值奶攸c(diǎn)是將頁面整體分割為三部分，色塊中大多放廣告條，如下圖所示。

④ 對(duì)稱對(duì)比布局。對(duì)稱對(duì)比布局一般采取左右或者上下對(duì)稱的布局形式，一半使用深色，一半使用淺色，既產(chǎn)生對(duì)比效果又有對(duì)稱的格局，一般用于設(shè)計(jì)性較強(qiáng)的店鋪，如下圖所示。其優(yōu)點(diǎn)是視覺沖擊力非常強(qiáng)，缺點(diǎn)是將兩部分內(nèi)容有機(jī)地結(jié)合在一起比較困難。

⑤ POP布局。POP布局就是指頁面布局整體像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心，如下圖所示。其優(yōu)點(diǎn)是表現(xiàn)的內(nèi)容顯而易見且漂亮、吸引人，缺點(diǎn)是表現(xiàn)內(nèi)容不夠多。

以上總結(jié)了幾種淘寶店鋪常見的布局形式，其實(shí)還有許多別具一格的布局，關(guān)鍵在于創(chuàng)意和設(shè)計(jì)。

5.2.3 色彩的搭配

在淘寶店鋪裝修設(shè)計(jì)中，色彩的搭配起著非常關(guān)鍵的作用，很多淘寶店鋪設(shè)計(jì)以其成功的色彩搭配令人過目不忘。但是，對(duì)于剛開始學(xué)習(xí)淘寶店鋪設(shè)計(jì)的淘寶美工而言，駕馭好淘寶店鋪設(shè)計(jì)的顏色搭配并不是一件很輕松的事情。淘寶美工首先需要學(xué)習(xí)各種色彩理論和方法，然后需要分析一些知名網(wǎng)站的顏色搭配方法，這樣可以在具體的淘寶店鋪裝修時(shí)達(dá)到事半功倍的效果，并能夠快速提高淘寶店鋪設(shè)計(jì)制作水平。

網(wǎng)頁上的所有顏色，在HTML下看到的都是以顏色英文單詞或者十六進(jìn)制方法表示的（如#000000表示黑色）。不同的顏色具有不同的含義，并給人各種豐富的心理感受和聯(lián)想，下面舉例來說明。

紅色：熱情、奔放、喜悅

黃色：高貴、富有、燦爛

黑色：嚴(yán)肅、陰暗、沉著

白色：純潔、簡(jiǎn)單、潔凈

藍(lán)色：冷靜、理智、清澈

綠色：活力、清新、生機(jī)

灰色：莊重、沉穩(wěn)、平衡

紫色：浪漫、富貴、神秘

不同的淘寶店鋪有不同的風(fēng)格特點(diǎn)，也會(huì)使用具有代表性的顏色。淘寶店鋪使用的顏色大概分為以下幾種類型。

1．公司色

目前，每個(gè)優(yōu)秀的公司都把自己公司的企業(yè)形象做得非常到位，而每一個(gè)公司的CI設(shè)計(jì)中必然要有標(biāo)準(zhǔn)的顏色。如下圖所示的淘寶店鋪的主色調(diào)是黃色和綠色，形象宣傳、海報(bào)、產(chǎn)品照片、廣告使用的顏色都和公司主色調(diào)的顏色一致。

2．風(fēng)格色

很多淘寶店鋪有自己的風(fēng)格特色，也會(huì)使用和這種風(fēng)格配套的顏色。比如海爾公司使用的顏色是一種中性的綠色，既充滿朝氣又不失創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，如下圖所示，數(shù)碼電子產(chǎn)品公司使用藍(lán)色的較多……這些都是在突出自己公司的風(fēng)格特點(diǎn)。

3．習(xí)慣色

有一些淘寶店鋪裝修的顏色根據(jù)自己的喜好確定，以小型店鋪居多，如下圖所示。比如自己喜歡藍(lán)色、紫色、黑色等，在做淘寶店鋪的時(shí)候就傾向于選擇這些顏色。每個(gè)人都有自己喜歡的顏色，因此這種類型的配色稱為習(xí)慣色。

5.2.4 文字的選擇

淘寶店鋪裝修中除了圖片很重要外，次重要的就是文字。頁面中的文字在設(shè)計(jì)中需要考慮排版，字體選擇，字體顏色、大小、粗細(xì)等細(xì)節(jié)。

如果字體排版漂亮美觀，就可以讓人耐心看完文字內(nèi)容，從而得到其中的重要信息，并且還可以影響到買家閱讀的心情。同時(shí)，在字體的選擇、大小和顏色設(shè)置過程中，還應(yīng)該配合企業(yè)的CI識(shí)別系統(tǒng)，并且需要表達(dá)一定的思想感情和風(fēng)格特色。

文字的選擇應(yīng)該注重實(shí)用性和創(chuàng)意性，如下圖所示。創(chuàng)意性很好理解，就是突破常規(guī)設(shè)計(jì)，配合自己淘寶店鋪中的設(shè)計(jì)思想而選擇相應(yīng)的字體，或者自己設(shè)計(jì)字體，表達(dá)出一定的風(fēng)格特點(diǎn)。

對(duì)于實(shí)用性問題，只需要讓買家看著舒服、稍微帶點(diǎn)自己的特色即可。

5.2.5 圖片的選擇

在淘寶店鋪裝修時(shí)，圖片是最復(fù)雜和關(guān)鍵的設(shè)計(jì)元素。在決定淘寶店鋪能否成功方面，圖片扮演著非常重要的角色。簡(jiǎn)言之，選擇一個(gè)完美的圖片，可以使你的淘寶店鋪脫穎而出，提高店鋪競(jìng)爭(zhēng)力。

1．選擇能與讀者產(chǎn)生共鳴的圖片

淘寶店鋪中使用帶有感情的圖片能夠影響到買家的情緒。如果選擇的圖片主題是歡快的，能引起有同樣感受的買家的共鳴。所以賣家要明白你所針對(duì)的用戶的感情是什么樣的，需要慢慢斟酌，在挑選淘寶店鋪圖片之前，這是非常重要的。

好的淘寶店鋪設(shè)計(jì)中使用的圖片會(huì)產(chǎn)生情緒感染，即賣家和買家有感情相融的趨勢(shì)，也就是說，你選擇的圖片要讓你的客戶和你產(chǎn)生共鳴，如下圖所示。

2．選擇具有震懾性的圖片

如下圖所示，選擇具有震懾性的圖片可以快速吸引買家的注意力，使買家注意圖片上的重要特征—相關(guān)性。這些圖像必須與該淘寶店鋪的目的相關(guān)。震懾的目的是通過圖像傳達(dá)產(chǎn)品的信息，因此與產(chǎn)品無關(guān)的圖片沒有任何意義，無論它們是否能抓住買家的注意力。

3．選擇具有吸引力的圖片

如下圖所示，淘寶店鋪上圖片的吸引力要具有長久性。當(dāng)買家過了很久再次訪問某家店鋪時(shí)，他們?nèi)匀粫?huì)記得在這個(gè)店鋪所看到的這些圖片。

4．選擇有激勵(lì)性的圖片

如下圖所示，淘寶店鋪上的圖像不僅需要看起來美觀漂亮，同時(shí)也要能說服人們對(duì)店鋪上的產(chǎn)品或服務(wù)采取積極的決策。這需要有一個(gè)內(nèi)在的轉(zhuǎn)化能力，關(guān)鍵點(diǎn)是通過圖片激勵(lì)人們做出明智的決策，能夠快速產(chǎn)生激勵(lì)買家購買產(chǎn)品的效果。

5．選擇與品牌一致的圖片

選擇與品牌的產(chǎn)品、服務(wù)、價(jià)值觀和目標(biāo)一致的圖片能夠快速形成良好的品牌效應(yīng)，如下圖所示。

6．選擇針對(duì)目標(biāo)顧客的圖片

淘寶店鋪一定有自己的目標(biāo)顧客群體，所以可以選擇針對(duì)目標(biāo)客戶群體的圖片，如下圖所示。這些圖片將使買家產(chǎn)生深深的共鳴，并且可以提高店鋪的影響度。

7．圖片的一致性

淘寶店鋪是一種視覺性的產(chǎn)品信息傳達(dá)，圖片能夠慢慢說服他們嘗試一個(gè)特定的產(chǎn)品或服務(wù)。因此，圖片是至關(guān)重要的設(shè)計(jì)元素，它推動(dòng)這種信息向前發(fā)展，這就是為什么保持圖片的一致性如此重要，因?yàn)樗梢越o目標(biāo)顧客留下深刻印象，如下圖所示。

8．圖片的質(zhì)量

一定要保證淘寶店鋪中的圖片質(zhì)量，圖片必須擁有符合頁面的像素，清晰明了。這也是有些淘寶美工容易忽視的地方。