APP底部標簽欄圖標設計

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

方法一、 顏色的變換

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

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

方法二、設計形式+顏色的變換

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

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

常見的線性變換為剪影的方法是，例如京東的APP底部標簽欄，線性圖形外輪廓填充為面，在面中運用正負形的設計手法，構成細節(jié)豐富的面。

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

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

方法三、剪影圖標顏色的變換

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

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

方法四、動畫切換

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

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

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

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

方法五、超出標簽欄

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

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

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

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

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

學生作業(yè)

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

案例1流螢淺宿

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

(圖1-45)流螢淺宿logo

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

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

案例2螞蟻家

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

(圖1-47)螞蟻家logo

(圖1-48)螞蟻家首頁