1.3 網店美工設計的基本理念

由于消費者不能真實地觸摸到網店中的商品，只能通過網店中的圖片、文案、視頻去感知，因此網店的設計就極其重要。本節將介紹網店美工設計的基本理念，增強讀者對網店美工設計的了解，提高設計水平。

1.3.1 了解設計元素

點、線、面是圖像中最基本的三大要素，網店美工人員在設計時，將三者進行組合可以制作出豐富的視覺頁面效果，提高網店的品牌形象。

?點：可見的最小的形式單元，具有凝聚視線的作用。點的表現形式豐富多樣，它既可以單獨存在于畫面之中，又可以組合成線或者面，畫面上的點可以使畫面布局顯得合理舒適、靈動且富有沖擊力，如圖1-27所示。

?線：線可以表現長度、寬度、位置、方向和風格，具有剛柔并濟、優美、簡潔的特點，經常用于渲染畫面，引導、串聯或分割畫面元素，如圖1-28所示。

?面：點的放大即為面，線的分割產生各種比例的空間也可稱為面。面有長度、寬度、方向、位置、擺放角度等特性。面具有組合信息、分割畫面、平衡和豐富空間層次、烘托與深化主題的作用，如圖1-29所示。

1.3.2 色彩的搭配

好的色彩搭配能夠讓頁面更具親和力和感染力，從而提升瀏覽量。因此，色彩搭配在設計中尤為重要。網店美工人員可以通過色彩搭配來吸引消費者，在色彩搭配中，主色、輔助色與點綴色各有不同的功能，具體介紹如下。

?主色：頁面中占用面積最大、也是最受矚目的色彩，它決定了整個畫面的風格。主色不宜過多，一般控制在1~3種顏色，過多容易造成視覺疲勞。主色不是隨意選擇的，而是要根據商品特征或受眾人群有目的地選擇，圖1-30所示的不同程度的紅色即為圖片的主色。

?輔助色：輔助色指占用面積略小于主色，用于烘托主色的顏色。圖1-30所示的黃色、藍灰色為圖片的輔助色，合理應用輔助色能豐富頁面的色彩，使頁面更加完整、美觀。

?點綴色：點綴色指頁面中占用面積小、色彩比較醒目的一種或多種顏色。合理應用點綴色，可以起到畫龍點睛的作用，使頁面主次更加分明、富有變化。圖1-30所示的白色為圖片的點綴色，該色彩與主色形成鮮明的對比，也突出了文案內容。

1.3.3 文字的字體

不同的文字字體會給人不同的感受，如纖細的字體能給人一種輕松、優雅、時尚的視覺感受，而粗壯的字體則會給人一種穩重、端莊的視覺感受。因此網店美工人員在設計店鋪頁面時，除了需要注重色彩的搭配外，也需要注重文字的字體。下面將介紹字體的性格特征和風格搭配。

1.字體的性格特征

不同字體展現不同的性格特征。在選擇字體時，需要根據商品的特征來選擇對應的字體。下面對網店美工設計的常用字體的性格特征進行介紹。

?宋體：店鋪應用最廣泛的字體，其筆畫的起點與結束點有額外的裝飾、橫細豎粗，其外形端莊秀美、具有濃厚的文藝氣息，適合用于標題設計。系統默認的宋體纖細、美觀、端莊，但作為標題分量不足，而方正大標宋不僅具有宋體的秀美，還具備黑體的醒目性，因此經常被用于女性商品的設計。

?黑體：筆畫粗細一致、粗壯有力，非常醒目，具有很強的視覺沖擊力，常用于廣告、導航條等設計。常見的黑體樣式包括粗黑、大黑、中黑、雅黑等，如圖1-31所示。

?書法體：書法體包括楷體、葉根友毛筆行書、篆書體、隸書體、行書體和燕書體等，書法體具有古樸、秀美的特征，常用于古玉、茶葉、筆墨、書籍等古典氣息濃厚的店鋪中，如圖1-32所示。

?美術體：美術體指將文本的筆畫涂抹變形，或用花瓣、樹枝等拼湊成各種圖形化的文本，裝飾感強，主要用于海報的設計，可有效提升店鋪的藝術品位。

2.字體的風格搭配

字體風格是指通過文字的視覺體現，產生的不同的視覺聯想，選擇合適的字體風格不僅能渲染頁面的氛圍，還便于受眾對主題的理解與消化。下面對網店中常用的字體風格進行分析。

?男性字體：在車、剃須刀、重金屬、搖滾、競技游戲、足球等以男性消費者為受眾的商品設計中，一般使用筆畫粗的黑體類字體或帶棱角的字體。常用的男性字體有方正粗譚黑簡體、造字工房勁黑、漢儀菱心體簡、蒙納簡超剛黑等。

?女性字體：在鮮花類、珠寶配飾類、女性用品、護膚品、化妝品等以女性消費者為受眾的商品設計中，一般采用纖細秀美、時尚、線條流暢、字形有粗細變化的字體，如宋體、方正中倩簡體、方正正纖黑簡體、張海山銳線體簡、方正蘭亭黑簡體等，如圖1-33所示。

