设计总结：腾讯光子《和平精英》全新UI 2.0如何升级至效果拉满？

本文首发“光子设计中心”公众号，GameRes获授权发布

在《和平精英》两周年到来之际，光子设计中心《和平精英》设计团队对游戏界面及交互体验进行了全面升级，这次视效焕新将为用户带来更简洁高效且具有沉浸感的游戏体验，向用户传达“冒险与未来"的品牌概念，并融入和平大世界的自然观感。

我们在“全球玩家的竞技冒险世界”这一品牌概念中，重新定义了品牌的核心风格：属于勇者的冒险精神、属于科技的时尚与活力。因此，在这一大背景下，游戏的版本和故事拥有了科幻气质的加持，而游戏界面与交互体验，也围绕着这个带有未来感的体验目标，为大家呈现出富于沉浸感的交互设计和极具品质感的视觉创意。


1、打造属于当代青年共同 文化符号与时代记忆

经过两年的积累，《和平精英》成为了一个立体的超级数字场景，用户数量也在不断攀升。根据最新的用户画像，我们了解到，《和平精英》的用户群体是年轻时尚、心态乐观的年轻人，他们积极向上并且对游戏视效品质有着很高的要求。而我们只有不断进步，不断革新才能跟上玩家的脚步，成为当代青年共同的文化符号与时代记忆。

2、用匠心与热爱打造全新视效艺术

01.视效梳理与调研分析

关于如何做好新的视效方案，和平精英设计团队做了大量的前期工作，为了能让设计方案更清晰更有说服力，我们重新审视了现有的视效美术，深度解读“全球玩家的竞技冒险世界”的品牌概念，并对同品类游戏和新上线游戏进行了视效分析和趋势研究。同时，还对和平精英用户做了画像和视觉内核的重新梳理。

02.以打造艺术品的专注度完成视效设计

随着游戏行业的发展，手机游戏的精品也越来越多，国内外的精品游戏也无形中影响了绝大部分玩家的审美上限。游戏作为“第九艺术”也起到了引导作用。在我们看来，《和平精英》的游戏动效是一项艺术，能为使用者带来美好的视效体验，也将在这个时代留下独一无二的痕迹。

03.联合品牌概念焕新，视效DNA无限延展

通过与品牌概念的融合，游戏设计将拥有更广阔的舞台，独特的视效元素不仅应用于游戏界面，视效的DNA将成为IP的一部分，缔造全新的视觉语言和体验，也能更好地跟上时代步伐，更好的为用户服务。

3、全新视效风格品质呈现

01.视觉创意策略


为了让设计更有着力点，我们通过用户群体分析、游戏自身特性、视效流行趋势等多维度资料收集，并结合的立体设计法进行分析，寻找设计的突破口。

与此同时，我们还深入分析了《和平精英》的美术风格、世界观设定、用户群体。通过分析，我们得知和平精英拥有着大量的年轻用户，我们在前期探索的时候也将侧重点往符合现代年轻人审美的方向倾斜。而且现代越来越多的游戏和影视也都强调沉浸感，而我们也希望能给用户带来更深层次的游戏视效体验。

在找到，年轻、沉浸感、时尚、军事冒险等关键词之后，我们开始不断挖掘设计灵感，从扁平简约到写实重度硬核，从轻松娱乐到军事战争，从轻科幻到硬核科技。全方位的探索能带给我们不同的设计灵感，也能为我们接下来的设计提供基础依据。

未来态-写实竞技-多元娱乐


在这个阶段我们对比了和平精英游戏层和我们用户层的特点，发现双方的需求是具备高重合性的。这个也跟我们“和平精英竞技冒险世界”的新理念不谋而合。


有了上面的方法、理论基础，我们拉起多次高效会议进行分析总结。


通过抽离、提炼、融合，由点及面的多维度思考，总结优秀的设计方法、理清相关设计体系脉络。在整理分析的时候，我们发现现代游戏的视觉趋势-逐渐的明亮、扁平、高效、娱乐化，同时有有着炫酷拟真的动效场景配合。

这种视觉趋势也跟我们心目中的和平精英2.0愈发接近。我们也迫不急的待想进行设计验证，所以我们进行了方案的前瞻设计。

2.前瞻设计

在进行了一系列调研和大量的讨论之后，设计团队开始了前瞻设计工作。此时，设计思路已经非常明确：“简洁直观”、“硬朗气质和冒险冲击力”、“扁平轻薄”是我们希望体现的设计原则；多元时尚、竞技冒险、潮流科幻作是我们的核心概念，而“竞技冒险世界”则是我们希望传递的故事体验。

