[一盞課堂IT]國外資深設計師眼中的信息架構

什麼是信息架構?

簡單來說,信息架構(IA,Information Architecture)是你設計的APP或網站中所有信息的結構。當我們仔細考慮產品的信息結構後,我們的產品會更容易被理解和瀏覽。這就好比一個作家在撰寫故事之前,會先列一個大綱,或者一個建築師會先繪製藍圖,再選擇用什麼顏色的油漆。

實際上,任何數字產品、網站、應用程序都只是一個信息的集合。信息架構所要做的就是以一種讓人易於理解的方式整理這些信息,並且可以隨著應用程序或網站的增長而擴展(比如,添加功能的時候)。

良好的信息架構使APP或網站的結構穩定。這就像一座建築。經過深思熟慮,把關鍵支柱放在合適的位置,我們才會有堅實的基礎。當有堅實的基礎之後,建築才可以繼續往上建設,而不會搖搖欲墜。

例子

這裡以Spotify為例。我們可以解構它的UI,揭示隱含在表面之下的信息架構。

信息架構為什麼這麼重要?

如果你想讓你的設計看起來簡潔和目標明確,那你就需要從簡潔和目標明確的信息架構開始。考慮信息架構將促使我們去進行思考,這樣,我們的用戶就不用思考。當我們在考慮一個APP的信息架構的時候,我們被迫地在檢查它。我們不把它看作是頁面或者像素的集合,而把它看作是一個抽象概念的集合:名詞和動詞。

這樣,你很快就能發現,無論APP或網站只不過是信息。我們將信息組合起來的方式決定了人們如何導航和使用你的產品的難易程度。

這就和構建一個思想、一個句子、一個想法一樣。組成句子的名詞和動詞的排列方式決定了信息被接收的難易程度。

APP也是一樣的。一個APP只不過是名詞和動詞的集合:「事物」「我對於事物能採取的行動」。名詞是真正重要的東西。它們組成了你的APP。你的APP中的名詞可能如下:

· 歌曲

· 文件夾

· 用戶

· 照片

· 餐廳

· 錢

· 朋友

另一方面,動詞,是用戶可以對那些名詞採取的行動。下面有一些例子:

· 播放一首歌曲

· 創建一個文件夾

· 創建一個用戶

· 分享照片

· 評價餐廳

· 轉錢

· 添加朋友

所以通常,在APP中我們可以遵循某種模式。大部分屏幕(大約80%)用於展示「名詞」,另外一小部分屏幕用於展示「動詞」—用戶對於那些名詞可以採取的行動。

好的信息架構是通用的和永恆的

隨著時間的推移,我們發現好的信息架構是通用的。某些原則和模式似乎總是被廣泛接受。舉一個明顯的例子,在APP頂部的導航欄中的東西應該是最重要的。以Spotify為例,這些重要的東西就是「Home」「Browse」「Radio」「Your Library」。那麼,你的APP中最重要的是什麼呢?嘗試將其限制在3到5項。

當你發現不管信息的具體內容是什麼,大多數信息會採用類似的結構時,事情變得有趣起來。以一個我們常見的模式為例,當我們想要導航到信息架構的更深層的地方時,我們會從大範圍的事物的集合開始,再層層深入到某個特定的事物。這通常被稱為「向下展開」(drilling down)。

可循的模式

一旦我們設計了足夠多的APP,網站和數字產品,我們開始發現這些信息架構在一定程度上是相同的,只是信息的名稱改變了而已。一個好的設計師知道如何從這些經過考驗的信息結構開始設計。這些結構,是不會被它們所包含的信息內容所影響的。

音樂

照片

其他事物

以此類推

方法都是相同的!

所以,我們從信息架構開始。接著,我們開始將內容信息「倒入」這些架構容器中。這時,我們需要設計表達的方式來體現其中包含的信息的獨特性。例如,照片一類的信息更加視覺化,而信用卡交易這類信息則是基於數據的。它們的展現方式是不同的。

構建簡潔優質的信息架構的技巧

1. 清楚哪些是重要的(哪些不是)

不要害怕降低某些事情的重要性。這是必須的,這樣才能最大限度地提高其他事情的重要性。有對比才能體現清晰度。當可以的時候,刪除不重要的信息,當信息不能再被刪除的時候,最小化展示信息。

2. 以模塊化的角度思考信息

想想那些信息是一類的。例如,你的APP的「賬戶中心」就很可能是包含和用戶相關的所有信息的好地方,而不是將各種用戶相關信息散落在APP的各個地方。

3. 不要懼怕再次檢查你的信息架構

確保在你的APP或網站發展和成長的時候,經常重新審視你的信息架構。團隊經常會忽視維護他們的信息架構的重要性,因為他們認為要麼全部投入要麼就不要做這件事。他們經常會說:「我們也想清理我們的信息架構,但是我們沒有資源去重新設計整個APP。」記住,要用發展的眼光來看待問題,可能現在就有一些事情你可以輕鬆做到來改善你APP的信息的架構,從而提可用性。


推薦閱讀:

如何讓你的PPT看起來價值十萬?
如何設計一版高調的宣傳冊封面——新中式版式設計教程
局部彩色筆丨讓色彩奪眶而出,抓住你的眼球
平面作品集中,字體設計需要哪些必備"知識點"?
404頁面也能讓用戶對網站路轉粉?看看這6個設計思路吧!

TAG:平面設計 | 設計 | 設計思想 |