App之应用图标标记

以下为正文:

1、概念

应用图标标记,称为Badge App Icon。

Badge,徽章,具象来说,

就是佩带在身上用来表示身份、职业的标志。

它有着悠久的历史,起源最早可以追溯到原始社会氏族部落的图腾标志。

在UI设计里,是应用的徽章,长得就没这么具象了,抽象为圆形。

它,有这么些称呼:

应用图标标记;

App包含标记图像;

Badge App Icon;

小红点;

红点。

iOS系统在"设置"--"通知",可以找到设置的地方,属于"通知"的一种形式.

通知的另外3种形式:

声音 横幅Banners: 将显示在屏幕上方并会自动消失 提醒/提示Alerts: 需要选择动作才能继续

Android官方控件没有Badge。

iOS最开始设计并没有通知中心(iOS5.0之后才有通知中心),仅靠桌面图标上的Badge表示App是否有新消息;

而Android设计之初就有通知中心,可在通知中心内聚合查看所有App的通知,所以没有官方没有使用Badge提示用户有新消息。

Badge其实是属于系统级的通知,App们,把它应用到了app内的通知,提示用户有未读消息。

从Badge的历史发展,

Badge作为系统消息的作用,提示用户app共有几条未读消息,

在app内反而应少量使用,作为点缀,甚至不使用为佳。

2、Badge的设计形式

有2类,

一类是仅是一个红点,

另一类是结合数字,或其他文字。

设计数字红点时要合理把控数字上限,比如将上限设定为9,则 9 以上显示 9+;将上限设定为 99,则 99 以上显示 99+。

如果在app内使用,可以有各种颜色的变体。

比如ColorBadges:

让提醒角标随 App 图标变化

ColorBadges是一款Cydia插件,这款插件的作用就是让应用程序的角标颜色和应用程序图标颜色相一致

形式的创新,也许可以从具象的徽章里找到一些设计元素,

可以参考下身着祥云图案、脚踏虎头鞋的卖萌米奇。

3、Badge的交互动画

Badge的交互动画主要是消除动作

很多app的忽略这一点,我查找了些资料,发现qq的消除动作做得蛮有趣的

详情查看

https://isux.tencent.com/qq-mobile-off-duty.html

消除小红点有很多种方式,比如说: 方案一,通过摇一摇把小红点抖落; 方案二,通过对着手机吹一下,把小红点吹掉; 方案三,把小红点拖拽下来,不喜欢哪个拽哪个; 比如 QQ 的拖拽小红点清除等有趣的动态交互平衡消除小红点的千篇一律和无聊。

就是这么个小小的Badge,

其实还有很多可以做的文章~

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-05-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

20个为前端开发者准备的文档和指南8

1.Meteor: The Official Guide(Meteor官方指南) Meteor介绍的链接地址: http://www.geekpark.net/...

3725
来自专栏逍遥剑客的游戏开发

XACT Q&A

1785
来自专栏IT技术精选文摘

Android性能优化来龙去脉总结

一款app除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这样才能更好地提高用户体验。

1182
来自专栏DeveWork

丰富排版页面——为你的wordpress主题添加短代码形式美化框

相信有些wordpresser知道这个东东,在一些主题上这是标配,如deve主题、iartwork主题。原理大概是通过wordpress本身的短代码功能,事先在...

3726
来自专栏李成熙heyli

性能优化三部曲之三——Node直出让你的网页秒开

项目: 手Q群成员分布直出 原因: 为家校群业务直出做准备 群成员分布业务是小型业务,而且逻辑相当简单,方便做直出试验田 基本概念: 直出其实并不算是新概念。只...

7257
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1.1K3
来自专栏程序员宝库

Chrome 常用插件 前端-后端-产品

俗话说chrome没有插件只有四成能力,可见插件才是chrome的牛逼之处。 前提:要想直接使用Google的应用商店需要先本地添加: 谷歌访问助手插件:(下载...

42316
来自专栏郭霖

Android通知栏微技巧,那些你所没关注过的小细节

本篇文章首发于我的微信公众号,其实通常情况下我都不会将微信文章再在博客上发表的,因为我认为两者区别比较大。微信文章偏向于短小精炼,毕竟要在手机上阅读,博客文章则...

3368
来自专栏钱曙光的专栏

一周极客热文:厌倦了编程书?3种提高编程技能的有趣方法来帮忙

Code Combat 如果你曾经从书上学习编写代码,你就知道那有多乏味。为什么不试试一些激动人心的方法来使学习更有乐趣呢?下面介绍的这些网站每个都有自己独特...

2086
来自专栏儿童编程

儿童学编程,3分钟入门极简教程!

Scratch是一款由麻省理工学院(MIT)设计开发的少儿编程工具。使用者可以不认识英文单词,也可以不会使用键盘。就像搭积木一样把一块块积木形状的命令用鼠标拖拽...

7692

扫码关注云+社区

领取腾讯云代金券