垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計研究

洪夢晗，戴冰

（上饒師范學院 美術與設計學院，江西 上饒，334001）

垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計研究

洪夢晗，戴冰

（上饒師范學院 美術與設計學院，江西 上饒，334001）

文章通過探究視覺設計對導購網(wǎng)站的價值和作用，進而研究網(wǎng)站頁面構成、設計要點和設計要素，最后以案例分析闡釋垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計方法。由案例分析可知，視覺設計對導購平臺的作用凸顯，因此設計師要在導航、布局、字體、風格、元素、色彩六個方面獨具匠心，提升垂直化電商導購網(wǎng)站服飾類用戶界面的視覺影響力。

垂直化電商；服飾類導購；導購網(wǎng)站；用戶界面；視覺設計

隨著電子商務的發(fā)展，導購網(wǎng)站的出現(xiàn)，“垂直化”的概念逐漸成為新時代電子商務網(wǎng)站探索的方向。它能夠深入而精確地收集商品信息，將好評度高的商品推送給目標人群，吸引更多的消費者進行購物。為實現(xiàn)這一目的，網(wǎng)站的視覺設計逐漸受到重視，從服務于營銷向服務于運營轉化，提高網(wǎng)站服務質量，滿足消費者更高層次的消費體驗。本文研究垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計，希望為解決同類問題提供有益經(jīng)驗。

一、視覺設計對導購網(wǎng)站的價值和作用

垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計是目前網(wǎng)頁領域中最常見的視覺設計形式。在電子商務時代，電商領域的快速發(fā)展促進了網(wǎng)站視覺設計研究的興起，作為用戶增幅最快的服飾類電商，是網(wǎng)頁設計最常見的一塊領域。垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計通過視覺形象、排版方式、圖形、色彩等等要素幫助消費者快速認知所瀏覽的服飾類電商平臺，以便于消費者查找到自己希望購買到的商品。隨著商品銷售環(huán)節(jié)用戶的細分化，在視覺上設計師們也要考慮到劃分年齡、購買能力、性別等等細分元素的應用，使設計出來的視覺符號能夠直接起到刺激消費者進行購買的作用。

（一）作用

視覺形象是消費者瀏覽電商網(wǎng)頁時第一個印象，在電商銷售模式逐漸同質化的今天，電商用戶將更多的財力與精力投入到版面設計中去，以尋求電商界面的異質化。好的頁面設計會吸引消費者的注意力，以提高用戶的交互能力，合理的操作度會讓消費者擁有較高的體驗感，風格化、人性化的設計會使用戶獲得前所未有的新鮮感，從某種層面上提高了服務。

（二）價值

1.商業(yè)價值

電商平臺的視覺設計決定著兩個必要因素。一是消費者的瀏覽行為，瀏覽網(wǎng)頁是逗留的時間越長越會造成購買行為。其次也是最主要的就是消費者的購買行為。所以網(wǎng)頁的視覺設計應該涉及兩個方面，一方面是盡可能的讓消費者對頁面感興趣，完善頁面的服務、進行頁面的美化、增加用戶感興趣的內容、簡化操作難度，使得用戶能夠在頁面停留更長的時間。另一方面，進一步實現(xiàn)網(wǎng)站自身價值，通過優(yōu)惠、推廣等方式增加成交量。

2.文化價值

電商平臺具有多重身份，不僅是商品的銷售平臺，也是商品的推廣平臺。好的電商平臺的設計不僅有著巨大的商業(yè)價值，還會建立其特有的文化符號和傳播渠道。因此，好的視覺設計會對電商平臺的消費者們產(chǎn)生深遠的影響。讓用戶體會設計者傳播的正能量、主流價值觀，給用戶以認真負責的態(tài)度及信賴感。在傳播商品的價值之外的這種用戶體驗是非常必要的。

>圖1 天貓hardlyevers旗艦店首頁

>圖2 天貓hardlyevers旗艦店商品列表頁

>圖3 天貓hardlyevers旗艦店產(chǎn)品詳情頁1

>圖4 天貓hardlyevers旗艦店產(chǎn)品詳情頁2

>圖5 天貓hardlyevers旗艦店產(chǎn)品詳情頁3

3.藝術價值

隨著現(xiàn)代社會對于審美要求的提高，好的電商平臺網(wǎng)站的視覺設計直接影響了消費者購物的心情。如果商品能夠和藝術很好結合，勢必會增加商品的附加價值。維護好的視覺形象是刺激經(jīng)濟繁榮、豐富人們生活的重要手段之一，所以，打造好的視覺形象設計無疑是電商平臺必要的舉措。

二、網(wǎng)站頁面構成及設計要點分析

