一、一個(gè)案例的反思

這里想聊聊騰訊微博iPhone新版的一個(gè)設(shè)計(jì)細(xì)節(jié)。

事件起源于我們的一個(gè)設(shè)計(jì)師提供了一個(gè)新版的視覺設(shè)計(jì)方案，整體很大氣，可是有一個(gè)地方別扭，他把選中的標(biāo)簽欄暗掉了，未選中的標(biāo)簽欄高亮了，我說是不是反了?他說沒反啊，騰訊微博就是這樣的。于是我去看了新版騰訊微博，竟然真是這樣。

圖1 騰訊微博的標(biāo)簽欄

那么，讓我們從以下三個(gè)角度看看，這樣做到底對不對：

1.HIG怎么說?

那么讓我們來對比一樣IOS系統(tǒng)的標(biāo)簽欄的樣式：

圖2 系統(tǒng)的標(biāo)簽欄樣式

iOS Human Interface Guidline里有對于Tab Bar的行為有這樣一句話的描述“When users select a tab, such as Search in YouTube, the tab’s background lightens and its image is highlighted”，選中的標(biāo)簽欄背景亮起，圖標(biāo)高亮。

2.其他應(yīng)用怎么做的?

既然是微博，對比一下其他微博客戶端，有哪個(gè)是選中狀態(tài)的標(biāo)簽暗掉的?

圖3 其他微博類客戶端

再對比一下其他的優(yōu)秀客戶端的設(shè)計(jì)，有哪個(gè)選中的標(biāo)簽是暗掉的?

圖4 其他優(yōu)秀客戶端

再對比一下Web端的標(biāo)簽?zāi)Ｊ剑心膫€(gè)是選中的標(biāo)簽暗掉的?

圖5 Web版的一些標(biāo)簽設(shè)計(jì)

3.用戶怎么理解的?

于是我到騰訊微博上反饋了意見，看到了有些人跟我一樣糾結(jié)了，包括麥田老師，但也有些人還是覺得這里可以接受的，原因不外乎以下幾種：

“這里用補(bǔ)色來標(biāo)注選中狀態(tài)，表示不可點(diǎn)，其他的是可點(diǎn)的，所以高亮”

“等你選的當(dāng)然高亮，不需要再選的當(dāng)然暗啦”

“明暗比例1：4，應(yīng)該能分辨出來哪個(gè)是選中的，只要不是1：1就行，用戶能理解就行”

“誰規(guī)定的?用戶能理解就行唄”

請注意，這里的明暗關(guān)系，不應(yīng)該是用來區(qū)別可點(diǎn)、不可點(diǎn)的，而是應(yīng)該用來區(qū)別是否處于活動狀態(tài)的，可以參考Web版Module Tabs的說明：

The active pane is the pane that is currently being shown; it is paired with the active tab control. The pane that is displayed immediately when the web page first loads is the default active pane.

Inactive panes (not shown in the illustration) are the panes that are currently not being shown. An inactive pane becomes the active pane when its tab control is clicked

選中的標(biāo)簽欄，應(yīng)該是處于活動狀態(tài)的，整個(gè)頁面的內(nèi)容，也跟這個(gè)標(biāo)簽欄是從屬關(guān)系。默認(rèn)加載的，也是那個(gè)唯一的活動狀態(tài)的標(biāo)簽頁，當(dāng)你點(diǎn)擊其他標(biāo)簽頁時(shí)，其他標(biāo)簽頁才會被加載出來。你明暗顛倒了，會讓人以為這個(gè)標(biāo)簽頁處于非活動狀態(tài)呢。

另外，這個(gè)標(biāo)簽頁不是不可點(diǎn)的狀態(tài)，當(dāng)有新消息的時(shí)候，這個(gè)標(biāo)簽上會有氣泡提醒的，這時(shí)候雙擊標(biāo)簽就可以刷新內(nèi)容，加載新數(shù)據(jù)了。

圖 6 雙擊有氣泡的標(biāo)簽可以加載新內(nèi)容

最后，說明暗比例1：4，所以能猜出來那個(gè)是選中的朋友，猜出來哪個(gè)是選中的不難，但這畢竟不是智商測試嘛，還是以滿意度為基礎(chǔ)來做設(shè)計(jì)的，而且最好做到不需要思考，是不?就算用戶真的沒有感覺異樣，我也會覺得自己的設(shè)計(jì)層次邏輯不合理，然后給自己狠狠拍上一塊板磚的。

我知道批評人家的設(shè)計(jì)挺不好的，畢竟，新版設(shè)計(jì)整體來說很優(yōu)秀，新LOGO也很好看，瑕不掩瑜，希望騰訊微博越來越好

二、標(biāo)簽欄的設(shè)計(jì)指南

