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

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

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

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

也有些設(shè)計師為了突出當(dāng)前標(biāo)簽，設(shè)計成如圖2：

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

可是突然有一天，產(chǎn)品經(jīng)理說我們的標(biāo)簽欄只留兩個標(biāo)簽，于是，按照原來的設(shè)計，圖1和圖2的標(biāo)簽欄設(shè)計變成這樣：

和這樣：

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

那具體應(yīng)該怎樣去設(shè)計呢？為此筆者物意翻查了一下《iOS人機交互準(zhǔn)則》中的設(shè)計要求。iOS設(shè)計規(guī)范中指明：當(dāng)前標(biāo)簽應(yīng)當(dāng)要高亮。如圖3：

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

但為什么當(dāng)前標(biāo)簽應(yīng)當(dāng)高亮？

首先，先來分析一下標(biāo)簽欄的作用。

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

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

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

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

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

也就是說，在標(biāo)簽欄設(shè)計中，當(dāng)前頁面標(biāo)簽要與其他標(biāo)簽拉開視覺上的層次關(guān)系。

所以在很多常見的APP里，當(dāng)前標(biāo)簽通常要高亮，其他標(biāo)簽則適當(dāng)弱化。設(shè)計上類似于這樣：

然后，為了進一步拉開層次關(guān)系，當(dāng)前標(biāo)簽可以稍微改變一下樣式，如這樣：

最后，加入情感化設(shè)計，可以適當(dāng)添加APP的主色調(diào)，如這樣：

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

例如支付寶：

上面的雙標(biāo)簽設(shè)計可以僅憑拉開層次關(guān)系顯示當(dāng)前標(biāo)簽：

或這樣：

另外，深色的背景欄標(biāo)簽設(shè)計也依然遵循拉視覺縱深的心理暗示拉開層次關(guān)系，如這樣：

和這樣：

結(jié)尾：

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

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

本文由 @偶不是芒果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。