赞助商
立即赞助

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

交互设计3年前 (2021)发布 流光
2K 0 0

QQ 小程序游戏中心打丰富多样的小游戏,作为设计师如何通过视觉表现构建一个更好玩的平台,向户传达「好玩」的感受。

从游戏中学习什么是 「好玩」

为么在游戏中我们明知得到实质的报却愿意投入大量时间和金钱?好玩的游戏仅华的外表吸引我们,更因有趣的灵魂带给人深入探索的。我们试着挖掘游戏中那些“好玩”的因素,将到小程序游戏中心的设计中。

构建一个好玩的世界

一个整的世界由「外观」和「核」两分构成。要传达“好玩”的感受,除了抓住目标人群的好,打富有吸引的外观,更需要具备强大的驱作为核。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

搭建外观

外观的搭建需要一套完整统一的视觉表现方式。如何形成一个理,有代入、易于拓展应用的视觉语言体系?

1. 视觉语言的形成

视觉语言的形成为 4 步:

  • 参考真实世界元素
  • 提炼图形征
  • 重组合特征
  • 延展到个世界观

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

以一个生化机器人的角色定为例,计 Tim Anderson 如何在新的界观中建立有效的视觉语言。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

2. 小程序游戏中心视觉语言的建立

以我们从游戏概念设中总结的方法,接下介绍如何运用这套方法建立小程序游戏中视觉语言体系。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

了突出游戏中「好玩」的氛围,构建一「好玩」的平台,我们将可以唤起游戏感的元素融入到小程序视觉语言的设中。

参考真实元素

作参考的真实元素合乎人们的日常认知,引起入感。我们的用户 90、00 后的童对电子游戏原始的记忆源于的游戏厅街机,后家里陆续始出卡机小霸王、掌机 Gameboy,直到了高级的游戏机 Switch。虽然设备一直升级,但总一些共同特征贯穿了整游戏的化历程,能够轻易唤起我们对游戏感的共鸣。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

提炼图形特征

物的特征极其复,我们要在提炼将其抽象化为具有代表的图形。图形特征的提炼分为两个部分「形状」和「纹理」。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

我们提炼世界的游戏机和游戏场中的特征。「形状」常见带弧度的方形,伴随一个角有异化,异化往往是特大圆角或者直角切角两个极端;按键等结构为圆润,以圆或圆角矩形居;三角形应用范围最小,一般在具有用户行为导向的区域,比游戏卡上引导插卡方向的箭头。「纹理」常见条平行直或者圆点有节奏地重复排列,带有一定倾斜角度,在重复中伴有部分异化,比缺口和转折。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

回归到小程序 UI 界,旧版游戏心卡片形态为 UI 模块常见形结构,形较为稳定,利于内容合及区隔。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

重组合

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

以程序游戏中心卡片作为载体,将提炼出的游戏机和景征其进行重组。首先观察「共性」的部,由于外观结构都以方形为主,者可以好地融。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

的重点在于怎做好「差异」的理取舍,让卡片在界面中结构稳定性,其模块整体风格保持和谐,同备游戏。形状上着在卡片中融入从游戏机中提取的「差异」化征。由于程序其卡片模块统一以圆角征为主,舍掉游戏机中直角切角的方式,采用了大圆角作为异化征,为了不破坏外观的统一性,大圆角仅应用在卡片内层;形式上模拟游戏机插卡的定,将卡片作为卡槽,游戏人物为主体嵌入其中,这的定也将息层、主体层、氛围层进行了更清晰的划。

由于角形的尖锐与圆角的圆润形成明对,容易吸引注意并具有指向性,只克制地应在具有户行为导向的分,如「打开」按钮。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

在整体形态确定之后「纹」补充细节,这里应了有转折的斜线搭配圆点,通过点、线穿插丰富节奏感,细节在于多,而在于营情境,丰富且合的细节可引发人对真实世界的更多联想,可信和代入感。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

延展

将整个过程模块化,形成公式「游戏图形征 x 卡片载体 = 游戏模块」同的游戏图形征不同功能卡片载体组,拓展程序游戏中心其模块的计中,形成统一有识别度的视觉语言。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

例如,「品推」、「好友爱玩」模块,直复用了大圆角,斜线、转折、圆点等图形征,根据内容和功能的不同进行了节奏的调。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

有了公式作为依据,可以根据功能点,赋予卡片更理的征。比如「挑战」模块将现实中街机按钮的图形征,运用在了卡片按钮中,化别人激烈对战猛砸按键的景代入,从而刺激点击。最终数据验证挑战模块也是整个程序游戏中心中点击量最高的卡片模块。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

在这个过程中也丰了公式「游戏图形征 x 卡片载体 = 游戏模块」中的「游戏图形征」 资料库,便于直拿来新增的功能卡片载体进行组应用,提升了计效率,同也为未来脑暴新的方案提供了资料积累和依据。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

强化内核

外观满足用户对「好玩」的感受后,我们始深挖入内核,探索什么给用户强的驱动力,让他们愿意一「玩」下去。

1. 驱动力的来源

