談談購物網站導航欄設計的“小心思”

讀了這篇文章，我希望能幫助你明白：

導航欄的一些設計方面的和很多心理學方面的“小心思”。

購物網站的“病”和用戶的“痛”。

導航的設計與作用。

設計購物網站應該主要什么。

如何測試或評價一個網站導航的好壞?

我本人對購物網站的感觸。

“雙十一“、“雙十二”、“女王節(jié)”……一個個購物網站的促銷活動一夜之間變成了全民狂歡，“節(jié)日氣氛”異常濃烈，和傳統(tǒng)節(jié)日唯一的區(qū)別似乎就是放假了?！岸缡帧币蛔逡苍诼龎汛?，上到精英階層，下到普通民眾，“這幾天你剁手了么?”成了很多人在購物街前后的口頭的調侃。

購物網站像一個巨大的“黑洞”，你看不清、看不明，但它就是在無時無刻地吸引著你，將你拉入其中。

“剁手”時的購物體驗酣暢淋漓，“剁手”后的懊悔心情也是五味雜陳?！盀槭裁次屹I了一堆我不用的東西?”、“我明明不想買這件衣服的……”。身為“剁手一族”的我，同時更是走在產品路上的童鞋，我在想，為什么淘寶、天貓、京東能讓我心甘情愿(或者說是莫名其妙)的把錢花出去的呢?我認真想了想，體會出了一絲味道，我從購物網站都有的“導航”設計來說一說吧。

以下內容是我把自己的使用感受以及原來讀的一些書中的知識聯(lián)系起來所談的觀點和心得，供產品的童鞋互相交流咯!

購物網站的“病”：

我在這些地方“剁過手”— 淘寶，天貓，京東，當當，yoho!“鮮血淋漓”的剁手使用讓我發(fā)現(xiàn)了很多購物網站的“病”：

首先，網站內容繁多。(真的太大了!)

其次，網站沒有方向感。(真的太大了!)

最后，用戶找不到自己的“當前位置”。(真的太大了!)

重要的事情說三遍，網站數(shù)據(jù)太大了。

那么，網站有這些天生的“疾病”，網站管理者作為“網站醫(yī)生”是如何“開藥方”的呢?

首先，鏈接點擊會變色。這是針對網站內容繁多龐雜，鏈接眾多的“病”的第一劑藥。簡單的設計帶給我們的是一種已經訪問了多少內容的直觀感覺。

其次，給用戶一個“gps”。網站沒有物理上的方向，只有扁平和層級，缺乏方向感，那就給用戶一個gps么，每個網站頭部最明顯的就是這個“gps”— 標簽，標簽讓我能去自己想去的地方(雖然不是準確無誤精確到每一個物品)。

最后，建立“路標”。在購物網站這個巨大的“繁華城市”中，道路錯綜復雜，路標和指示牌作用不言而喻。那么，網站的路標長什么樣子呢?它叫做“面包屑導航”(面包屑導航(breadcrumbnavigation)這個概念來自童話故事”漢賽爾和格萊特”，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。)

網民還有一個很重要的“病”— 見困難就選擇退縮。 這也沒什么奇怪，人類從遠古進化到現(xiàn)在，可不是憑著蠻力，而是遇到困難懂得躲避的智慧。 可是這個網站設計者也帶來了問題，只要稍微在使用時遇到一點小困難、高門檻，用戶就選擇退縮，下意識放棄前進，即使這個門檻不高，邁過之后會更好。

這種“退縮”表現(xiàn)在購物網站上，就是我們在購物或者尋找某個商品時，我們?yōu)g覽后再次來到時不知道上次的物品在哪兒，我就不想尋找了。 所以的給網站降低門檻，簡潔準確的導航把這個門檻降低了一點，但還是不夠，用戶缺乏邁進去的“勇氣”以及支撐勇氣的“熟悉”。這又得開一服藥，藥物是：

瀏覽歷史，購物車，歷史購買等界面。(網站說：我很熟悉你，你喜歡“xxx”，我能帶你找到上次自己走過的路)。

購物用戶的“痛”：

購物網站上的用戶(我親切的稱呼為 剁手黨)范圍很廣，群體很多，從事職業(yè)各不相同，但是我們剁手黨都有一些小特點：

用戶在網站，更多的記住了“頁面層級”，而不是物理上的“我在哪兒”(雖然我們想記住)。 那種具體物理世界中的真實地址帶來的“踏實感”消失了。取而代之的是網站的信息扁平化帶給我們的“不踏實”。

購物網站里的用戶是身處“網絡版的寂靜嶺”，我知道這里有路，但不確定是不是安全，我迷路了。

那么，網站的“病”治好了，用戶的“痛”怎么撫平呢?畢竟一切以用戶需求為根本。

首先，網站的標配 —“書簽”?！拔乙o這個地方做個記號”，“我要占領這塊地區(qū)”。書簽讓我感覺網站在我手中緊握。

其次，瀏覽器的標配 —“后退按鈕”。真實的人生多么希望有“后悔藥”，但是時間過去了就是過去了。但是虛擬網絡不是，“后退按鈕”就是后悔藥，我知道自己能回到“原來”，那是多么難得的一種“踏實” 。

療傷的藥

說了網站的“病”和用戶的“痛”。開了治病和療傷的藥。

那么，回到我想說的—“導航”?！皩Ш健?或者說是 “面包屑”)很重要。這其實給了用戶一種“得知自己位置”的感覺。 這就好比是一個身處叢林中的獵人手上的gps，只不過你的用鼠標點擊，而不是手指按。這是難得的，看似不起眼的改變帶來的是用戶的心理安全感的建立。

