1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-06-18   分类:交互设计    作者:网络   来源:网络整理   点击:140

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

www.9fen.net

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

为什么在游戏中我们明知得不到实质的回报却愿意投入大量时间和金钱?好玩的游戏不仅用华丽的外表吸引我们,更因有趣的灵魂带给人深入探索的动力。我们试着挖掘游戏中那些“好玩”的因素,将其运用到小程序游戏中心的设计中。

www.9fen.net

构建一个好玩的世界

一个完整的世界由「外观」和「内核」两部分构成。要传达“好玩”的感受,除了抓住目标人群的喜好,打造富有吸引力的外观,更需要具备强大的驱动力作为内核。 本文来自九分网络

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 copyright 9fen.net

www.9fen.net

搭建外观

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

copyright 9fen.net

1. 视觉语言的形成

视觉语言的形成分为 4 步: 本文来自九分网络

参考真实世界元素 本文来自九分网络

提炼图形特征 copyright 9fen.net

重新组合特征

九分网络

延展到整个世界观 copyright 9fen.net

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 www.9fen.net

九分网络

我们以一个生化机器人的角色设定为例,看设计师 Tim Anderson 如何在新的世界观中建立有效的视觉语言。

本文来自九分网络

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

内容采集来自9fen.net

九分网络

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

以上是我们从游戏概念设定中总结的方法,接下来介绍如何运用这套方法建立小程序游戏中心视觉语言体系。 内容采集来自9fen.net

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 内容采集来自9fen.net

本文来自九分网络

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

内容采集来自9fen.net

参考真实元素

www.9fen.net

作为参考的真实元素要合乎人们的日常认知,引起代入感。我们的用户 90、00 后的童年对电子游戏最原始的记忆来源于路边的游戏厅街机,后来家里陆续开始出现卡带机小霸王、掌机 Gameboy,直到现在有了更高级的游戏机 Switch。虽然设备一直在升级,但总有一些共同特征贯穿了整个游戏的进化历程,能够轻易唤起我们对游戏感的共鸣。

九分网络

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 本文来自九分网络

www.9fen.net

提炼图形特征

copyright 9fen.net

真实物体的特征极其复杂,我们要在提炼后将其抽象化为具有代表性的图形。图形特征的提炼分为两个部分「形状」和「纹理」。 www.9fen.net

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 www.9fen.net

内容采集来自9fen.net

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

内容采集来自9fen.net

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 内容采集来自9fen.net

copyright 9fen.net

回归到小程序 UI 界面中,旧版游戏中心卡片形态为 UI 模块中常见的方形结构,方形较为稳定,且利于内容的整合及区隔。

copyright 9fen.net

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

copyright 9fen.net

九分网络

重新组合 本文来自九分网络

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 www.9fen.net

内容采集来自9fen.net

我们以小程序游戏中心卡片作为载体,将提炼出的游戏机和场景特征与其进行重组。首先观察「共性」的部分,由于外观结构都以方形为主,两者可以很好地融合。 九分网络

如何用游戏化思维做设计?来看腾讯顶尖团队的实战案例复盘!--九分网络 内容采集来自9fen.net

内容采集来自9fen.net

我们的重点在于怎么做好「差异」的合理取舍,让卡片在界面中结构稳定性,与其他模块整体风格保持和谐,同时又具备游戏感。形状上我们试着在卡片中融入从游戏机中提取的「差异」化特征。由于小程序其他卡片模块统一以圆角特征为主,我们舍掉游戏机中直角切角的方式,采用了大圆角作为异化特征,为了不破坏外观的统一性,大圆角仅应用在卡片内层;形式上模拟游戏机插卡的设定,将卡片作为卡槽,游戏人物为主体嵌入其中,这样的设定也将信息层、主体层、氛围层进行了更清晰的划分。 本文来自九分网络

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

www.9fen.net

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

www.9fen.net

标签: 交互设计 优设 产品 qq ui 实战复盘 小程序设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----