談杭派女裝品牌的網(wǎng)頁設(shè)計
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了談杭派女裝品牌的網(wǎng)頁設(shè)計范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要:文章對當季奢侈品、快時尚及杭派女裝三類服飾品牌網(wǎng)站網(wǎng)頁設(shè)計現(xiàn)狀進行調(diào)研與圖片采集，利用眼動實驗，跟蹤分析視覺中心與眼動軌跡，基于熱點圖與眼動軌跡分析結(jié)果，歸納杭派女裝品牌網(wǎng)頁設(shè)計存在的問題，通過與另外兩個組別的比對分析，分析設(shè)計方法與調(diào)整策略。
關(guān)鍵詞:品牌；網(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)頁最基本分為三塊，導(dǎo)航欄(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è)包括學(xué)生、教師、保安、快遞人員等，年齡保持在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ù)處理選用眼動儀設(shè)備
EYELINK1000，對圖片素材進行處理，并排除有反光、構(gòu)圖不完整等可能產(chǎn)生干擾因素的圖片。眼動儀數(shù)據(jù)由眼動儀自動記錄，實驗完全結(jié)束后，用spss對數(shù)據(jù)進行初步整理分析。
三、熱點與眼動軌跡分析
（一）奢侈品品牌網(wǎng)站分析
通過分析發(fā)現(xiàn)奢侈品網(wǎng)站整體風(fēng)格偏向簡約、前衛(wèi)，在網(wǎng)頁色彩視覺要素上通常使用中性色彩居多，色彩統(tǒng)一和諧，沒有明顯帶有營銷性質(zhì)的色彩（如紅色等），以背景圖片來烘托界面的氣氛，網(wǎng)頁面品牌logo顯著，通常會有動感效果，注重最新的當季產(chǎn)品展示。通過熱點圖和軌跡圖分析，當網(wǎng)站首頁無模特圖片，以產(chǎn)品圖和氛圍背景圖為首頁時，實驗者關(guān)注度最高的是品牌產(chǎn)品展示及品牌LOGO，視線范圍比較集中，，而當網(wǎng)頁首頁出現(xiàn)模特人像時，實驗者的視線則主要集中在模特上，并且會出現(xiàn)看不到品牌產(chǎn)品的現(xiàn)象。Dior當季的網(wǎng)站首頁，畫面中的美女模特手拿當季最新款Dior產(chǎn)品，但通過眼動軌跡圖和熱點圖看出，實驗者的目光在模特的臉和身體集中，所以說通過模特博眼球是一把雙刃劍，如果沒有辦法把模特吸引過來的關(guān)注又轉(zhuǎn)移到想要表達的關(guān)鍵信息上，則并無大意義。
（二）快時尚品牌網(wǎng)站分析
快時尚品牌網(wǎng)頁整體風(fēng)格極具主題性、色彩視覺上通常很豐富，多為營銷系類色彩，喜歡使用大范圍紅色等亮麗色彩，以產(chǎn)生視覺刺激，網(wǎng)頁品牌logo顯著，在整體界面上一般很少突出外觀，頁面布局視覺設(shè)計以簡潔實用性為主，一般使用加長頁面設(shè)計，網(wǎng)頁視覺文字要素使用較多，多為價格、當季活動及促銷信息。通過熱點圖和眼動軌跡圖分析，，快時尚品牌網(wǎng)頁，實驗者視線受產(chǎn)品價格影響較大，當網(wǎng)頁面有價格等折扣信息時，熱點聚焦最密集處通常在價格上，視覺軌跡都會圍繞折扣文字展開，最終回到價格文字。
（三）杭派女裝網(wǎng)站分析
通過對多個杭派女裝品牌網(wǎng)頁觀察得出，杭派女裝網(wǎng)頁整體風(fēng)格偏向本土、大眾，首頁在色彩視覺上，均使用明度不高的淡灰色系，部分網(wǎng)頁出現(xiàn)品牌LOGO不顯著和導(dǎo)航欄不清晰的問題，整體界面不如奢侈品網(wǎng)站和快時尚網(wǎng)站豐富飽滿，在版式布局上極為簡單，網(wǎng)頁主要以模特圖片展示為主。，通過熱點圖得知實驗者的興趣區(qū)域主要為模特，眼動軌跡圖看出實驗者的視線關(guān)注點主要在模特身上最密集。即模特人臉比其他信息更奪人眼球。因此，品牌首頁以整幅主圖形式出現(xiàn)能夠更加集中瀏覽視線。
（四）比對分析
通過對三類別服飾品牌比對分析，
四、杭派女裝網(wǎng)頁設(shè)計的問題與對策
（一）問題
通過對杭派女裝網(wǎng)站的瀏覽，對數(shù)十位人士的訪談，總結(jié)出杭派女裝品牌網(wǎng)站界面普遍存在以下問題。1.色彩運用不和諧統(tǒng)一通過對比，奢侈品和快時尚品牌官網(wǎng)整體配色的協(xié)調(diào)性與風(fēng)格非常具有一致性，顏色飽和度高，而杭派女裝則顯得比較薄弱，網(wǎng)站色彩搭配不協(xié)調(diào)，缺乏統(tǒng)一性，過于明艷雜亂或過于單調(diào)暗淡，網(wǎng)頁用色沒有考慮到主題性和情感因素。2.不注重細節(jié)，版式設(shè)計不合理在網(wǎng)頁界面中，細節(jié)也較大程度上決定著整個網(wǎng)站的效果。秋水伊人當季網(wǎng)頁，采訪多位人士都感覺首頁圖片效果不精致，且導(dǎo)航欄文字不易看清，頁面內(nèi)容沒有合理的視覺編排。，海貝網(wǎng)頁，導(dǎo)航欄在網(wǎng)頁的左下角，字體顏色與背景色對比不強烈，瀏覽者不易看清，難以起到引導(dǎo)瀏覽的作用。3.缺乏特色與設(shè)計感杭派女裝各網(wǎng)站大同小異，無品牌特色，原創(chuàng)性欠缺。
（二）解決對策
在網(wǎng)頁設(shè)計中，通過實驗得出以下結(jié)論。
五、總結(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].上海：東華大學(xué)，2011.
[2]許海.網(wǎng)頁界面視覺設(shè)計藝術(shù)研究[D].長沙：湖南師范大學(xué)，2007.
[3]黃易峰.網(wǎng)頁設(shè)計目前存在的問題[J].寧波：寧波美術(shù)館，2011.
[4]曾宇靜，等.視線追蹤技術(shù)在網(wǎng)頁可用性評估中的應(yīng)用[J].人類工效學(xué)，2012，18（3）：83-86.
[5]栗覓，等.web頁面視覺搜索與瀏覽策略的眼動研究[J].北京工業(yè)大學(xué)學(xué)報，2011（5）：773-779.
[6]徐美雅.淺談網(wǎng)站風(fēng)格設(shè)計的基本要求[J].天津：天津電大學(xué)報，2009，13（1）：59-62.
作者:沈李怡 劉麗嫻 陳如穎 單位:浙江理工大學(xué)國際教育學(xué)院