带领：
玩游戏的时候，我们都在忙着挑选英雄和符文，规划路线和打法，不自觉地沉浸在游戏世界中。 这时，界面也“消失”了。 在界面的概念设计中，设计师如何把握平衡？ 腾讯光子设计师“小豪”带你一一探秘。
界面概念设计的必要性
在产品定位上，《英雄联盟手游》是独立的。 与LOR、Valorant等游戏一样，是英雄联盟IP生态系统的一部分。 由于玩法和屏幕尺寸与端游不同，界面概念设计并不是简单地将UI内容从PC端转移到移动端。
无论从产品的哪个角度来看，《英雄联盟手游》和《英雄联盟》这两个游戏世界虽然不同，但其实两者之间充满了千丝万缕的联系，密不可分。 UI概念设计的目的是让玩家很好地理解同源同源的两个世界的一致性和差异性，并对新世界的界面设计产生认同感。
球员转移装置
“就像《英雄联盟》中的Hex科技设定，手游也可以通过某种装备‘传送’玩家”，这个想法很自然，也能解决游戏概念设计的整合问题。两个世界。
《英雄联盟》召唤师峡谷→《英雄联盟手游》狂野峡谷
玩家只需要使用手中的手机/平板电脑，就像金克丝使用HEXTECH传送装置一样，让英雄从召唤师峡谷前往《英雄联盟手游》的荒野峡谷。 这样的方案无论从现实还是游戏的角度来看，无疑是最合适的。
因此手游整体界面的概念和风格都是围绕着这个传送装置/真实的移动设备来设计的。
海克斯科技 + 手机 + 传送门 = 海克斯传送装置
主要工艺系统
在我们解决了玩家的场景穿越问题之后，另一方面，我们还需要将产品内部的各个功能模块进行分离，做好各个模块的UI概念设计：让玩家随时清楚的知道在游戏中，他们想要什么位置。
有端游经验的玩家可以在手游中找到很多熟悉的内容，（尤其是设计师）有时会有这样的疑问：“这个界面对应端游是哪个界面？” “这个功能是给我的，你之前熟悉哪个功能？”
为了解决玩家的位置感知问题，在UX和UI设计的前期，设计师尝试将各个大模块以不同的概念和功能进行分类和封装。
三大模块设计定调
首先，主线流程是整个游戏的核心流程，也是带领玩家进入战斗的游戏流程。 按照设计基调，本次流程将以“将玩家传送到荒野峡谷”为概念进行设计和包装。
在核心视觉语言上，主流程首先继承了端游的视觉风格，即HEXTECH。 不过基于手游的交互特性，我们在设计上也做了很多减法和提炼——保留了机械和魔法的核心视觉语言。
HEXTECH的元素——机械与魔法：机械控制魔法英雄联盟设计原画，魔法驱动机械
蓝色魔法阵
在设计中，蓝色魔法作为一种非常特殊的视觉符号被广泛使用——那些带有蓝色或蓝色魔法的按钮可以带领玩家进入荒野峡谷开始战斗。 而这就是游戏主进程中的核心函数。
循环运输结构
如何让玩家在游戏中体验到被传送的感觉，在UI上2d游戏素材，首先要有一个传送载体。 在概念设计上，这款车可以称为“Hexapult”。 设计师利用人们对传送门一般印象的视觉符号，结合游戏世界观的元素，打造了一个圆形的传送结构UI，如下图右侧所示。
重新设计的视觉元素——通常都带有一点皮尔特沃夫美学
这样一来，在整个主线流程中，圆形结构和蓝色按钮都会带领玩家直接进入荒野峡谷开始战斗。 即使玩家看不懂文字，也可以通过识别这些视觉元素进入游戏场景。
穿梭动画
视觉语言的主要框架确定后，下一步就是考虑如何增强传递的代入感。
想象自己穿过一个空间门户
而就在“瞬移”概念定型的同时，界面转场的动态语言也自然而然地出现了——穿梭运动效果。 并且因为球员是穿梭的主体，所以团队在这个环节使用了大量的第一人称视角来展现穿梭过程。
因此，在主流程的概念设计中，我们会看到这样一种视觉语言贯穿其中：蓝色魔法阵+圆形传动结构+穿梭运动效果。
主进程界面
大厅界面交互动画
结算界面交互效果
团队界面交互动画
游戏结束后，英雄会回到峡谷外的高地3D动画，接受队友的点赞英雄联盟设计原画，然后切换到结算数据界面。 这样就在流程和故事上形成了一个完整的闭环。
周边UI系统：非对称布局
在整个核心过程中，大部分界面采用中心轴对称构图。 这样的布置是为了强调视觉中心，体现过程的仪式感，从而营造出庄严肃穆的气氛。
但是在周边系统的界面设计中，往往会采用左右不对称的布局方式。 因为在概念设定中，外围系统是作为“Hex科技装置”的各种辅助功能。 因此，他们的设计以实现信息的清晰展示为基调，并以易操作性为主，界面效果表现为辅。
除了交互布局，在周边系统的界面设计中，往往会采用统一的基调和氛围。 同时，每个系统，尤其是系统首页，都有一定的特殊设计。 这可以让玩家清楚地了解他们当前处于哪个系统中。
外围系统接口
事件 UI 系统：平行世界
同样，在活动系统中，也遵循了设计的基调。
在这里，玩家将拥有不一样的互动体验，也能感受到视觉表现的开阔：来自LOL IP宇宙的华丽。 因为这个系统是为了让玩家享受IP宇宙； 可以说是一个不一样的平行世界。
不过在概念设定中，玩家只能使用同一个“海克斯传送器”穿梭于这些宇宙之间。 因此，该界面系统必须保证玩家在不同活动下的界面操作体验一致且为玩家所熟悉。
主动系统接口
总结：传承与挑战
总的来说，《英雄联盟手游》不仅为玩家带来了极其简单的用户体验，还通过独特的视觉语言让玩家体验到了游戏的沉浸感。 而这些设计理念，可以让英雄联盟的IP玩家对这款新品有足够的认可，让IP宇宙得以传承和发展。
凭借年度最佳APP游戏以及金摇杆奖等一系列重磅奖项入驻《英雄联盟手游》。 这些奖项证明了手游的品质，游戏得到了业内专业人士的认可和市场的认可。 经过十多年的积累，《英雄联盟》端游已经形成了一套具有强烈视觉特征的UI风格。 对于《英雄联盟手游》的界面设计来说，这既是一种幸运，也是一种挑战。
手游的传承是财富，如何发展则是挑战。 让玩家在感受情怀的同时，体验游戏的新奇和乐趣。 《英雄联盟手游》的UI设计在这方面无疑是非常合格的。
期待该产品将为玩家带来更多更好的游戏体验，取得更高的成绩。
