APP小红点如何使用与实现逻辑

文章目录[隐藏]

APP小红点如何使用与实现逻辑

作者:APP君

 

我们现在已经习惯小红点的不断的骚扰了,每天都不知道要点掉多少个手机APP上的小红点。有些童鞋点击 APP小红点 都已经成瘾。只要看到有小红点就会自然而然去触摸一下。

所以,APP的交互设计已经影响我们的生活了。当然,也有一些追求用户体验极佳的APP,已经想出一些办法来消除这些小红点了。

比如:手机QQ,创造性的设计了一键拖拽清除小红点的功能,得到用户好评。

如下图所示:

APP小红点如何使用与实现逻辑

 

如果有手机强迫症的小伙伴,看到下面这样的手机APP界面,肯定会一直去点击。

APP小红点如何使用与实现逻辑

言归正传,小编跟大家好好的来认识下 iOS系统上的小红点控件。

「小红点」是这个控件在国内最通俗的称呼,正式的名称为「Badge」(徽标),Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。

 

Badge(APP小红点设计)可以分为无数字和有数字两类:
  1. 如果只需让用户了解有更新或新内容必然只有一条时,使用无数字Badge,例如微信公众号更新和App版本更新采用无数字类型。
  2. 如果需要让用户精确了解有多少条更新且新内容有多条,可使用有数字Badge,例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大,也会更吸引用户注意力。

APP小红点如何使用与实现逻辑

目前,大部分的APP上的小红点设计都是采用有数字类型的。

所以,想要设计好APP里面的小红点,遵循上面的那2点要求即可。

另外,也不要乱创意或者是瞎折腾。切忌这样的设计APP里面的小红点。

APP小红点如何使用与实现逻辑

红色小圆点这个视觉元素已经成为一种社会性语义符号,即用户看到红色小圆点就会认为这代表着有新内容,因此图标设计因谨慎使用红色圆点。

例如魅族Flyme社区App里「我的粉丝」图标,红色的心型元素与图标主体间有留白,用户会误以为这表示有新的粉丝,实际上没有,只是图标本来的元素罢了。

 

下面再来分享一张关于产品经理是如何来使用小红点功能的。

APP小红点如何使用与实现逻辑

 

APP交互设计当中的小红点设计的具体实现逻辑如下:
  1. 首先,小红点的初始值一定得从服务器取。
  2. 其次 ,在点击的时候,可本地取消小红点。
  3. 再次,正常点击完了以后,要上传一个小红点的状态给服务器,以便记录,你是不是看了这个小红点。但是为了防止多次请求,可以在这个页面退出的时候,统一请求一次。这样可以解决多个tab有小红点的多次请求问题。
  4. 至于小红点的级别可能不同的应用有不同的级别,有二级的,三级的,这样可以建立层级关系,级别低的发生变化,会通知级别高的。级别高的会 持有级别低的红点进行管理。

 

文章转载来源:APP那些事儿(公众号:yitichuanmei)

 


推荐阅读

【视频课】6周锻造1名优秀的产品设计师
阿里设计师实战案例解读内容化设计
如何设计完美的移动端表单
微信10个交互设计细节问题的探讨
你的APP引导页,为啥用户会忽略?
 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21031/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 【新鲜译文】iPhone X人机界面规范

    译者:阿呜(UXRen翻译组成员)   iPhone X的超大尺寸、高分辨率以及它的全面屏给我们带来了以前从未有过的沉浸式体验和丰富的内容展现。   1、屏幕尺寸 iPhoneX竖屏时的屏幕宽度与iPhone6、iPhone7和iPh…

    2017-09-14
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第八天

    今天仍然在处理上周五的需求。参与讨论的人越多,战线就拖得越长。不过讨论虽然效率低,却能出现各种各样的想法和方案,不靠谱的,靠谱的。 2015/08/04 与老大谈话所得题目起的有点大,不过这是今天老大和我讲的主…

    交互专题 2015-08-20
  • 你的APP引导页,为啥用户会忽略?【UXRen译#159】

    作者:Anthony  |  翻译:冬柏,校审:小四   对于一个新的App产品来说引导页就是它的说明书。当新用户第一次使用时,就可以通过引导页简要的了解到整个App的特征,所以这对新用户来说是很必要的。 但是如果引导页…

    交互专题 2017-08-07
  • 交互设计师的60日计划第十五天

    今天晚上去上了想上已久的舞蹈课,超级超级开心。说要学舞说了这么久,总是不能兑现。今年的另一个要实现的事情,就是每周坚持学舞蹈吧。 20150813 产品经理的自己提的方案也可能并不是他想要的 很久以前师父和老大…

    交互专题 2015-08-20
  • 13毫米:触屏按钮的完美尺寸【UXRen译#170】

    作者:Scott Hurff   |  翻译:taitai,校审:天蛙   有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时,当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时,那种挫败混杂着气恼的滋味。 但假…

    交互专题 2017-08-07
  • 【译文】你瞅啥?文案也是一种设计力量

        做事,不能只讲求实际运用,有的时候,也是需要加入一些纸上谈兵的环节的,毕竟,在理论指导下的实践才不是盲目的。 通常,一些科技类企业无法保证其网页每一个单独界面、广告业和交互页面上的文案都有专人负责…

    交互专题 2017-08-07
  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 关于2017年设计趋势的13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。 在2016这一年,全世界笃信…

    交互专题 2017-08-07
  • 埃森哲设计思维成就价值创新:从“外在美”到“内在美”

    作者:杨鹏(埃森哲数字设计与创新经理);田晖(埃森哲数字咨询服务总监);王曦(原埃森哲数字设计与创新顾问)   领先企业已经认识到,设计不仅仅停留在产品的 “外在美”,而应聚焦在更具商业价值的“内在美”。那…

    交互专题 2017-09-18