?兒童字體：在零食、玩具、童裝、點讀機、卡通漫畫等以兒童消費者為受眾的商品設計中，一般采用活潑、可愛、呆萌、肥圓、調皮的字體，如漢儀娃娃篆簡體、方正胖娃簡體、方正少兒簡體、騰祥孔淼卡通簡體等，如圖1-34所示。

?促銷型字體：促銷文案重在突出促銷信息，因此一般采用粗、大、醒目的字體，并配合適當的傾斜、文字變形等特效，增加文字效果，如黑體、方正粗黑、方正粗譚黑簡體等。

1.3.4 視覺構圖與頁面布局的原則

在進行店鋪頁面設計時，如果將各種元素合理地布局在頁面中，并運用不同的視覺構圖方法則可以讓店鋪頁面效果更加出彩，吸引消費者。下面將分別對視覺構圖和頁面布局的原則進行介紹。

1.視覺構圖

良好的視覺構圖是指畫面中的各元素通過一定的方式構成一個協調、完整的畫面。不同的視覺構圖方法會給消費者帶來不同的視覺感受，下面對常見的視覺構圖方法進行介紹。

?中心構圖：在畫面中心位置安排主元素，如商品或促銷文案。這種構圖方法給人穩定、端莊的感覺，適合對稱式的畫面，可以產生中心透視感，如圖1-35所示。

?九宮格構圖：九宮格構圖指用網格將畫面平均分成9個格子，在4個交叉點選擇一個點或兩個點作為畫面主元素的位置，同時還應適當考慮其他點的平衡與對比等因素。這種構圖方法富有變化與動感，是常用的構圖方法之一。

?對角線構圖：對角線構圖指畫面主題居于畫面的斜對角位置，能夠更好呈現主題的效果，并表現出畫面的立體感。與中心構圖法相比，這種構圖方法打破了平衡，具有活潑生動的特點。

?三角形構圖：三角形構圖以3個視覺中心為主要位置，形成一個穩定的三角形。該三角形可以是正三角也可以是斜三角或倒三角，其中斜三角較為常用，也較為靈活。三角形構圖具有安定、均衡但不失靈活的特點。

?黃金分割構圖：黃金分割構圖指將畫面一分為二，其中較大部分與較小部分之比等于整體與較大部分之比，其比值為1∶0.618。1∶0.618是公認的最具美學價值的比例，具有藝術性與和諧性。

2.頁面布局的原則

一個完整的店鋪頁面中有很多不同的元素，為了合理地對這些元素進行排版布局，使消費者享有舒適的視覺體驗，網店美工人員在進行頁面布局時需要遵循以下原則。

?主次分明、中心突出：視覺中心一般在屏幕的中心位置或中部偏上的位置。將店鋪促銷信息或爆款、主推款等重要商品安排在最佳的視覺位置，無疑會迅速抓住消費者眼球。在視覺中心以外的地方可以安排稍微次要的內容，這樣可以在頁面上突出重點，做到主次有別。

?大小搭配、相互呼應：展示多個商品時，可通過大小搭配的方式使頁面錯落有致。

?區域劃分明確：合理、清晰地分區可引導消費者快速找到自己的消費目標。

?簡潔與一致性：保持頁面簡潔與一致性是網頁布局的基礎，如標題醒目，頁面字體、顏色搭配得當，各頁面的文本、商品與圖形、標題之間的留白一致。

?合理使用頁面元素：頁面元素的選用要合理、精確，在頁面中的大小、間距與位置要合適。例如，背景圖案生動、頁面文本設計美觀且可讀性強等。

?布局豐滿、應有盡有：布局豐滿并非是所有模塊的簡單堆砌，而是將有必要的模塊涵蓋全面。除了包含商品常規模塊外，頁面還包括收藏模塊、客服模塊、搜索模塊等必備的模塊，以增加店鋪的黏性，提升新老客戶的忠實度，提高店鋪的用戶體驗。

1.3.5 實戰——網店首頁視覺賞析

下面將對淘寶網頁中某店鋪的配色風格、海報的構圖技巧，以及頁面的布局進行賞析，其具體操作如下。

步驟 01 該店鋪是一家專注時尚男裝的潮流店鋪，在文本與形狀等元素的用色上主要采用經典的藍色、簡練的灰色、明快的白色布局首屏，突出店鋪時尚、大氣的風格，而且首屏海報采用了典型的黃金分割構圖法，使整個畫面更加和諧，如圖1-36所示。

步驟 02 店鋪的分區合理、清晰，遵循了區域劃分明確的頁面布局原則，如圖1-37所示。

步驟 03 就商品展示而言，將重要商品用最大模塊進行展示，且頁面中的文案大小、顏色、位置合理，整個頁面主次分明、重點突出，如圖1-38所示。

步驟 04 從整體而言，該店鋪的用色，以及圖片與文本的大小、間距與位置等相對統一，保證了頁面的簡潔與一致性，如圖1-39所示。