恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
没有排行榜的徽章系统,是你会怎样设计?
0.0°
2017-05-04 原创文章 经验/观点 举报 1955 1 2 0

最近接手一个活,是设计徽章系统的。PM还没有整理完需求,于是自己先搭了一个最基础的框架,然后顺着市场上现有产品的思路一步步思考下去。


徽章系统是游戏化设计的一个环节,一般与积分和排行榜相连进行设计。可如果限于开发成本的原因,某个版本暂时不考虑积分和排行榜的设计(有徽章会涉及到积分和排行榜,这个另外在一篇文章进行说明)。也就是说徽章系统只能有list(列表页)、单个放大的页面,类似于iOS系统中iWatch的“健身记录”APP,如下图。应该如何处理这个问题呢?


Image title

Image title


咱们从源头来想想徽章系统设计的目的,它是游戏化设计中的一个环节。游戏化设计咱们从这篇文章开始慢慢进行讲解。游戏化是指运用游戏思维和游戏机制来解决问题和锁定用户的过程。——盖布·兹彻曼(Gabe Zichermann)。使用游戏和游戏元素背后的驱动力是相同的,都是要通过趣味性来激发和吸引用户,增加用户活跃性


所以咱们的目的是一种用趣味化的方式让用户持续性用APP,以及在APP内与好友产生良性互动,进行一些社交。也就是说咱们现在就是针对这两个页面去想方设法,勾起用户的挑战欲,以及增强用户之间的互动。


解决办法有以下几点:

1.同样是所有徽章的list排列出来,不同的是突出最近获得的那一个,给予用户视觉上的重点以及一些熟悉感。最近获得的也是用户在看列表时,印象最深的。


思考的突破点是觉得iWatch的徽章列表只做展示没有比较强烈的情感注入在里面。当然iWatch的优点在于徽章的个性化设计,在徽章上面刻上了用户的名字和激活的时间,这个点可以拿来参考,但要做到3D的渲染效果图在第一阶段可以暂时不考虑(太费资源,囧)。


2.针对每个达到的徽章,添加时间与徽章名、徽章代表的主要活动信息,并且将这些信息放在最外层,一目了然,用户在迅速浏览的时候,不用再点到单个徽章详情页面再去看信息。如下图。

Image title


3.单个徽章的展示页面,分为激活和不激活两个状态进行描述,激活状态的,加上发生时间、徽章名称、代表内容详情、分享按钮。分享出去的H5页面,带有对方头像、事件发生时间、徽章的名称以及徽章的具体代表意义等因素,叙述的是一个完整的事件,与list页面的信息相呼应,也与APP内的页面内容保持一致。


同时在相应的页面也给予action button的提示,让用户在激活的状态下去分享,未激活的状态下去行动注意那个相机按钮,下文会用到)。 如下图

Image title

Image title


4.个性化设置,比方说分享的时候,徽章背景可以自行上传,用户可以从相册中选择一张,或者现场拍一张进行上传,将图片进行裁切成固定比例。如果用户不上传就自动将徽章设置为背景,上传新的照片后,徽章作为水印的作用烙在图片上。

Image title


综合起来看,阁主的思路就是先根据一定场景,推断出用户的比较常见的行为,将行为表现在页面上。然后,再将整个行为过程中的页面进行分拆开,针对每个页面进行信息侧重点的区分,可以创新的地方先创新。最后再将所有页面的行为再连贯起来进行思考,让行为有所联系


当然所有以上的解决方案都是基于各种限制条件下去进行调节的,如果想拥有更广阔的思路,就从整个APP的结构出发重新思考,会有不一样的大局观,从而产生不一样的思路。比方说,游戏化设计有三大要素:自主性(动机)、能力(挑战度稍比自己强)、关联性(与其他玩家的互动),这三大要素又会引导出游戏化设计的组成因素:game、得分、奖章或贴纸、排行榜、进度、限制因素。


且听下回分解~


Sophia的tips:
不管处于什么样的情况下都是会有解决办法的,只要肯花时间!


其它热门文章
创业公司设计师怎样从0到1设计一款APP(七)——APP Logo的设计
创业公司设计师怎样从0到1设计一款APP(六)——整理和交接工作
创业公司设计师怎样从0到1设计一款APP(五)——UI规范整理
创业公司设计师怎样从0到1设计一款APP(四)——Hi-fi输出(下篇)
创业公司设计师怎样从0到1设计一款APP(四)——Hi-fi输出(上篇)
创业公司设计师怎样从0到1设计一款APP(三)——Low-fi输出
创业公司设计师怎样从0到1设计一款APP(二)——立项
创业公司设计师怎样从0到1设计一款APP(一)——概述


作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。
职场设计技能,更多教程抢先看,请关注作者的微信公众号:Sophia的玲珑阁Image title





更新:2017-05-04

收藏

1人已收藏

Sophia的玲珑阁

从创业公司到大厂,分享实用的互联网设计技巧和职场经验。

  • 142

    作品

  • 389

    粉丝

  • 7

    关注

  • 作为设计师,我是如何一步步找到业务增量的
  • 情绪是魔鬼,但要原谅自己
  • 2020年打工人4条总结出炉
  • 提升屏效可实施性最强的4大方法
相关标签
设计经验UDCUX

    猜你喜欢

      2017-05-04 原创文章 经验/观点 举报 1955 1 2 0

      没有排行榜的徽章系统,是你会怎样设计?

      0.0°

      你确定要举报没有排行榜的徽章系统,是你会怎样设计?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录