交互設計師的糾結有時候挺惹人討厭的，大量的口水浪費在小的細節(jié)上了，有時候我也會告誡自己，要著眼大局分清主次，一些小的細節(jié)干脆就不要太糾結了，可是我又相信，好的交互設計師一定要對細節(jié)有一針見血的判斷力，不瘋魔不成活，不糾結出不來好設計。

一、一個案例的反思

這里想聊聊騰訊微博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)的，整個頁面的內容，也跟這個標簽欄是從屬關系。默認加載的，也是那個唯一的活動狀態(tài)的標簽頁，當你點擊其他標簽頁時，其他標簽頁才會被加載出來。你明暗顛倒了，會讓人以為這個標簽頁處于非活動狀態(tài)呢。
另外，這個標簽頁不是不可點的狀態(tài)，當有新消息的時候，這個標簽上會有氣泡提醒的，這時候雙擊標簽就可以刷新內容，加載新數據了。

圖 6 雙擊有氣泡的標簽可以加載新內容


最后，說明暗比例1：4，所以能猜出來那個是選中的朋友，猜出來哪個是選中的不難，但這畢竟不是智商測試嘛，還是以滿意度為基礎來做設計的，而且最好做到不需要思考，是不？就算用戶真的沒有感覺異樣，我也會覺得自己的設計層次邏輯不合理，然后給自己狠狠拍上一塊板磚的。
我知道批評人家的設計挺不好的，畢竟，新版設計整體來說很優(yōu)秀，新LOGO也很好看，瑕不掩瑜，希望騰訊微博越來越好。

二、標簽欄的設計原則

標簽欄的設計，要注意以下幾點原則：

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

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

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

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

圖 7 最后一個More標簽


但是，建議還是盡量不要有More這個標簽，當More里的內容也超過5條時，就要考慮給用戶帶來的認知負擔了。據說測試顯示，大部分用戶都不知道也不關注更多里有什么，根本都不去打開它。
當然，你也可以讓用戶去編輯首選標簽，不過要知道，用戶自定義永遠是高級用戶才會使用的高級功能，不能用它來解決普世問題。

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


參考《Tapworthy: Designing Great iPhone Apps

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

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

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

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

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

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

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

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

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

圖10 凡客誠品
凡客誠品當從分類標簽中，把商品加入購物車時，有一個引導動畫，1.告知用戶已經加入購物車成功了，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

來源：http://elya.cc/blog/2011/08/20/tabbar/