1.1.2　網店美工應掌握的設計要點

了解了網店美工的工作范疇后，網店美工還需要掌握點、線、面三大基本設計要素，以及色彩、文案、網店頁面結構、網店裝修風格等設計要點，這樣才能設計出更加出彩的效果。

1.點、線、面

點、線、面是設計中最基本的三大要素，結合使用能夠形成豐富的視覺效果。

●點：點是可見的最小的形式單元，具有凝聚視線的作用，可以使畫面布局顯得合理舒適、靈動且富有沖擊力。點的表現形式豐富多樣，既包含圓點、方點和三角點等規則的點，又包含鋸齒點、雨點、泥點及墨點等不規則的點。圖1-3的左圖為點的表現形式之一，右圖為將點元素圍繞在文案四周，用于豐富畫面，突出主題。

●線：線在視覺形態中可以表現長度、寬度、位置、方向和性格，具有剛柔并濟、優美和簡潔的特點，經常用于渲染畫面，引導、串聯或分割畫面元素。線分為水平線、垂直線、曲線和斜線。不同形態的線所表達的情感不同。水平線和垂直線顯得大氣、明確、莊嚴，曲線顯得柔和流暢、優雅靈動，斜線具有很強的視覺沖擊力。圖1-4的左圖為線的表現形式之一，右圖為應用不同長度的灰色曲線進行裝飾，將原本散亂的元素緊密連接，視覺效果大氣、優雅，具有格調。

●面：點放大即為面，線分割產生的各種比例的空間也可以稱為面。面具有長度、寬度、方向、位置和擺放角度等屬性。在畫面中，面還具有組合信息、分割畫面、平衡和豐富空間層次、烘托與深化主題的作用。利用面來設計圖像時需要注意：面與面之間要通過不同的排列來進行靈活對比。圖1-5的左圖為面的表現形式之一，右圖為應用面將圖像分割為上下兩個部分，加強了畫面的層次感。

2.色彩

網店的色彩與風格是消費者進入網店后首先感受到的元素，因此合理搭配色彩是做好網店視覺營銷的基礎。很多網店美工在裝修網店時，喜歡隨意堆砌一些酷炫的色塊，這會讓整個頁面的色彩雜亂無比，易使消費者產生視覺疲勞，而合理的色彩搭配不但能夠讓網店中的頁面更具親和力和感染力，還能提高商品瀏覽量，更有助于提高商品銷量。

（1）色彩的屬性

色彩具有色相、明度及純度3種屬性。掌握這3種屬性的相關知識，能加深對色彩的理解，同時也有利于掌握色彩搭配的技巧。

●色相：色相是人對各類色彩的視覺感受，也是區分不同色彩的基本標準，如常說的紅色、黃色、綠色、藍色等各種顏色指的便是色相。

●明度：明度是眼睛對光源和物體表面明暗程度的感受，它取決于光線的強弱。

●純度：純度也稱飽和度，是指眼睛對色彩鮮艷度與渾濁度的感受。

（2）色彩的比例

網店美工在裝修網店時，不能隨心所欲地運用色彩，而要遵循一定的比例進行配色。網店裝修配色的黃金比例一般為70:25:5，即主色占總版面的70%，輔助色占25%，而其他點綴色占5%。當然這只是基于成功的網店裝修案例總結出來的參考比例，具體應用還需要根據實際需求進行衡量。

●主色：主色是頁面中占用面積最大也最受矚目的色彩，它決定了整個網店的風格。主色不宜過多，一般控制在1~3種，過多容易使消費者產生視覺疲勞。主色不能隨意選擇，網店美工需要系統分析自家網店受眾的心理特征，找到受眾易于接受的色彩，如童裝適合選擇黃色、粉色和橙色等暖色調作為主色。

●輔助色：輔助色占用面積小于主色，用于烘托主色。合理運用輔助色能豐富頁面的色彩，使頁面顯示更加完整、美觀。

●點綴色：點綴色是指頁面中面積小、色彩比較醒目的一種或多種顏色。合理運用點綴色可以起到畫龍點睛的作用，使頁面主次更加分明、富有變化。

網店美工在裝修網店時，可以首先根據網店類目選擇占用大面積的主色，然后根據主色合理搭配輔助色與點綴色，以突出頁面的重點、平衡視覺效果。圖1-6所示為兩種不同商品的詳情頁中運用主色、輔助色與點綴色的效果展示。

（3）色彩的對比

在搭配色彩時，經常需要通過色彩的對比來豐富畫面效果，或強調重點信息。因此，掌握色彩對比的相關知識可以幫助網店美工更好地進行網店裝修。

●明度對比：利用色彩的明暗程度形成對比。恰當的明度對比可以使頁面產生光感、明快感和清晰感。通常情況下，明度對比較強時，頁面顯得清晰、銳利，不容易出現誤差；而明度對比較弱時，配色效果往往不佳，頁面會顯得柔和單薄、形象不夠明朗。