人的驱动力源于动机、能力触发条件三素 (Fogg’s Behavior Model)。这里我们借八角动机模型,分析动机如何驱动力,视觉动机的强化起到怎样的作用。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

以《塞尔达:荒野之息》例分析视觉表手法如何辅游戏中的核动机,让我们沉浸其中无法自拔:

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

动机:成就感

用大量光和爆炸的视表现去强化获得物品或者装备升级的成就感,常伴随音效和震动反馈。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

动:渴望稀缺

用异化,比如极端体积大小、怪异造型、醒目颜色,来表现稀有。异化程度与稀有度往往成正比。玩家需要过视觉感受可以判断稀有度从而激发获取渴望。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

机:拥有感

塞达中的物设计充满惊,激发收集的欲望。集齐 500 个小精灵的,会获得一个整的金,设计上把金材质和的形状相结合,暗含搞怪的趣味;备中一套带有 Switch 牌 logo 的衫是别心裁。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

2. 小程序游戏中心的动机强化

从游戏的视觉计中汲取经验,析在程序中如何用视觉表现化用户动机,为用户带来「玩」下去的驱动力。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

以对战邀请计为例,仅从视觉角度探索计如何辅助核心动机的化。为个部:拆并归纳已有的息;息模块动机进行组。

归纳息

首先将已有的息拆穷举,重新梳理息类别优先。在这将息为静动种类型,由于对战邀请的实性,所以需要调动息,引起用户对邀请卡片状变化的关注。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

强化信息:信息 x 动机

将整理后的信息模块与动机模型中的 8 核动机行交叉组合,思考其中可以通过设强化的点。一产品很难满八种动机,集中做几个点,就以为用户提供够的驱动力,同样的视设计对动机的辅助也无法做到面,但是运用个方法,以为产品和设计的改进提供方向。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

强化信息:倒计时 x 逃避亏损

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

失从未得到更人感到焦虑,倒计时意味着做择的机会随着时间的流逝正在消失,引起了户紧迫感,利想失任何潜在机会的心态,逼迫他们做决定。在视觉表现上突了最后 3 秒的倒计时,吸引视觉焦点,强户对机会流失的感知。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

化息:按钮 x 好奇未知

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

人类通过对未知的探索得以存发展,满足对未知的好奇对原始本能脑的内激励,比诸多外的奖励都效。如游戏中会用发光的宝箱去激发用户探索的好奇,我们了从视觉提醒用户对战卡片状态的变化,始游戏的状态模拟游戏机的插卡瞬间动态,按钮加入从无到的变化及箭旋转的引导,均匀动态会让用户因习惯失去焦点,所以动效细节也应该富节奏变化。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

强化信息:结果 x 成就感

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

正如我们从懵懂幼年受到小红花激励,渴望成长,完成目标,更需要进步后被奖成感。战邀请在结设计强化胜利后仪感,用麦穗、勋章、闪等代表荣誉元素,烘托第名独特,除了群友炫耀以,更可以挑衅手不服再战,促进战动在关系链自循环。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

未来可以更好玩

从游戏中我们到,构建一个好玩的世界,需要具备富有吸引的外观和强驱的核。这种构建方法只适于小程序游戏中心的视觉设计,更可拓展应到整个小程序的产策略中,为我们未来创更多的「玩」法供方向。

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

如何快速开启好玩的游戏体验,只需打开 QQ 首页轻轻拉,即可进入小程序游戏中心哦~

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

参考资料:

  • [1] Tim Anderson, 设计语言与世界观的联系. 2019
  • [2] Yu-kai Chou, 游戏化实战[M].2017

欢迎关注「腾ISUX」的众号:

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

按钮是最常使用的组件之一,但是在与人交流时,还是会觉得大家存在很多误区,所以本文将围绕如何使用按钮展开分析,希望能给...
B端设计
最近越来越觉得:如无必要,不要做app。为何这样说,先看看糗百的故事。一个存活了17年的产品发布公告:糗事百科网站和APP将...
业务闭环
一、CONCEPT 近几年,AR/VR 的概念非常火热,许许多多的科技公司投入到这股浪潮之中。 2017年上半年我参与了「小白墙」产品...
AR
在线少儿教育的游戏化,已成为提升小朋友满意度和调动学习积极性的常用手段。本期我们请到少儿的交互设计师与大家聊聊, 流利...
交互设计
交互设计这一学科近年来逐渐普及并广泛的应用于互联网产品设计。有国外专业引导,以及国内大环境的形成,企业与设计师逐渐发...
交互设计
设计平平无亮点???不如看看这些仪式感设计 在我们日常生活中,存在着各种各样的仪式感:婚庆、过节,升国旗奏国歌,它可...
ui设计
@Daidai丶呆 :想要理解「输入框」的校验规则,就要先对「输入框」的框架做好拆解。这篇文章将从框架到校验做全方位的梳理。 ...
交互设计
因为发现很多学生和新人,面试过程都像没有任何情商和专业性的愣头青,导致就快煮熟的鸭子飞走了。所以我觉得有必要做一个关...
UI