每个APP都在用的小红点!! 到底如何设计?才不被嫌弃
2023-09-16 23:42:25 0 举报
AI智能生成
每个APP都在用的小红点!!到底如何设计?才不被嫌弃
作者其他创作
大纲/内容
小红点简介
通常指出现在图标/头像右上角的红色圆点或带数字和文字的红点<br>
作用
通知:有未读的消息或有未处理的任务
入口导流:引导用户点击进来,增加点击量
用户对小红点<br>常见处理方式<br>
不在乎忽略形
不管有多少小红点都能做到“不在乎忽略”有需要时就点开对应的一项,其他直接无视<br>
逼死强迫症形
不消除干净就会原地“爆炸”
<font color="#e74f4c">小红点正是利用强破症<br>这一人性的弱点而成为营销利器。</font><br>
小红点<br>展现形式<br>
分类
小红点
有新消息、新内容
基本的提醒和导流<br>
数字+红点
有具体条数的未读消息
提醒感强于单独小红点<br>主要用于社交
文字+红点
辅助仅小红点表述不清
热门、免费、NEW、限时,<br>主要用于活动引导,<br>
图标/缩略图+小红点
头像+红点:和人相关的提醒<br>
图标+红点:和功能相关的提醒
视觉特点:
逼迫点击:高明度、高纯度红色
降低打扰:产品主题色或其他颜色
圆形:让界面看起来更和谐、<br>且能将视线聚焦至圆的中心点,<br><br>
元素右上角:作为辅助提示的存在
消除方式:
点击消失
把最后层级的小红点点击完,<br>上面层级的小红点才会消失。<br>
一键清除
不同产品中<br>用户对红点的<br>注意力<br>
社交办公类:<br>
<font color="#e74f4c">微信、企业微信、钉钉</font>
用户生活+工作 IM沟通强需产品
视觉上多为红色、警示提醒、<br>给人非看不可,不看不消的印象<br>
<font color="#e74f4c">只要是列表中的好友发来消息,<br>有很大的概率立即点开回复,<br>甚至在没有小红点的情况下<br>也会去检查会话列表,<br>以防有什么消息被漏掉</font><br>
<br>社区资讯类
抖音、微博、小红书、快手
消遣娱乐、接受资讯、弱于IM沟通需求
视觉上可以弱化不用红色、或主页面用红色、<br>二级页面用弱级色彩减少对用户的打扰、起到提示即可。<br><br>
<font color="#e74f4c">一旦消息过多影响内容浏览就会<br>让用户产生反感,直至忍耐度降低</font><br>
工具服务类
支付宝、墨迹天气、滴答清单
刚需、用完即走、不用太多注意力。<br>可以减少红色的使用、起到通知作用<br>
小红点设计<br>注意事项<br>
核心述求:高打开率<br>但现在不同产品<br>已经让小红点被滥用<br>
红点通知与用户注意力需求价值相匹配,打开率高<br>
红点通知与用户注意力需求价值不匹配,打开率低,<br>且会起到相反打扰作用、卸载或关闭通知。<br>
<font color="#e74f4c">克制使用小红点:小红点滥用容易让用户麻木、厌烦心理</font>
<font color="#e74f4c">小红点作为消息提醒的一种方式,<br>不仅只是表面上看到的视觉设计问题,<br>它是一个产品营销策略及<br>如何调度用户注意力的问题,保持敬畏之心,</font><br>
清晰的路径导向
清楚每个层级的合理性,<br>让所有页面的信息层级能够串联起来,<br>确保用户有一个清晰的路径导向。<br>每个页面前后信息的一致性<br>
匹配用户价值
当前内容与用户价值相匹配,<br>不能一味的图“更多、更大、更有吸引力<br><br>
合理的消除方式
不是所有产品都适合一键消除
验证投放效果
小红点作为引流方式,点击率、转化率、<br>层级深入程度等进行综合分析,<br>如果未达预期,则需要做出优化调整,<br>更改小红点投放入口或表现方式<br>
学习笔记内容来源
《内容类产品“小红点”设计研究》 作者:大牙
《APP 设计中,小红点的特点及设计是怎样的》 作者:望尽尽是青山
《产品笔记小红点全面剖析》作者:acercheung
<font color="#e74f4c">《用6大章节,帮你完整掌握界面中的小红点设计》作者:能量眼球 </font>
0 条评论
下一页