論“面包屑”的倒掉_網(wǎng)頁設(shè)計教程
推薦:專題頁面別把導(dǎo)航忘了很多網(wǎng)站為了某個活動、節(jié)日什么的,經(jīng)常都會做一個專題頁面。這些頁面往往都和網(wǎng)站其他的頁面不同,不用那些循規(guī)蹈矩的布局,有漂亮的大塊圖片、甚至是聲色
很久很久以前,在大森林的邊上住著一個貧窮的樵夫,他妻子和兩個孩子與他相依為命。他的兒子名叫漢賽爾,女兒名叫格萊特。后來樵夫的妻子去世了,他又給孩子們?nèi)⒘艘粋后母。后母計劃把兩個孩子帶到森林的深處,然后趁他們睡著的時候跑掉。漢賽爾無意中知道了后母的計劃,于是偷偷地把一塊面包藏在了口袋里。在去森林的路上,漢賽爾靜靜地捏碎了他的面包,并不時地停下腳步,把碎面包屑撒在路上。后母順利地趁孩子們睡著的時候溜掉了,漢賽爾和格萊特醒來已是一片漆黑。漢賽爾安慰他的妹妹說:“等月亮一出來,我們就看得見我撒在地上的面包屑了,它一定會指給我們回家的路�!钡钱�(dāng)月亮升起來時,他們在地上卻怎么也找不到一點面包屑了,原來它們都被那些在樹林里、田野上飛來飛去的鳥兒一點點地啄食了。
這是《格林童話》中所描述的與面包屑有關(guān)的故事。不知道從哪一天開始,漢賽爾的面包屑開始靜靜地出現(xiàn)在某個網(wǎng)站的導(dǎo)航位置上,然后迅速地撒遍了全世界,變成了今天大家所熟知的“面包屑導(dǎo)航”。
在童話里,面包屑是漢賽爾在進(jìn)入森林的路中偷偷撒下的,這是一種“歷史記錄”的應(yīng)用方式,目的是幫助你追溯來路,因而它應(yīng)該是一種線性的導(dǎo)航方式。不過在網(wǎng)頁的應(yīng)用中,“追溯來路”這件事瀏覽器已經(jīng)做得足夠好了,所以“面包屑”慢慢地就變成用來表達(dá)內(nèi)容歸屬關(guān)系的界面元素,也就是我們經(jīng)�?吹降摹爸鞣诸�>一級分類>二級分類>三級分類>……>最終內(nèi)容頁面”這樣的東東。
那么這種元素還具有導(dǎo)航作用嗎?假如用于導(dǎo)航,它有什么問題嗎?為什么我覺得它應(yīng)該“倒(dǎo)掉”呢?
再回頭看看所謂面包屑的來歷和它采用的形式吧,它是漢賽爾沿路撒下的一個個“點”,然后連成的“線”,這在信息架構(gòu)中稱為“線性結(jié)構(gòu)”。一對比就知道,撒到網(wǎng)站上的面包屑是有先天缺陷的,這個先天缺陷正是這個“線性”。用“線性”的方式去表達(dá)本應(yīng)該是“樹形”甚至是“矩陣形”的結(jié)構(gòu),就似乎讓三歲的小朋友做詩寫文章一樣,結(jié)果不是把小朋友逼瘋就是把家長急瘋。
可能有人會說,面包屑不僅僅是用來表示信息的層級關(guān)系,它還能給用戶位置的指示,同時引導(dǎo)用戶點擊更高層次的頁面。假如你這么說,那么恭喜你,你和可用性之父Jakob Nielson想得差不多(Breadcrumb Navigation Increasingly Useful)。在這篇文章里,Jakob認(rèn)為面包屑還有點作用的主要原因,是因為它是一件做起來不太費(fèi)力、占用面積很小、沒有什么學(xué)習(xí)成本的事情。
但是所有的這些,都是建立在信息架構(gòu)足夠清楚、足夠穩(wěn)固同時又足夠靈活的基礎(chǔ)之上的。
假如網(wǎng)站信息太豐富、太復(fù)雜,有些內(nèi)容不能明確劃分到某個類別中,面包屑就會變成雞肋。這方面的典型就是門戶網(wǎng)站,比如說這個: 娛樂圈10大發(fā)嗲美女 ,很明顯就是為了面包屑而面包屑。
假如你的網(wǎng)站信息內(nèi)容屬性不明確,大部分信息都同時屬于多個類別,面包屑就會變成一個涉及到復(fù)雜判定和算法的技術(shù)問題。這種情況的代表就是電子商務(wù)、社區(qū)類網(wǎng)站(沒找到例子,因為要實現(xiàn)太難了)。
假如你的網(wǎng)站結(jié)構(gòu)夠清楚,內(nèi)容也夠穩(wěn)定,那么極有可能是企業(yè)或個人網(wǎng)站(比如UCDChina或你自己的博客)。而這樣一個網(wǎng)站,不管規(guī)模大小,用主導(dǎo)航就能解決位置感的問題,也沒有必要單獨留出一行來放置面包屑。這方面做得比較好的例子是微軟和蘋果(這么大的公司都放棄面包屑了,還不能說明問題嗎?),反面例子就可以看看這個: IBM Support & downloads - Documentation - United States ,面包屑沒有幫助我找到想找的東西,反而讓我更糊涂了。
不過,關(guān)于“打倒面包屑”這件事仍然有一個前提,那就是你的主導(dǎo)航要做得足夠好。之前提到的IBM網(wǎng)站,最大的問題就是沒有在主導(dǎo)航上標(biāo)明當(dāng)前位置(技術(shù)問題?設(shè)計問題?)。由于這個原因,不得不增加面包屑來表示層級關(guān)系。在面包屑的先天缺陷和主導(dǎo)航設(shè)計缺失的雙重努力下,用戶點擊“Support & downloads”以后迅速丟失了上一個頁面“Documentation”的位置(不信你在 這個頁面上 試一下回去的難度)。在這個例子中,面包屑還不如URL本身來得清楚。
反過來再想,我們其實可以有這樣一個大膽的推論:凡是出現(xiàn)面包屑的網(wǎng)站,基本上都是導(dǎo)航系統(tǒng)設(shè)計得比較差勁的。
一直我們都認(rèn)為,改進(jìn)措施≠做加法,設(shè)計是“越減越妙”的,面包屑就是應(yīng)該第一個從導(dǎo)航設(shè)計中減掉的元素。我相信,隨著技術(shù)的發(fā)展、信息架構(gòu)和用戶需求的多樣化,面包屑最終會靜靜地退出歷史舞臺。
分享:導(dǎo)航的流行趨勢這不僅僅是一個信息爆炸的時代,也是一個服務(wù)爆炸的時代。一切都是因為互聯(lián)網(wǎng),隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,信息的增多,服務(wù)的增多,用戶需求的多樣化。怎樣讓用戶
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會:打假,打出阿里的新未來
- 實踐分享:ACCESS數(shù)據(jù)庫導(dǎo)入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉(zhuǎn)ORACLE數(shù)據(jù)庫分享
- CDN.net免費(fèi)CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程(二) 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長:75%投放在iOS平臺
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關(guān)鏈接:
- 教程說明:
網(wǎng)頁設(shè)計教程-論“面包屑”的倒掉
。