杭派女裝品牌網(wǎng)頁設(shè)計分析

沈李怡, 劉麗嫻（通訊作者）, 陳如穎

（浙江理工大學 國際教育學院，杭州 310018）

杭派女裝品牌網(wǎng)頁設(shè)計分析

沈李怡, 劉麗嫻（通訊作者）, 陳如穎

（浙江理工大學 國際教育學院，杭州 310018）

文章對當季奢侈品、快時尚及杭派女裝三類服飾品牌網(wǎng)站網(wǎng)頁設(shè)計現(xiàn)狀進行調(diào)研與圖片采集，利用眼動實驗，跟蹤分析視覺中心與眼動軌跡，基于熱點圖與眼動軌跡分析結(jié)果，歸納杭派女裝品牌網(wǎng)頁設(shè)計存在的問題，通過與另外兩個組別的比對分析，分析設(shè)計方法與調(diào)整策略。

品牌；網(wǎng)頁設(shè)計；眼動軌跡；熱點分析

互聯(lián)網(wǎng)時代下，品牌服飾網(wǎng)站是品牌文化傳播的主要途徑之一，更是企業(yè)推廣宣傳的重要手段，其界面的視覺設(shè)計承載了受眾所需的時尚信息，其視覺效果的吸引力直接影響網(wǎng)站的瀏覽量與品牌銷量。網(wǎng)站頁面中，首頁是網(wǎng)站構(gòu)建中不可或缺的重要組成部分，能夠幫助消費者加深對信息的理解，滿足受眾的審美需求，其對于時尚信息傳播尤為重要。

一、服飾品牌網(wǎng)頁設(shè)計

網(wǎng)站界面的概念是從傳統(tǒng)設(shè)計界面概念演化而來的，是指人與計算機之間以文字、色彩、圖像、符號、多媒體等為基本元素，以傳達特定信息，方便人機交流為目的信息交流界面。網(wǎng)頁設(shè)計作為一種新的媒體，是集藝術(shù)、功能、技術(shù)于一體的綜合設(shè)計，既有技術(shù)、功能的基本特征，又具有視覺形式的特征。一個網(wǎng)頁最基本分為三塊，導航欄(Nav)、頁頭（Header）、頁腳（Footer），而本文研究的網(wǎng)頁主要為服飾品牌網(wǎng)站首頁界面（Header）。

二、服飾品牌網(wǎng)頁設(shè)計的相關(guān)實驗

（一）研究范圍

挑選首頁作為研究對象，在于品牌首頁對瀏覽者瀏覽網(wǎng)站時起著先入為主的作用。瀏覽者對品牌網(wǎng)站的好感度較大程度取決于品牌首頁，如果門面設(shè)計不足夠吸引消費者，就會大概率終止其進一步了解與之相關(guān)鏈接的其他頁面的更多內(nèi)容，首頁代表著網(wǎng)站最精華的部分，它的設(shè)計尤為重要。

（二）實驗對象選取

本實驗一共隨機選取了100名被試者，其中包括男性43人，女性57人，職業(yè)包括學生、教師、保安、快遞人員等，年齡保持在18-52歲之間。所有被試者的視力或者矯正視力均屬于正常，不存有色弱、色盲等視力疾病問題。

（三）品牌網(wǎng)站首頁樣本選取

本文將樣本的選取分為三類，分別是13個奢侈品官網(wǎng)，12個快時尚官網(wǎng)，11個杭派女裝官網(wǎng)。選取當下最受歡迎的品牌作為實驗樣本，樣本選擇均為2016年12月份的當季最新首頁。

（四）實驗設(shè)計流程

1.招募實驗對象，使其了解實驗的整體流程及實驗的要求。

2.指引實驗者坐在距離儀器前0.5米的位置，固定好頭部位置，進行單眼校對（Calibrate）。

3.每10秒隨機切換圖片素材。當一組瀏覽完之后，記錄并保存瀏覽數(shù)據(jù)，實驗結(jié)束。

4.眼動實驗結(jié)束，實驗訪談法進行實驗訪談，對瀏覽樣本進行提問。

（五）設(shè)備、系統(tǒng)設(shè)定與數(shù)據(jù)處理

gt;圖1 MCM熱點圖與眼動軌跡圖

gt;圖2 Dior眼動軌跡圖與熱點圖

gt;圖3 快時尚品牌網(wǎng)頁熱點圖與眼動軌跡圖

