杭派女裝品牌網頁設計分析

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

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

杭派女裝品牌網頁設計分析

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

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

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

品牌；網頁設計；眼動軌跡；熱點分析

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

一、服飾品牌網頁設計

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

二、服飾品牌網頁設計的相關實驗

（一）研究范圍

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

（二）實驗對象選取

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

（三）品牌網站首頁樣本選取

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

（四）實驗設計流程

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

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

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

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

（五）設備、系統設定與數據處理

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

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

gt;圖3 快時尚品牌網頁熱點圖與眼動軌跡圖

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

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

三、熱點與眼動軌跡分析

（一）奢侈品品牌網站分析

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

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

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

（二）快時尚品牌網站分析

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

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

（三）杭派女裝網站分析

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

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

（四）比對分析

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

表1 網頁比對分析表

四、杭派女裝網頁設計的問題與對策

（一）問題

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

1.色彩運用不和諧統一

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

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

gt;圖6 海貝當季頁面

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

3.缺乏特色與設計感

杭派女裝各網站大同小異，無品牌特色，原創性欠缺。

（二）解決對策

在網頁設計中，通過實驗得出以下結論（見圖7）。

gt;圖7 解決對策示意圖

2.不注重細節，版式設計不合理

五、總結

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

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

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

[2]許海.網頁界面視覺設計藝術研究[D].長沙：湖南師范大學，2007 .

[3]黃易峰.網頁設計目前存在的問題[J].寧波：寧波美術館，2011.

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

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

[6]徐美雅.淺談網站風格設計的基本要求[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

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