2021-04-07 分類: 網(wǎng)站導(dǎo)航
讀了這篇文章,我希望能幫助你明白:
導(dǎo)航欄的一些設(shè)計(jì)方面的和很多心理學(xué)方面的“小心思”。
購(gòu)物網(wǎng)站的“病”和用戶的“痛”。
導(dǎo)航的設(shè)計(jì)與作用。
設(shè)計(jì)購(gòu)物網(wǎng)站應(yīng)該主要什么。
如何測(cè)試或評(píng)價(jià)一個(gè)網(wǎng)站導(dǎo)航的好壞?
我本人對(duì)購(gòu)物網(wǎng)站的感觸。
“雙十一“、“雙十二”、“女王節(jié)”……一個(gè)個(gè)購(gòu)物網(wǎng)站的促銷活動(dòng)一夜之間變成了全民狂歡,“節(jié)日氣氛”異常濃烈,和傳統(tǒng)節(jié)日唯一的區(qū)別似乎就是放假了。“剁手”一族也在慢慢壯大,上到精英階層,下到普通民眾,“這幾天你剁手了么?”成了很多人在購(gòu)物街前后的口頭的調(diào)侃。
購(gòu)物網(wǎng)站像一個(gè)巨大的“黑洞”,你看不清、看不明,但它就是在無(wú)時(shí)無(wú)刻地吸引著你,將你拉入其中。
“剁手”時(shí)的購(gòu)物體驗(yàn)酣暢淋漓,“剁手”后的懊悔心情也是五味雜陳。“為什么我買了一堆我不用的東西?”、“我明明不想買這件衣服的……”。身為“剁手一族”的我,同時(shí)更是走在產(chǎn)品路上的童鞋,我在想,為什么淘寶、天貓、京東能讓我心甘情愿(或者說(shuō)是莫名其妙)的把錢花出去的呢?我認(rèn)真想了想,體會(huì)出了一絲味道,我從購(gòu)物網(wǎng)站都有的“導(dǎo)航”設(shè)計(jì)來(lái)說(shuō)一說(shuō)吧。
以下內(nèi)容是我把自己的使用感受以及原來(lái)讀的一些書中的知識(shí)聯(lián)系起來(lái)所談的觀點(diǎn)和心得,供產(chǎn)品的童鞋互相交流咯!
購(gòu)物網(wǎng)站的“病”:
我在這些地方“剁過(guò)手”— 淘寶,天貓,京東,當(dāng)當(dāng),yoho!“鮮血淋漓”的剁手使用讓我發(fā)現(xiàn)了很多購(gòu)物網(wǎng)站的“病”:
首先,網(wǎng)站內(nèi)容繁多。(真的太大了!)
其次,網(wǎng)站沒(méi)有方向感。(真的太大了!)
最后,用戶找不到自己的“當(dāng)前位置”。(真的太大了!)
重要的事情說(shuō)三遍,網(wǎng)站數(shù)據(jù)太大了。
那么,網(wǎng)站有這些天生的“疾病”,網(wǎng)站管理者作為“網(wǎng)站醫(yī)生”是如何“開藥方”的呢?
首先,鏈接點(diǎn)擊會(huì)變色。這是針對(duì)網(wǎng)站內(nèi)容繁多龐雜,鏈接眾多的“病”的第一劑藥。簡(jiǎn)單的設(shè)計(jì)帶給我們的是一種已經(jīng)訪問(wèn)了多少內(nèi)容的直觀感覺(jué)。
其次,給用戶一個(gè)“gps”。網(wǎng)站沒(méi)有物理上的方向,只有扁平和層級(jí),缺乏方向感,那就給用戶一個(gè)gps么,每個(gè)網(wǎng)站頭部最明顯的就是這個(gè)“gps”— 標(biāo)簽,標(biāo)簽讓我能去自己想去的地方(雖然不是準(zhǔn)確無(wú)誤精確到每一個(gè)物品)。
最后,建立“路標(biāo)”。在購(gòu)物網(wǎng)站這個(gè)巨大的“繁華城市”中,道路錯(cuò)綜復(fù)雜,路標(biāo)和指示牌作用不言而喻。那么,網(wǎng)站的路標(biāo)長(zhǎng)什么樣子呢?它叫做“面包屑導(dǎo)航”(面包屑導(dǎo)航(breadcrumbnavigation)這個(gè)概念來(lái)自童話故事”漢賽爾和格萊特”,當(dāng)漢賽爾和格萊特穿過(guò)森林時(shí),不小心迷路了,但是他們發(fā)現(xiàn)在沿途走過(guò)的地方都撒下了面包屑,讓這些面包屑來(lái)幫助他們找到回家的路。)
網(wǎng)民還有一個(gè)很重要的“病”— 見(jiàn)困難就選擇退縮。 這也沒(méi)什么奇怪,人類從遠(yuǎn)古進(jìn)化到現(xiàn)在,可不是憑著蠻力,而是遇到困難懂得躲避的智慧。 可是這個(gè)網(wǎng)站設(shè)計(jì)者也帶來(lái)了問(wèn)題,只要稍微在使用時(shí)遇到一點(diǎn)小困難、高門檻,用戶就選擇退縮,下意識(shí)放棄前進(jìn),即使這個(gè)門檻不高,邁過(guò)之后會(huì)更好。
這種“退縮”表現(xiàn)在購(gòu)物網(wǎng)站上,就是我們?cè)谫?gòu)物或者尋找某個(gè)商品時(shí),我們?yōu)g覽后再次來(lái)到時(shí)不知道上次的物品在哪兒,我就不想尋找了。 所以的給網(wǎng)站降低門檻,簡(jiǎn)潔準(zhǔn)確的導(dǎo)航把這個(gè)門檻降低了一點(diǎn),但還是不夠,用戶缺乏邁進(jìn)去的“勇氣”以及支撐勇氣的“熟悉”。這又得開一服藥,藥物是:
瀏覽歷史,購(gòu)物車,歷史購(gòu)買等界面。(網(wǎng)站說(shuō):我很熟悉你,你喜歡“xxx”,我能帶你找到上次自己走過(guò)的路)。
購(gòu)物用戶的“痛”:
購(gòu)物網(wǎng)站上的用戶(我親切的稱呼為 剁手黨)范圍很廣,群體很多,從事職業(yè)各不相同,但是我們剁手黨都有一些小特點(diǎn):
用戶在網(wǎng)站,更多的記住了“頁(yè)面層級(jí)”,而不是物理上的“我在哪兒”(雖然我們想記住)。 那種具體物理世界中的真實(shí)地址帶來(lái)的“踏實(shí)感”消失了。取而代之的是網(wǎng)站的信息扁平化帶給我們的“不踏實(shí)”。
購(gòu)物網(wǎng)站里的用戶是身處“網(wǎng)絡(luò)版的寂靜嶺”,我知道這里有路,但不確定是不是安全,我迷路了。
那么,網(wǎng)站的“病”治好了,用戶的“痛”怎么撫平呢?畢竟一切以用戶需求為根本。
首先,網(wǎng)站的標(biāo)配 —“書簽”。“我要給這個(gè)地方做個(gè)記號(hào)”,“我要占領(lǐng)這塊地區(qū)”。書簽讓我感覺(jué)網(wǎng)站在我手中緊握。
其次,瀏覽器的標(biāo)配 —“后退按鈕”。真實(shí)的人生多么希望有“后悔藥”,但是時(shí)間過(guò)去了就是過(guò)去了。但是虛擬網(wǎng)絡(luò)不是,“后退按鈕”就是后悔藥,我知道自己能回到“原來(lái)”,那是多么難得的一種“踏實(shí)” 。
療傷的藥
說(shuō)了網(wǎng)站的“病”和用戶的“痛”。開了治病和療傷的藥。
那么,回到我想說(shuō)的—“導(dǎo)航”。“導(dǎo)航”(或者說(shuō)是 “面包屑”)很重要。這其實(shí)給了用戶一種“得知自己位置”的感覺(jué)。 這就好比是一個(gè)身處叢林中的獵人手上的gps,只不過(guò)你的用鼠標(biāo)點(diǎn)擊,而不是手指按。這是難得的,看似不起眼的改變帶來(lái)的是用戶的心理安全感的建立。
這就好比一個(gè)孤獨(dú)的旅行背包客,手拿gps,腰上拴著一根“繩子”,我可能不熟悉剛進(jìn)入的購(gòu)物網(wǎng)站這個(gè)“繁華都市”,但我知道自己的方向,我知道怎么走;我有繩子拴著我,我知道怎么回。 有出路和有退路的道路似乎不“刺激”,但卻是“最安全”的。
導(dǎo)航的外貌:
導(dǎo)航,它的表達(dá)方式。它如同一個(gè)超市地面和貨架上的標(biāo)語(yǔ)。 超市是立體的“網(wǎng)”。而網(wǎng)站導(dǎo)航是平面的“鎖鏈”。二者有立體和線性的不同表現(xiàn)和感受,但卻有相同的功能 — 指引用戶的方向。
導(dǎo)航,它的字如其人。身處現(xiàn)實(shí)世界,我得知自己具體在哪兒,知道怎么去安全的地方 — 這是“安全感”的保障。
導(dǎo)航,它的簡(jiǎn)單清晰。導(dǎo)航的簡(jiǎn)單清晰帶來(lái)的是安全感,帶來(lái)的是信任,而信任帶來(lái)了難得的消費(fèi)。
導(dǎo)航的內(nèi)在:
導(dǎo)航的特點(diǎn)我想了很多,比如簡(jiǎn)單、突出、美觀等。但我想,導(dǎo)航不是藝術(shù)品,回歸到它最初的價(jià)值,導(dǎo)航 兩個(gè)最重要的內(nèi)在特點(diǎn):
“明顯”。明顯才能突出“線索”。不然導(dǎo)航就成了可有可無(wú),甚至是“噪聲”。
“準(zhǔn)確”。用戶急急忙忙的來(lái),更可能急急忙忙的走,因此需要準(zhǔn)確簡(jiǎn)潔的提醒和導(dǎo)航。
導(dǎo)航的作用:
首先,告訴用戶這里有什么。 導(dǎo)航讓我知道這里有什么,而不用花費(fèi)額外力氣去多想。
其次,告訴我們?nèi)绾问褂镁W(wǎng)站。 上購(gòu)物網(wǎng)站的用戶的目的性很強(qiáng),購(gòu)買某一種物品,導(dǎo)航的設(shè)計(jì)好壞決定了用戶購(gòu)買你而不是其他網(wǎng)站的東西需要跨過(guò)多大的門檻。
最后,它給了我們對(duì)于網(wǎng)站建造者的信心。 導(dǎo)航的好壞很大程度虎讓我對(duì)網(wǎng)站擁有者產(chǎn)生信任或懷疑。好的設(shè)計(jì)無(wú)疑是加分項(xiàng)。為用戶省時(shí)間,恰恰是購(gòu)物網(wǎng)站建立的目的吧。
那么說(shuō)了這么多,但是具體怎么操作呢?我想做一個(gè)網(wǎng)站,我該如何設(shè)計(jì)一個(gè)好的導(dǎo)航呢?
web導(dǎo)航的那些設(shè)計(jì)小習(xí)慣
十幾年的網(wǎng)頁(yè)設(shè)計(jì)走過(guò)了漫長(zhǎng)的道路,引用《don’t make me think》一書中的說(shuō)法,網(wǎng)站的那些導(dǎo)航經(jīng)歷了以下幾個(gè)階段:
1995—古生代 網(wǎng)站由程序員設(shè)計(jì),老式的html鏈接和按鈕
2000—西部蠻荒時(shí)代 web上的各種限制,字體丑陋,下劃線丑陋。難以辨別什么地方可以點(diǎn)擊。
2005—黃金時(shí)代 css為我們提供了優(yōu)雅的解決方案:只用顏色來(lái)表示可點(diǎn)擊的鏈接。
所以網(wǎng)站的導(dǎo)航設(shè)計(jì)要注意以下幾點(diǎn):( 4 個(gè)元素)
站點(diǎn)的名稱(騰訊網(wǎng),天貓,京東…),我知道自己當(dāng)前在哪兒,需要在每個(gè)頁(yè)面看到站點(diǎn)名稱或logo(通常在左上角)。
實(shí)用工具(購(gòu)物車…),幫助我們使用站點(diǎn)。
搜索框
欄目(當(dāng)前具體在哪兒),主導(dǎo)航條。
導(dǎo)航有統(tǒng)一格式。用戶進(jìn)入你的網(wǎng)站只需要學(xué)習(xí)一次就會(huì)永久使用了。
那么,一下網(wǎng)站導(dǎo)航的好壞如何測(cè)試或者評(píng)價(jià)呢?
網(wǎng)站導(dǎo)航的設(shè)計(jì)好不好? 想象一下突然給你一個(gè)陌生的頁(yè)面,看這個(gè)網(wǎng)頁(yè),自己?jiǎn)枂?wèn)自己:“我從這個(gè)網(wǎng)頁(yè)中知道了下面這些內(nèi)容了么?”:
這是什么網(wǎng)站?(站點(diǎn)id和logo)
我在哪個(gè)網(wǎng)頁(yè)上?(站點(diǎn)的面包屑或子一級(jí)頁(yè)面名稱)
這個(gè)網(wǎng)站主要欄目是什么?(標(biāo)簽)
我在導(dǎo)航系統(tǒng)的什么位置?(面包屑或標(biāo)簽想要的按鈕突出顯示)
我怎么搜索?我怎么去我想去的地方?(搜索框)
那如何測(cè)試一下我設(shè)計(jì)的導(dǎo)航欄如何呢?
“摘掉眼鏡”。想像一下近視眼摘掉眼鏡的痛苦,但是面對(duì)像素,這也是一個(gè)美麗的世界,細(xì)節(jié)被屏蔽掉了,完整的框架天然的呈現(xiàn)在你面前。 “模糊的視線”讓人能更好地發(fā)現(xiàn)自己設(shè)計(jì)的導(dǎo)航產(chǎn)品的不足。好的導(dǎo)航一目了然,清楚無(wú)誤地呈現(xiàn),依賴整體外觀,而不是看細(xì)節(jié)。
“拿在手里”。你可以打印出你設(shè)計(jì)的網(wǎng)頁(yè)導(dǎo)航,換個(gè)與平時(shí)觀察角度不同的方向,觀察并圈出導(dǎo)航,看看能否快速定位地方。
最后呢,想說(shuō)一說(shuō)。 一個(gè)購(gòu)物網(wǎng)站的最偉大之處在于第一次的打開瀏覽就給了新用戶一種難得的“信任感”。這種信任感的來(lái)源于產(chǎn)品設(shè)計(jì)的專業(yè)與細(xì)致。網(wǎng)站的一點(diǎn)小出錯(cuò),不匹配,用戶的感到挫折,信任感可能會(huì)降低唉。
精心雕琢的產(chǎn)品總是讓人愛(ài)不釋手,創(chuàng)意把握的那么細(xì)致準(zhǔn)確,有的放矢志的創(chuàng)新做到了準(zhǔn)確好。
我自己寫過(guò)策劃和計(jì)劃書,做過(guò)產(chǎn)品,寫過(guò)網(wǎng)站,設(shè)計(jì)過(guò)游戲,正因如此,我才明白一個(gè)好的產(chǎn)品背后的艱辛和不易。一次好購(gòu)物的體驗(yàn)其實(shí)是多環(huán)節(jié)共同努力的結(jié)果,產(chǎn)品人的不懈追求,從腦海中的創(chuàng)意到紙上的圖畫勾勒、到繪制低保真原型的思考、到高保值原型的張弛有力、到研發(fā)的艱難、到產(chǎn)品的推廣、物流的精心磨合和客服的細(xì)致設(shè)計(jì)等許多環(huán)節(jié)做到了全面開花。系統(tǒng)的全面完善是不容易的,購(gòu)物網(wǎng)站的產(chǎn)品人用行動(dòng)證明了自己的本事和才干,成全了用戶的好購(gòu)物體驗(yàn),打造了很多款融入生活的數(shù)字化產(chǎn)品,也成就了今天的互聯(lián)網(wǎng)繁榮的中國(guó)。
我不善于寫深?yuàn)W的觀點(diǎn),簡(jiǎn)單明了直接說(shuō)點(diǎn)干貨,我想是所有產(chǎn)品童鞋和研發(fā)童鞋最期待的文章。希望大家喜歡,歡迎批評(píng)指正哦!
分享題目:談?wù)勝?gòu)物網(wǎng)站導(dǎo)航欄設(shè)計(jì)的“小心思”
轉(zhuǎn)載來(lái)于:http://m.newbst.com/news/106617.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站導(dǎo)航等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容