（一）首頁

首頁是電商平臺給予用戶的第一印象，當用戶點擊進入電商界面的時候最顯眼、最開頭的部分就是首頁。當用戶瀏覽完首頁的內容之后就會對該網(wǎng)頁有了一個大致的判斷，經(jīng)過判斷用戶能夠接受首頁的內容才會繼續(xù)瀏覽該頁面，因此，首頁的視覺設計至關重要。垂直化的電商平臺不需要迎合所有消費者的消費習慣，能明顯的標記出自己的特征，在特定的范圍內讓特有的消費群體尋找到即可。

首頁更像是一個人的簡歷，能夠讓受眾快速識別是不是他找的那一款。所以首頁的頁面首先要向受眾展示網(wǎng)站的logo、clour、slogen等等顯著內容，受眾通過對于首頁的第一印象識別出商品是否符合他們的價值觀、消費觀等等內容，進而進行瀏覽和消費。如圖1網(wǎng)店首頁的服裝風格為“嘻哈新宿風”，標題上單獨放置了加大碼的選項按鈕，說明了商品是針對具有肥胖體型又追求時尚裝扮的年輕人。首頁主要突出了男裝的搭配，說明該網(wǎng)站主打男裝品牌。服裝品牌的logo和風格如此顯眼、明確，使得此網(wǎng)店在全網(wǎng)搜索中占有一席之地，讓受眾迅速的找準要搜索的內容。另外在首頁中的顯眼位置體現(xiàn)了促銷、免郵等優(yōu)惠政策也會更加促進瀏覽網(wǎng)頁受眾的購買欲望。

（二）商品列表頁

商品列表頁是展現(xiàn)該網(wǎng)店收錄的所有類似商品的瀏覽目錄，類似導購的形式的一種展現(xiàn)。圖2展示的是加大碼的商品目錄類下網(wǎng)站的內容，產(chǎn)品內容更加統(tǒng)一，讓消費者一目了然，通過對商品列表頁的瀏覽可以了解該類目下所有商品的展示。由圖2可以看出在加大碼的類目下所有產(chǎn)品的左下角都加上了plus size的標識，更加精準的展現(xiàn)產(chǎn)品的特點，使此類型的消費者一目了然，設計風格統(tǒng)一，也使得消費者能更好的選擇服飾的顏色和風格。此類頁面需要設計師進行精心的排版，凸顯產(chǎn)品特性的同時使得頁面整體更加美觀、和諧，便于消費者搜索與查找。

（三）產(chǎn)品詳情頁

當用戶需要了解更多某一具體商品信息的時候會點擊進入產(chǎn)品詳情頁。所謂詳情即將產(chǎn)品信息更加詳細和準確的表達給受眾，從而增加消費者購買的信心（圖3、圖4、圖5）。商品的細節(jié)描述是為了彌補電商平臺的弱點，消費者不能親自試穿，增加了諸多細節(jié)的展示，如尺碼的選擇、布料的細節(jié)、裁剪的工藝、模特的試穿多面圖，從各個方位展現(xiàn)產(chǎn)品的特性，更好的解答受眾的疑惑，增加了消費者購買的信心。商品信息瀏覽之后，是已購買者的真實評價，可以供未購買者了解到透明的公開信息，以便于購買者對是否購買此商品做進一步的判斷。

（四）資訊/專題頁

時尚資訊最常出現(xiàn)于時尚雜志、書刊等傳統(tǒng)平面媒體之中，對于版面和時效性的要求限制了時尚資訊的發(fā)展。當全民電商時代來臨網(wǎng)絡視覺設計賦予電商網(wǎng)站更多的功能。時尚資訊也能突破以往模式找到新的出口。

服飾類電商網(wǎng)站的視覺設計的時尚專題可以不受版面空間制約，可以增加排版篇幅，也可根據(jù)喜好讓用戶挑選出最喜歡的內容。不同于傳統(tǒng)的平面媒體，電商網(wǎng)站網(wǎng)絡視覺設計的時尚資訊和專題不僅能夠為用戶提供最具時效性的圖文資訊又能搭配鏈接可讓消費者快捷的找到購買渠道。用戶在瀏覽時尚資訊的時候可以直接鏈接到資訊中所展示的服裝，得以讓用戶輕松購買。

（五）活動/促銷頁

由于目前電商競爭激烈，尤其是在大型的消費節(jié)日，如雙十一、“6·18”年中大促等等，為促成消費者的購買、增加用戶黏性，網(wǎng)站通常會推出一系列的促銷優(yōu)惠活動?；顒雍痛黉N頁面一般為臨時性、單一的信息頁面，只在活動中出現(xiàn)。所以在這個有限的活動期限內應當更加理性的向用戶全方位展現(xiàn)活動信息等內容。活動頁面的目的性很強，設計者應該分類別全方位的展示活動內容，以便于更多的用戶參與，從而達到促成消費的目的。

