|
原文：http://uicom.net/blog/?p=762
facebook的信息架構(gòu)設(shè)計(jì)，是目前為止互聯(lián)網(wǎng)上我見(jiàn)過(guò)的最合理的信息架構(gòu)。
每次培訓(xùn)，我基本都需要拿20分鐘左右的時(shí)間來(lái)解析它，包括老的、新的、被抄襲的。 一直打算把這個(gè)解析過(guò)程寫(xiě)下來(lái)，但講的時(shí)候可以圖音并茂，寫(xiě)的時(shí)候確實(shí)表達(dá)起來(lái)很難。
今日權(quán)且一試，希望能把培訓(xùn)師講到的內(nèi)容表達(dá)出30%。(只寫(xiě)現(xiàn)在界面上表現(xiàn)出來(lái)的東西，不分析欄目劃分已經(jīng)擴(kuò)展性問(wèn)題了)
先看facebook老版界面的信息架構(gòu)：（在1024分辨率里，圖片寬度不能完全顯示，建議單獨(dú)打開(kāi)圖片看）
點(diǎn)擊放大
大架構(gòu)的發(fā)展和變遷過(guò)程：
1、最開(kāi)始，facebook的整個(gè)信息架構(gòu)主要分成三個(gè)部分：“系統(tǒng)核心導(dǎo)航區(qū)”（如上圖，藍(lán)色部分。包括LOGO和兩個(gè)全部導(dǎo)航）、“應(yīng)用導(dǎo)航區(qū)”（如上圖，黃色部分。包括一個(gè)全局應(yīng)用(搜索)和所有的應(yīng)用列表）、“內(nèi)容顯示區(qū)”（如上圖，橙色部分。主要分成局部導(dǎo)航、主內(nèi)容、輔助內(nèi)容三個(gè)大部分，有N多主要內(nèi)容）。
由于“系統(tǒng)核心導(dǎo)航區(qū)”、“應(yīng)用導(dǎo)航區(qū)”的常態(tài)存在和內(nèi)容繁多，在用戶使用時(shí)經(jīng)常會(huì)干擾用戶對(duì)主要內(nèi)容的關(guān)注。 所以，facebook在視覺(jué)設(shè)計(jì)上，特意通過(guò)錯(cuò)位特別突出了“內(nèi)容顯示區(qū)”（如上圖，橙色部分。我看到有些設(shè)計(jì)師說(shuō)“facebook的視覺(jué)很爛，把那個(gè)位置扭曲了很傻”，其實(shí)他們根本沒(méi)有看出設(shè)計(jì)者的意圖，很傻�。�
2、后來(lái)，facebook添加了“協(xié)作翻譯”，這是一個(gè)全局功能。按照一般的設(shè)計(jì)思路，這個(gè)“翻譯”的位置選擇可以：放在“全部導(dǎo)航3（設(shè)置）”的位置，或作為“全部導(dǎo)航2（應(yīng)用）”的一個(gè)常態(tài)項(xiàng)目。
但facebook沒(méi)有這么做，為了更好的表現(xiàn)其牛逼的UGC魅力，facebook的設(shè)計(jì)師大大加重了“翻譯”在導(dǎo)航上的比重�！安粋惒活悺钡陌堰@個(gè)應(yīng)用，突出在了“內(nèi)容顯示區(qū)”的右上角，同時(shí)在“全部導(dǎo)航3（設(shè)置）”里加了一個(gè)語(yǔ)言切換的導(dǎo)航（后來(lái)大概是發(fā)現(xiàn)“語(yǔ)言切換”的使用頻率很少，現(xiàn)在給調(diào)換到了底部版權(quán)信息的右側(cè)）。
3、再后來(lái)，facebook推出了IM功能。對(duì)于facebook來(lái)說(shuō)這是一個(gè)常態(tài)應(yīng)用，在信息架構(gòu)上必須常態(tài)存在。于是他們把“即時(shí)通訊”結(jié)合了“信息通知”一起作成了“狀態(tài)欄”的模式。 （我猜想，這個(gè)時(shí)候facebook的設(shè)計(jì)師們已經(jīng)有了“操作系統(tǒng)”的設(shè)想）
這是一個(gè)很藝術(shù)性的設(shè)計(jì)，處理的非常好。而且IM本身設(shè)計(jì)做的非常輕巧易用。 在此之前我曾經(jīng)猜測(cè)，他們可能會(huì)把IM放到“系統(tǒng)核心導(dǎo)航區(qū)”的“收件箱”的位置，結(jié)果我錯(cuò)了，他們找到了更好的設(shè)計(jì)方式。
4、如今，由于“系統(tǒng)核心導(dǎo)航區(qū)”（如上圖，藍(lán)色部分）、“應(yīng)用導(dǎo)航區(qū)”（如上圖，黃色部分）是常態(tài)存在的內(nèi)容，占據(jù)了界面很大比例的位置，再加上內(nèi)容顯示區(qū)（如上圖，橙色部分）本身還需要一些“關(guān)聯(lián)導(dǎo)航”“友好導(dǎo)航”已經(jīng)“標(biāo)題”的內(nèi)容，導(dǎo)致每個(gè)頁(yè)面真正展示“內(nèi)容”的區(qū)域很少很少。
作為一個(gè)網(wǎng)站，這沒(méi)有什么大問(wèn)題。但作為一個(gè)“應(yīng)用平臺(tái)”，這無(wú)疑有很多的障礙，界面內(nèi)容展現(xiàn)嚴(yán)重受限，用戶的視覺(jué)總是浪費(fèi)“常態(tài)導(dǎo)航”上。想一想如果你的操作系統(tǒng)界面，1/3空間長(zhǎng)期被系統(tǒng)菜單占據(jù)，你會(huì)不會(huì)崩潰？
我對(duì)老版設(shè)計(jì)的，幾個(gè)主要評(píng)價(jià)：
1、邏輯清晰，層次分明嚴(yán)謹(jǐn)。擴(kuò)展性好。但在內(nèi)容呈現(xiàn)上，缺乏創(chuàng)新。
2、facebook整個(gè)網(wǎng)站的核心是“我的”，這就是他頂部系統(tǒng)核心導(dǎo)航區(qū)（如第一張圖，藍(lán)色部分）。另外，頂部還有“全部導(dǎo)航3（設(shè)置）”。整個(gè)頂部是網(wǎng)站的核心，用戶不可能被用戶或者第三方改變，也是facebook的官方保留“區(qū)域”。
但，這里有個(gè)細(xì)節(jié)他們一直躡手躡腳沒(méi)有真正放開(kāi)，就是那個(gè)權(quán)宜之計(jì)的“home”。
事實(shí)上現(xiàn)在大部分用戶返回首頁(yè)都會(huì)點(diǎn)擊logo，facebook在主導(dǎo)航上取消了“home”，但又不敢完全取消，于是在“全部導(dǎo)航3（設(shè)置）”那個(gè)區(qū) 域前面加了一個(gè)“home”，而且還把這個(gè)鏈接和logo的鏈接作了區(qū)分，一直保持著對(duì)數(shù)據(jù)的檢測(cè)（包括最新的信息架構(gòu)設(shè)計(jì)也一樣作了鏈接區(qū)分，在檢測(cè)數(shù) 據(jù)。有興趣人可以看看logo的鏈接和home的鏈接地址不一樣）
3、facebook的主要導(dǎo)航其實(shí)是“應(yīng)用導(dǎo)航區(qū)”。這里影響了主要內(nèi)容區(qū)的顯示。
“系統(tǒng)核心導(dǎo)航區(qū)”和“應(yīng)用導(dǎo)航區(qū)”包圍著內(nèi)容顯示區(qū)的做法，結(jié)構(gòu)和邏輯都很清晰，而且容易理解。
4、主要內(nèi)容區(qū)有一個(gè)設(shè)計(jì)一直存在爭(zhēng)議：
比如，在“圖片”的頁(yè)面，facebook加了兩個(gè)鏈接“我的圖片”“有我的圖片”，這兩個(gè)鏈接被處理成了“友好導(dǎo)航”，用戶點(diǎn)擊后到了新的界面，新的界面無(wú)法返回當(dāng)前“圖片”的應(yīng)用。
但，就國(guó)內(nèi)用戶（我不是很相信在這個(gè)地方存在國(guó)內(nèi)外用戶使用習(xí)慣的偏差）的使用習(xí)慣來(lái)看，這兩個(gè)鏈接應(yīng)該被當(dāng)作“關(guān)聯(lián)導(dǎo)航”甚至“局部導(dǎo)航”處理。這也是UCH在抄襲facebook時(shí)做過(guò)的為數(shù)不多的“好改動(dòng)”之一。
出處：白鴉的blog
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 淺析facebook的信息架構(gòu) [2]
|
第 1 頁(yè) 淺析facebook的信息架構(gòu) [1]
第 2 頁(yè) 