●純度對比：利用純度的高低形成對比。純度對比較弱的畫面視覺效果也較弱，適合長時間查看；純度對比適中的畫面視覺效果和諧、豐富，可以突顯畫面的主次；純度對比較強的畫面鮮艷明朗、富有生機。

●色相對比：利用色相之間的差別形成對比。進行色相對比時，需要考慮其他色相與主色相之間的關系，如原色對比、間色對比、補色對比和鄰近色對比等，以及最后需要表現的效果。其中，原色對比一般指紅色、黃色和藍色的對比；間色對比是指由兩種原色調配而成的顏色的對比，如橙色（紅色+黃色）和紫色（紅色+藍色）的對比等；補色對比是指色相環（一種呈圓環狀排列的色相光譜，其中圓環上的色彩是按照光譜在自然中出現的順序來排列的，色彩名稱默認原色色彩在前，圖1-7所示為12色相環）中的一種顏色與其180°對角上的顏色的對比，如紅色和綠色互為補色，如圖1-8所示；鄰近色對比是指色相環上夾角在60°以內的顏色的對比，如紅色和紅橙色互為鄰近色，如圖1-9所示。

●冷暖色對比：利用色彩的冷暖差別形成對比。不同的色彩能夠給人帶來不同的感官刺激，從這點出發，黃色、橙色和紅色等能給人帶來溫暖、熱情及奔放感覺的色彩可以歸為暖色調；藍色、藍綠色和紫色等能給人帶來涼爽、寒冷及低調感覺的色彩可以歸為冷色調。圖1-10所示為茶葉網店首頁的輪播海報，其中商品圖像與背景色采用暖黃色，主文案與裝飾框采用冷色調的深綠色，畫面整體的色彩對比較為強烈，使消費者能夠輕易辨別畫面中的關鍵信息。

●色彩面積對比：利用色彩的面積大小形成對比。各種色彩在畫面中所占的面積大小不同，所呈現出來的對比效果也就不同。圖1-11所示為掃地機器人網店首頁的全屏Banner，其中背景的色彩占據主要地位；商品圖像與裝飾線同為白色，其色彩面積居次要地位；網店名稱的色彩為點綴色，占據最小的面積：畫面整體的色彩面積對比鮮明，視覺效果和諧、美觀。

（4）色彩的搭配技巧

網店美工在設計時往往會采用各種各樣的商品圖像，而圖像本身的色彩大多比較繁雜，因此，為追求統一感和和諧感，提高美觀度，可采用以下技巧進行配色。

●合理選擇主色調：不同的商品類目在主色調的選擇上有所不同，如蔬菜多以綠色為主色調，而電器及辦公類、洗護類商品則多以藍色為主色調。因此在裝修網店時，主色調應根據其給消費者的視覺感受而定。圖1-12所示為某洗衣液詳情頁，該詳情頁以藍色為主色調，營造出干凈、純潔的氛圍，與洗衣液“深層潔凈”的主題契合。另外，在確定主色調時，需要系統分析品牌受眾的心理特征，找到這一群體易于接受的色彩，然后應用到設計當中，這樣才會有利于后期的經營與管理。

●善用無彩色：無彩色是指黑、白、灰三色。無彩色與其他色彩具有較高的適配度，因此，網店裝修中需要運用一種或多種高飽和色彩時，可以添加無彩色來協調色彩，如圖1-13所示。

●突出前景色和背景色的色彩對比：在裝修網店時，前景色和背景色的色彩對比要強烈，一般不使用復雜的圖案作為背景圖，以免搶奪消費者的注意力，使其忽略關鍵信息。在進行商品詳情頁的設計時，可以采用多種色彩進行搭配，使頁面顯得更活躍。

3.文案

消費者大多通過圖文信息獲得對商品和品牌的認知，因此，網店要想吸引消費者，就需要為消費者提供優質的圖文內容。作為圖文信息的重要載體，文案承擔著推廣商品和品牌的重任。根據應用場景和功能的不同，文案可以分為展示類、品牌類和推廣類3種類型。掃描右側的二維碼，可查看3種文案類型的詳細介紹。

（1）文案寫作要點

文案并不是隨性創作的，網店美工在寫作文案時需遵循以下要點。

●通過“利益訴求”吸引消費者：消費者在購買商品之前，通常會想知道使用這個商品能給自己帶來什么樣的實際益處，如果文案能給消費者明確的利益承諾，告訴消費者使用該商品的結果及其產生的實際效益，就能吸引消費者的關注。圖1-14所示為某垃圾袋的文案“底部牢 不漏水”，文案明確地告訴消費者垃圾袋的質量好，不易被刺穿，打消消費者的顧慮，讓消費者能夠放心購買。

