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