设计

https://www.uisdc.com/app-red-dot-design

大家好,我是 Clippp,今天为大家分享的是「徽标设计」。说到徽标(Badge)设计,可能有些读者会觉得陌生,但是大家肯定都知道手机软件上那些没完没了的小红点提示,这种设计就是运用了徽标(Badge)组件。

徽标很常见却又很容易被忽视,除了常见的小红点,根据使用场景的不同,徽标组件还有其他设计样式,比如在小红点上加数字、文字、状态……而且除了圆形,徽标还有很多其他形状,如果你也忽视了这些关于徽标的设计细节,一起来看看吧~

徽标的四种类型

徽标组件有纯圆点、数值、文字、图标 4 种常见的类型:

1. 纯圆点

纯圆点徽标是最常用的类型,作为一个轻量级的提醒,引导用户点击某些特定的功能。

https://image.uisdc.com/wp-content/uploads/2022/01/uisdc-hd-20220128-2.jpg

纯圆点徽标还可以用来区分用户的状态,显示用户是否在线。

https://image.uisdc.com/wp-content/uploads/2022/01/uisdc-hd-20220128-3.jpg

2. 数值

带有数值的徽标用来表示具体的数量,主要用在消息通知、添加购物车、外卖点餐等场景。例如在消息通知的场景中,消息 icon 上显示的数值可以用来告诉用户有几条未读的新消息。

https://image.uisdc.com/wp-content/uploads/2022/01/uisdc-hd-20220128-4.jpg

又或者在网购或点餐等场景中,通过购物车的数值徽标的变化,就能知道已经选择了多少商品或食物。

https://image.uisdc.com/wp-content/uploads/2022/01/uisdc-hd-20220128-5.jpg

3. 文字

文字主要有两种使用类型,一种是单独的文字徽标,多用在电商运营等活动场景中,通过显示优惠促销来吸引用户。例如在某多多首页的功能图标区域,通过加入不同的文字徽标,能够告诉用户有新的“限时秒杀”活动和“立减 2 元”的充值优惠,鼓励用户采取行动。

https://image.uisdc.com/wp-content/uploads/2022/01/uisdc-hd-20220128-6.jpg