游戏界面徽标(小红点)规范

1445天前
转载文章 / UI / 图标 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
9684
0
0
 | 
作者:杨曦


166821948891392_1.png


徽标(Badge)常被称作“提示小红点”。


2013年,徽标在苹果IOS中正式使用,随后被大众所习惯,开始成为通用的通知设计规范。但在游戏产品中,徽标规范是最不受重视的,几乎没有规范可言。


缺乏规范,不仅达不到引导玩家、系统导流的效果,还会让玩家产生厌烦以及麻木的心理。


所以,徽标规范在游戏界面中意义重大。




一、徽标的几种形式



1668219747893057_0.png  常规形式

点击这里,将有好事发生。


使用情景:


领取奖励或投入养成等收益向提醒,采用常规提醒形式。玩家见到常规徽标,不会觉得是视觉负担,反而满心欢喜的去点击。


常见问题:除了领取奖励之外,把邮件信息、功能开启、物品提醒等,都用常规形式表现,面对满屏的红点提醒,玩家容易丢失正向的交互反馈,对徽标的导流方式产生厌恶。



 1668219815708420_0.png 数字形式

清晰建立交互预期。


使用情景:


1,邮箱或背包功能入口处加入,让玩家精确了解有多少条更新内容;


1668219489941548_5.png



2,同时存在多个可领取状态的界面中加入,加强刻度感。


1668219489973978_6.png


常见问题:例如《王者荣耀》有多个可领取状态的界面中,有的是常规形式,有的是数字形式。策划往往会凭喜好和经验进行配置,导致用户体验的不一致。



166821948917822_7.png  文字形式

仅作提醒或明确交互目的。


使用情景:


1,希望玩家留意新物品或新功能时,会用“新”字徽标;


1668220033565872_0.jpeg


2,在一个系统有多个养成功能时,加入明确的目标指向;


1668219489876575_9.png


常见问题:很多游戏会忽略背包中的新物品提示。当玩家在商城购买各式宝箱后,打开背包进行后续交互,这时如果没有“新”徽标提示,将很难找到或区分这些物品。



1668220110606734_0.png  符号形式

有明确交互目的。


使用情景:


物品带有明确的增益效果或可进行养成,这种图形化的符号形式交互指向性更强。


常见问题:根据游戏类型的不同,符号形式与使用情景也不一样,需要针对自己的游戏类型进行扩展。注意:一定要选择有玩家共性认知的符号,标识含义不能模糊。




二、设计中的注意事项


1,谨慎在图标内运用红色圆点元素


玩家看到红色小圆点就会认为这代表着有新内容,因此在图标设计中应谨慎使用红色圆点。


1668219490633067_12.png

误解:有新的粉丝



2.注意数字的长度和上限


由于界面显示空间有限,因此要注意数字最长显示多少位,如果数字达到上限该如何显示。


1668219490506156_13.png



3.跟进版本中的徽标位置


定义位置规范,并在版本中充分验收,避免因红点位置错误导致看不清的体验问题。(很多游戏都普遍存在的问题,需要重视。)


1668219490681819_14.png




三、克制使用徽标


注意背包中的其他状态


某些游戏类型中,背包里的物品会附着许多状态。所以在新物品的徽标判断上,可以定义为:需要在背包使用的物品,加入赋予“新”徽标。


或者给予合理的物品排序规则或特效标识,避免徽标之间的状态突出。


1668219490312239_16.png



一些更好的选择


当红点提醒的边界效应愈发明显时,需要通过更生动的表现形式来提高交互关注度。


1668220458423332_0.gif




四、总结


如何定制一套徽标规范:


1,交互规范:


定义表现形式、匹配的应用场景


1668220921288373_0.png

格式示意



2,视觉规范:


· 造型、位置、颜色、长度上限


· 规避可能误导设计(ICON)


1668219492946470_20.png

符合产品调性:徽标不一定必须是红色


3,意识层面:


徽标存在的价值是:引起注意与系统导流。


从设计角度,明显还有很多的办法来达成这一目的,如何寻求突破决定了你的意识层次。


最后,一定要注意验收:


在体验走查或QA验收时,务必依照规范进行徽标提醒功能检查,避免上线时出现各种红点乱提示的情况。

声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-图标
9684
0
0
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消