gt;圖4 海貝熱點圖與眼動軌跡圖

選用眼動儀設(shè)備EYE LINK1000，對圖片素材進行處理，并排除有反光、構(gòu)圖不完整等可能產(chǎn)生干擾因素的圖片。眼動儀數(shù)據(jù)由眼動儀自動記錄，實驗完全結(jié)束后，用spss對數(shù)據(jù)進行初步整理分析。

三、熱點與眼動軌跡分析

（一）奢侈品品牌網(wǎng)站分析

通過分析發(fā)現(xiàn)奢侈品網(wǎng)站整體風格偏向簡約、前衛(wèi)，在網(wǎng)頁色彩視覺要素上通常使用中性色彩居多，色彩統(tǒng)一和諧，沒有明顯帶有營銷性質(zhì)的色彩（如紅色等），以背景圖片來烘托界面的氣氛，網(wǎng)頁面品牌logo顯著，通常會有動感效果，注重最新的當季產(chǎn)品展示。

通過熱點圖和軌跡圖分析，當網(wǎng)站首頁無模特圖片，以產(chǎn)品圖和氛圍背景圖為首頁時，實驗者關(guān)注度最高的是品牌產(chǎn)品展示及品牌LOGO，視線范圍比較集中，如圖1，而當網(wǎng)頁首頁出現(xiàn)模特人像時，實驗者的視線則主要集中在模特上，并且會出現(xiàn)看不到品牌產(chǎn)品的現(xiàn)象，如圖2。

Dior當季的網(wǎng)站首頁，畫面中的美女模特手拿當季最新款Dior產(chǎn)品，但通過眼動軌跡圖和熱點圖看出，實驗者的目光在模特的臉和身體集中，所以說通過模特博眼球是一把雙刃劍，如果沒有辦法把模特吸引過來的關(guān)注又轉(zhuǎn)移到想要表達的關(guān)鍵信息上，則并無大意義。

（二）快時尚品牌網(wǎng)站分析

快時尚品牌網(wǎng)頁整體風格極具主題性、色彩視覺上通常很豐富，多為營銷系類色彩，喜歡使用大范圍紅色等亮麗色彩，以產(chǎn)生視覺刺激，網(wǎng)頁品牌logo顯著，在整體界面上一般很少突出外觀，頁面布局視覺設(shè)計以簡潔實用性為主，一般使用加長頁面設(shè)計，網(wǎng)頁視覺文字要素使用較多，多為價格、當季活動及促銷信息。

通過熱點圖和眼動軌跡圖分析，如圖3，快時尚品牌網(wǎng)頁，實驗者視線受產(chǎn)品價格影響較大，當網(wǎng)頁面有價格等折扣信息時，熱點聚焦最密集處通常在價格上，視覺軌跡都會圍繞折扣文字展開，最終回到價格文字。

（三）杭派女裝網(wǎng)站分析

通過對多個杭派女裝品牌網(wǎng)頁觀察得出，杭派女裝網(wǎng)頁整體風格偏向本土、大眾，首頁在色彩視覺上，均使用明度不高的淡灰色系，部分網(wǎng)頁出現(xiàn)品牌LOGO不顯著和導航欄不清晰的問題，整體界面不如奢侈品網(wǎng)站和快時尚網(wǎng)站豐富飽滿，在版式布局上極為簡單，網(wǎng)頁主要以模特圖片展示為主。

如圖4，通過熱點圖得知實驗者的興趣區(qū)域主要為模特，眼動軌跡圖看出實驗者的視線關(guān)注點主要在模特身上最密集。即模特人臉比其他信息更奪人眼球。因此，品牌首頁以整幅主圖形式出現(xiàn)能夠更加集中瀏覽視線。

（四）比對分析

通過對三類別服飾品牌比對分析，得出以下結(jié)論。（表1）

表1 網(wǎng)頁比對分析表

四、杭派女裝網(wǎng)頁設(shè)計的問題與對策

（一）問題

通過對杭派女裝網(wǎng)站的瀏覽，對數(shù)十位人士的訪談，總結(jié)出杭派女裝品牌網(wǎng)站界面普遍存在以下問題。

1.色彩運用不和諧統(tǒng)一

