|
再看看facebook現(xiàn)在新的信息架構(gòu)設(shè)計(jì)：
如上所說，老版的信息架構(gòu)顯示了facebook的主要內(nèi)容展示區(qū)域。使每個(gè)界面都背負(fù)了嚴(yán)重的“導(dǎo)航任務(wù)”。
于是facebook開始嘗試改變。剛開始，他們?cè)噲D拉寬整個(gè)內(nèi)容顯示區(qū)的空間，把應(yīng)用導(dǎo)航區(qū)和常態(tài)提示信息放到系統(tǒng)核心導(dǎo)航區(qū)下面，做成windows“開始菜單”的模式。（這個(gè)版本有些人看到過，UCH現(xiàn)在準(zhǔn)備出的新版抄襲了這個(gè)設(shè)計(jì)。在這里不做詳細(xì)評(píng)價(jià)）
（也許他們覺得這樣還是太啰嗦，內(nèi)容顯示區(qū)還是不夠大），現(xiàn)在他們把應(yīng)用導(dǎo)航區(qū)合并到了系統(tǒng)核心導(dǎo)航區(qū)里。 不僅是內(nèi)容布局上作了改變，連欄目的規(guī)劃都有了新的變化。（這個(gè)版本可以在“http://www.new.facebook.com”看到）
點(diǎn)擊放大
主要變化：
1、將所有全部導(dǎo)航和引用壓縮到頂部的一個(gè)區(qū)域，甚至不惜大舉壓縮LOGO尺寸，讓這個(gè)區(qū)域盡可能的小。（如圖，藍(lán)色區(qū)域）
當(dāng)然，這樣的大變化也伴隨著其欄目劃分的重新規(guī)劃。
2、將廣告從左邊拿到右邊。盡可能的放大并在主要的視覺“焦點(diǎn)區(qū)”突出具體的頁面內(nèi)容。
3、保持IM和通知的常態(tài)顯示，并將“翻譯”合并到一起。
我對(duì)新版設(shè)計(jì)的，幾個(gè)主要評(píng)價(jià)：
1、新的信息架構(gòu)設(shè)計(jì)其實(shí)面臨著很大的調(diào)整。要從一個(gè)傳統(tǒng)網(wǎng)站到一個(gè)應(yīng)用平臺(tái)作專門，確實(shí)很難很難。對(duì)于一般的界面設(shè)計(jì)師來說，這個(gè)任務(wù)很難完成。但facebook的設(shè)計(jì)師做到了，而且從時(shí)間上來看他們很有前瞻性，呈現(xiàn)層的設(shè)計(jì)甚至走到了策略之前。
2、新的設(shè)計(jì)改的大膽，頁面就應(yīng)該表現(xiàn)出“系統(tǒng)”的感覺。 每一個(gè)應(yīng)用就像一個(gè)軟件�！皯�(yīng)用”列表就應(yīng)該合并起來，“應(yīng)用”和“應(yīng)用”之間的切換根本不需要那么快捷。
3、頂部藍(lán)色的主導(dǎo)航區(qū)應(yīng)該再加寬（只要不是100%寬度就行）、壓低，完全做成狀態(tài)欄的樣式。
4、把應(yīng)用夾雜到“我的”一些選項(xiàng)中間不合理。特別是放在好友和收件箱中間。
如果是我設(shè)計(jì)，我會(huì)把LOGO變成“開始菜單”，把應(yīng)用放進(jìn)去。
最后，看看一些抄襲者的作品：（是誰我就不說了）
（作品1) 點(diǎn)擊放大
點(diǎn)評(píng)：
這個(gè)設(shè)計(jì)單看一個(gè)頁面就有問題，屬于層次混亂。 單個(gè)頁面的邏輯不順暢。
用戶經(jīng)常不知道自己在哪里。
而且沒有將關(guān)聯(lián)導(dǎo)航和友好導(dǎo)航區(qū)分開，次序和邏輯都交代的十分混亂。
（作品2) 點(diǎn)擊放大
點(diǎn)評(píng)：
這是某社區(qū)專家的網(wǎng)站結(jié)構(gòu)圖，單看他的頁面沒有任何問題，結(jié)構(gòu)清晰，層次分明。
但，用戶只要一使用，就暈乎。改動(dòng)過的信息架構(gòu)（其實(shí)只是把內(nèi)容區(qū)的“關(guān)聯(lián)導(dǎo)航（操作和設(shè)置）”的放到了“全局導(dǎo)航2（應(yīng)用）的上面”）使用起來極其不流暢。（為什么不流暢，在這里不多解釋）。
該網(wǎng)站從上線到現(xiàn)在一直充斥著一類投訴：靠，怎么加入群呀？ 怎么設(shè)置群？ ….
雖然是借用facebook的信息機(jī)構(gòu)，但足見抄襲之失敗。雖然只是一個(gè)“關(guān)聯(lián)導(dǎo)航（操作和設(shè)置）”的變化而已。
此文為拋磚引玉，我想說的內(nèi)容大概只表達(dá)了1/3不到。（這里只說了布局，并未說欄目、導(dǎo)航劃分的原則、延續(xù)性、擴(kuò)展性等問題）
結(jié)束，簡(jiǎn)單總結(jié)：
好的信息架構(gòu)設(shè)計(jì)，可以清楚的表現(xiàn)產(chǎn)品定位，可以清楚的闡述內(nèi)容層次和關(guān)系，可以在使用中保持流暢，并能夠讓用戶迅速的熟悉。
- 所謂“清楚的表現(xiàn)產(chǎn)品定位”：用戶一看網(wǎng)站的信息架構(gòu)，就知道這個(gè)網(wǎng)站是干什么的，我是否應(yīng)該留在這里，我在這里能干什么應(yīng)該怎么開始去用。
- 所謂 “清楚的闡述內(nèi)容層次和關(guān)系”：用戶一看網(wǎng)站的信息架構(gòu)，就清楚知道頁面上有多少內(nèi)容，內(nèi)容和內(nèi)容之間的關(guān)系是什么，什么類型的內(nèi)容在什么位置。
- 所謂“可以在使用中保持流暢”：讓用戶在使用的過程中感覺不到“跳轉(zhuǎn)”和“障礙”，感覺自己在一個(gè)平和世界里暢游，非常流暢，不跳動(dòng)、不卡機(jī)。
- 所謂“能夠讓用戶迅速的熟悉”：用戶看到你的第一個(gè)界面時(shí)，也許需要找一下他需要的內(nèi)容在那里，也許會(huì)覺得這個(gè)網(wǎng)站陌生、有距離。但當(dāng)他很自然的看到第二個(gè)、第三個(gè)界面后，應(yīng)該感覺“這個(gè)網(wǎng)站很熟悉”，需要任何內(nèi)容時(shí)都不用去“找”，很自然的就能知道什么類型的內(nèi)容在什么位置。
PS:
我敢斷言，“呈現(xiàn)層的信息架構(gòu)和導(dǎo)航”必將成為未來網(wǎng)站產(chǎn)品設(shè)計(jì)中的核心工作。其學(xué)問之深并非一兩本書能說清楚，更不是一兩篇blog能表達(dá)明白的。
歡迎有興趣者深入交流。
本文鏈接：http://www.95time.cn/design/doc/2008/6019.asp 
出處：白鴉的blog
責(zé)任編輯：bluehearts
上一頁 淺析facebook的信息架構(gòu) [1] 下一頁
|
第 1 頁 
第 2 頁 淺析facebook的信息架構(gòu) [2]
