1.2 店鋪頁面設計：風格、色彩、布局

店鋪頁面裝修設計主要包括風格設計、色調色彩的搭配、結構布局規劃等，根據店鋪銷售的商品與行業特點，設計出個性化的店鋪頁面。

1.2.1 店鋪風格設計

店鋪風格是指買家對店鋪頁面的直觀感受，即買家在瀏覽過程中所感受到的賣家品位、商品品質以及藝術氛圍等。在店鋪裝修前，要確定店鋪銷售的商品所適合的風格，并合理使用色彩裝修出精美的頁面。

1.店鋪風格設計三大原則

對于店鋪裝修來說，首先，要確定店鋪裝修的整體風格，賣什么商品就必須找到適合本商品的裝修風格，否則會給人一種不倫不類的感覺。其次，要統一店鋪的裝修風格，即店鋪的各個頁面和組成元素也應當與店鋪的整體風格保持一致，這樣才能使店鋪有整體感。新手美工在進行店鋪風格設計時要注意以下幾個原則。

原則一：店鋪風格要與主營商品風格相符。

面對不同消費群體的店鋪，其裝修風格也不盡相同。例如，女性類商品的店鋪適合浪漫、時尚、可愛等風格，男性類商品的店鋪適合黑白搭配、有金屬質感的設計風格，而兒童類商品的店鋪則適合卡通風格。圖1-8所示為某運動鞋店鋪的設計，其風格輕松活潑，與其主營商品運動鞋風格是非常吻合的，體現了一種活潑、時尚、休閑的感覺。

原則二：合理使用色彩。

除了風格，色彩的搭配也很重要，風格的呈現往往離不開色彩的搭配。合理的色彩搭配不僅可以提升商品的品質和店鋪的視覺效果，還可以提高店鋪的轉化率。

暖色系給人一種親切感，具有很強的親和力，如粉紅色、鮮紅色、鵝黃色等是很受女性喜歡的色彩，非常適合女士用品店及嬰幼兒服飾店等。冷色系給人一種端莊肅穆的感覺，適合高檔商務男裝店鋪等。另外，高檔的飾品店（如手表、珠寶店）通常也使用冷色系來表現商品炫酷的質感和品質。圖1-9所示為某化妝水店鋪的設計，使用暖色系的色彩更能突出商品的品質。

圖1-8 某運動鞋店鋪的設計

圖1-9 某化妝水店鋪的設計

原則三：風格要統一。

店鋪的整體風格要一致。從店標、分類導航、店鋪公告、計數器等元素到主頁以及寶貝詳情頁面，應采用同一色系，要做到整體協調。不能頁面采用的是潮流時尚風格，而店鋪的背景音樂卻是兒童歌曲。所有的元素都應該保持一致的風格，隨意混搭是大忌。

當然，同一種商品類型也可以有不同的裝修風格。例如，銷售手表的店鋪，優雅、高貴、時尚等風格都可以用，賣家可以根據自己的喜好來選擇，如圖1-10所示。

（a）適合青年人風格的設計

（b）適合中年人風格的設計

圖1-10 不同風格的手表店鋪的設計

2.3步定位店鋪風格

確定自己店鋪的風格其實不難，一般3步就能搞定。

第1步：風格定位。

在設計店鋪風格之前，首先需要根據店鋪的商品和自己的喜好來確定店鋪要裝修成什么風格，是甜美風格，還是復古風格。

第2步：色系的確定。

風格確定后，再分析該風格適合用冷色系還是暖色系。如果是甜美風格，則可以使用暖色系。

第3步：顏色的選擇。

經過前兩步的篩選后，確認用哪種顏色就非常簡單了。如何選擇顏色可參考后面章節講解的內容（第11章“網店色彩設計”）。

經過上述3步，整個店鋪的風格及用色就確定下來了。

3.常見的店鋪風格

盡管店鋪的裝修風格多種多樣，但只要根據店鋪所屬行業的屬性來選用相應的色系，再根據店鋪商品的特征來確定具體的風格，即可輕松定位店鋪的裝修風格。常見的店鋪風格有以下幾大類。

（1）充滿活力的活潑風格。

這種風格具有一定的興奮度，令人振奮，富有活力，能讓人產生快樂的感覺。常用于食品、兒童玩具、家居用品、時尚運動用品等類別的店鋪，代表顏色為橙色、黃色，如圖1-11所示。

