facebook的資訊架構評析

來源:互聯網
上載者:User

原文:http://uicom.net/blog/?p=762

facebook的資訊架構設計,是目前為止互連網上我見過的最合理的資訊架構。

每次培訓,我基本都需要拿20分鐘左右的時間來解析它,包括老的、新的、被抄襲的。 一直打算把這個解析過程寫下來,但講的時候可以圖音並茂,寫的時候確實表達起來很難。

今日權且一試,希望能把培訓師講到的內容表達出30%。(唯寫現在介面上表現出來的東西,不分析欄目劃分已經擴充性問題了)

先看facebook老版介面的資訊架構:(在1024解析度裡,圖片寬度不能完全顯示,建議單獨開啟圖片看)


點擊放大

大架構的發展和變遷過程:

1、最開始,facebook的整個資訊架構主要分成三個部分:“系統核心導航區”(如上圖,藍色部分。包括LOGO和兩個全部導航)、“應用導航區”(如上圖,黃色部分。包括一個全域應用(搜尋)和所有的應用列表)、“內容顯示區”(如上圖,橙色部分。主要分成局部導航、主內容、輔助內容三個大部分,有N多主要內容)。

由於“系統核心導航區”、“應用導航區”的常態存在和內容繁多,在使用者使用時經常會干擾使用者對主要內容的關注。 所以,facebook在視覺設計上,特意通過錯位特別突出了“內容顯示區”(如上圖,橙色部分。我看到有些設計師說“facebook的視覺很爛,把那個位置扭曲了很傻”,其實他們根本沒有看出設計者的意圖,很傻!)

2、後來,facebook添加了“協作翻譯”,這是一個全域功能。按照一般的設計思路,這個“翻譯”的位置選擇可以:放在“全部導航3(設定)”的位置,或作為“全部導航2(應用)”的一個常態項目。
但facebook沒有這麼做,為了更好的表現其牛逼的UGC魅力,facebook的設計師大大加重了“翻譯”在導航上的比重。“不倫不類”的把這個應用,突出在了“內容顯示區”的右上方,同時在“全部導航3(設定)”裡加了一個語言切換的導航(後來大概是發現“語言切換”的使用頻率很少,現在給調換到了底部著作權資訊的右側)。

3、再後來,facebook推出了IM功能。對於facebook來說這是一個常態應用,在資訊架構上必須常態存在。於是他們把“即時通訊”結合了“語音總機”一起作成了“狀態列”的模式。  (我猜想,這個時候facebook的設計師們已經有了“作業系統”的設想)

這是一個很藝術性的設計,處理的非常好。而且IM本身設計做的非常輕巧易用。 在此之前我曾經猜測,他們可能會把IM放到“系統核心導航區”的“收件匣”的位置,結果我錯了,他們找到了更好的設計方式。

4、如今,由於“系統核心導航區”(如上圖,藍色部分)、“應用導航區”(如上圖,黃色部分)是常態存在的內容,佔據了介面很大比例的位置,再加上內容顯示區(如上圖,橙色部分)本身還需要一些“關聯導航”“友好導航”已經“標題”的內容,導致每個頁面真正展示“內容”的地區很少很少。
作為一個網站,這沒有什麼大問題。但作為一個“應用平台”,這無疑有很多的障礙,介面內容展現嚴重受限,使用者的視覺總是浪費“常態導航”上。想一想如果你的作業系統介面,1/3空間長期被系統功能表佔據,你會不會崩潰?

我對老版設計的,幾個主要評價

1、邏輯清晰,層次分明嚴謹。擴充性好。但在內容呈現上,缺乏創新。

2、facebook整個網站的核心是“我的”,這就是他頂部系統核心導航區(如第一張圖,藍色部分)。另外,頂部還有“全部導航3(設定)”。整個頂部是網站的核心,使用者不可能被使用者或者第三方改變,也是facebook的官方保留“地區”。

但,這裡有個細節他們一直躡手躡腳沒有真正放開,就是那個權宜之計的“home”。
事實上現在大部分使用者返回首頁都會點擊logo,facebook在主導航上取消了“home”,但又不敢完全取消,於是在“全部導航3(設定)”那個區 域前面加了一個“home”,而且還把這個連結和logo的連結作了區分,一直保持著對資料的檢測(包括最新的資訊架構設計也一樣作了連結區分,在檢測數 據。有興趣人可以看看logo的連結和home的連結地址不一樣)

3、facebook的主要導航其實是“應用導航區”。這裡影響了主要內容區的顯示。
“系統核心導航區”和“應用導航區”包圍著內容顯示區的做法,結構和邏輯都很清晰,而且容易理解。

4、主要內容區有一個設計一直存在爭議:
比如,在“圖片”的頁面,facebook加了兩個連結“我的圖片”“有我的圖片”,這兩個連結被處理成了“友好導航”,使用者點擊後到了新的介面,新的介面無法返回當前“圖片”的應用。
但,就國內使用者(我不是很相信在這個地方存在國內外使用者使用習慣的偏差)的使用習慣來看,這兩個連結應該被當作“關聯導航”甚至“局部導航”處理。這也是UCH在抄襲facebook時做過的為數不多的“好改動”之一。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。