三、網(wǎng)站用戶界面設計要素分析

（一）導航

由于近幾年垂直電商平臺規(guī)模的逐步擴大，很多電商平臺的信息成幾何趨勢增長，在日益繁瑣的電商瀏覽中，導航至關重要。一旦導航設計過于繁瑣，用戶將迷失在茫茫的信息之中而無法精準找到自己需要的產(chǎn)品。由于網(wǎng)站版面的限制用戶并不能全面的掌握頁面的整體，導航必須時刻出現(xiàn)在頁面之中幫助用戶來進行瀏覽，所以導航的設計通常采用不影響頁面瀏覽的位置，又能根據(jù)瀏覽的狀況時刻懸浮在網(wǎng)頁之上。顏色清晰，便于用戶識別和選擇。

（二）布局

布局的設計主要體現(xiàn)在以下幾個方面：首先要讓用戶清晰的感受到信息的分類，通過產(chǎn)品信息的分類可以快速、準確的找到自己想要的產(chǎn)品；其次，通過將路徑隱藏在頁面的信息分類中，引導受眾按照路徑所設計的路線便捷快速的查找到產(chǎn)品；最后，在頁面布局上添加合理設計，突出網(wǎng)店特色和風格，強化視覺標識，加強用戶對網(wǎng)店的視覺印象。

（三）字體

>圖6 Yoho!Buy官網(wǎng)首頁

>圖7 Yoho!Buy官網(wǎng)商品列表頁1

>圖8 Yoho!Buy官網(wǎng)商品列表頁2

>圖9 Yoho!Buy官網(wǎng)產(chǎn)品詳情頁

>圖10 Yoho!Buy官網(wǎng)資訊專題頁

>圖11 Yoho!Buy官網(wǎng)活動促銷頁

>圖12 Yoho!Buy官網(wǎng)所使用的字體

>圖13 Yoho!Buy官網(wǎng)顏色風格

電商網(wǎng)站的頁面設計主要由兩部分元素構成，一是圖片的設計，二是文字的設計。電商網(wǎng)站的最終目的是銷售產(chǎn)品，如果只注重畫面的美感，增加圖片視覺的占比，強調網(wǎng)站設計的藝術性，便失去的電商網(wǎng)站設計的根本意義。文字元素，是電商網(wǎng)站頁面設計中的理性存在。簡單明了的文字介紹，是對產(chǎn)品特性的概括說明，會增強消費者對于產(chǎn)品的了解和信任，從而增加產(chǎn)品的成交量。在文字元素的使用中，應當注意文字的去藝術化，便于消費者的理解和閱讀。

（四）風格

風格是一種抽象的表達方式，是設計符號的集中體現(xiàn)，風格是服務于內容的，幫助消費者快速找到自己的定位。風格是一家網(wǎng)絡電商產(chǎn)品樣式的集中體現(xiàn)。設計風格取決于對產(chǎn)品的定位。設計者應當針對產(chǎn)品特性，設計出相應風格特色的平臺界面。好的設計者應該根據(jù)電商所設計出的產(chǎn)品進行電商網(wǎng)站風格界面的風格設計，做到讓受眾一目了然，快速認知到符合自己審美的電商產(chǎn)品。

四、Yoho有貨網(wǎng)頁板塊及設計要素分析

Yoho創(chuàng)立于2005年，是目前中國乃至全球頗具影響力的潮流文化傳播平臺之一，集合了產(chǎn)品的銷售和推廣的電商平臺。Yoho專注于中國潮流產(chǎn)業(yè)的發(fā)展，致力成為中國潮流生態(tài)圈的領導者。

（一）板塊及其設計分析

1.首頁

首頁的分類非常清晰明確，將產(chǎn)品進行了非常有效的分類，男裝、女裝、童裝的劃分。Logo鮮明且不喧賓奪主，讓瀏覽的受眾能產(chǎn)生深刻的印象。變換的推廣頁每一頁都展現(xiàn)了Yoho的風格特點，鮮明奪目。（圖6）

2.商品列表頁

產(chǎn)品列表結構清晰，采用動態(tài)效果處理，鼠標所到之處彈出相關產(chǎn)品列表。按照項目、類目、品牌分層展現(xiàn)，既美觀又快捷。將性別、顏色、價格區(qū)間、品牌、版型、經(jīng)典款型全部列出，便于用戶搜索。（圖7、圖8）

