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

洪夢晗，戴冰

（上饒師范學(xué)院 美術(shù)與設(shè)計學(xué)院，江西 上饒，334001）

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

洪夢晗，戴冰

（上饒師范學(xué)院 美術(shù)與設(shè)計學(xué)院，江西 上饒，334001）

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

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

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

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

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

（一）作用

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

（二）價值

1.商業(yè)價值

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

2.文化價值

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

>圖1 天貓hardlyevers旗艦店首頁

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

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

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

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

3.藝術(shù)價值

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

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

（一）首頁

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

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

（二）商品列表頁

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

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

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

（四）資訊/專題頁

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

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

（五）活動/促銷頁

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

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

（一）導(dǎo)航

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

（二）布局

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

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

（四）風(fēng)格

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

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

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

（一）板塊及其設(shè)計分析

1.首頁

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

2.商品列表頁

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

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

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

4.資訊/專題頁

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

5.活動/促銷頁

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

（二）設(shè)計要素分析

1.導(dǎo)航

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

2.布局

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

3.字體

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

4.風(fēng)格

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

五、結(jié)論

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

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

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

[1] 吳文治.京東劉強東：標(biāo)準(zhǔn)化垂直電商的出路[J].中國商貿(mào)，2012（30）：12-13.

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

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

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

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

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

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

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

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

[10] 蒲波.色彩在網(wǎng)頁設(shè)計中的作用[J].藝術(shù)科技，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