為什麼大部分的 iOS TabBar 都是四個或五個按鈕？

作者：由 Poieter 發表于舞蹈時間：2016-04-19

黃兢成2016-04-20 08:03:46

在 iOS 設計中，這種控制元件並非叫選單欄，而是叫 TabBar（中文似乎是標籤欄）。TabBar 中的各個介面是並列關係，並且只能選中一個，也就是 N 中選 1。選中的那個按鈕處於選中狀態，跟其它按鈕顯示得不一樣。這種並列關係，會讓人覺得介面是相互獨立的，並且會一直存在的。

設計成一個按鈕裝起其他按鈕，也是有的。但它最主要的缺點是需要點選兩次。第一次點選，將各個按鈕展開，第二次點選展開的按鈕切換介面。常用的操作多了一次點選，就有點麻煩了。

另外這種設計會在同一個介面中發生切換。使用者就有點不確定，之前的介面是是被消亡了，還是被隱藏了。你可能會覺得消亡跟隱藏是一樣的，但主要分別在於假如 A 介面切換到 B 介面，再切換到 A 介面，A 介面之前的操作狀態還在不在。消亡不記錄狀態，會還原成最開始的狀態，隱藏再顯示的話就是原來的狀態。

還有一個小缺點，就是這裡可能還會出現按鈕展開的動畫，按鈕收起的動畫。太常用的操作，出現不必要的動畫，多看幾次就會很煩人的。越酷炫的動畫，看多了越煩人。

這種一個按鈕把其他按鈕都放進去，最大的問題就是需要多點一次，其它的問題還可以想辦法解決。多點一次，這種設計是沒有辦法解決的。但這種設計也有好處，就是節省螢幕空間，可以不顯示底下的 TabBar，就會多點螢幕空間來顯示真正的內容區。

在 iPhone 5 之前，iPhone 手機的螢幕比較短。這種用按鈕收起其它按鈕的設計也是有的，比如 Path。那時還常見一種側滑抽屜的設計。但 iPhone 5 之後，手機比例被拉長了，有更多的螢幕空間。這種在底下直接放 TabBar 就很常見了（這種設計也是蘋果推薦的）。那種收起按鈕，或者側滑的設計，變得比較少了。也有些設計將兩者結合起來，中間某個按鈕特別大，可以展開其它按鈕，而旁邊的小按鈕就是普通的切換 Tab。

那為什麼 TabBar 總是放 4 個或者 5 個按鈕呢？因為螢幕就那樣大，按鈕放多了就很擁擠了。

題外話：

很多人沒有注意，這種 N 中選 1 的按鈕組，跟普通按鈕的區別是有區別的。普通按鈕，手指點下來會出現高亮狀態，當手指抬起時候，按鈕事件才會觸發。讓手指抬起（Touch Up）才觸發事件可以讓使用者手指移動到按鈕範圍之外，有個取消的機會。而這種 N 中選 1 的按鈕，是沒有高亮狀態的，手指點下去（Touch Down）還沒有抬起時事件就會被觸發。因為 N 中選 1 這種按鈕組，有一個選中狀態，假如再有高亮狀態，這樣就會同時出現兩個按鈕跟其它按鈕不同了。