3.產(chǎn)品詳情頁

精細的展現(xiàn)產(chǎn)品的各項指標和模特圖，表現(xiàn)的風格統(tǒng)一與設計頁面協(xié)調自然。所有商品信息整合。商品信息為可切換模式，節(jié)省空間，尺碼信息全網(wǎng)板塊統(tǒng)一，增強專業(yè)度和可信度，以及降低用戶瀏覽的學習難度。（圖9）

4.資訊/專題頁

資訊和專題在“逛”目錄下展現(xiàn)。按照時間排序發(fā)布，搭配，達人等分類，每一篇文章介紹了標題，摘要，封面圖，類似電子雜志的展現(xiàn)形式。（圖10）

5.活動/促銷頁

Yoho的活動促銷頁面可謂是十分的簡潔，與首頁推送完美的結合在了一起，點開之后也并沒有出現(xiàn)復雜的活動參與的繁瑣頁面，一股設計清流撲面而來。（圖11）

（二）設計要素分析

1.導航

Yoho的導航使用與背景相反的黑色突出了根目錄的類別，又用紅色標記出促銷或者力推的產(chǎn)品，既讓人一目了然又突出了重點。

2.布局

Yoho的布局有繁有簡，首頁推廣促銷活動，在隨后的頁面中推廣重點產(chǎn)品，在之后的頁面中以類別為中心分別適當展開給人以引導的作用。

3.字體

在扁平化文字大行其道的今天，Yoho大面積使用，使文字與圖片完美結合，形成獨具風格的標志，與其出售商品風格相契合。在按鈕的文字設計上采取了最簡單、最易識別的宋體。（圖12）

4.風格

顏色上采取最流行的漸變色點綴以及大面積的黑白灰，甚至明亮的跳躍色來打造時尚的風格，與Yoho品牌風格相適應。（圖13）

五、結論

隨著人們生活水平的不斷提高以及越來越多電商平臺的出現(xiàn)，人們越來越重視電商頁面的視覺審美感受。通過這些美觀的、人性化的視覺設計，受眾改變了他們的銷售習慣，進而改變了他們的生活習慣和審美習慣。由此看出垂直化電商導購網(wǎng)站服飾類用戶界面視覺設計的重要性，不僅改變了人們的審美也改變了人們的生活?！?/p>

圖1－5：來源于天貓hardlyevers旗艦店

圖6－13：來源于天貓Yoho!Buy官網(wǎng)

[1] 吳文治.京東劉強東：標準化垂直電商的出路[J].中國商貿，2012（30）：12-13.

[2] 楊君君.“新一代垂直電商”光環(huán)下的隱憂[J].中國制衣，2014（9）：67-68.

[3] 孟文怡.淺談網(wǎng)絡電子商務的網(wǎng)頁視覺設計[J].美與時代·城市，2013（5）：68-69.

[4] 李三山.基于可用性的電子商務網(wǎng)站頁面布局位置效應研究[J].消費導刊，2010（3）：205-206.

[5] 李軍.駱駝服飾旗艦店網(wǎng)頁設計[J].工業(yè)設計，2015（7）：51-52.

[6] 馬韻，李芹.淺談網(wǎng)頁藝術設計的現(xiàn)狀與發(fā)展趨勢[J].藝術科技，2013（12）：48-49.

[7] 趙志茹，張尼奇.網(wǎng)頁中導航系統(tǒng)的設計[J].西江月，2013（8）：42.

[8] 吳忠慧.國內電子商務網(wǎng)站的視覺設計分析[J].現(xiàn)代裝飾（理論），2015（1）：23.

[9] 朱華杰，蘇然.電商視覺營銷（成功電商之路系列）[M].北京：電子工業(yè)出版社，2014.

[10] 蒲波.色彩在網(wǎng)頁設計中的作用[J].藝術科技，2013（2）：5-6.

Research on the Visual Design of the Vertical Electric Business Shopping Guide Website

HONG Meng-han, DAI Bing
( School of Art and Design, Shangrao Normal University, Shangrao 334001,China )

Through the study of the visual design on the value and function of the shopping site, and then study the web page constitute, design points and design elements. Finally, case analysis interpretation of vertical electric business guide clothing website visual user interface design method.By the case analysis shows that highlights the role of visual design to guide platform, so the designer to in navigation, layout, font, style, elements, color six aspects of originality, to enhance the vertical electric business guide clothing website user interface of visual impact.

vertical electricity suppliers; fashion shopping guide; shopping guide website; user interface; visual design

Internet :www.artdesign.org.cn

檢 索 :www.artdesign.org.cn

TP302

A

1008-2832（2017）12-0049-03