Easy Design:如何設計一個好的 Tab Bar

這篇文章是 iOS 應用程式 Easy Design 系列文章 中的一篇。

Appearance

  • 與內容區分開:使用陰影或色彩對比。
  • 不搶佔視覺重心:使用較輕的顏色或接近黑色的顏色。

Tab Bar Appearance

Items

  • 圖形簡潔:形狀簡單,線條均衡。
  • 表意清晰:形狀不足以表意時,必須加上文字。
  • 重量均衡:icons 之間視覺重量儘量保持一致。

Tab Bar Items

Layout

  • 密度均勻:
    • 三至四個最佳,五個尚可接受;
    • 如果只有兩個,可以考慮更換其它的導航方式節約空間;
    • iPad 上有足夠空間,但不應該超過五個,否則會增加認知負擔,使用戶在選擇時感到困惑。
  • Icons 大小、間距合適:過大、過密會給人壓迫感;過小、過疏會使人難以 anchor 視線。
  • 高度為 49 pt:如果不帶標題可以適當縮減高度。
  • 儘量不使用分割線:使用分割線會增加 cognitive load。

Tab Bar Layout

States

  • 清晰地區分開選中與未選中:使用顏色、背景顏色、圖形 outline/filled 的變化。
  • 清晰地區分開導航入口與動作入口:突出位置、形狀、顏色、背景顏色。

Tab Bar Layout

Actions

通過不同的觸摸事件可以賦予 tab bar 更多功能,例如:

  • 當前 tab bar item:
    • 輕觸回到頂部;
    • 輕觸回到 root 層級;
    • 輕觸在當前頁面的未讀消息之間跳轉;
    • 連續兩次輕觸刷新當前頁面。
  • 其它 tab bar item:
    • 長按個人信息頁 item 切換帳戶;
    • 長按通知頁 item 標記所有通知為已讀。

更多文章請見:iOS 應用程式 Easy Design 系列