APP 设计中的小红点

刚开始工作的时候,做过一版消息的页面,当时虽然加上了小红点,但却不知道它为什么要这样设计,现在消息页面需要改动,于是便想弄清楚其背后的设计原理。我提出了一些问题:小红点的定义和作用是什么?有哪些视觉特点?常见样式有哪些?我们为什么这么想点击它呢?这篇文章就和大家分享一下关于小红点的设计。

目录

1.小红点的定义

2.小红点的作用

3.视觉特点

4.常见样式

5.为什么老是想点击

小红点的定义

小红点是我们惯用的叫法,它正式的名称应该叫做徽标(Badge)。通常指出现在图标右上角的红色圆点或带数字和文字的红点,如下图:

小红点的作用

它的主要作用有两个,一个是起到通知的作用,告诉用户有未读的消息或有未处理的任务;另一个是起到为入口导流的作用,引导用户点击进来,增加点击量,如下图:


以微博和安居客为例,微博页面中的小红点是为了通知用户有20条未读的消息,安居客页面中的小红点为了引导用户去看推荐的房源信息。

视觉特点

主要从颜色及消除方法两方面阐述一下小红点的视觉特点。

1.颜色

小红点为了“逼迫”人们点击,通常会使用高明度+高纯度的红色,因为红色色彩感知强烈,而且有警告、危险的含义。更容易和页面形成强烈的对比,引起人们的注意。QQ中好友和系统的消息推送都使用了红色的小红点,如下图:


但有时候为了不过多干扰用户,也会使用色彩感知较弱的蓝色。比如QQ群助手里的消息推送就使用了浅蓝色的小红点。如下图:


2.消除方式

最常见的消除方式就是点击一下,小红点就消失了;或者是把最后层级的小红点点击完,上面层级的小红点才会消失。而有的 APP 把这个过程做的非常有趣,如下图:


QQ消息入口的小红点可以被随意地拉伸,然后爆炸消失,用这种趣味的方式可以减轻用户的厌烦情绪。最好能够为用户设置一个一键消除的按钮,这样可以大大减少用户的操作成本,如下图:


以淘宝为例,因为用户要和众多的商家沟通,再加上很多会员群或者系统消息的推送,消息通常会非常多,而一键清除只需要点击一次就可以消除所有的小红点,大大减少了操作成本。

常见形式

常见的小红点有纯红点、数字+背景色、文字+背景色3种形式,它们都有各自对应的使用方法以及使用场景。

1.纯红点

这种形式常用在一些入口上面,引导用户点击进入更深的层级,是最常见的一种形式。如下图:


以支付宝为例,支付宝首页中出现的这些纯红点,目的就是为了让用户点击这些入口,把用户引入更深的层级。

2.数字+背景色

这种形式就是在纯红点的基础上加入了数字,主要用于消息通知的场景中,提醒用户有未读的消息并且可以向用户显示具体的数量。如下图:


以淘宝和微博为例,淘宝中的订单消息、微博的资讯消息,都使用了这种红点形式。其中淘宝的订单消息是用户想要看到的,而微博的资讯消息是系统自动推送给用户的,用户被动接收不想要的消息时,会产生厌烦心理。

3.文字+背景色

这种形式是在纯红点的基础上加入了文字,常用于运营活动的场景,文字内容通常是一些有较强吸引力的词句,为了吸引用户点击。


上图美团的页面中,就使用了了“赢现金”、“特惠”、“享特价”、“领券”等特别具有诱惑力的词来吸引用户点击。

以上就是小红点常见的三种形式,但是在实际项目中会涉及到多个层级和多个入口,所以一般都是多种样式的小红点组合起来使用。为什么老是想点击?这里涉及到了“知觉流畅性”,我很喜欢科学家种太阳在果壳问答中的观点,以下是原文摘要:

为什么人脑会在加工信息时,在知觉层面上,刻意追求对信息的合理简化?因为外界信息太多了,大脑分分钟过载崩溃,所以不得不牺牲大量的噪音信息,把其中有意义的好理解的能记住的,筛选出来,然后作为知觉加工的产出。这是人脑在漫长的进化过程中逐渐习得的一种认知习惯,几乎已经成为了本能。

