一、一個案例的反思

這里想聊聊騰訊微博iPhone新版的一個設計細節(jié)。

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

圖1 騰訊微博的標簽欄

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

1.HIG怎么說?

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

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

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”，選中的標簽欄背景亮起，圖標高亮。

2.其他應用怎么做的?

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

圖3 其他微博類客戶端

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

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

再對比一下Web端的標簽模式，有哪個是選中的標簽暗掉的?

圖5 Web版的一些標簽設計

3.用戶怎么理解的?

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

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

“等你選的當然高亮，不需要再選的當然暗啦”

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

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

請注意，這里的明暗關系，不應該是用來區(qū)別可點、不可點的，而是應該用來區(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

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

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

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

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

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

二、標簽欄的設計指南

標簽欄的設計，可以參考以下一些標準化的設計指南：

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

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

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

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

圖 7 最后一個More標簽

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

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

圖8 Tweetbot的標簽欄最后兩個是可以長按之后自定義的

參考《Tapworthy: Designing Great iPhone Apps》

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

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

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

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

圖9 標簽欄上的新消息提醒

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

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

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

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

圖10 凡客誠品

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

三、關于標簽欄的設計模式庫

分享一些關于標簽欄的設計模式庫：

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