●鎖定目標消費群體：一種商品很難滿足所有消費者的需要，因此在寫作商品文案時，可以先選出目標消費群體，排除非潛在消費者。圖1-15所示為某拖把的文案“清潔無死角 直達家具底部”，將目標人群定位為經常打掃衛生的消費者，因為他們更清楚清潔用具的實用性所在。

●信息真實：商品信息描述必須符合實際情況，特別是商品的細節描述、材質和規格等基本信息一定要真實可信，因為消費者會根據商家提供的商品信息來決定是否購買。不能用弄虛作假、與常理相悖的描述糊弄消費者，即使有消費者因為詳情頁的虛假信息而購買了商品，這也會對網店的口碑產生負面影響，因此，為了提高銷量而弄虛作假非常不可取。雖然可以對商品的生產背景、加工過程等進行適當的美化，讓商品更加有內涵，但不能肆意夸大。

●強調商品賣點：在文案中強調商品或品牌的核心賣點能夠給消費者留下深刻的印象，從而引導消費者查看文案的詳細內容并關注該商品或品牌，產生購買欲望。圖1-16所示為某耳機的文案“33小時超長續航”，文案強調該商品的賣點為超長續航，并且用其他文案“能連續跑5次馬拉松”具體說明其超長續航的能力。

●巧用修辭手法：比喻、引用、雙關、設問、對偶、擬人和夸張等修辭手法不僅可以增加商品文案標題的吸引力和趣味性，還能使標題顯得更有創意。圖1-17所示為某被子的文案“輕盈貼身 嬰兒般觸感”，文案用嬰兒般的觸感來比喻被子的觸感，讓消費者在腦海中產生被子親膚的舒適感，從而躍躍欲試，產生購買欲望。

（2）文案寫作注意事項

如果文案是為了創意而創意，過于天馬行空，那么就失去了它應有的價值。因此，在文案寫作時應注意以下事項。

●避免重復：當同質商品較多時，盡量不要都使用一樣的標題，應挖掘不同商品的特點，創作出具有獨特個性的文案。

●避免語句過長：在有限的字數內，將需要表達的信息關鍵詞放在前面，以迅速引起消費者的閱讀興趣。避免標題過長的有效方法是在保留核心信息的基礎上不斷刪減文字、調換句式，或者用短詞替換長詞等。

●避開敏感詞：避免出現《廣告法》中提到的違禁詞和敏感詞，一旦出現這些詞，平臺就會將整個標題過濾，消費者就無法搜索到相應的商品。另外，標題中還要避免出現“肥胖”“衰亡”等消費者忌諱或討厭的詞，這些詞不僅會惹來爭議，還會降低消費者對商品和品牌的好感度。

（3）文案設計要點

將構思好的文案合理、美觀地添加在頁面上，是網店美工需要投入大量心血的工作內容。文案設計要點可以分為字體的選擇和運用兩個方面。

●字體的選擇：字體展現了文案風格，而文案風格又體現了網店風格，因此網店美工應掌握字體的類型并選擇合適的字體進行添加。字體可分為宋體、黑體、書法體和美術體等。宋體是網店裝修中使用最廣泛的字體之一，其筆畫纖細，較為優雅，具有文藝氣息，常用于家裝類、服裝類等網店中，如圖1-18所示。黑體筆畫橫平豎直，字形方正，具有濃烈的商業氣息，常用于商品詳情頁、首頁Banner等內容中，如圖1-19所示。書法體是指具有書法風格的字體，其筆畫多變，富有歷史性和文化性，常用于書籍類等具有文化氣息的網店中，如圖1-20所示。美術體多指一些筆畫和結構有特殊設計的字體，具有較強的獨特性和藝術性，可以提升網店藝術品位和格調，常用于海報制作或模板標題部分的設計，如圖1-21所示。

●字體的運用：字體的運用可以參照兩個原則。第一個原則是增強文字的可讀性。頁面中的文字應避免紛雜凌亂，盡量達到讓消費者易辨識和易懂的目的，從而充分地表達設計主題。圖1-22所示為某網店詳情頁的溫馨提示板塊，該板塊的標題、正文等采用不同大小的文字，并且正文中的關鍵信息被標紅，使消費者一眼就能夠辨認出文字的層級，增強了文字的可讀性。第二個原則是增強排版的美觀性。良好的文字排版不僅能向消費者傳遞視覺上的美感，還可提升網店的格調，給消費者留下良好的印象。圖1-23所示為某家居網店的首頁分區板塊，該板塊的文字和圖像整齊劃一，并且文字居中對齊，更加規整，能帶給消費者視覺上的享受。

4.網店頁面結構

網店中有許多完整的頁面，掌握網店頁面的結構有利于網店美工快速地明確所需設計的作品的屬性，如大小、種類、風格及特征等。

