【权力的游戏·凛冬将至】UI设计的迭代与进化(01)

1396天前
转载文章 / UI / GUI(游戏) (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
9120
0
2
 | 
作者:陈心添


1672404008562087_0.jpeg


《权力的游戏·凛冬将至》是美国影视巨头HBO的传奇史诗巨制《权力的游戏》官方正版授权+游族网络研发的3D策略手游大作。很荣幸能带领UI设计团队与各路大神一起合作,参与此次史诗级IP手游的开发。为玩家呈现“旷世大战 由你指挥”的视觉体验。


《权力的游戏·凛冬将至》(以下统称GOT)前后共开发了两款手游,发行国内和亚太地区,前后历时3年多,所以本篇分享直到现在才发。


为什么是两款,难道不是一款游戏再适配多语言就可以发海外地区了吗?


确实,很多游戏发行不同地区只需要做多语言适配即可,但GOT的策略不同,为了能够让不同地区的玩家拥有更好的游戏体验,GOT针对海外版本单独立项并且在国内版本的基础上做了大量玩法和用户体验的优化,当然也包括UI和UX的优化。


1.如何准确抓住影视IP的特征和气质?


2.符合产品调性和落地可执行的设计语言又是什么?


历时4年的UI设计演变和进化的过程中,我们经历了非常多的挑战,截止2020年7月21日,游戏都已成功上线!目前还有居多不足,当作是一次复盘与大家分享,欢迎讨论交流。



一、概念的雏形


GOT经历过多次的UI设计迭代,从我加入项目后主导的设计方案开始说。


“seed” 最初的设计源


1672404008126059_1.png


1672404009869911_2.png


在与项目沟通后我拿到了一大波官方资料和以上关键字,严格来说属于需求或者是要求成品达到的目标。但对设计思路和方向都比较笼统不够清晰。所以我们需要深刻一些来挖掘游戏IP本身特色,同时也是核心设计语言所需要经历的一个思考的阶段。


设计源的提取与落地


1.时尚


1672404009473452_3.png

图片只做参考,实际设计需结合IP特质。时尚感的追求应该要排在后面作为加分项。



何为时尚


前瞻性、年轻化、有特色、好看(符合当下用户审美)、符合用户体验规范,时尚需要引领潮流,要在理解IP的基础上做的,是更高的高度。



2.质感


1672405265649727_0.png


如何表现质感


通过材质、气氛、光效的运用


GOT质感的大体感受是高级冷灰的场景氛围,大量冷兵器金属材质,精致的徽章饰品也有很多,还有服饰的图案和材质。外加银色和暗金色作为点缀的整体质感。金属感浓重的冷兵器时代史诗战争感,统一的色调和光感。冰火交融的对抗感。


3.IP重构-seed提取


1672405266984731_1.png


片头的信息量相当大,其中可以以太阳为核心,展开个家族之间的故事。太阳是一个相当重要的seed,包括齿轮各家族的家徽多是结合太阳和齿轮为大形而设计的。太阳和齿轮还有国王之手作为最重要的源来做设计,盾和剑形作为辅助形和线条。


1672405266568550_2.png


提取太阳和齿轮,盾形作为设计源,经概括后提炼后得出的形,材质是金属黄铜配合光感的处理作为这个方案最重要的seed做延展。


1672405266773630_3.png


色彩方案:底板以冷灰和暖黄对比作为主基调,搭配控件金属色,保证整体的统一。


1672405266900424_4.png


图形方案:以为保证整体简洁感,图形多以圆形,盾形,及方形棱形作为主要线条形。



“Seed”风格设计


1672405267414893_5.png


1672405895858015_0.png


167240589640186_2.png


1672405897169364_3.png


1672405898466046_4.png


1672405899949746_5.png1672405899949746_5.png


167240615473200_0.png



整体风格以太阳为seed作为核心视觉延展点形成一系列的控件风格来体现IP感,同时注重控件细节的质感表现来体现质感精致度,轻拟物+整体冷灰风格底色来表达时尚的感受;希望通过以上的结合能够营造最初的目标:时尚、质感、IP,从而形成GOT影视化IP手游的特有风格。


但是,随着量产的不断推进,我对GOT影视IP的了解越来越深入的同时落地真机体验也开始发现了一些问题。


核心问题


IP属性停留在控件设计的个体上,并且量产过程中金色控件使用失控,导致整体色调出现偏差,从初衷的冷灰色调偏暖色调,缺乏整体的IP氛围营造。站在产品和玩家的角度去看并不能直观感受到IP属性。我们需要重新思考GOT这个IP应该如何准确地进行视觉传达。


层级问题


整体画面节奏过于平均,用当时大家的话来说就是“太过整体”,专业角度其实就是颜色质感缺乏变化,当所有东西都亮起来的时候就没有了重点。其次面板设计的比例问题导致画面遮挡严重。我们需要重新梳理层级规范的问题。




二、设计概念的进化


回到最初的第一个问题:如何准确抓住影视IP的特征和气质?


我们重新思考GOT这个影视IP的内在气质与氛围表达,重新定义了影视感+主机品质的关键词。重点关注影视感与IP氛围营造的基础上进行了新的视觉概念设计。


167240615462745_1.png

静态概念稿



影视感+主机品质


1672406155348656_2.png


我们收集了大量的GOT剧集海报,海报是影视作品信息的浓缩,也是体现IP本身设计气质的一个重要途径。


1672406155605332_3.png


影视化的主体表现形式多使用大光圈和侧光来表现极致细节质感,以小见大获得令人印象深刻的视觉冲击力。


167240615621130_4.png


精工铁艺表达出战争感,生锈或刮痕给人一种历史厚重的故事感,是质感表现的一个重要方向。


1672406488130598_0.png

GOT的金色用得比较克制,而且质感是比较哑光的,剧中代表王权



战争与荣耀(配色)


16724064893411_1.png



从海报中我们可以提炼出来GOT的整体视觉感受,其中战争与荣耀的核心表现感受符合IP和SLG特点,是我们表现的重点,色彩提炼方面蓝黑色为主色调营造GOT阴冷氛围与SLG品类理性的气质,搭配红黄撞色搭配体现冰与火的对立冲突。


167240648974827_2.png


整体烘托的气氛体现出战斗之前的宁静压抑感或战斗中的画面,营造游戏的大氛围。


167240649095456_3.png

黑红体现战火战争,在海报中有一定的描述




影视镜头+短视频+动效包装


167240649125116_4.gif


随着网络的发展,读图时代向视频时代转变,各短视频平台的崛起说明一切,游戏的视觉表现也需要进化。


影视级短视频强化故事感与氛围来烘托情绪。


1672406492120598_5.gif


1672406837786171_0.gif


将文字/图文的界面转化为动视状态——动效包装


动效形式 细化模块动画 提升画面与界面交互的联动性。


打破图形(背景、角色、窗口等)与信息的常规关系,通过运用更多影视化技术改变信息的传达方式。

声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-GUI(游戏)
9120
0
2
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消