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