（1）首頁

首頁適用于展示網店的內容，是消費者進入網店后看到的第一個頁面，也是網店的“門面”擔當。該頁面常分為3個板塊，分別是頁頭、頁中和頁尾，每個板塊又包含不同的功能板塊。圖1-24所示為美的官方旗艦店首頁，整個頁面結構涵蓋了上述3個板塊。

圖1-24　首頁頁面結構

●頁頭：頁頭包括店招（網店招牌）和導航兩部分。其中店招常展示網店Logo、網店名稱、網店信譽、收藏網店等內容；導航位于店招的下方，主要展示網店的商品分類。

●頁中：頁中包括首屏區、促銷區、主推商品區和商品陳列區4部分。首屏區一般放置全屏海報，有的也會放置視頻內容或購物券，主要用于展示網店形象、主打商品、促銷活動等信息。促銷區是用于展示網店促銷活動的板塊，一般包括促銷海報、促銷商品等內容。主推商品區用于展示網店銷量較高、新上市或者人氣略遜于主打商品的商品。商品陳列區用于展示網店內的主要商品，方便消費者直接在首頁瀏覽并進行選購。首屏區位于頁中的頂部，其他區域的內容可根據實際需要調整位置。

●頁尾：頁尾主要用于設置自定義區，一般展示色差說明和所用快遞等溫馨提示、品牌形象或品牌故事、客服聯系方式、網店二維碼及頁尾廣告等內容。頁尾也可添加“返回頂部”模塊，方便消費者再次從頭進行瀏覽，增加瀏覽時間。

（2）專題頁和活動頁

專題頁和活動頁的頁面結構和設計制作流程比較相似，只是針對的對象和內容略有區別。專題頁針對某個主題或者商品展開一系列的營銷策劃宣傳，內容比較豐富，因此頁面高度會很高。活動頁是針對某個主題進行宣傳，例如在線抽獎等內容，文案比較精簡，頁面內容不會太多，因此頁面高度不會太高。

這兩種頁面的結構都大致分為全屏海報、優惠券和商品展示區，特點比較突出，易于分辨。

（3）商品詳情頁

商品詳情頁主要用于展示商品詳情信息，一般包括商品焦點圖、商品賣點圖、商品細節圖、商品參數展示圖、商品包裝圖等內容，如圖1-25所示。商品詳情頁的內容可以根據實際需要進行刪減增補，并不是固定不變的。

5.網店裝修風格

網店裝修風格在一定程度上可以影響網店的流量和商品銷量。風格定位準確、精致美觀、富有創意的裝修可以提升網店的品位，從而增加消費者的瀏覽時間，最終提高網店銷售額。

（1）極簡風

極簡風是近幾年比較流行的網店裝修風格，其主要特點為采用溫和的低飽和度色彩、大面積的留白、整齊簡潔的布局且信息清晰直觀，多選擇白色或純色作為背景，凸顯品牌對簡約和獨特質感的追求。圖1-26所示為小米官方旗艦店首頁，其采用極簡風的裝修風格很好地突出了商品質感和品牌基調。

（2）可愛風

可愛風主要以可愛的元素和鮮亮的色彩為基調來進行搭配，很好地將色彩與元素結合起來，構建出可愛、溫暖的氛圍。該風格可以很自然地拉近與消費者的距離，具有得天獨厚的親切感。

（3）C4D風

C4D風以其獨特的立體視覺效果，成為近幾年大受歡迎的裝修風格，其主要特點為采用交互疊錯的三維幾何形狀，搭配富有創意的卡通形象，再采用夢幻、清新的色彩進行組合，形成富有動感的完整畫面。

（4）科技風

科技風具有未來感和智能感，包含機械、人工智能、科研場景及高辨識度的發光文字、發光線條等元素，多采用黑色、紫色、藍色、青色進行搭配。科技風的裝修風格能極大地增強網店的視覺沖擊力和感染力。圖1-27所示為某無線機械鍵盤的商品詳情頁，其采用黑色、白色、青色，以及各種高明度的純色，搭配發光文字，營造出智能感。

（5）中國風

中國風源于我國傳統文化和相應的色彩、圖騰等元素，將我國特有的美學提煉并融入網店裝修，具有人文氣息，使中華傳統文化得到繼承與發揚。圖1-28所示為故宮博物院官方旗艦店某氛圍燈的商品詳情頁，其采用古香古色的色彩搭配以及富有傳統文化韻味的裝飾元素，營造了濃濃的中國風。

（6）插畫風

插畫風因自身明艷的配色和豐富的形狀讓網店視覺效果變得豐富多彩，吸引消費者的目光，拉近與消費者的距離，因此一直是網店裝修風格中較為常見的類型。圖1-29所示為某糕點的商品詳情頁，其插畫風的裝修風格也與商品本身的包裝形成呼應。