行動介面設計模式圖鑑

第一章 導覽

Primary Navigation Patterns, Persistent

• “ 持久性””主要”導覽模式– 打開用持久性導覽的應用程式，你立刻明白有

哪些主要的導覽選項– Springboard 、 List

Menu 、 Dashboard 、 Gallery 、 Tab Menu 、 Skeunomorphic

Primary Navigation Patterns, Transient

• “ 暫時性””主要”導覽模式– 必須透過點擊或手勢才會出現– 9 點謎題 : 唯一方式是超出邊界，稱之為跳出

框架思考 (thinking “off-canvas”)

– Side Drawer 、 Toggle Menu 、 Pie Menu

Secondary Navigation Patterns

• “ 次要”導覽模式– 在選取中的模組裡瀏覽– Page Swiping 、 Scrolling Tabs 、 Expand/Collapse

Panel

Side Drawer Springboard

Primary Navigation Patterns, Persistent (1)

• Springboard– 也被稱作 Launchpad– 能通用於各系統、達成一致性和重複使用，以

及提供更多選單項目

Primary Navigation Patterns, Persistent (2)

• List Menu– 每個列表項目都是應用程式的入口，需要返回

列表– Apple 稱之為階層式導覽 (hierarchical

navigation)

Primary Navigation Patterns, Persistent (3)

• Dashboard– 讓使用者快速掌握最相關的資訊，不用跳到另

一個畫面

Primary Navigation Patterns, Persistent (4)

• Gallery– 以格狀版型、旋轉式圖片撥放或幻燈片呈現動

態內容

Primary Navigation Patterns, Persistent (5)

• Tab Menu - iOS– 只能有五個選項，如超過，右邊第五個頁籤會

是 More– Tab Bar vs. Toolbar

Primary Navigation Patterns, Persistent (6)

• Retracting Tab– 當使用者捲動或往下滑動內容時會隱藏或收合

網站的表頭

Primary Navigation Patterns, Persistent (7)

• Skeuomorphic– 模擬真實世界的物品，透過擬物提高程式的易

用性– 為遊戲設計裡最主要的導覽模式

Primary Navigation Patterns, Transient (1)

• Slide Drawer– 覆蓋圖層 (overlay): 透過滑動或點擊手勢選單

會出現，遮蓋或覆蓋一部分的畫面內容– 嵌入圖層 (inlay): 滑動、平移或點擊會開啟選

單，它會把一部分的畫面內容推出可視範圍外

Primary Navigation Patterns, Transient (2)

• Slide Drawer (cont.)– 應避免與系統 Control Center 相衝突– iOS 設計指南 : 不要讓使用者捲動才能看到所有

選項，這會讓使用者不安

Primary Navigation Patterns, Transient (3)

• Toggle Menu– 又稱之為 Mega Menu– 常規 : 選單不應該遮住整個畫面，而是得讓背

景半透明，點擊背景的任一處也應該能隱藏選單

Primary Navigation Patterns, Transient (4)

• Pie Menu– 又被稱為輪盤選單、圓形選單或放射狀選單– 常見於網路應用程式及遊戲設計裡

Secondary Navigation Patterns (1)

• Page Swiping– 透過滑動手勢可以利用這個模式快速瀏覽內容– 頁面指示器 (page indication) 、卡片隱喻

Secondary Navigation Patterns (2)

• Accordion– 讓使用者在同一畫面看到更多訊息– 比起瀏覽到一個新畫面再返回，這個模式會更

有效率

Secondary Navigation Patterns (3)

• Swipe Menu

When deciding between persistent and transient navigation

• 應用程式的架構扁平嗎？選單類別的層級相同嗎？應用程式裡只有幾個主要類別？

• 選單一直出現讓使用者快速取用嗎？

• 選單類別有狀態指示嗎？