020-29815005
预约专线时间:09:00-23:59

ui界面设计中的“小红点”是什么

新闻来源:优漫教育 日期:2021-07-05
红点的定义和作用是什么?有什么视觉特征?常见的风格是什么?为什么这么想点击呢?这篇文章介绍了红点的UI设计。
  一、小红点的定义。

  小红点是我们常用的名字。它的正式名称应该叫标志。通常指出现在图标右上角的红点或带有数字和文字的红点,如下图所示:

 二、小红点的作用。

  其主要要功能有两个,一个是通知,告诉用户有未读消息或未处理任务;另一个是引导入口,引导用户点击,增加点击量,如下图所示:

  三、视觉特征。

  为什么常见的小红点是红色的?如何消除小红点?以下是小红点在颜色和消除方法上的视觉特征。

  1、颜色。

  为了强迫人们点击,小红点通常使用高亮度+高纯度的红色,因为红色感知强烈,具有警告性和危险性。与页面形成强烈的对比更容易,吸引人们的注意力。在QQ上,朋友和系统的信息推送都使用了红色的小红点,如下图所示:

  2、消除方法。

  最常见的淘汰方式是点击,小红点消失;或者点击最后一层的小红点,上面一层的小红点就会消失。

  而且有些APP把这个过程做得很有意思,如下图:


UI设计培训班


  四、常见形式。

  常见的红点有纯红点、数字+背景色、文字+背景色三种形式,各有相应的使用方法和使用场景。


  1、纯红点。

  这种形式常用于一些入口,引导用户点击进入更深层次,是最常见的形式。

  2、数字+背景颜色。

  这种形式是在纯红点的基础上添加数字,主要用于消息通知场景,提醒用户有未读消息,并向用户显示具体数量。

  3、文字+背景颜色。

  这种形式是在纯红点的基础上添加文本,经常用于操作活动的场景。文本内容通常是一些吸引人的单词,以吸引用户点击。