为什么人类也会“喜欢”那些本来就整齐划一从而容易被大脑组织加工的东西呢?因为知觉流畅性。流畅性是个体对加工信息难易程度的一种主观体验,它分为知觉流畅性、概念流畅性、提取流畅性等。其中知觉流畅性涉及个体对刺激较低水平的加工,反映了个体对知觉外部信息难易程度的主观感受。它本身并不是一种认知操作,只是一种有关认知操作的感受。比如,看到杂乱无章的房间,有的人就会觉得头很大,而看到收拾得井井有条的少女的床,可能就舒服多了。简单来说,就是人类的大脑在处理整齐划一的事物时,因为消耗的能量比较少,所以感觉很流畅,就会产生愉悦感,如下图:


图1中所有的矩形都整齐划一的排列,我们在浏览的时候很流畅,但图2中有一个矩形角度发生了变化,当我们浏览到这个矩形时,大脑忽然停顿了,是不是特别想把它摆正?同样的,小红点的出现就是打破了整体页面的流畅性,和页面形成特别强烈的对比,让人不得不把它点掉,以保持知觉的流畅性和大脑的愉悦感。

总结

今天主要分享的一件事是 APP 中小红点的设计,我总结了五个点是:

1.小红点的主要作用:一个是起到通知的作用,另一个是起到为入口导流的作用。

2.通常会使用红色,这是因为红色色彩感知强烈,更容易和页面形成强烈的对比;如果想不过多干扰用户,可以使用色彩感知较弱的蓝色。

3.有趣的消除方法可以较少用户的厌烦心理,添加一键清除可以较少操作成本。

4.在实际项目中会涉及到多个层级和多个入口,一般都是多种样式的小红点组合起来使用。

5.小红点借用了人类大脑会对流畅的事物产生愉悦感的现象,打破页面流畅性,引起人们的注意而去点击。

参考引文:

《【产品笔记】小红点全面剖析 – 简书》

《控件详解之「小红点+索引导航+分段控件」》

《人们为什么喜欢看整齐划一的事物?》

《烦人的“小妖精”:浅谈小红点的设计》

《讨人嫌的小红点/徽标 》

海盐社(公众号)
作者: 青山

(0)

相关推荐

  • APP设计中被低估的色彩搭配

    小编:感谢@star的翻译,这是一篇关于APP设计中对于色彩搭配的思考.于他新开的公众号"UISTAR",关于star的相关文章推荐<UISTAR的个人Dribbble作品& ...

  • APP设计中的行为设计思维!

    前言 在武侠小说中,经常会出现经脉之说,打通任督二脉就可以成为武林高手.任督二脉打通后,内力可以游走全身,循环往复,不会发散,发招时可以把全身的力气聚集一点而出. 做设计同样如此,设计师怎样才能打通任 ...

  • 深度解析字体在APP设计中的奥秘

    小编:APP里面文字.图形.色彩是信息传达的三要素,字体则是这三要素中的最重要因素之一. 在用户界面中,每一个单词和字母都至关重要.好的字体等于好的设计.字体成了界设计的基石,而我们设计师,则是这些& ...

  • APP设计当中不容忽视的20个小细节

    小编:在设计中,我们总会忽略了一些细节上的问题,其实要把细节处理好也是非常难的.那么在APP设计中的你是否也粗心大意过,或许你还不知道原来有那么多地方需要重视,今天分享的这一篇关于大家在APP设计当中 ...

  • 2016年移动端APP设计趋势

    不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态.用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催 ...

  • 在GUI设计中如何运用模糊和投影(下)

    小编:@UISTAR当我们回顾这几年做的体验比较优秀的交互设计时,会明显发现做的比较好的APP都是注重功能优先的.对一个产品来说,好的功能设计是它成功的关键.美学和视觉细节同样重要,因为他们可以有效的 ...

  • 体验设计中的仪式感设计

    过去这100多年里不同时期设计主义的演变,与环境趋同.历史.经济.社会与人的需求变化息息相关.互联网设计演变也是如此. 一.历史趋势与当前环境 在王受之<世界近代现代设计史>中讲述了近代设 ...

  • 小红书APP中的小红书号怎么修改

    今天给大家介绍一下小红书APP中的小红书号怎么修改的具体操作步骤.1. 首先打开手机上的小红书APP,进入主页面后,点击页面右下角的我选项.2. 在打开的我的页面,点击个人头像右侧齿轮图标.3. 在打 ...

  • 如何打开小红书APP软件中的一键防护功能?

    下面介绍打开小红书APP软件中的一键防护功能的操作方法:第一步:首先进入手机上的小红书APP软件,在主页的底部打开[我的]功能,接下来在弹出的个人主页中,根据箭头所指打开窗口左上角的三个横的图标.第二 ...