這就好比一個孤獨的旅行背包客，手拿gps，腰上拴著一根“繩子”，我可能不熟悉剛進入的購物網站這個“繁華都市”，但我知道自己的方向，我知道怎么走;我有繩子拴著我，我知道怎么回。 有出路和有退路的道路似乎不“刺激”，但卻是“最安全”的。

導航的外貌：

導航，它的表達方式。它如同一個超市地面和貨架上的標語。 超市是立體的“網”。而網站導航是平面的“鎖鏈”。二者有立體和線性的不同表現(xiàn)和感受，但卻有相同的功能 — 指引用戶的方向。

導航，它的字如其人。身處現(xiàn)實世界，我得知自己具體在哪兒，知道怎么去安全的地方 — 這是“安全感”的保障。

導航，它的簡單清晰。導航的簡單清晰帶來的是安全感，帶來的是信任，而信任帶來了難得的消費。

導航的內在：

導航的特點我想了很多，比如簡單、突出、美觀等。但我想，導航不是藝術品，回歸到它最初的價值，導航 兩個最重要的內在特點：

“明顯”。明顯才能突出“線索”。不然導航就成了可有可無，甚至是“噪聲”。

“準確”。用戶急急忙忙的來，更可能急急忙忙的走，因此需要準確簡潔的提醒和導航。

導航的作用：

首先，告訴用戶這里有什么。 導航讓我知道這里有什么，而不用花費額外力氣去多想。

其次，告訴我們如何使用網站。 上購物網站的用戶的目的性很強，購買某一種物品，導航的設計好壞決定了用戶購買你而不是其他網站的東西需要跨過多大的門檻。

最后，它給了我們對于網站建造者的信心。 導航的好壞很大程度虎讓我對網站擁有者產生信任或懷疑。好的設計無疑是加分項。為用戶省時間，恰恰是購物網站建立的目的吧。

那么說了這么多，但是具體怎么操作呢?我想做一個網站，我該如何設計一個好的導航呢?

web導航的那些設計小習慣

十幾年的網頁設計走過了漫長的道路，引用《don’t make me think》一書中的說法，網站的那些導航經歷了以下幾個階段：

1995—古生代 網站由程序員設計，老式的html鏈接和按鈕

2000—西部蠻荒時代 web上的各種限制，字體丑陋，下劃線丑陋。難以辨別什么地方可以點擊。

2005—黃金時代 css為我們提供了優(yōu)雅的解決方案：只用顏色來表示可點擊的鏈接。

所以網站的導航設計要注意以下幾點：( 4 個元素)

站點的名稱(騰訊網，天貓，京東…)，我知道自己當前在哪兒，需要在每個頁面看到站點名稱或logo(通常在左上角)。

實用工具(購物車…)，幫助我們使用站點。

搜索框

欄目(當前具體在哪兒)，主導航條。

導航有統(tǒng)一格式。用戶進入你的網站只需要學習一次就會永久使用了。

那么，一下網站導航的好壞如何測試或者評價呢?

網站導航的設計好不好? 想象一下突然給你一個陌生的頁面，看這個網頁，自己問問自己：“我從這個網頁中知道了下面這些內容了么?”：

這是什么網站?(站點id和logo)

我在哪個網頁上?(站點的面包屑或子一級頁面名稱)

這個網站主要欄目是什么?(標簽)

我在導航系統(tǒng)的什么位置?(面包屑或標簽想要的按鈕突出顯示)

我怎么搜索?我怎么去我想去的地方?(搜索框)

那如何測試一下我設計的導航欄如何呢?

“摘掉眼鏡”。想像一下近視眼摘掉眼鏡的痛苦，但是面對像素，這也是一個美麗的世界，細節(jié)被屏蔽掉了，完整的框架天然的呈現(xiàn)在你面前。 “模糊的視線”讓人能更好地發(fā)現(xiàn)自己設計的導航產品的不足。好的導航一目了然，清楚無誤地呈現(xiàn)，依賴整體外觀，而不是看細節(jié)。

“拿在手里”。你可以打印出你設計的網頁導航，換個與平時觀察角度不同的方向，觀察并圈出導航，看看能否快速定位地方。

最后呢，想說一說。 一個購物網站的最偉大之處在于第一次的打開瀏覽就給了新用戶一種難得的“信任感”。這種信任感的來源于產品設計的專業(yè)與細致。網站的一點小出錯，不匹配，用戶的感到挫折，信任感可能會降低唉。

精心雕琢的產品總是讓人愛不釋手，創(chuàng)意把握的那么細致準確，有的放矢志的創(chuàng)新做到了準確好。

我自己寫過策劃和計劃書，做過產品，寫過網站，設計過游戲，正因如此，我才明白一個好的產品背后的艱辛和不易。一次好購物的體驗其實是多環(huán)節(jié)共同努力的結果，產品人的不懈追求，從腦海中的創(chuàng)意到紙上的圖畫勾勒、到繪制低保真原型的思考、到高保值原型的張弛有力、到研發(fā)的艱難、到產品的推廣、物流的精心磨合和客服的細致設計等許多環(huán)節(jié)做到了全面開花。系統(tǒng)的全面完善是不容易的，購物網站的產品人用行動證明了自己的本事和才干，成全了用戶的好購物體驗，打造了很多款融入生活的數(shù)字化產品，也成就了今天的互聯(lián)網繁榮的中國。

我不善于寫深奧的觀點，簡單明了直接說點干貨，我想是所有產品童鞋和研發(fā)童鞋最期待的文章。希望大家喜歡，歡迎批評指正哦!

網頁題目：談談購物網站導航欄設計的“小心思”
URL地址：http://www.muchs.cn/news17/106617.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站導航等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)