![ffcc985ed937a92c9270ad6e9456d570.png](https://img-blog.csdnimg.cn/img_convert/ffcc985ed937a92c9270ad6e9456d570.png)
徽标(Badge)常被称作“提示小红点”。
2013年,徽标在苹果IOS中正式使用,随后被大众所习惯,开始成为通用的通知设计规范。但在游戏产品中,徽标规范是最不受重视的,几乎没有规范可言。
缺乏规范,不仅达不到引导玩家、系统导流的效果,还会让玩家产生厌烦以及麻木的心理。
所以,徽标规范在游戏界面中意义重大。
![a4423bb6e10b288c51d5ec7c48d8e4ac.png](https://img-blog.csdnimg.cn/img_convert/a4423bb6e10b288c51d5ec7c48d8e4ac.png)
徽标的几种形式
![2d30dc95bb8bab3daef69ca6acc53a65.png](https://img-blog.csdnimg.cn/img_convert/2d30dc95bb8bab3daef69ca6acc53a65.png)
常规形式,点击这里,将有好事发生。
使用情景:
领取奖励或投入养成等收益向提醒,采用常规提醒形式。玩家见到常规徽标,不会觉得是视觉负担,反而满心欢喜的去点击。
常见问题:除了领取奖励之外,把邮件信息、功能开启、物品提醒等,都用常规形式表现,面对满屏的红点提醒,玩家容易丢失正向的交互反馈,对徽标的导流方式产生厌恶。
![fbd7fa97d73888939e7e87fc528c3dd4.png](https://img-blog.csdnimg.cn/img_convert/fbd7fa97d73888939e7e87fc528c3dd4.png)
数字形式,清晰建立交互预期。
使用情景:
1,邮箱或背包功能入口处加入,让玩家精确了解有多少条更新内容;
![27afa9b044b1183507bdfb68dc3b7f67.png](https://img-blog.csdnimg.cn/img_convert/27afa9b044b1183507bdfb68dc3b7f67.png)
2,同时存在多个可领取状态的界面中加入,加强刻度感。
![26306fd006f649e98c475115b1713564.png](https://img-blog.csdnimg.cn/img_convert/26306fd006f649e98c475115b1713564.png)
常见问题:例如《王者荣耀》有多个可领取状态的界面中,有的是常规形式,有的是数字形式。策划往往会凭喜好和经验进行配置,导致用户体验的不一致。
![67ae30aa7e726f9c661f3632c6a3e1d5.png](https://img-blog.csdnimg.cn/img_convert/67ae30aa7e726f9c661f3632c6a3e1d5.png)
文字形式,仅作提醒或明确交互目的。
使用情景:
1,希望玩家留意新物品或新功能时,会用“新”字徽标;
![26055b6159c1366c1806f0e1465563de.png](https://img-blog.csdnimg.cn/img_convert/26055b6159c1366c1806f0e1465563de.png)
2,在一个系统有多个养成功能时,加入明确的目标指向;
![0f04ff0f788a1edf4d5aa599f84046c0.png](https://img-blog.csdnimg.cn/img_convert/0f04ff0f788a1edf4d5aa599f84046c0.png)
常见问题:很多游戏会忽略背包中的新物品提示。当玩家在商城购买各式宝箱后,打开背包进行后续交互,这时如果没有“新”徽标提示,将很难找到或区分这些物品。
![d0fe7fa6dfce121f3290951918b3aaa6.png](https://img-blog.csdnimg.cn/img_convert/d0fe7fa6dfce121f3290951918b3aaa6.png)
符号形式,有明确交互目的。
使用情景:
物品带有明确的增益效果或可进行养成,这种图形化的符号形式交互指向性更强。
常见问题:根据游戏类型的不同,符号形式与使用情景也不一样,需要针对自己的游戏类型进行扩展。注意:一定要选择有玩家共性认知的符号,标识含义不能模糊。
![20963c95b0bde1af450a479b2fa69041.png](https://img-blog.csdnimg.cn/img_convert/20963c95b0bde1af450a479b2fa69041.png)
设计中的注意事项
1,谨慎在图标内运用红色圆点元素
玩家看到红色小圆点就会认为这代表着有新内容,因此在图标设计中应谨慎使用红色圆点。
![98204e4c1205f0e465ade5bdb9747108.png](https://img-blog.csdnimg.cn/img_convert/98204e4c1205f0e465ade5bdb9747108.png)
2.注意数字的长度和上限
由于界面显示空间有限,因此要注意数字最长显示多少位,如果数字达到上限该如何显示。
![aee3b59ae7171f8fee469fc20e25c38b.png](https://img-blog.csdnimg.cn/img_convert/aee3b59ae7171f8fee469fc20e25c38b.png)
3.跟进版本中的徽标位置
定义位置规范,并在版本中充分验收,避免因红点位置错误导致看不清的体验问题。(很多游戏都普遍存在的问题,需要重视。)
![436c2d22502c9188624ae43666a4b212.png](https://img-blog.csdnimg.cn/img_convert/436c2d22502c9188624ae43666a4b212.png)
![408ee580959c5a27429e52929ee26d07.png](https://img-blog.csdnimg.cn/img_convert/408ee580959c5a27429e52929ee26d07.png)
克制使用徽标
注意背包中的其他状态
某些游戏类型中,背包里的物品会附着许多状态。所以在新物品的徽标判断上,可以定义为:需要在背包使用的物品,加入赋予“新”徽标。
或者给予合理的物品排序规则或特效标识,避免徽标之间的状态突出。
![17f12a488425a185d8aa8ce1e93b9144.png](https://img-blog.csdnimg.cn/img_convert/17f12a488425a185d8aa8ce1e93b9144.png)
一些更好的选择
当红点提醒的边界效应愈发明显时,需要通过更生动的表现形式来提高交互关注度。
![7839a7282eb36ac2deb08d1fdcc6f0df.png](https://img-blog.csdnimg.cn/img_convert/7839a7282eb36ac2deb08d1fdcc6f0df.png)
![ea583be41e746c98b939eab31aadda25.png](https://img-blog.csdnimg.cn/img_convert/ea583be41e746c98b939eab31aadda25.png)
总结
如何定制一套徽标规范:
1,交互规范:
定义表现形式、匹配的应用场景
![6cdfc5879577a4aec17414e200713814.png](https://img-blog.csdnimg.cn/img_convert/6cdfc5879577a4aec17414e200713814.png)
2,视觉规范:
· 造型、位置、颜色、长度上限
· 规避可能误导设计(ICON)
![96c47c7eedf5505d0522c853bf312922.png](https://img-blog.csdnimg.cn/img_convert/96c47c7eedf5505d0522c853bf312922.png)
3,意识层面:
徽标存在的价值是:引起注意与系统导流。
从设计角度,明显还有很多的办法来达成这一目的,如何寻求突破决定了你的意识层次。
最后,一定要注意验收:
在体验走查或QA验收时,务必依照规范进行徽标提醒功能检查,避免上线时出现各种红点乱提示的情况。
![9e4ef8fe278cdeb25c6137def4617dc3.png](https://img-blog.csdnimg.cn/img_convert/9e4ef8fe278cdeb25c6137def4617dc3.png)
![b0224c9a6f4fac26ad76224dcf7cde47.png](https://img-blog.csdnimg.cn/img_convert/b0224c9a6f4fac26ad76224dcf7cde47.png)
杨曦 · 游族网络UEDC
专注游戏用户体验设计10年
曾任职网易、腾讯、畅游
<关于添加微信>
欢迎交流或咨询专业问题。
下个月建专业群,方便拉你进来一起交流。
![a650ded8e3bd1a845ffb3061d03dce30.png](https://img-blog.csdnimg.cn/img_convert/a650ded8e3bd1a845ffb3061d03dce30.png)