6 Common Mobile IA Patterns｜ 6種常見的行動端資訊架構模式

‍

1. Hierarchy ｜ 階層式

顧名思義，階層式資訊架構中的頁面之間存在著明顯的層級結構關係。這是內容繁重的網站的標準類型，並為用戶提供多種導航路徑。 該資訊架構傾向於為移動螢幕等較小的領域提供太多鏈接和選項，因此，此導航幾乎僅用於桌面，但仍然可以找到適用於階層式的移動網站和應用程式。

注意：避免佔用太多空間，尤其是在移動設備

‍

‍

2. Hub-spoke ｜ 輻射式

輻射樣式以主屏幕充當樞紐，提供使用者便於跳轉的中央式索引，在 iOS 系統中很常見 e.g. 捷徑、App 資料庫。 主頁面叫做 Hub，區塊叫做 spoke。打開了一個spoke後想要再打開另一個 spoke 需要線回到首頁hub才能執行動作。目的就是讓使用者專心於單一任務。

注意：此模式不利於使用者進行多工操作

‍

‍

3. Nested doll ｜ 俄羅斯娃娃

俄羅斯娃娃式資訊架構 (IA) 是線性的，由首頁不段往下遞進。是最常見的移動導航類型之一，非誠適合用於小螢幕也能幫助使用者專注於特定內容。 它也可以說是響應式設計的最佳模型之一，因為它可以折疊上述的階層式導航。 使用者只需點擊感興趣的項目即可顯示其他菜單。

注意：無法橫嚮導航，e.g. 使用者無法在不同內容中快速切換

‍

‍

4. Tabbed view ｜ 圖標視圖

目前最為流行的一種資訊架構 (IA)，e.g. iPhone 內建的音樂、照片、App Store 都是採用這種形式。這種形式透過工具欄目錄集合為一系列的內容。這樣使用者便可以在第一次打開 app 時快速看過、了解 app 的全部功能。

注意：這種樣式不太適合有複雜結構的 app

‍

‍

5. Bento box / Dashboard | 便當盒 / 儀表板

以日本午餐盒命名的便當盒是一種儀表板導航，透過元件展示相關工具或內容的部分訊息一次概覽多條動態信息，再把更詳盡的內容連結到索引介面。該資訊架構 (IA) 看起來與輻射式資訊架構 (IA) 很相似，不過以每個區塊的面積大小看，儀表板式資訊架構 (IA) 給每個區域做了優先級區分。這在健身和金融應用程序中很常見，應用程序內會生成大量數據，用戶通常需要概覽。

注意：可能會有信息過載的情況

‍

‍

6. Filtered view ｜ 篩選視圖

篩選視圖提供使用者更大的自由去瀏覽內容，用篩選的方式來切換不同內容，從而在一系列的數據中導航。篩選同分面搜索方法一樣，是一種很棒的適合使用者查詢內容的方法。適用於內容數量龐大的應用或網站，諸如文章，圖像和視頻。

注意：需要適當的劃分篩選項，避免選項過載

‍

‍

任何應用程序或網站的資訊架構 (IA) 基本上都是其中信息的輪廓；它是我們應用內容的結構。設計資訊架構 (IA) 的主要目的是使其導航簡單直觀。這個過程非常類似於建築師如何投入時間和精力來創建藍圖並確定建築物的主要元素應該位於何處以方便居民訪問。

兩個核心原則：

• 它必須易於 comprehend (理解) 和 navigate (導航)
• 它必須易於 scalable (擴展)（即，它必須在發布後易於向應用程序添加新功能）。

‍

我們需要談論移動應用程序和桌面應用程序或網站的資訊架構 (IA) 差異的原因非常明顯：使用智能手機與使用 PC 在本質上是不同的。

因此，我們應該考慮兩個主要事項：

1. Device Specifics ｜ 設備規格

使用者與智能手機的交互是基於滑動和點擊，而不是點擊和鍵盤快捷鍵。屏幕明顯更小，因此可以容納的元素更少。此外，移動互聯網的連接速度可能沒有家裡那麼快（取決於國家、用戶的位置和手機運營商的服務質量），因此應該優化移動應用程序的加載時間。

2. Circumstances ｜ 情況

人們在從 A 點步行到 B 點或乘坐公共交通工具時會使用智能手機。因此，我們應該考慮到用戶在使用應用程序時可能遇到的所有乾擾，包括各種查看條件。

‍

所有這些差異都要求我們重新考慮如何在移動應用程序中呈現內容以提供無縫的用戶體驗。

‍

‍

‍

‍

Additional

1. 上述的六種資訊架構 (IA) 並非是所有的移動端資訊架構 (IA)
2. 在同一個產品中，並非只能使用一種資訊架構 (IA)
3. 資訊架構 (IA) 的選擇與設備顯示面積的大小有關

‍

Resources

https://applikeysolutions.com/blog/designing-the-information-architecture-ia-of-mobile-apps

https://uxdesign.cc/a-look-at-ia-and-navigation-models-for-mobile-50f9c99309fa

‍

‍