文|肯莱克斯
腾讯互动娱乐设计师
【Q+升级】源于暑期版飞车世界观新增IP和剧情。 以四大车厂世界观为背景，从Q-SPEED神秘能量方块中提炼出“光科技”的设计元素。 通过该元素在UI性能和用户体验层面的应用和包装，来升级和强化玩家对游戏世界观的感知。
【源自《Q-SPEED》核心能量的光科技元素】
我们将从以下模块回顾这个设计过程：
大堂视觉焕然一新
设计目标
通过大厅的视觉刷新，可以直观快速的改变玩家体验。
情况分析
1.界面用户界面
原大厅界面UI分割感重（顶部栏UI、底部UI、右侧UI比较分散），操作按钮质感太重，导致玩家视觉注意力无法集中.
【原大厅UI分割感重】
【改造前大堂质感厚重】
2.信息布局
原大厅游戏入口的布局和等级太一般，没有体现出【使用频率】和【重要性】的区别（战斗室>活动游戏>个人职业>休闲区）。
设计实施
首先，我们从《Q-SPEED》中提炼出了【光之科技】的基本设计元素，并以此元素为基础，对游戏入口的UI进行了优化和调整。 同时，我们希望将【轻科技】的设计元素延伸到整个大厅的UI设计中，因此对原有的大厅图标进行了【轻量化】的调整优化。
【【光科技】设计元素提取】
【玩法入口设计优化】
【图标和贴图修改对比】
其次，在优化信息布局方面，通过对玩法入口的斜向设计和透视处理，一方面为左侧的人物创造更多的展示空间，强化人物的个性展现。 ; 空间场景的相关性增强玩家的代入感和沉浸感。 UI设计应该服务于和提升产品整体的娱乐性，而不仅仅是为了“好看”。
【信息布局优化互动稿】
【倾斜后对比】
[应用于设计的效果]
此外，大厅还承载了另一个重要的展示功能——魔法套装，优化后的大厅设计将更加突出魔法套装的展示效果。
【修改前魔法套装效果】
[修改魔法套装效果]
设计概要
大堂设计的焕然一新，在融入光科技元素的基础上，有利于突出玩家的个性化展示，在一定程度上提升玩家的沉浸感，同时提升功能性和视觉表现力。
主流程优化
设计目标
优化游戏主流程界面，提升核心体验流畅度。
设计实践
1、模式选择
通过继续使用【轻科技】设计元素，加强了UI设计中科技感的传达。 另外在不影响体验的情况下加入少量动画，提高模式选择的趣味性。
【模式选择界面修改前后对比】
【模式选择增加动画后的效果】
2.房间
房间是主流程的关键部分。 有3人间和6人间两种不同模式的房型。 在房间里，玩家既有交流需求，也有展示需求。 原本在6人间的设计中，为了最大限度的展示空间，采用了模块化的设计，但是当这种设计应用到3人间时，房间的整体空间利用率不够高，并且显示效果不理想。 因此，在此次改版的Q+设计中，为了提升房间的整体空间感，突出人物的展示效果，设计师通过改版为房间后续的互动创造了更多的空间。
[改版前的3人房]
【3人改房】
3.加载
加载是玩家进入单机游戏前的第一印象。 原有加载界面中多层次、分区的展示形式，在拓展空间上存在局限性，布局也十分死板。 新的Loading设计为横向展示模块，在透明轻盈的质感上延续了Q-SPEED【光科技】设计元素，同时也兼顾了后续图标展示的扩展性。 此外，更全面的布局和全屏显示的地图将有助于加深玩家对地图的印象。
【载入改版前界面】
[修改加载界面]
4.单人游戏
在原本单一的游戏设计中，左边的底板缺乏细节和质感，右边的图标质感不够均匀。 优化后，在角色名称的基底上应用了一些纹理和细节，增强了UI技术的传达性，右侧的图标在视觉效果上也更细更均匀。
【单局修改前】
【单局修改】
5、个人空间+商城
除了以上主要流程，我们还优化了个人空间和商城UI。 原有的个人空间信息有沉重的堆叠感，玩家无法第一时间阅读到重要信息。 全新个人空间采用卡片式设计结合UI处理（如电子线条、发光框、半透明纹理等），既能增加形式感，又便于[光技术]设计元素。
【修改前的个人空间】
【修改个人空间】
优化前的商城界面，商品名底色饱和度过高，商品展示比较淡，不够突出。 另外，商城缺少主打商品的展示，玩家无法在第一时间关注到主打商品。 优化后的商城界面通过弱化商品名称的层次感来突出商品本身，并增加推荐位置，使商城促销中主打商品的展示效果更加突出。 此外，按键的电子线、背景的蜂窝纹理等轻科技元素也运用在了UI细节上。
[修改前的商城]
[改版商城]
【商城改造详情】
设计概要
商城主流程和界面的优化，是为了给玩家带来更好的游戏体验。 我们希望通过在设计中融入和应用【光科技】元素，加强UI表现上世界观的传达，随着世界观的不断完善，还有很大的优化和调整空间。
UI层面的世界观表达
世界观与UI表现如何有效结合？ 我们需要在充分理解世界观背景的基础上，对设计元素进行提炼和转化。 飞车世界观是四大车厂围绕“Q-SPEED”（传奇车神的遗产）核心展开的系列故事，每家车厂都有车神代言人。 车神形象的设计，结合剧情模式，让四大车神的视觉形象首次亮相，给玩家留下直观深刻的初步印象。
【四大车企宣传海报】
第一个出场的是极星电站的车神——【镜子】。 当【镜】登场时，设计了更多的音符元素，同时采用了她车厂（Pole Star Power）的主色调紫色作为主色调。
【镜子出场动画】
然后是雷诺重工的车神——【Rain】。 车厂崇尚厚实，所以当[Rain]出场时，就用齿轮的设计元素来体现硬朗的工业感。 同时，搭配了他的车厂（雷诺重工）的主色调是绿色。
【莱因的出场动画】
接下来是【Sizell】，特洛伊工业的车神。 车厂崇尚攻击力和锐度。 所以在【Sizell】出场的时候，设计了三角肌理元素，突出攻击感和锐利感。 同时以他的汽车厂（Troy Industries）的主色调，红色为主基调。
【希泽尔的出场动画】
最后出场的是阿尔法科技的车神——【Municra】。 Technology）主色调以蓝色为主调。
【穆尼科拉的出场动画】
运营活动-QS音乐节
首发于四大车企暑假版游戏素材，同时推出QQ飞车暑期运营活动——“QS音乐盛典”。
【QS音乐节】
我们希望通过运营活动的推广，最大程度的传达四大车厂的理念，所以我们需要设计一个有辨识度的符号贯穿整个系统的UI界面，强化玩家的整体感知本次世界观更新。 《QS音乐盛典》设定的主角是【镜】，她也是四大车神中的第一位车神。 我们提取了【镜子】的代表装饰-变花，其花语为：天堂的一侧，地狱的一侧，符合【镜子】多重身份的特点，柔美的歌手身份代表天堂，以及骄傲的司机身份代表着地狱。
[ 香蕉花平面设计]
【图形在界面中的应用】
除了故事模式，我们还在其他场景中融入了四大汽车厂商的元素。 比如三人间，我们使用了四大汽车厂商的LOGO元素，呼应了四大汽车厂商的世界观。
【三人间四个车厂元素】
此外，艺术家通过对原有车库的改造，为每辆汽车添加了专属的厂标和展示背景，让汽车本身的故事属性与剧情产生联系，形成记忆点，从而强化世界观的有效沟通。
【新四大车库】
从娱乐视听到UI设计的灵感
在生活中，我们经常会关注一些热门的综艺节目，被它们整体的视觉包装所吸引，比如之前热播的《奇葩说》、《乐队的夏天》等等。 其实很多娱乐影音节目的视觉包装对于游戏UI表现也是有参考价值的，因为我们游戏的目标用户和这些综艺节目的主要受众（年轻人居多）有重合，所以定位视觉风格也有共同之处。
设计目标
设计师主动推动3人房改造，将流行的视觉包装元素与游戏中的UI表现相结合。
设计实践
3人房改造的部分设计灵感来自于当时火爆的《创造营2019》的舞台展示设计。 这款相对年轻、团结协作、积极向上的精神与极速手游想要传达的精神内核是一致的，而游戏中的“舞台”就是房间，房间中游戏角色的展示需要舞台包装长沙游戏ui设计，所以“舞台”这个元素是设计的搭配点。
【创造营舞台】
[改版前的3人房]
【3人改房】
3人房改造的目的是最大程度满足玩家个性化展示的需求，阶段性的包装可以提升整体的形式感。 但考虑到后续角色交互过程中的动作展示，目前的舞台设计不易兼容，所以改为更加扁平化的设计。
[设计修改后（取消3D平台设计，增加车厂元素，强调世界观）]
结合综艺节目的热点进行设计，也是拓展设计思路的一种方式。 在去年的版本设计中，图鉴模式的舞台展示、服装PK模式和当时火爆的101对战模式的契合度很高，所以设计借鉴了《创造101》的配色和舞台效果整体包装设计。
【101元素参考】
【结合101的插画系统设计】
设计概要
如何合理借鉴热门综艺节目的包装效果？ 一方面可以参考它的配色，另一方面也需要根据设计内容寻找搭配点。 此外，大众娱乐视听节目宣传性强、覆盖面广。 在设计中合理运用，既可以降低玩家的理解成本，又可以结合人气效应。 为什么不这样做呢？ 因此，平时观察一些跨行业的设计趋势和风格效果，在游戏中合理运用可能会有意想不到的效果。
QQ飞车手游继承了10年端游的基因。 与端游相比，手游既有继承，也有创新。 在这个过程中长沙游戏ui设计，需要不断探索和调整。 作为设计师，我们仍然需要继续保持敏锐度3D道具，加强对游戏包装的合理性和完整性的思考，为玩家创造更加身临其境的游戏体验。
最后，感谢项目组其他同学的支持与配合！
Q+改版设计成员：容哥、轩哥、小鸡哥、大露露、凯哥、竹鸟、昆塔、猫妈妈、钱姐、小P【ORANGO！ 】是服务于天美工作室群的设计团队，专注于视觉传达和体验设计，致力于为玩家提供更好的游戏体验。
