在過去的幾年中,iPhone成功的使得Tab Bar標簽欄導航方式在移動設備上流行起來。Apple將tab bar和其它許多的設計原則整合到了他們的人機交互指南(HIG)中——但有些疑問他們從來沒有回答。在過去的幾年中我一直從事交互與圖形設計,在這篇文章中我將分享一些我的想法有關什么是該做的,什么是不該做的。
第一課:魔法數字是5
這對從事iPhone設計的人來說不是新鮮事。自從iPhone的屏幕寬度為320點(dots)開始(1點=2象素),Apple設計了標準的tab bar不能超過5個tab,每個tab包含其圖標與可讀的文字。
5個之后會如何呢?當然,我們可以采用使用"More"標簽的方式放進標準的tab bar。但是我還是推薦盡可能的去避免"More"標簽。為什么呢?
- 首先,你自然會損失掉一個tab
- 你將記錄"More"標簽下功能的這個重擔交給了用戶。如果你的"More"下面的內容達到5個時,問題更加突出,這些加重了用戶的認知負荷能力(cognitive load)
- 一些測試表明用戶根本不知道"More"功能的用途,而且根本不會影響用戶(來源:Tapworthy - Designing Great iPhone Apps by Josh Clark)
當然,當你在各種視圖下工作、數據排序以及分類時(例如iPod),使用"More"標簽的方式來替代讓用戶自定義標簽會更合理一些。因為自定義標簽的這種行為在某些情況下只適用于高級用戶。
第二課:詢問用戶的意見
這種方式在你的設計過程中會非常有幫助,但標簽的分類和級別應該更接近于你目標用戶群的想法。當我們做這種研究測試時,記得事實1中提到的內容,不斷思考所有的內容是否能分類到五個標簽之中。如果不行,請問自己是不是非得用tab bar作為導航方式呢?
第三課:花多的時間在圖標和文字上
一些用于圖標設計及文案設計的點子:
- 確定圖標和文案能真實的標簽這些標簽下所要進行的行為。最讓人鬧火的事情莫過于明明知道程序中有一個功能,但卻不知道在哪個tab下面
- 避免一些語義上無關的設計,例如一個筆刷的圖標但下面卻寫著“報表”。可參見 picture word interference
- 如果你要創建另一個“我的收藏”的標簽,不用試著重新設計星形圖標或改變文字“我的收藏”(Favorites)。雖然重新識別一個事物的成本低于回憶事物,但是我們應該幫助用戶減少認知負荷(Jacob Nielsens Ten Usability Heuristics)
- 避免出現重復的文字。例如,想象你需要創建“我的圖書”“我的雜志”“我的CD”這樣的情況。根據Stroop effect(斯特魯普效應)的解釋用戶會主動忽略掉這些文字。
- 讓圖標設計得有含義及易于識別這樣用戶能立即知道該點哪個tab,避免讓用戶考慮例如“到底是扳手呢?還是在齒輪表示設置呢?”
- 如果你在設計圖標的時候遇到一些問題,不妨進這一層下面的內容去看看下面的布局以及內容是否能激發你的靈感。
重申,實地測試和探索非常重要。問問用戶他們的理解方式!“你們認為這個臉部圖標表示什么?”“你們覺得應該在什么樣tab下可以找到Finder”“你覺得圖標是臉,而文字寫著Finder,這樣說得通嗎?”
![]()
Figure 1 — 左: NUUS 24 使用了相似的圖標, 中: Spotify 使用了房子圖標和 “What’s new”的文字, Right: Vimeo 重復使用文字 “My Videos” 和 “My Stuff”
第四課:避免自動改變tab
這是在我從事的很多項目中經常爭論的問題。我的想法是,如果不是用戶主動直接的在Tab上發生交互行為,永遠不要改變Tab!我知道你們有可能在一些情況上發現這是唯一能解決一些奇怪的信息架構問題的方式,但是請還是主動去避免!為什么呢?
- 你在嘗試打斷用戶所期望的控制行為。舉例當用戶點擊一個表視圖(Table View)的時候,他們永遠期待二種結果:a)新視圖從右向左滑進,b)新視圖從下向上滑進。他們同樣不希望在Tab Bar上發生他們預想不到的變化
- 你在擾亂用戶早已習慣的iPhone“返回”交互習慣。如果他們沒有注意到Tab已經改變,他們有可能以為到了下一級,試圖找“返回”按鈕
第五課:不要在Tab上做限制
如果你沒有提供更好的方式讓用戶訪問某些內容,不用讓Tab設計具備限制性(如只針對注冊用戶)。讓用戶點擊后才發現這些內容不可用時,這會讓他們非常苦惱。
![]()
Figure 2 - Hemnet 應用中當你點擊某個Tab時,提示你必須登錄
第六課:小心使用自定義Tab
當越來越多的iPhone應用使用Tab Bar來展示信息架構的時候,設計師已經開始覺得無趣。設計師自己都知道,當設計師自己覺得無趣時,壞情況可能發生。一種方式就是為了避免設計上的無趣,開始自定義Tab Bar。
現在,我也是常常自定義Tab,因為能有個性,好記憶,而且有更好的品牌體驗。但是有一些重要的事情必須牢記于心。
- 需花時候,而且有時候要花大量的時間。從開發人員角度來說,自定義Tab Bar 意味著完全重寫代碼。
- Apple設計Tab Bar和Tool Bar的顏色色調時是有一定理由的;它能很好的區別外觀和導航的級別。將這種思想帶到你的色彩設計之中。
- 有時候開發者和設計師總是忘了當點擊一個Tab時,頂部的導航條顯示了當前位置,同時如果有電話打入,系統的狀態欄會變成雙倍高度。別忘了設計這些情況。
- 有些應用使用一些自定的設計模式來應對具有共享視圖的Tab Bar(如Twitter for iPhone)。如果你也考慮這種方式,那注意你有可能讓你的用戶產生疑惑。
![]()
Figure 3 — 在Twitter for iPhone中,這種多層Tab很容易讓人困惑。當點了第一屏中的"651 favorites"后,進入了"favorites"視圖,如中圖所示,再點Back按鈕,在第三屏中還是處于同一等級下的Tab,這時圖標變成了"More"
總結
tab bar是你導航應用的主要方式。不要低估了設計一個完美的tab bar體驗所要花的時間。這些總結中并沒有絕對的規則,但希望能讓你開啟思路。

