對於那些架構(gòu)龐大、層次很深的網(wǎng)站,目錄的設(shè)計十分之重要。一旦設(shè)計得不好,很容易讓用戶有 lost 的感覺。要如何解決這個問題,小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網(wǎng)站的目錄設(shè)計手法,並在此跟大家分享一下所得。
設(shè)計師常常會以顏色、字體、位置大小來突出當(dāng)前被選中的選項(xiàng)。但對於多層次的網(wǎng)站,可能會有多過一個選項(xiàng)被選中的情況。雖然設(shè)計師可以同時突出多個項(xiàng)目,但當(dāng)被突出項(xiàng)目太多的時候,反而會造成用戶認(rèn)知的困難。正如 Digg 網(wǎng)站的頂部目錄(左方),分為上、中、下三列;三列中又包含五種不同功能的連結(jié),分別為
Join Digg / About / Login
Article category
Popular / Upcoming
Type of digg (News / Videos / Images)
Customize (因大小關(guān)係,不在截圖中)
這數(shù)目我覺得已經(jīng)很誇張了,當(dāng)中更可同時有三個項(xiàng)目被選中(Word & Business, Videos, Popular),並運(yùn)用了 7 種顏色(2種藍(lán)、4種不同深淺的綠、紅式的 icon),如此複雜的設(shè)計應(yīng)該很難為人一下子理解吧。Digg.com 的其他細(xì)節(jié)都做得很到位,唯獨(dú)是目錄太過瘋狂了一點(diǎn)。再看看 funP 的目錄又如何:
相較之下,我覺得 funP 的目錄清晰得多了。不是因?yàn)?funP 的功能比較簡單,實(shí)際上, funP 網(wǎng)站的層次比 Digg 更加深、功能更加多。funP 的目錄看上去更清晰,全因它把不相關(guān)的功能/連結(jié)都分別放在不同地方,而不像 Digg 般都堆在一起?纯聪路絻蓮垐D就會明白:
這個是 Digg.com 的,所有色塊都在上方。
當(dāng)然,說到架構(gòu)龐大,應(yīng)該沒人及得上 Yahoo! 了。下面是 Yahoo 的做法
[Before] Home page
[After] Content pgae
Yahoo 向來都會為不同服務(wù)設(shè)計一個獨(dú)立的頁面,而不是一種風(fēng)格套用到整個網(wǎng)站中。所以如果用戶想轉(zhuǎn)換服務(wù),必須點(diǎn)左上角的連結(jié)。你不會在一個子網(wǎng)站的目錄中找到其他服務(wù)的身影。雖然比較麻煩,比每個子網(wǎng)站的架構(gòu)都會因此簡明得多,funP 亦是用此方法。另外 Yahoo! TV 的目錄設(shè)計新穎,結(jié)合了 tab、breadcrumbs 於一身,雖然尚未被廣泛接受,但仍然很值得參考。
無論如何,有些問題是難光靠設(shè)計便能解決的。如果網(wǎng)站的架構(gòu)混亂,再好的設(shè)計也是難以起死回生,反之亦然。君不見 Apple.com 的網(wǎng)站只有 6 個 button 嗎?