（2）神秘、高貴的優雅風格。

這種風格最能體現高貴奢華，常用于首飾、高端化妝品、手表、藝術品等類別的店鋪，代表顏色為紫色，如圖1-12所示。

圖1-11 活潑風格

圖1-12 優雅風格

（3）自然、健康的恬靜風格。

這種風格給人很強的親和力，能讓人感到舒適，更能傳達出健康的理念。常用于保健品、土特產、護膚品、兒童用品等類別的店鋪，代表顏色為綠色，如圖1-13所示。

圖1-13 恬靜風格

（4）科技、理性的嚴謹風格。

這種風格給人理智和冷靜的感覺，用于表現沉靜、可靠、博大的意象，常用于強調科技感和商務感等的店鋪設計中，如數碼產品、家用電器、清潔用品、醫藥品等類別的店鋪，代表顏色為藍色，如圖1-14所示。

圖1-14 嚴謹風格

（5）浪漫美好的甜美風格。

這種風格給人無比甜蜜的感覺，常用于女裝、化妝品、飾品等類別的店鋪，代表顏色為粉色，如圖1-15所示。

（6）表現高質感和時尚感的黑白灰風格。

這種風格使用率非常高，具有獨特個性，常用于家居用品、手表、小型電器等類別的店鋪，如圖1-16所示。

圖1-15 甜美風格

圖1-16 黑白灰風格

當然，店鋪風格還可以從其他角度來劃分，如劃分為復古風格、韓流風格、文藝風格和清新風格等。

1.2.2 店鋪色彩設計

一些賣家在裝修店鋪的時候，將一些時尚、酷炫的顏色全都用在店鋪里，致使頁面色彩雜亂。其實店鋪在色彩搭配上是有講究的，要有一個主色，然后適當地配上其他顏色加以襯托，這樣才能形成良好的視覺效果，給買家營造一個愉悅的購物環境。

1.確定主色

在確定店鋪主色時，美工可以從以下3個方面考慮。

（1）店鋪的Logo。

（2）店鋪風格的關鍵詞（見圖1-17）。

（3）色彩學原理（第11章中具體講解相關內容）。

圖1-17 店鋪風格的關鍵詞

2.搭配副色

根據選擇的主色來選擇副色，主副色搭配的方法如表1-1所示，其搭配效果如圖1-18所示。

表1-1 主副色搭配的方法

圖1-18 主副色搭配效果

1.2.3 店鋪布局設計

店鋪布局通常指店鋪的裝修布局。店鋪裝修布局時，美工一般是在特定的布局排版模板基礎之上根據板塊填充相應的元素。

1.店鋪中典型的布局元素

一個完整的淘寶天貓店，一般包括店招、店鋪公告、促銷欄、分類導航、寶貝展示、客服旺旺、收藏店鋪、購物須知等元素。圖1-19所示為店鋪中典型的布局元素。這些元素對大多數店鋪來說并不是都能用上，但只要使用得當，它們就能給店鋪帶來一些意想不到的收獲。

圖1-19 店鋪中典型的布局元素

2.各元素的布局規則

店鋪中的各元素不是隨隨便便地放置在店鋪頁面的任意位置，而是有一定的布局規則。例如，店招、店鋪公告、分類導航、客服旺旺、計數器、聯系方式等元素的布局規則如表1-2所示。

表1-2 店鋪元素布局規則

高手支招

如果買家對商品有興趣，點擊首頁上的“分類導航”按鈕便可進入“寶貝描述”頁面。“寶貝描述”頁面的布局與使用的裝修模板有關。在“寶貝描述”頁面的頂部，可以設計一個表格，將寶貝的詳細描述放在表格里，并配上相關圖片，以及交易規則等。

在“寶貝描述”頁面里一般不使用尺寸過大的圖片，因為大尺寸圖片會使網頁打開的速度變慢，買家會因等待時間長而關閉該網頁，從而造成客戶流失。

3.繪制大致的設計框架

通過對現有素材的整理、分類和買家的要求，美工可先初步確定各內容板塊的布局，然后繪制出一個大致的設計框架。圖1-20所示為淘寶店首頁基本框架結構設計。

圖1-20 淘寶店首頁基本框架結構設計