基于化妝品電子商務的網頁設計探討

摘 要：網絡信息化蓬勃發展的今天，化妝品是人們生活的必需品，其產業模式也從傳統的商業貿易模式迅速發展到電子商務貿易中之中，網頁設計的水準也不斷要求提高，本文從五個方面來談化妝品電商的網頁設計來滿足人們的審美需求。

關鍵詞：化妝品；設計；網頁；電子商務

隨著我國國民經濟的快速發展和信息化水平的不斷提高，電子商務在全國范圍得到了普及，對人們的購物消費模式有了顯著的影響。電子商務是以現代電子工具和信息網絡技術為手段，通過以互聯網為主的電子交易方式進行網上購物、網上交易、在線電子支付各種商務活動相關的現代商業運營模式，是傳統商業模式的電子化、網絡化和信息化。電子商務具有降低交易成本、減少庫存、縮短生產周期、降低管理成本、提高勞動生產率、擴展市場范圍，更好地溝通客戶、24小時不打烊、提供個性化服務等優勢。消費者通過網上看圖比貨比價購買，付款流程便利，快遞上門送貨，這種足不出戶的購物方式促使電商迅猛發展。

電子商務網站也進入更新換代的繁榮期，最早是企業與消費者之間的電子商務（C2C）模式的易趣網，再到企業與消費者之間的電子商務（B2C）模式的亞馬遜和規模最大、最普及的企業與企業之間的電子商務（B2B）、B2C、C2C綜合的阿里巴巴電商軍團，至現在以美團為代表的線下商務與互聯網之間的電子商務（O2O）模式，形成了競爭激烈的網絡營銷模式。國內化妝品也跟上了電子商務的節奏，成為網絡銷售7大主力行業之一。國內化妝品的線上渠道占有了上述的所有電子商務模式，隨著網絡消費者的日益增長，廠商也積極發展線上自營模式，和好的電商品牌合作，為客戶提供更好的產品和體驗，形成線上線下品牌競爭發展的良好局面。

艾瑞咨詢數據報告中國化妝品零售市場相關數據，在2013年中國化妝品零售市場規模為3338.6億元，2014年超4000億，達到4044.1億元，未來五年，增長率將繼續保持在20%以上。[1]據統計消費者在化妝品頁面瀏覽停留時間最長的十大品牌是卡姿蘭、歐萊雅、百雀羚、美膚寶、相宜本草、美寶蓮、玉蘭油、韓束、珀萊雅。打開這些品牌的網頁，每個品牌電商網頁設計風格各異，產品突出，藝術美感動人心弦。現在化妝品網絡消費已經進入讀圖時代，日化銷售中電商網頁設計成為產品銷售的重要的決定因素之一。電商網頁設計也是平面設計在網絡信息時代的介質延伸，在本文中，主要探討日化網頁設計的框架、版式、文字、圖形、色彩的設計。

1 網頁的框架設計

根據日化客戶的網頁設計需求，進行市場調研，了解消費者需求、網頁風格定位，初步規劃板塊結構、設計具有風格獨特和整體形象清晰的網站，我們可以把一個復雜的網站設計把大小尺寸、主次模塊進行草圖劃分和分割，劃分成相互獨立的二級導航，每個二級導航再劃分成三級、四級等子欄目的草案。購物電商網站的重點劃分應該是產品展示，也可以把日化產品按功能分類變成一級導航重點強調，可以直接展示產品相關信息和圖片，讓目標消費者迅速找到自己所需商品。其他如企業背景、客戶服務都是輔助信息。每個產品的頁面規劃也尤為重要，麻雀雖小五臟俱全，能夠在頁面中力求平衡，導航清晰，起到了一個優秀導購員的作用，一般的結構如圖1。

結構設計規范有序且有章可循，主次關系分明是網站設計的重要前提，結構設計就如同大綱，有了大綱才能對后續設計有整體的認知和把握。在此基礎上與客戶進行溝通與調整，根據反饋信息，進行協調修改，防止網頁設計大功告成卻突然結構調動，避免費時費力，盡量做到一步到位。

2 網頁的版式設計

網頁的版式設計和平面設計有很多相似之處，是根據圖文、動畫、視頻等要素有秩序、有機的組織在有限的屏幕空間，并且有一定的視覺導向感，能夠使視覺有主次、合理律動地在屏幕中穿梭，并且獲得輕松而美的享受。

根據客戶需求，可以強化頁面整體構成設計，為了更好地讓產品的功能效用和營銷廣告能被關注，需將各元素在版式編排中做整體視覺流程策劃，根據視覺運動規律來策劃，如頁面上塊面大小、色塊的互補等都會引發視覺張力，引發受眾亢奮感。在網頁設計主頁面的設計上，我們的視覺焦點一般在網頁中心點偏上的位置，人的視覺對于版面視覺的關注度一般是上部比下部強，[2]左半部比右半部強，才引發了“國”、“同”、“T”、“川”字的網頁版式設計，后隨著頁面元素的強弱大小等相關規律視覺開始進行流動，最后完全吸收網頁。例如，百雀羚（圖2）的電商設計就結合當下和“好聲音4”的合作廣告和熱銷產品“年方十八”三生面膜五折熱賣等營銷廣告翻轉滾動來表現，其中式的紅木柜作為整體網頁穿插元素，表現了老國貨持久彌新的經典魅力。

產品描述中的視覺版式設計和一級頁面的版式設計差異較大，產品描述如上圖的分支結構一般有十幾個小塊面構成，如果每個小塊面單一的版式設計會引發受眾的視覺疲勞，沒有耐心看下去，從而無法吸引消費。因此，我們在產品描述版面構成中要注意參考平面設計的方法，可以用直線、曲線、焦點、反復、導向、散點視覺流程，動靜結合、剛柔并濟、綜合使用。

