APP底部標(biāo)簽欄圖標(biāo)設(shè)計

App底部標(biāo)簽欄起到一個全局導(dǎo)航的作用，用一個圖標(biāo)代表當(dāng)前模塊。圖標(biāo)一般會設(shè)計兩種狀態(tài)。點(diǎn)擊激活當(dāng)前模塊的狀態(tài)圖標(biāo)，未點(diǎn)擊激活狀態(tài)的圖標(biāo)。

方法一、 顏色的變換

圖標(biāo)選擇剪影或者線性的設(shè)計形式，圖標(biāo)激活狀態(tài)為一種顏色，這個顏色一般選擇使用這個App的品牌色，其它的圖標(biāo)為灰色。圖標(biāo)的設(shè)計形式不做任何變化，例如網(wǎng)易嚴(yán)選(圖1-36)的激活和非激活都是線性圖標(biāo)，只有顏色的變化。設(shè)計的形式?jīng)]有任何變化。有一些格調(diào)App喜歡使用黑白色做為激活色。例如良倉App(圖1-37),使用了白色為激活色。

(圖1-37)良倉底部標(biāo)簽欄

方法二、設(shè)計形式+顏色的變換

激活的圖標(biāo)設(shè)計為剪影的形式，未激活的圖標(biāo)設(shè)計為線性的形式。這樣點(diǎn)擊和未點(diǎn)擊的圖標(biāo)除了有顏色的變化，還有設(shè)計形式的變化。例如京東(圖1-38)使用了紅色剪影圖標(biāo)為激活狀態(tài)。未激活的圖標(biāo)是線性灰色設(shè)計形式。

(圖1-38)京東底部標(biāo)簽欄

常見的線性變換為剪影的方法是，例如京東的APP底部標(biāo)簽欄，線性圖形外輪廓填充為面，在面中運(yùn)用正負(fù)形的設(shè)計手法，構(gòu)成細(xì)節(jié)豐富的面。

有一些應(yīng)用的線性圖形本身比較簡單，所以這種方法不適用。而是在線的基礎(chǔ)上，填充面構(gòu)成細(xì)節(jié)豐富的剪影圖標(biāo)。例如每日開眼App的標(biāo)簽欄圖標(biāo)(圖1-39)，線性圖標(biāo)是極簡的幾何圖形設(shè)計。在基本的三角、圓形、方塊添加了更多的小的塊面構(gòu)成剪影圖標(biāo)。

(圖1-39)每日開眼底部標(biāo)簽欄

方法三、剪影圖標(biāo)顏色的變換

第三種做法，從iOS11開始，蘋果系統(tǒng)的內(nèi)置App的底部標(biāo)簽欄圖標(biāo)，開始傾向于全部設(shè)計為剪影圖標(biāo)，激活與未激活的圖標(biāo)只有顏色的變化。例如iOS11的AppStore(圖1-40)使用了藍(lán)色剪影圖標(biāo)代表激活狀態(tài)，灰色剪影圖標(biāo)代表未激活狀態(tài)。

(圖1-40)iOS11的AppStore底部標(biāo)簽欄

方法四、動畫切換

一些應(yīng)用的標(biāo)簽欄圖標(biāo)會帶上一些動效，使設(shè)計更加具有趣味性。例如飛豬App(圖1-41)采用的就是最常見的動效，點(diǎn)擊圖標(biāo)，圖標(biāo)會有一個小放大的抖動效果。

(圖1-41)飛豬底部標(biāo)簽欄

另外一些App采用更加復(fù)雜的設(shè)計效果，例如優(yōu)酷的App(圖1-42)底部標(biāo)簽欄的圖標(biāo)，除了基本的大小抖動之外，每個圖標(biāo)的內(nèi)部填充元素會有一個動效。例如發(fā)現(xiàn)圖標(biāo)除了填充外，會有一個旋轉(zhuǎn)效果。而星球圖標(biāo)，內(nèi)部的填充線會有一個由左到右填充效果。

(圖1-42)優(yōu)酷底部標(biāo)簽欄

方法五、超出標(biāo)簽欄

App的圖標(biāo)的變化范圍不只在標(biāo)簽欄區(qū)域，也可以延伸出標(biāo)簽欄的背景外。例如毒蛇電影App(圖1-43)的底部標(biāo)簽欄圖標(biāo)的點(diǎn)擊激活效果是一個圓形背景圖，這個背景圖超出了底部標(biāo)簽欄的高度。

(圖1-43)毒蛇電影底部標(biāo)簽欄

方法六、 節(jié)日圖標(biāo)

在一些節(jié)日的時候，圖標(biāo)會做一些特別的設(shè)計，這時候的激活形式可能運(yùn)用獨(dú)特的品牌設(shè)計圖形。例如淘寶的雙12界面(圖1-44)

(圖1-44)雙12淘寶底部標(biāo)簽欄

學(xué)生作業(yè)

這是我指導(dǎo)的近期竹筍班的一些學(xué)生作業(yè)，希望通過學(xué)生作業(yè)中實(shí)際的界面設(shè)計案例，給大家一些啟發(fā)。

案例1流螢淺宿

難忘的旅程從流螢淺宿開始(圖1-45)。不論出門在外或在家附近都能找到探險之旅。獲取世界各地獨(dú)特的房源、體驗(yàn)及好去處的信息，預(yù)訂旅程所需的一切，或者開始當(dāng)房東賺錢。

(圖1-45)流螢淺宿logo

首頁的底部標(biāo)簽欄圖標(biāo)(圖1-46)選擇了logo圖形進(jìn)行了2次設(shè)計。整個界面與品牌個輕飄格調(diào)個取得了一致。

(圖1-46)流螢淺宿首頁

案例2螞蟻家

螞蟻是一個愛捯飭家的群體動物，用“螞蟻”旨在象征APP所針對的使用人群。螞蟻的家即蟻巢，因?yàn)橄伋卜帜緱�巢、地下巢、地上巢等多種類型，所以“螞蟻家” APP(圖1-47)也寓意創(chuàng)造一個豐富多彩、形式多樣的家居生活。首頁的標(biāo)簽欄圖標(biāo)根據(jù)logo圖形體現(xiàn)的棱角感，設(shè)計了全直角風(fēng)格的圖標(biāo)(圖1-48)。

(圖1-47)螞蟻家logo

(圖1-48)螞蟻家首頁