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」的众号: