腾讯光子设计师:《英雄联盟手游》界面概念设计分享
2021-12-31 11:42:44 作者:网络转载
首发 光子设计中心
导语:
在玩游戏的时候,我们都忙着挑选英雄和符文、策划路线和打法,不自觉就沉浸在游戏世界里。正当此时,界面也“消失”了。在界面的概念设计上,设计师是如何把握平衡的?腾讯光子设计师“xiaohao”带你一一探寻。
界面概念设计的必要性
从产品定位来说,《英雄联盟手游》具备了独立性,它与LOR、Valorant等游戏一样,都是英雄联盟IP生态的一部分。由于玩法和屏幕尺寸与端游的不同,界面概念设计并不是简单地将UI内容,从PC端直接搬运到移动端里。
无论从产品的哪个角度来看,《英雄联盟手游》与《英雄联盟》的两个游戏世界虽然不同,但其实双方充满着千丝万缕的联系,而且是割不断的。UI概念设计的目的,就是要让玩家能够很好地理解,这两个起源一致、大同小异的世界之间的一致与区别,以及对新世界的界面设计产生认同感。
玩家传输设备
“正如《英雄联盟》中的海克斯科技设定一样,手游也可以通过使用某种设备‘传送’玩家”,这个想法便很自然地,可以解决两个世界概念设计的融合性问题。
《英雄联盟》的召唤师峡谷 →《英雄联盟手游》的狂野峡谷
玩家只需通过手中所握着的手机/平板电脑,与金克丝使用HEXTECH传送装置一样,让英雄从召唤师峡谷来到《英雄联盟手游》的狂野峡谷。这样的解决方案,从现实或是游戏的角度来说,无疑也最为契合。
因此,手游整体界面的概念和风格,都是围绕着这台传送装置/现实移动设备来设计的。
海克斯科技+手机+传送门=海克斯传送装置
主流程系统
在我们解决了玩家的场景穿越问题后,另一方面,我们还要将产品内部的各个功能模块分开,并做好每个模块的UI概念设计:让玩家在游戏中随时清晰地知道,自己所处的位置。
有端游经验的玩家,能在手游中找到很多熟悉的内容,(尤其是设计师)也有时候会产生这样的疑问:“这个界面是对应端游的哪一个界面?”“这个功能是我以前熟悉的哪一个功能”?
为了解决玩家的位置感知问题,在UX与UI设计环节前期,设计师尽可能地将各个大模块,用不同的概念和功能进行分类、包装。
三个大模块的设计定调
首先,主线流程就是整个游戏的核心流程,也是带领玩家进入战斗的游戏流程。根据设计定调,这个流程会以“将玩家传送到狂野峡谷”的理念,来进设计行包装。
在核心视觉语言上,主线流程首先是继承了端游的视觉风格,也就是HEXTECH。但是基于手游的交互特征,我们还做了大量的减法与提炼设计 —— 保留了机械与魔法的核心视觉语言。
HEXTECH的元素构成 ——机械与魔法:机械操控魔法、魔法驱动机械
蓝色魔法圈
在设计中,蓝色魔法 是作为一个非常特殊的视觉符号被广泛使用 —— 那些凡是带有蓝色、或者蓝色魔法的按钮,是可以带领玩家进入狂野峡谷开始战斗地。而这,正是游戏主线流程中的核心功能。
圆形传送结构
如何让玩家在游戏中,体验被传输的感觉,在UI上,首先得有一个传送的载体。在概念设计中,这个载体可以被称为是“海克斯传送装置”。设计师使用人们对传送门的普遍印象视觉化符号,再加上游戏世界观的元素,制作出可下图右边的圆形传送结构UI。
重新设计的视觉元素—— 都通常都会带一点 Piltover 的审美
就这样,在整个主线流程中,圆形结构与蓝色按钮,将带领玩家直接进入狂野峡谷,开始战斗。玩家即使是看不懂文字,也能通过识别出这些视觉元素,进入到游戏场景中。
穿梭动效
在视觉语言的主框架确定了之后,接下来就要考虑如何增强传送的代入感。
假想自己穿过一道空间传送门
而正当“传送”的这个概念定下来后,其实界面转场的动势语言,也自然而然地出现了 —— 穿梭动效。而且因为玩家是穿梭的主体,团队在这个环节上,采用了大量的第一人称视角,来展现穿梭过程。
所以,在主线流程的概念设计中,我们会看到这样的视觉语言贯穿其中:蓝色魔法圈 + 圆形传送结构 + 穿梭动效。
主流程界面
大厅界面交互动效
结算界面交互动效
组队界面交互动效
在结束对局之后,英雄会回到峡谷外的高地,接受队友的点赞,之后才会切换到结算数据界面。这样,在流程上和故事上都形成了一个完整的闭环。
外围UI系统:不对称布局
在整个核心流程中,大部分的界面都是采用了中轴对称构图,这样的布局是为了强调视觉中心、体现流程的仪式感,从而塑造一种庄严肃穆的氛围。
但是在外围系统的界面设计中,则多采用了左右不对称布局。因为在概念设定中,外围系统是作为“海克斯科技装置”的各种辅助功能。所以它们的设计定调,是实现信息的清晰展示,与操作的易用性为主,界面效果表现则为辅。
除了交互布局之外,在周边系统的界面设计中,多采用统一的色调与氛围营造。同时在每个系统,尤其是系统首页,都有一定的特殊设计。这样能够让玩家很清晰的认识到,自己当前是正在处于哪一个系统之中。
外围系统界面
活动UI系统:平行世界
同样,在活动系统中,也是遵循了设计的定调。
在这里,玩家会有同样的交互体验,还能感受到视觉表现的开放性:来源于LOL IP宇宙的绚丽多姿。因为这个系统,是为了让玩家畅游IP宇宙;可以说,本身就是一个个不同的平行世界。
但是在概念设定中,玩家只能是采用同一台“海克斯传送装置”,在这些宇宙之间穿梭。所以这个界面系统要保证玩家,在不同活动下的界面操作体验,是一致的,也是玩家所熟悉的。
活动系统界面
总结:传承与挑战
总的来说,《英雄联盟手游》在给玩家带来极致简洁的用户体验同时,又通过独特的视觉语言,让玩家体验到游戏的沉浸感。而这些设计概念,更是能让LOL的IP玩家们,对这一款新产品产生足够的认同,让IP宇宙得以传承与发展。
随着APP年度游戏,以及金摇杆奖等一系列重磅大奖,落户《英雄联盟手游》。这些奖项证明了手游的品质,游戏得到了行业内的专业肯定以及市场的认同。在长达十多年的积累下,《英雄联盟》端游形成了一套极具视觉特征的UI风格,而对于《英雄联盟手游》的界面设计来说,这既是财富,也是挑战。
手游的传承就是财富,如何发展则是挑战。让玩家在感受情怀的同时,又能体验游戏的新意和趣味,《英雄联盟手游》的UI设计在这一点上,无疑是非常合格的。
期待产品为玩家带来更多更好的游戏体验,取得更高的成绩。
来源:光子设计中心
相关文章
-
游戏这一年:曾经的腾讯王牌惨遭停运,在今年纷纷复活,却不是腾讯代理
0 02021-12-31 -
“数字中轴”项目启动,腾讯助力北京中轴线申遗
1 02021-12-30 -
Remedy将与腾讯合作开发一款多人合作游戏《代号Vanguard》
2 02021-12-30 -
腾讯、悠星二次元表现抢眼新卡池贡献良多|日韩出海秀_游戏_日本_战略版
0 02021-12-30 -
腾讯企业QQ宣布将停运:2022年1月31日不再提供服务
1 02021-12-30 -
微信支付全面与云闪付打通腾讯扩展更多合作
1 02021-12-30 -
早报 | 爱奇艺 CEO 呼吁网络电影涨票价 / 冒充老干妈员工诈骗腾讯案宣判 / 李佳琦按消保委要求整改
0 02021-12-30 -
还记得当年鹅闹得大笑话吗?冒充“老干妈”员工诈骗腾讯主犯被判12年
0 02021-12-29 -
腾讯游戏:元旦假期未成年人每日限玩1小时
0 02021-12-29 -
绝对演绎牵手腾讯动漫 猪鹅联动
1 02021-12-29 -
Remedy将与腾讯携手推出免费多人合作射击新作
0 02021-12-29 -
冒充老干妈员工诈骗腾讯案一审宣判 主犯获刑12年
0 02021-12-29 -
每晚8至9点腾讯游戏:元旦假期未成年人每天游戏限玩一小时_腾讯游戏元旦未成年人每日限玩1小时_通知_大陆
0 02021-12-25 -
腾讯发布元旦假期未成年人游戏限玩通知 每日一小时
0 02021-12-25 -
腾讯游戏:元旦假期未成年人每天限玩1小时游戏_腾讯游戏元旦未成年人每日限玩1小时_谢永利_严圣淼
0 02021-12-25 -
腾讯游戏:元旦假期未成年人每日游戏限玩1小时_腾讯游戏元旦未成年人每日限玩1小时_赵熹_官微
0 02021-12-25 -
腾讯游戏:元旦假期未成年人4天限玩网游,每日20时至21时_腾讯游戏元旦未成年人每日限玩1小时_通知_时间
0 02021-12-25 -
腾讯游戏:元旦假期未成年人每日游戏限玩1小时_赵熹_通知_快讯
0 02021-12-25 -
腾讯新游《合金弹头:觉醒》限量测试:SNK授权,天美打造_游戏_手游_射击
0 02021-12-24 -
腾讯WeGame开启冬促_游戏_戴森_沙盒
0 02021-12-24 -
腾讯光子将研发《雪中悍刀行》正版手游,能否让武侠文化重回巅峰?
0 02021-12-24 -
腾讯安全月改名活动怎么参加 lol免费改名安全月活动地址入口
0 02021-12-24 -
《默途》开发商梦匠互娱获吉比特、腾讯等合伙企业投资
2 02021-12-24 -
腾讯安全月改名活动怎么参加?腾讯安全月免费改名活动网址[多图]
0 02021-12-24 -
腾讯、龙芯、兆芯等20多家公司成立OpenCloudOS社区
1 02021-12-24 -
早报 | 淘宝拟禁止「好评返现」等行为 / 西安全市小区实行封闭式管理 / 腾讯不再为京东第一大股东
0 02021-12-24 -
早报 | 腾讯要求抖音为《斗罗大陆》赔偿 8 亿 / 雷军称小米高端手机对标苹果 / 乐视网宣布涨薪
0 02021-12-22 -
2021年最赚钱手游!腾讯靠2款游戏年赚360亿,原神紧随其后_罗布_乐思_王者
1 02021-12-22 -
腾讯游戏安全月:免费改名福利活动即将上线
1 02021-12-22 -
腾讯游戏平安月:收费更名福利流动行将上线
3 02021-12-22 -
腾讯又一亿级老游戏停运,早已停更6年客户端,当年深陷抄袭风波_小弟_因为_Nexon
2 02021-12-21 -
最牛的还是腾讯!2021年8款手游收入破10亿美元,中国包揽前三_原神_罗布_移动
1 02021-12-21 -
腾讯动漫与网易游戏《绝对演绎》达成合作,加入大量国漫IP植入_乙女_官宣_二次元
0 02021-12-21 -
震惊游戏圈!腾讯90后程序员跳楼身亡,曾获微软颁奖,堪称大神级人物_毛星云_技术圈_博客
3 02021-12-21 -
腾讯张巍:共建超级数字场景,推动数实融合发展
1 02021-12-21 -
腾讯游戏探索“触觉反馈”技术在无障碍领域的应用
1 02021-12-21 -
腾讯天美美国工作室新项目:正在开发4A级多人FPS游戏
2 02021-12-21 -
腾讯加速器暂停充值功能 此前已开放未成年用户会员退款
14 02021-12-21 -
腾讯美国工作室4A级幻想题材FPS新作概念图曝光
1 02021-12-21 -
腾讯张巍:主动践行社会责任,探索游戏价值创新
2 02021-12-21 -
早报 | 爱奇艺 VIP 会员涨价 / OPPO 发布首款折叠屏手机 Find N / 腾讯游戏公布未成年人保护成果
0 02021-12-21 -
2021腾讯棋牌年度赛事盛典即将开启 见证智力运动巅峰对决
1 02021-12-21 -
腾讯整治扫码点餐强制关注公众号问题
0 02021-12-21 -
腾讯美国工作室4A级多人FPS新作概念图曝光 幻想题材
0 02021-12-20 -
腾讯收购《求生之路》开发商Turtle Rock及其母公司
1 02021-12-20 -
腾讯收购《喋血复仇》Turtle Rock开发商母公司 后者将保持独立运营
1 02021-12-19 -
腾讯现已收购《喋血复仇》开发商Turtle Rock
2 02021-12-19 -
腾讯收购《喋血复仇》开发商 后者保持独立运营
2 02021-12-18 -
腾讯旗下App逐步恢复更新:QQ音乐iOS版正式推送11.0.5版本
1 02021-12-18 -
腾讯游戏《QQ堂》明年4月停服已上线17年
4 02021-12-17
234游戏网站地图
子站导航 |
|||