易用的淘寶店鋪導航設計

摘要：分析了淘寶店鋪導航的構成，指出易用的導航設計對提高轉化率有重要作用，提出了建立易用的店鋪導航結構需要注意整體信息的架構、組織、協調，并論述了如何以人的體驗為依據進行導航視覺設計。

關鍵詞：淘寶；導航；易用性

淘寶店鋪導航就像是現實中商場、超市的導視系統，如超市分為生鮮區、糧油區、日用品區等，生鮮區又包括水產、蔬果、肉類、速凍區等，好的區域組織和導視設計能夠幫助顧客順利找到自己想要的商品并結賬，好的店鋪導航也能夠使身處茫茫淘寶中的顧客成功找到自己的需要的商品并下單。導航承載著整理、歸納店鋪商品信息的功能，是提高訪問效率和店鋪成交轉化率的重中之重。與線下商鋪實體交易相比，淘寶上有更多選擇的可能，線上交易的消費者更缺乏耐性，任何一個使令人迷茫、不悅的因素都可能使顧客瞬間流向其他同類店鋪，所以清晰、易用的導航就顯得更為重要。

1淘寶店鋪導航概述

由于互聯網的興起而興起的網站導航，幫助上網者找到想要瀏覽的網頁，想要查找的信息。在網頁中，瀏覽者通過點擊某些功能按鈕實現信息的跳轉，所以淘寶導航并不僅限于一般理解中的商品分類，而是包括任何將消費者引導向具體商品的渠道。

按照導航所處的位置，可以將導航分為頂部導航、側邊欄導航和自定義導航三類。頂部導航通常包含著商品分類、信用評價、搜索欄、自定義頁面（如店鋪介紹、購物須知）等；側邊欄導航通常位于左側，包含商品分類、聯系客服、熱銷排行、其他鏈接（如手機店鋪、友情鏈接）等；自定義導航可位于頁面中的任何位置，通常以圖片或文字加超鏈接的方式實現，常用于活動介紹。這些形態、位置不一的導航設置共同為顧客提供更便捷的購買路徑。

2建立易用的導航結構

2.1信息架構的確立

信息架構是淘寶網店導航設計的開端，信息結構是導航的基礎，合理、清晰的信息架構能夠使導航梳理店鋪結構、有效傳遞信息、促成消費轉化的功能最大化。

信息架構要注重邏輯性，比如在商品類目中一共有多少類，是否存在子類。在理清邏輯的同時也要考慮到導航的深度與廣度問題，廣度設計的效果通常要好于深度設計。互聯網設計中有一個“三次點擊”原則，指的是層數太深不利于用戶抓取信息，如果通過三次點擊還不能夠完成預期目標，會導致用戶的放棄。店鋪導航也應盡量使用扁平化的結構，因為導航的深度每增加一級，顧客就需要多一次點擊，在層層復雜的結構中容易迷失方向，使整個導航系統的復雜程度倍增，設計的友好程度打折。但也應注意廣度的鋪設也應適當，如頂部導航不能單純依據淘寶規定的頁面寬度鋪滿，大量信息的同時展示會讓顧客感到選擇的壓力，從而影響進一步瀏覽的信心。

2.2內容信息的組織

以商品類目為例，商品類目通常在頂部導航和側邊欄導航中都有出現，如何組織和呈現商品類目，直接影響到客戶瀏覽和選擇的順暢度。對于經營商品種類較單純的店鋪，如專門經營化妝品的店鋪，分類時可按功能分或按品牌系列分，兩者兼具的分類呈現能夠滿足用戶多維度對比品牌、價格、產品功能等的需要。而對于經營產品種類、品牌復雜的店鋪，做好分類則成為一個重點中的難點。

對于商品分類，建議采用即時貼分類方法，有助于分類的建立和完善。即時貼分類法的進行首先需要準備即時貼，將信息分別寫在即時貼上，先請三到五人進行自主分類，然后對各自的分類結果討論，總結出參與人員都易于接受的分類方法，以作為商品分類建立的重要依據。就像在草坪設計時不事先規劃穿越的路徑，而是根據一段時間行人踩踏的痕跡來完成鋪設，建立起真正符合用戶習慣的商品分類方法。

在商品分類進入到實際的建立階段，還需注意不同的顧客重點關注的信息存在差別，如新客戶關注品牌、產品、服務等信息，而老客戶則更關注店鋪的更新、促銷等時效性強的信息，以老客戶占比為多的店鋪宜將上新信息放在突出位置。

2.3各類導航的協調

協調各類導航之間的關系，須以顧客業已形成的瀏覽習慣為基礎。例如很多賣家為了追求頁面的美觀，在首頁第一屏放置大尺寸的圖片輪播，同時為了整體的寬屏感而刪除首頁的側邊欄模塊。其實顧客早已習慣了從左側欄找到商品分類、在線客服等導航信息，存在且能及時出現的左側欄是保證訪問效率的重要導航模塊。追求美是人類的天性，但如果美觀影響到了易用，應以易用為重，因此側邊欄不宜刪除，并且應當放置在左側，有時為了配合整體風格左側欄可適當下移，但不宜過于偏下拖長顧客的尋找時間。

