UI在設計上服從于交互，形式上不拘于一格，視覺縱深也只是其中一種心理模型。

注：本文面向入門級設計師，大神請飄過~

標簽欄設計基本上是每位設計師在項目設計中都會遇到的事情，之所以寫這篇文章是因為筆者在做項目的時候也曾遇到過這樣的疑惑：標簽欄的作用和意義是什么？當前欄為什么要高亮？其目的是什么？標簽欄的設計是否有比較合理的設計原則？等等。估計很多剛入門的童鞋也會遇到同樣的問題，所以特意將自己的一些研究心得分享出來。當然，以下觀點僅代表個人，如有不對，很歡迎指正。

先來看一下如下兩個設計。有些設計師為了顯示其他標簽的可點擊性，引導點擊切換，其他標簽欄會被設計成高亮，如圖1：

也有些設計師為了突出當前標簽，設計成如圖2：

咋一看圖1和圖2的兩個設計方案并沒有什么問題，起碼都很清晰地指明了當前標簽是哪一個標簽。

可是突然有一天，產品經理說我們的標簽欄只留兩個標簽，于是，按照原來的設計，圖1和圖2的標簽欄設計變成這樣：

和這樣：

于是圖1中原本“信息”欄為當前標簽，視覺感知上卻變成了“發現”欄為當前標簽。圖2之前多個標簽可以清晰辯認的設計現在變得模棱兩可，分不清哪個是當前標簽，哪個是可點擊標簽。由此看來，單純運用對比來突出當前標簽，這種做法并不可取。

那具體應該怎樣去設計呢？為此筆者物意翻查了一下《iOS人機交互準則》中的設計要求。iOS設計規范中指明：當前標簽應當要高亮。如圖3：

看上去的確是合理很多，而且就算只剩下兩個可切換的標簽，也還是很容易感知當前標簽，看來，按照《iOS人機交互準則》來做設計總歸是沒有錯的。

但為什么當前標簽應當高亮？

首先，先來分析一下標簽欄的作用。

關于我們在大多數交互界面所使用的標簽欄，提供了頁面的切換、功能入口以及界面導航的功能。其目的意義在于指示當前頁面所處的位置。也就是說，標簽欄在視覺設計上要著重解決“我在哪兒”的問題，所以前面的為了顯示其他標簽是可點擊性的標簽欄設計（如圖一）的設計方案就可以拋棄了。

人類使用視覺縱深去感知自己在空間里所處的位置。

想像一下，你在上班打瞌睡，在夢中神游。突然腦袋被敲了一記，你睜開眼睛，看到眼前的顯示器，鍵盤，桌面上的筆記本和錢包手機，遠處是辦公室里在工作的同事，于是你知道了自己正在自己的辦公桌邊上著班，而不是正在神游。

人從睜開眼睛第一時間獲得視覺信息，做的第一件事是從獲得是視覺信息里感知視覺里的不同物體的遠近，并根據距離自己最近的物體（標志）判斷自己所處的位置。事實辨別上視覺縱深是大多數動物以生倶來的視覺能力，嬰兒從出生三個月就能判斷遠近高低，并確定自己是否處于一個安全的區域。

人類在無意識的視覺縱深的感知中，判斷出離自己最近的物體，就知道自己所處的位置。因此，在標簽欄的設計中，要清晰地指明當前頁面所處的位置，當前標簽在視覺設計上必須與“我”的距離最近。

也就是說，在標簽欄設計中，當前頁面標簽要與其他標簽拉開視覺上的層次關系。

所以在很多常見的APP里，當前標簽通常要高亮，其他標簽則適當弱化。設計上類似于這樣：

然后，為了進一步拉開層次關系，當前標簽可以稍微改變一下樣式，如這樣：

最后，加入情感化設計，可以適當添加APP的主色調，如這樣：

根據以上原理做出來的設計方案也是最為大眾所接受的，例如微信：

例如支付寶：

上面的雙標簽設計可以僅憑拉開層次關系顯示當前標簽：

或這樣：

另外，深色的背景欄標簽設計也依然遵循拉視覺縱深的心理暗示拉開層次關系，如這樣：

和這樣：

結尾：

UI在設計上服從于交互，形式上不拘于一格，視覺縱深也只是其中一種心理模型，也有很多設計師根據格式塔心理學設計出交互性很好的心理模型，以后我們有機會繼續探討。

筆者渣渣設計師一枚，以上僅為個人觀點的經驗之談，不同觀點，歡迎共同探討，共同進步~

本文由 @偶不是芒果 原創發布于人人都是產品經理。未經許可，禁止轉載。