为了达成设计目标，我们创建了一个“视效坐标体系”，以军事硬核至多元娱乐为X轴，军事冒险（和平精英的核心理念）为Y轴.这个坐标体系能帮助我们很好确立自身风格。


基于“视效坐标体系”，设计团队产出了大量的概念设计草图，这些图虽然不够精致，但正是这些图结合视效坐标体系以及我们游戏自身和用户特性，让我们快速确认应该尝试的方向。


随后，经过一系列调研讨论和内部研究，我们终于完成了前瞻设计。

3.升级交互体验

随着功能的逐渐丰富，如何将信息更加高效且清晰的传达给玩家，以及结合产品策略对功能的可持续性的承载，是大厅迭代面临的挑战。

为了使大厅界面更加简洁易用，我们将玩法、社交、活动和功能划分为四大功能模块，以保证玩家能够迅速找到自己的目标。而排行榜、军团、设置、邮件等功能则被收入二级界面，让大厅内容更加简洁清晰，所有的设计都是为了让界面信息更“轻”的呈现。


光子鸡盔仔——消息整合


其次，光子鸡——盔仔将会一直在大厅中陪伴着玩家，它不仅能够协助玩家处理游戏信息、领取奖励，另外，玩家还可以通过手势交互可以和盔仔进行互动，增强情感联结。

资讯大厅——游戏大事件


原来的游戏资讯是点状传达给玩家，希望通过整合资讯资源，将游戏大事件按时序性的传递，玩家在这里可以了解到现在的和平精英在发生什么，当前事件有什么好玩的内容，有帮助的攻略等。有效的帮助玩家建立目标，增强玩家粘性。

4.视创策略

结合交相体验的升级，我们又开始了最终的设计尝试。在这个设计过程中，我们也不断地在研究和发掘更适合我们的独特设计语言。我们发现了一个非常适合我们的新的设计语言-拟态设计，就如同拟态章鱼这种聪明的海洋生物会任意改变自身的颜色和形状，模拟海洋中的多种环境和生物，我们希望我们的视效也是这种拟态的、多变的设计。

拥有可变化的外表，就如同游戏中的服装载具千变万化。唯一不变的是我们竞技冒险内核，能不断地带给用户新鲜感。同时为了加强游戏的沉浸感，我们还将电影化大场景的理念带入到设计中。这种全场景式的背景结合扁平化的现代设计手法得到意想不到的效果。


在新一轮的风格设计中，我们又发现了两种新的设计方式：拟态迷彩和全景化动态背景。

拟态迷彩的设计语言，设计既符合游戏内核——军事冒险，又具有现代潮流的年轻感。我们希望把拟态迷彩做成我们游戏的视觉核心,作为游戏的视觉核心基因在游戏的每个界面设计里进行传承。


全景化动态背景的发现也是一个意外收获，在我们设计团队内部对设计风格进行动态预演的时候，发现我们游戏内的通用背景动起来的时候会极大程度的提高游戏的沉浸感，仿佛每个界面都活起来了。

拟态是一个介于真实和虚拟之间的设计方式，这里也融入了拟态的理念，模拟现实世界的环境：四季、天气、场景等进行简化拆分和融合。通过游戏的版本赛季切换来切换不同符合赛季风格的动态背景，让用户每一次更新赛季都能体会到全面的视效革新，不再是一成不变。


5.全景新拟态视效

我们发掘和平精英需要更亮的色彩、简洁的造型、轻度质感、沉浸式感受让游戏看起来更加现代潮流，同时《和平精英》作为一款现在流行的多元融合的手游，需要承载更多元的风格和方向。

我们设计团队共同给这个设计方向起了一个全新的名称-全景新拟态视效。这也是我们设计团队比较骄傲的设计结果，是经过了每个人夜以继日的不断努力找寻、尝试、失败、创新、打磨得到的果实。

设计内核展示

核心色彩



设计DNA


辅助图形


现代简约风


此次品牌视效升级承载了《和平精英》整个项目和设计团队的心血，期望能让和平精英变得更好看、更好玩、更好用。2周年仅仅只是一个开始，真正的冒险还在后面。

起飞！和平精英。


设计指导：Jessia、蟲子
品牌设计：Jas、宋宋、晓哲、少恒、伟哥、强总
品牌协助：麦客士、木木三、Alphonse、
交互设计：甜的葱、布拿拿、大砖头、Marble
视觉设计：麦客士、Chokwan、老喵、大象、阿磊、薛小北、奥特漫、Asura、柴柴、十一
动效设计：Super、绿鲤鱼、糖喵喵、小剑、包子、老仙女、皮皮
项目管理：霍格、星星