3 網頁的文字設計

漢字起源于象形文字，它既是字，又是畫，自古就有“字畫同源”之說。經過長期的發展，漢字由繁到簡，由具象到抽象，成為一種規范化的符號。[3]網頁的導航條、廣告語、網頁標題、正文文字都是網頁信息的重要組成部分。其中為了區別正文文字，對受眾視覺進行傳播信息和視覺誘導，導航條和廣告語的設計要結合色彩、圖形著重設計，文字之間的間距、大小、行距和字體要選擇和網站設計風格保持統一性，文字和背景要形成鮮明對比，以便突出文字內容。同時，網頁設計具有交互性，文字可以設計成色彩、大小等特效的變化，增加頁面的互動性、生動性和可讀性，更加良好而準確地表達文字的意義。其他標題文字和正文文字要和諧布局，字號、色彩統一，忌諱色彩繁多每個頁面字體不一致。文字的設計和編排的好壞，影響到整個網站設計的品位和整體性。

如歐萊雅（圖3），其中文字既有與圖形設計相結合的層次性，又有陰陽大小虛實變化，其文字的塊面信息只有兩塊，且面積形成鮮明的對比卻很好地統一在藍調子里面，還進行了留白處理，空間感、光感強烈。

4 網頁的圖形設計

在快節奏忙碌的現代生活環境中，廣告遍布大街小巷，人們已經無暇一一看廣告的文字內容，廣告的圖形設計也變得很重要。同樣，網頁設計也進入了讀圖的時代，電商網頁圖形設計一方面直接展示產品或相關信息、技術來促使消費者購買，同時也滿足消費者審美的心理需求，增加親切感。產品圖片的拍攝質量非常重要，加上后期修圖就能夠表現非凡品質。攝影圖片和素材組合設計在網頁中的面積和比重相對于化妝品電商網頁來說尤為重要。點線面在網頁設計中的需結合得恰到好處。一個漢字、一個按鈕、一個標志都是一個點。點的形狀、方向、大小、位置、聚集、發散，都能給人帶來不同的心理感受。[4]線是點的軌跡，起到強調、分割頁面結構，引導視覺流程的作用。不同方向、長度、寬度、形態的線性會給人不同的感受。面的交替使用、合理分割，能使頁面產生井然有序的和諧效果。例如，相宜本草（圖4）的幾套代表性的系列套裝就較好的結合了點線面的設計，以線相連，讓畫面之間有了聯系，誘導消費者的視覺自然轉移，優惠價的文字突出作為互補色對比，格外耀眼，這個就是點的延伸。圓旁的細虛線使得產品層次更加豐富。

5 網頁的色彩設計

信息時代的網頁不再局限于簡單的圖文搭配，制作個性精美、過目不忘的頁面需要設計者不僅要掌握基本的網頁制作技術，還要掌握色彩搭配等藝術修養。美麗豐富、色彩協調的搭配能引發受眾的情感共鳴和無限遐想。色相、明度、純度三個要素構成變化多樣的色彩，色彩原理對于網頁設計是至關重要的。

色彩在電商網頁設計中占有很大的比例。在網頁設計中，色彩給瀏覽者帶來的視覺沖擊力形成了網頁設計的第一印象，其表現力直接影響到形式的統一與美觀。很多成功網站的色彩搭配令人耳目一新，探索色彩在網頁設計中的搭配規律也特別重要。利用色彩進行信息組織、區域劃分與識別，便于瀏覽者操作和分辨，減少認知負荷。對主體內容進行必要的忘掉，使網頁內容層次分明、條理清晰和色彩均衡。利用美觀合理的色彩搭配吸引受眾在網頁上的停留時間，激發興趣。

不同的色彩在我們的日常生活、審美取向中有不同的感情和象征意義。例如，化妝品網站基本上喜歡用紅色、粉紅、紫色、金色或綠色，象征女性的柔美如花或者是天然草本萃取。除了這些色彩運用外，還要注意黑白灰、金、銀等萬能色，如純度較高的網站可以搭配黑色，調節和均衡其明度效果。同時我們要避免網站大塊面的色彩或者文字、圖片信息內容，要適當留白，給受眾透氣、舒暢的心理感受。

綜上所述，化妝品電商的網頁設計涉及的視覺元素必須要在合理規劃網站布局的基礎之上，對文字、圖形、色彩進行合理布局和排版。在設計過程中，設計師必須遵循圖形設計的形式美法則，才能設計出更合理更美觀的信息傳達形式。化妝品電商網站都是愛美之人經常光顧的電商網站，對其設計美的要求如化妝品功效一樣期待才會促進銷售購買。因此，化妝品網站的設計是美的形式對設計者的挑戰，要能使受眾群體對產品產生良好的形象記憶，以達到網站主題內容的設計目的，從而產生良好的商業銷售循環。

參考文獻：

[1] 化妝品資訊[DB/OL] . http：//www.cosmetic-news.net/cn/news/detail.aspx？typeid=19&id=2174.

[2] 徐津.報紙版面設計中的人機工程學問題[J].包裝工程，2005（4）：201.

[3] 管家慶，陳瑩燕.包裝設計——創意思維與表現[M].武漢大學出版社，2010：40.

[4] 于穎慧，馬晨.教育類網站的藝術設計——點的應用[J].北京工業職業技術學院學報，2006（4）：32.

作者簡介：董亞平（1981—），女，江蘇宜興人，本科，無錫工藝職業技術學院藝術設計專業講師。