【移動應用開發(fā)技術(shù)】如何實現(xiàn)facebook的信息架構(gòu)評析

【移動應用開發(fā)技術(shù)】如何實現(xiàn)facebook的信息架構(gòu)評析

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