在线报名在线咨询
主页 > 新闻动态 > 媒体关注 >

英雄联盟手游的界面设计是怎么做的？

时间:2022-01-15 10:21来源:未知 作者:中博IT教育

当下，互联网行业早已成为了公认的高薪行业，但其实互联网企业的项目中还有一个特别的存在，那就是游戏类项目组。 游戏板块向来是最能吸金的，据说网易今年《哈利波特魔法觉醒
当下，互联网行业早已成为了公认的高薪行业，但其实互联网企业的项目中还有一个特别的存在，那就是游戏类项目组。
 
游戏板块向来是最能吸金的，据说网易今年《哈利波特·魔法觉醒》项目组年终奖直接全员安排到了888888，腾讯《英雄联盟》项目组年终奖直接每人120万现金，在此基础上还会有阳光普照和股票的叠加奖励。因此包括很多程序员、设计师在内都希望能够进入游戏项目。
 
前几天，腾讯设计公布了一份《英雄联盟》手游的界面设计介绍，对于游戏UI设计方向的学习很有参考意义，让我们一起来看看吧。
 
1
//界面概念设计的必要性
 
从产品定位来说，《英雄联盟手游》是英雄联盟 IP 生态的一部分。由于玩法和屏幕尺寸与端游的不同，界面概念设计并不是简单地将 UI 内容，从 PC 端直接搬运到移动端里。
 
UI 概念设计的目的，就是要让玩家能够很好地理解，这两个起源一致、大同小异的世界之间的一致与区别，以及对新世界的界面设计产生认同感。
 
2
//玩家传输设备
 
玩家只需通过手中所握着的手机/平板电脑，与金克丝使用 HEXTECH 传送装置一样，让英雄从召唤师峡谷来到《英雄联盟手游》的狂野峡谷。这样的解决方案，从现实或是游戏的角度来说，无疑也最为契合。
 
因此，手游整体界面的概念和风格，都是围绕着这台传送装置/现实移动设备来设计的。
 
3
//主线流程系统
 
为了解决玩家的位置感知问题，在 UX 与 UI 设计环节前期，设计师尽可能地将各个大模块，用不同的概念和功能进行分类、包装。
 
首先，主线流程就是整个游戏的核心流程，也是带领玩家进入战斗的游戏流程。根据设计定调，这个流程会以“将玩家传送到狂野峡谷”的理念，来进设计行包装。
 
在核心视觉语言上，主线流程首先是继承了端游的视觉风格，也就是 HEXTECH。但是基于手游的交互特征，我们还做了大量的减法与提炼设计 —— 保留了机械与魔法的核心视觉语言。
 
蓝色魔法圈
 
在设计中，蓝色魔法是作为一个非常特殊的视觉符号被广泛使用 —— 那些凡是带有蓝色、或者蓝色魔法的按钮，是可以带领玩家进入狂野峡谷开始战斗地。而这，正是游戏主线流程中的核心功能。
 
圆形传送结构
 
如何让玩家在游戏中，体验被传输的感觉，在 UI 上，首先得有一个传送的载体。在概念设计中，这个载体可以被称为是“海克斯传送装置”。设计师使用人们对传送门的普遍印象视觉化符号，再加上游戏世界观的元素，制作出可下图右边的圆形传送结构 UI。
 
穿梭动效
 
在视觉语言的主框架确定了之后，接下来就要考虑如何增强传送的代入感。
 
而正当“传送”的这个概念定下来后，其实界面转场的动势语言，也自然而然地出现了 —— 穿梭动效。而且因为玩家是穿梭的主体，团队在这个环节上，采用了大量的第一人称视角，来展现穿梭过程。
 
所以，在主线流程的概念设计中，我们会看到这样的视觉语言贯穿其中：蓝色魔法圈 + 圆形传送结构 + 穿梭动效。
 
4
//外围UI：不对称布局
 
在整个核心流程中，大部分的界面都是采用了中轴对称构图，这样的布局是为了强调视觉中心、体现流程的仪式感，从而塑造一种庄严肃穆的氛围。
 
但是在外围系统的界面设计中，则多采用了左右不对称布局。因为在概念设定中，外围系统是作为“海克斯科技装置”的各种辅助功能。所以它们的设计定调，是实现信息的清晰展示，与操作的易用性为主，界面效果表现则为辅。
 
除了交互布局之外，在周边系统的界面设计中，多采用统一的色调与氛围营造。同时在每个系统，尤其是系统首页，都有一定的特殊设计。这样能够让玩家很清晰的认识到，自己当前是正在处于哪一个系统之中。
 
5
//活动UI系统：平行世界
 
同样，在活动系统中，也是遵循了设计的定调。
 
在这里，玩家会有同样的交互体验，还能感受到视觉表现的开放性：来源于 LOL IP 宇宙的绚丽多姿。因为这个系统，是为了让玩家畅游 IP 宇宙；可以说，本身就是一个个不同的平行世界。
 
 
所以这个界面系统要保证玩家，在不同活动下的界面操作体验，是一致的，也是玩家所熟悉的。
 
6
//总结
 
总的来说，《英雄联盟手游》在给玩家带来极致简洁的用户体验同时，又通过独特的视觉语言，让玩家体验到游戏的沉浸感。而这些设计概念，更是能让 LOL 的 IP 玩家们，对这一款新产品产生足够的认同，让 IP 宇宙得以传承与发展。
 
看完这样从概念世界观到布局风格的介绍，你有没有什么收获呢？
(责任编辑：中博IT教育)
栏目列表
中心简介
ACCP软件工程师课程
  • 开班信息
  • 讲座试听
时　间:周日上午10：00
主　题:专业技术讲座
主讲人:北大青鸟资深讲师
电　话:051685628888
说　明:限30人 电话订座

推荐内容
热点内容

苏公网安备 32030302000649号