標簽欄ICON的設計與應用

@饅頭Icon 是App頁面中的重要組成部分,沒有Icon的App是不完整的。標簽欄是移動應用中最普遍、最常用的導航模式,應用于幾類信息之間的跳轉,提供頁面的切換、功能入口以及界面導航的功能。其目的意義在于指示當前頁面所處的位置。因此標簽欄Icon的設計至關重要。

底部標簽欄Icon我將它分為線性、剪影、微交互(微動畫)三類。線性、和j剪影是最為常見的,它們各自又有很多不同的設計類型。

1、默認和選中狀態均是線性圖標。將選中狀態的圖標高亮處理來與其他圖標進行區分。

值得提的一點是線性Icon的粗細一般是2像素,也有App做成1、3、4像素的,1-2像素的Icon有利于進行細節設計但識別性相對較弱,3-4像素的Icon醒目突出,造型上要簡潔大方。

2、默認是線,選中是面。利用線和面的視覺差異和高亮的顏色來顯示當前位置。這種方式是現在比較主流的設計方法,因為相比純線性Icon,面的存在感更強,更加易于用戶區分。

3、默認是線,選中是面加線。這種設計一般主色調是黃色的App常用到,因為黃色本身比較高亮,視覺不是很強烈,給Icon加上一個深色的描邊就能使標簽欄Icon比較“實在”。

4、默認是線,選中后細節豐富。這種設計比較有故事感容易打動用戶,就像一張黑白的老照片突然鮮活了一樣,令人印象深刻。

剪影Icon相對于線性Icon來說表現方式少了很多,一般默認的時候是淺灰色的面,選中狀態只是利用高亮的顏色進行區分。 剪影Icon由于面積比較多更加具有表現力。

默認和選中的過程有一個微交互的動畫效果,運用了情感化設計,使人們使用過程中產生樂趣和愉悅感從而增強用戶體驗。

Icon設計需要根據App不同的屬性特點,設計出符合行業風格的標簽欄Icon,那么我們就從以下幾類常見App種類來分析如何正確把握Icon設計風格。

 

首先看每個圖標都是線性風格,Icon的整體大小都一致,為44*44未選中狀態為淺黑,選中后有微交互效果,趣味十足。細節上做了斷點處理,避免了呆板的樣式,正如App充滿活力一般。整體看起來,小而精致,嚴謹的同時不失趣味與活力。

 

雖然也都是線性的,但是在細節上做的不錯——拐點處都用圓角把握了母嬰可愛萌的風格,在圖標內部也增 加一些小元素:嬰兒含著奶嘴笑;用幼芽表示育兒,親子的Icon加上了笑的元素,圖標風格與整個App很配,選中后則是帶主色調的填充的圖標,讓用戶知道當前處于哪個功能板塊。

寺庫是一款專賣高端商品的App,其產品檔次高,價格貴,品質好默認狀態下的Icon用的是深黑色的填充圖標,選中后為主色調暗金色,從細節上看,每個Icon有尖銳的部分也有圓滑之處,配上深黑色與暗金色總體上看既不失嚴謹品質之感,又不落時尚潮流,是非常帶感的一款App產品。

觀其主色調便感受到一股熱情激蕩之感,而其Icon也是獨具特色如:發現音樂,巧妙的弧度與音調符號相結合,朋友與帳號的Icon借鑒大眾化的個人Icon,但對Icon的加工做的很好,柔和的弧度給人強烈的親和感,半透明的白色作為為選中狀態,選中為純白,再配上類似于模糊后的唱片材質背景,給人一種高雅,神秘之感,也許莫扎特就是這種感覺吧!

Boss直聘,每一個Icon專屬定制,普通的功能詞語,不普通的Icon雖然也是線性Icon,但是從創意上來說很不錯,比如職位Icon用衛星軌道配合環形圈,給人一種職位多而且科技感,公司Icon則是用高樓大廈,但卻在樓層外的拐角處做了圓角處理,減少了冷冰冰的感覺增加了人情味,我的Icon加入了偏的發型,讓這一塊功能感覺活了起來,選中后的效果用主色調為青的顏色給人以希望之感。

呆呆醬是一款二次元互動類App。圖標卡通風格濃厚,萌萌的Icon很適合二次元的風格 。

中國人喜歡過節,所以在傳統節日期間很多APP為迎合節日氣氛,將Icon設計成具有節日風俗外貌的樣子,以便加深用戶印象。

有些APP風格非常強烈,干脆將Logo字母作為Icon,這種設計確實非常個性,而且一定程度上也能加深品牌印象,但這種設計手法也是要看App風格和領導層的勇敢程度的。

電商App有時為了制造購物、促銷氛圍或者為了追求視覺特殊感,Icon設計經常不按常理出牌兒,而將具有設計感的文字和抽象的圖形作為Icon。

在一些在線視頻類APP中經??醇笆泳綈con的,底部標簽欄最常見也最能顯示一個劇組的財力,這種設計方式我們一般是很少接觸到的大家就當欣賞欣賞就行了。


看完這篇文章,你學到了嗎?趕快應用起來吧!

來源:學UI網

上一篇: 2017 年需要警惕的設計趨勢

下一篇: 如何通過練習提升自己?

分享到: 更多
重庆时时提前3分钟开奖 足球比分90vs滚球 mg电子游戏手机客户端 有欢乐生肖奖怎么玩 北京时时官方开奖 极速赛车双面盘 七星彩快发软件 扑克二十一点怎么玩 赛车pk10最新技巧 前二万能8码每天稳赚技巧 大众麻将四人麻将规则 360足球直播 双色球胆拖复式投注和中奖查询表 七星彩怎样包码 牌九技巧口诀推 四川时时走势图开奖