底部標簽欄的圖標風格在一定程度上也決定了界面的風格。當下，隨著各種風格的流行，底部標簽欄也不再是一成不變的風格。

底部標簽欄看似永遠都是幾個按鈕一成不變，但是隨著極簡風格的流行，底部標簽欄圖標風格很大一部分決定了界面的風格。

因此看似簡單的標簽欄設(shè)計，其實也有可琢磨的地方。

今天我們主要對底部標簽欄選中效果展開分析，不同的選中效果給人的感受也不相同，其達到的效果也不相同。

看了本篇文章之后，你將會知道什么樣的選中效果更有趣，什么樣的選中效果利用用戶操作呢？

在此之前，我們先了解下底部標簽欄默認狀態(tài)的常見樣式，這樣便于我們接下來的分析，默認樣式主要有：線、面、面+線這三類。

底部標簽欄的選中效果主要也是基于以上三種樣式的，但是相較于默認方式選中效果更加豐富，其對應的選中效果主要有4大效果：

一、線性高亮

線性高亮即在默認灰色線性圖標上增加品牌色。由于線和線差異性不高，同時線越細其表現(xiàn)力和識別力越弱，即使加了品牌色識別度也不及面型高亮。

以愛彼迎為例：它采用了2px的描邊，從展示效果就可以看出其視覺表現(xiàn)力和識別度就不高。如果一定要用線性表現(xiàn)，我們可以將圖標描邊設(shè)置為3-4px，隨著圖標描邊越粗其表現(xiàn)力和識別度也越高。

同時，粗直角線條也會給人穩(wěn)重的感覺，而粗圓線條也會給人活潑的感覺。

以得到為例：其采用4px的粗直角線條，整體給人的感覺穩(wěn)重，同時在選中效果在識別性上也高于愛彼迎的線性選中效果。通過愛彼迎、得到可以看出來，1px或者2px的線性高亮圖標，其識別性和表現(xiàn)力都較低，當圖標為3-4px識別度和表現(xiàn)力相應會增加，因此在使用時我們盡可能避免使用1-2px的圖標。

二、面型高亮

面型高亮，由于面和面或者線和面差異較大，相較于線性高亮來說識別度更高，表現(xiàn)力更強。用戶在使用時更能夠快速的清楚自己所在位置，其默認形式可以是線性圖標也可以是面型圖標。

同時其展示效果可以是純色，也可以是漸變色等。下面分別來舉例說明：

以NOTHING為例：其默認效果為3px的描邊，其產(chǎn)品定位是致力于連接一切有品位的人，屬于時尚類的APP，因此其按鈕采用黑色。對比愛彼迎的線性高亮，面型高亮的選中效果由于線和面的差異較大，因此更加明顯。

以Keep為例：其默認效果為灰色的面型圖標，其產(chǎn)品定位是基于健身教學視頻的運動健康類APP，因此其按鈕色采用其品牌紫色。從展示效果我們盡管默認圖標是面型其識別度一樣很強。

以橘子娛樂為例：其默認效果采用4px的描邊，選中效果采用漸變的面型高亮，不管是從默認圖標還是選中狀態(tài)都給人以活潑、青春的感覺和橘子娛樂的品牌相符合。

因此，通過NOTHING、Keep、橘子娛樂可以看出：面型圖標的表現(xiàn)更加多樣，同時識別性和表現(xiàn)力均比線性高亮效果好，同時在使用上還可以根據(jù)產(chǎn)品定位和品牌基因選擇適合的設(shè)計風格。目前市面上的APP大多都是采用面型高亮。

三、線性+面型高亮

線性+面型高亮的圖標，往往是APP的設(shè)計風格是黃黑搭配，由于黃色比較高亮，單獨使用視覺不突出，加上描邊之后比較反而給人活潑的感覺。

以YY為例：其默認效果同樣采用描邊，選中效果填充黃色，在留有部分留白，同時每個小圖標里面都加了小短線，相比于普通圖標，該設(shè)計方式更具風格。

除了上面的黑黃風格，其實其他顏色的也是可以的，只是填充顏色較淺，然后加品牌色的描邊均可。綜上可以看到這種線性+面型高亮的方式多使用在品牌調(diào)性較為活潑的APP，該樣式可推薦使用。

四、微交互效果

標簽欄的微交互效果，顧名思義就是加入了人機互動效果，讓標簽欄更有趣，給用戶眼前一亮的感覺，同時品牌感更強。

以QQ為例：最新版的QQ圖標選中效果由默認的側(cè)臉圖標變化為愉快的正臉，一點小小的變化就讓整個聊天界面生動起來了。

以土豆短視頻為例：標簽欄的選中效果采用黑黃搭配的線性+面型高亮，同時在點擊標簽時小按鈕有個跳動的效果，看上去特別活潑，和土豆的產(chǎn)品定位個性化的搞笑視頻匹配。

另外一個亮點是：在下滑到第二屏時，推薦的笑臉按鈕變?yōu)樗⑿掳粹o，這樣用戶在滑到下面不想在繼續(xù)的時候，點擊刷新按鈕即可查看新內(nèi)容，為用戶節(jié)約了操作路徑，這個真是個貼心的設(shè)計。

以上都是微交互效果的一些設(shè)計要點，看上去一些不經(jīng)意的點卻能夠給界面帶來很大的效果。因此我們在做界面時不應該拘泥于常規(guī)方案，也應該多嘗試新方法。

五、總結(jié)

如何讓界面變得更“有趣”，提升用戶的操作體驗，首先需要我們從一些小的組件入手，下面來總結(jié)下標簽欄的4大選中效果：

1. 線性高亮，即默認狀態(tài)是線性的灰色圖標，選中時變?yōu)槠放粕木€性圖標即可。其制作成本低，但是表現(xiàn)力和識別性都較弱。
2. 面型高亮，其默認狀態(tài)可以是線性也可以是面型，同時選中效果樣式多樣可為純色高亮、漸變高亮、多色高亮等。其制作成本也不高，但是其表現(xiàn)力豐富。
3. 線性+面型高亮，其多為黑黃搭配風格的APP，給人以活潑年輕的感覺，其品牌感強，因此目前看到很多視頻類的APP都采用該風格。
4. 微交互效果，微交互效果是基于以上三個效果基礎(chǔ)上，加入一些有趣的小動效，以及類似刷新的貼心小設(shè)計，這樣可以提升用戶的操作體驗，不過該效果制作成本較高，但是表現(xiàn)和識別性都比較好，因此大家在設(shè)計的時候可以研究下該方式。

作者：風箏KK，公眾號：海鹽社

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

題圖來自 Unsplash ，基于 CC0 協(xié)議