標(biāo)簽欄的設(shè)計(jì)，可以參考以下一些標(biāo)準(zhǔn)化的設(shè)計(jì)指南：

1. 處于選中狀態(tài)的標(biāo)簽欄要高亮，用以標(biāo)識活動狀態(tài)

程序啟動時(shí)，優(yōu)先加載的內(nèi)容肯定是選中狀態(tài)的標(biāo)簽頁的內(nèi)容。選中狀態(tài)的標(biāo)簽要處于視覺上的活動狀態(tài)。

2. 標(biāo)簽的數(shù)量不要多于5個(gè)，如果太多就放在more里

標(biāo)簽的數(shù)量，最多不要多余5個(gè)，否則就放不下了。如果你平級的信息模塊實(shí)在是太多，可以考慮除了最重要的4個(gè)標(biāo)簽頁之外，增加一個(gè)More標(biāo)簽，把那些次重要的標(biāo)簽，都放在More標(biāo)簽里。

圖 7 最后一個(gè)More標(biāo)簽

但是，建議還是盡量不要有More這個(gè)標(biāo)簽，當(dāng)More里的內(nèi)容也超過5條時(shí)，就要考慮給用戶帶來的認(rèn)知負(fù)擔(dān)了。據(jù)說測試顯示，大部分用戶都不知道也不關(guān)注更多里有什么，根本都不去打開它。

當(dāng)然，你也可以讓用戶去編輯首選標(biāo)簽，不過要知道，用戶自定義永遠(yuǎn)是高級用戶才會使用的高級功能，不能用它來解決普世問題。

圖8 Tweetbot的標(biāo)簽欄最后兩個(gè)是可以長按之后自定義的

參考《Tapworthy: Designing Great iPhone Apps》

3. 標(biāo)簽是用來做模塊切換的，而不是操作入口

如果是想提供對當(dāng)前頁面元素的操作，可以使用工具欄，而不是標(biāo)簽欄，標(biāo)簽是對內(nèi)容模塊的平級切換。當(dāng)然現(xiàn)在比較流行把重要操作放在標(biāo)簽欄的某個(gè)位置上，如一系列的拍照應(yīng)用，都把拍照放在標(biāo)簽欄中間，做了一個(gè)差異化的樣式設(shè)計(jì)，也是可以參考的。

4. 可以用紅色氣泡或其他形式在標(biāo)簽欄上標(biāo)識新消息

當(dāng)有新消息到達(dá)是，可以在標(biāo)簽欄上用數(shù)字氣泡或者其他形式給予提醒。

圖9 標(biāo)簽欄上的新消息提醒

5. 如果圖標(biāo)的表意性不夠好的話，一定要用圖標(biāo)加文字來表達(dá)標(biāo)簽內(nèi)容

iPhone有提供一些系統(tǒng)圖標(biāo)，用于工具欄上，表示收藏、歷史、書簽、更多等等，如果是的標(biāo)簽可以用系統(tǒng)圖標(biāo)來表達(dá)，盡量用系統(tǒng)圖標(biāo)，如果你非要自己設(shè)計(jì)也可以，但是請注意表意性，讓用戶不需要思考也能知道是什么。如果圖標(biāo)的表意性達(dá)不到要求的話，請一定要輔助文字來說明，文字不能太長，防止折行顯示。

6. 如果你的操作產(chǎn)生標(biāo)簽切換，不要直接跳轉(zhuǎn)，而是給予視覺引導(dǎo)

如果你把某個(gè)條目從一個(gè)標(biāo)簽頁移動到另外一個(gè)標(biāo)簽頁了，千萬不要直接把標(biāo)簽頁跳轉(zhuǎn)過去，這樣做，1會讓用戶失去控制桿，2如果用戶不小心溜號了，就會在你的程序中迷失了。但是，你又不得不告知用戶，內(nèi)容已經(jīng)產(chǎn)生了狀態(tài)變更，這時(shí)候最好借助于引導(dǎo)動畫。

圖10 凡客誠品

凡客誠品當(dāng)從分類標(biāo)簽中，把商品加入購物車時(shí)，有一個(gè)引導(dǎo)動畫，1.告知用戶已經(jīng)加入購物車成功了，2.告知用戶購物車在另一個(gè)標(biāo)簽欄后面。當(dāng)然這個(gè)動畫的位置感還可以再好一點(diǎn)。

三、關(guān)于標(biāo)簽欄的設(shè)計(jì)模式庫

分享一些關(guān)于標(biāo)簽欄的設(shè)計(jì)模式庫：

iPhone：

http://pttrns.com/tabbars (需翻墻)

http://mobile-patterns.com/custom-tab-navigation (需翻墻)

Android：

http://www.androidpatterns.com/uap_pattern/tab-bar

http://www.androidpatterns.com/uap_pattern/change-view-tab-bar