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