App中應(yīng)用圖標(biāo)標(biāo)記的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)App中應(yīng)用圖標(biāo)標(biāo)記的示例分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1、概念

應(yīng)用圖標(biāo)標(biāo)記，稱為Badge App Icon。

Badge，徽章，具象來說，

就是佩帶在身上用來表示身份、職業(yè)的標(biāo)志。

它有著悠久的歷史，起源最早可以追溯到原始社會(huì)氏族部落的圖騰標(biāo)志。

在UI設(shè)計(jì)里，是應(yīng)用的徽章，長得就沒這么具象了，抽象為圓形。

它，有這么些稱呼:

應(yīng)用圖標(biāo)標(biāo)記;

App包含標(biāo)記圖像;

Badge App Icon;

小紅點(diǎn);

紅點(diǎn)。

iOS系統(tǒng)在"設(shè)置"--"通知"，可以找到設(shè)置的地方，屬于"通知"的一種形式.

通知的另外3種形式:

聲音

橫幅Banners:

        將顯示在屏幕上方并會(huì)自動(dòng)消失

提醒/提示Alerts:

        需要選擇動(dòng)作才能繼續(xù)

Android官方控件沒有Badge。

iOS最開始設(shè)計(jì)并沒有通知中心（iOS5.0之后才有通知中心），僅靠桌面圖標(biāo)上的Badge表示App是否有新消息；

而Android設(shè)計(jì)之初就有通知中心，可在通知中心內(nèi)聚合查看所有App的通知，所以沒有官方?jīng)]有使用Badge提示用戶有新消息。

Badge其實(shí)是屬于系統(tǒng)級(jí)的通知，App們，把它應(yīng)用到了app內(nèi)的通知，提示用戶有未讀消息。

從Badge的歷史發(fā)展，

Badge作為系統(tǒng)消息的作用，提示用戶app共有幾條未讀消息，

在app內(nèi)反而應(yīng)少量使用，作為點(diǎn)綴，甚至不使用為佳。

2、Badge的設(shè)計(jì)形式

有2類，

一類是僅是一個(gè)紅點(diǎn)，

另一類是結(jié)合數(shù)字，或其他文字。

設(shè)計(jì)數(shù)字紅點(diǎn)時(shí)要合理把控?cái)?shù)字上限，比如將上限設(shè)定為9，則 9 以上顯示 9+；將上限設(shè)定為 99，則 99 以上顯示 99+。

如果在app內(nèi)使用，可以有各種顏色的變體。

比如ColorBadges:

讓提醒角標(biāo)隨 App 圖標(biāo)變化

ColorBadges是一款Cydia插件，這款插件的作用就是讓應(yīng)用程序的角標(biāo)顏色和應(yīng)用程序圖標(biāo)顏色相一致

形式的創(chuàng)新，也許可以從具象的徽章里找到一些設(shè)計(jì)元素，

可以參考下身著祥云圖案、腳踏虎頭鞋的賣萌米奇。

3、Badge的交互動(dòng)畫

Badge的交互動(dòng)畫主要是消除動(dòng)作，

很多app的忽略這一點(diǎn)，我查找了些資料，發(fā)現(xiàn)qq的消除動(dòng)作做得蠻有趣的

消除小紅點(diǎn)有很多種方式，比如說：

方案一，通過搖一搖把小紅點(diǎn)抖落；

方案二，通過對(duì)著手機(jī)吹一下，把小紅點(diǎn)吹掉；

方案三，把小紅點(diǎn)拖拽下來，不喜歡哪個(gè)拽哪個(gè)；

比如 QQ 的拖拽小紅點(diǎn)清除等有趣的動(dòng)態(tài)交互平衡消除小紅點(diǎn)的千篇一律和無聊。

關(guān)于App中應(yīng)用圖標(biāo)標(biāo)記的示例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。