協調各部分導航還應保持一致性，例如左側欄在首頁和詳情頁都有出現，模板允許分別設置這兩個位置的左側欄，那么為保證顧客的思路不被無謂的差別所誤導、耽誤時間，各級別頁面中的左側欄設計應保持一致。

3呈現易用的導航視覺設計

導航的視覺設計是信息的可視化而不是炫耀技巧，好的視覺設計一定是能夠快速引導顧客做出下一步選擇的設計。從用戶體驗角度講，淘寶網從屬于整個的互聯網，顧客在網絡生活中長期培養的簡單易用的訪問習慣，在淘寶購物時也應受到重視。如果買家需要可以去思考下一步該點擊什么，這樣的導航設計就是失敗的，所以視覺設計時易用、友好是比美觀更基本的要求。在這一前提下，進行導航視覺設計時還有以下方面應注意：

3.1把握視覺規律

導航設計要傳達賣家最想告訴顧客的和顧客最想了解的信息，這是人與人以界面為媒介的交流，準確把握人的情感規律，可幫助提高傳達的效率。視線跟蹤技術的研究表明，畫面中如有某一區域權重過高，會導致瀏覽視線在權重高的區域內徘徊，例如通篇的黑白文字中有一張彩色的照片，會很大程度吸引瀏覽者的視線。這一原理可利用在淘寶店鋪導航設計中，如賣家在促銷時，常以相同規格“圖片+標題+價格”為單元排列構成促銷信息導航，每一單元的視覺權重相等，然而真正能夠帶動店鋪銷售的爆款往往只有一兩款，利用視知覺原理，可適當加大目標爆款的權重，使顧客在無意中將目標鎖定在此。

3.2協調色彩配置

導航配色是店鋪整體配色的環節之一，風格應從屬于整個店鋪色彩設計，呈現和諧、統一的視覺效果，如食品類店鋪使用橙黃色系，IT類店鋪使用金屬灰風格等。但如何凸顯導航在店鋪中的導引作用，還有以下幾點應注意：首先是導航部分的色彩與整體頁面的色彩有所差異，包括色相、純度、明度等方面，如在整體色調是暗紅色的頁面，頂部商品分類導航的背景色可使用金色、黑色，既不與整體沖突，又能夠使顧客快速發現導航的存在；導航的背景顏色要與文本明顯區分開來，保證文本清晰、易讀，如白底淺粉色的文字，會造成識別困難；在導航背景色與文字的組合上，還需考慮傳遞給顧客的情緒，黑色背景大紅色文本易于閱讀，但用在母嬰用品的店鋪導航就不合適，因為其搭配情緒過于刺激。

3.3理清圖文關系

圖像和文本應用在網店導航中都是實現戰略經營的手段，圖像通過視覺效果吸引顧客，文本則以內容成為決定網店是否吸引人的重要指標。絕大多數網店都以經營實物類商品為主，賣家往往急于通過各種渠道向消費者展示商品圖片，但鑒于導航的作用，圖像方式在頂部、側邊欄導航中應慎用。如“圖片+超鏈接”的方式是許多賣家為了頁面視覺美觀大量使用的導航方式，但漂亮的圖片不等于成功的視覺營銷，在用戶眼里以文本為主、簡單、不華麗的分類導航才是更有效率的方式。而在自由導航中，則可加大圖像的分量，因為顧客不是程序員，密密麻麻的文字令人生厭，這時圖像的應用更能吸引顧客的眼球。

另外flash等動態圖像實現手段會為導航增色不少，但同時也會影響頁面反應速度；動態圖像十分搶眼，負面效應就是容易造成對顧客視覺上的騷擾，弄不好就會畫蛇添足。在確定是否使用動態圖像的問題上應該考慮使用動態圖像的必要性，是否能夠起到強調信息的效果，假如只是為了炫酷的效果，建議最好不用。如果決定使用，動態的效果要把握在一個合適的度，切忌喧賓奪主。

4結語

正確認識店鋪導航系統的性質和作用，建立合理、有效的導航構架，以簡潔、清晰的視覺設計將一套易用的導航系統呈現在顧客面前，將有效提升顧客的瀏覽體驗，提高成交轉化率，促進淘寶店鋪的長遠發展。

參考文獻：

[1] 百度百科.導航[EB/OL].http：//baike.baidu.com/view/425408.htm.

[2] 李世國，顧振宇.交互設計[M].北京：中國水利水電出版社，2012.

[3] Kalbach J.Web導航合計[M].李曦琳，譯.北京：電子工業出版社，2009.

作者簡介：武彥如，女，山西太原人，太原工業學院教師，江南大學碩士。