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