通過對比，奢侈品和快時尚品牌官網(wǎng)整體配色的協(xié)調(diào)性與風格非常具有一致性，顏色飽和度高，而杭派女裝則顯得比較薄弱，網(wǎng)站色彩搭配不協(xié)調(diào)，缺乏統(tǒng)一性，過于明艷雜亂或過于單調(diào)暗淡，網(wǎng)頁用色沒有考慮到主題性和情感因素。

gt;圖5 秋水伊人當季頁面

gt;圖6 海貝當季頁面

在網(wǎng)頁界面中，細節(jié)也較大程度上決定著整個網(wǎng)站的效果。如圖5，秋水伊人當季網(wǎng)頁，采訪多位人士都感覺首頁圖片效果不精致，且導航欄文字不易看清，頁面內(nèi)容沒有合理的視覺編排。如圖6，海貝網(wǎng)頁，導航欄在網(wǎng)頁的左下角，字體顏色與背景色對比不強烈，瀏覽者不易看清，難以起到引導瀏覽的作用。

3.缺乏特色與設(shè)計感

杭派女裝各網(wǎng)站大同小異，無品牌特色，原創(chuàng)性欠缺。

（二）解決對策

在網(wǎng)頁設(shè)計中，通過實驗得出以下結(jié)論（見圖7）。

gt;圖7 解決對策示意圖

2.不注重細節(jié)，版式設(shè)計不合理

五、總結(jié)

首先，品牌如需突出當季產(chǎn)品本身，應(yīng)少使用模特大片或減弱模特存在感。實驗顯示，背景氛圍式或產(chǎn)品主頁面展示品牌產(chǎn)品時，視覺都會多停留在產(chǎn)品上，能起到良好的推廣效果。一般網(wǎng)頁色彩設(shè)計遵循和諧、均衡和重點突出的原則，將不同色彩組合搭配產(chǎn)生主色調(diào)和輔助色。以刺激銷售為目的時，網(wǎng)站頁面非常適合使用亮麗的色彩，和折扣文字進行視覺刺激。

不同視覺要素運用適用于不同功能頁面，杭派女裝品牌應(yīng)在此基礎(chǔ)上，在網(wǎng)頁設(shè)計中從功能入手，明確自己網(wǎng)站定位方向，通過自身的品牌特色來設(shè)計網(wǎng)頁視覺效果，運用協(xié)調(diào)的色彩搭配，合理劃分各板塊布局，突出當季首頁重點，以用戶視覺體驗為主，視覺沖擊力為輔進行設(shè)計。相輔相成設(shè)計出適合品牌與線上商店的頁面。

[1]李加怡.服飾時尚信息網(wǎng)站界面的視覺[D].上海：東華大學，2011.

[2]許海.網(wǎng)頁界面視覺設(shè)計藝術(shù)研究[D].長沙：湖南師范大學，2007 .

[3]黃易峰.網(wǎng)頁設(shè)計目前存在的問題[J].寧波：寧波美術(shù)館，2011.

[4]曾宇靜，等.視線追蹤技術(shù)在網(wǎng)頁可用性評估中的應(yīng)用[J].人類工效學，2012，18（3）：83-86.

[5]栗覓，等. web頁面視覺搜索與瀏覽策略的眼動研究[J].北京工業(yè)大學學報，2011（5）：773-779.

[6]徐美雅.淺談網(wǎng)站風格設(shè)計的基本要求[J].天津：天津電大學報，2009，13（1）：59-62.

Analysis on Hang Ladies Fashion Brand of the Web Design

SHEN Li-yi,LIU Li-xian（Corresponding Author）,CHEN Ru-ying
(School of International Education, Zhejiang Sci-tech University, Hangzhou 310018, China)

Articles on quarter luxury, and fast fashion and the hang ladies brand that three classes clothing brand website pages design status for research and pictures collection, using eye tracking experiment, track analysis Visual Center and eye moving track, based on hot figure and eye moving track to analysis results, sum up the problems of hang ladies brand page design, through analysis and contrasting with the other two experiments, analysis design methods and adjustment strategy.

brand; web design; eye trajectory; analysis of hotspots

檢索:www.artdesign.org.cn

TP393.0；F407.86

A

1008-2832（2017）10-0054-03

Internet :www.artdesign.org.cn

浙江省大學生科技創(chuàng)新活動計劃項目資助（2017R406010）2016國家級創(chuàng)新創(chuàng)業(yè)項目資助（201610338009）；2017國家級創(chuàng)新創(chuàng)業(yè)項目資助