《阴阳师》UX篇:设计的温度——活动设计的骨·肉·魂(上)

学超

2023-01-033714次浏览

6评论

57收藏

6点赞

分享

引子

温度是一种感受,这个温度可以是有距离感的冷也可以是具亲和度的热。设计温度的核心要素是以人为本,通过游戏视觉设计向玩家传递情感。引人思考,就是有温度的设计。

好的设计具有寄托情感、回归生活和创造链接的功能。有温度的设计通过创造美好的物,建立人与物之间的情感联系。作为设计师,我们的设计想要唤起人们的情感和共鸣,既需要不断突破创新塑造人们的审美情趣,也需要思考如何控制。

那玩家也需要一个接口与游戏与设计者进行沟通,不断提升生活中的感知能力和对设计的欣赏能力,接受设计审美的传递。

1. 如何创造有温度的设计

先给大家分享一部我个人很喜欢的日本漫画家市川春子的漫画作品,叫做《宝石之国》。它的故事发生在遥远未来的地球,人类已不复存在,分成了骨肉魂三各部分渐渐活了下来。骨的部分为宝石人,是无机物经过数亿年诞生规则的结晶;肉的部分为生活在海底的阿德米拉皮利斯族,某种软体海生物,继承了人类不断重复生死,不断创造传承知识的特性;魂的部分为月人,是已经被分离的、人类罪恶灵魂的容器。

那在游戏活动界面设计中,有个这样的金字塔结构,首先是最基础的底层玩法构架,它是活动的必要前提,由此往上堆砌出骨:交互表现形式;肉:视觉大方向;以及魂:点睛之笔。我们可以先从设计的几个不同维度抛出引玉之砖。

1.1日式海报中的骨肉魂

首先我们聊一下比较贴近我们专业的,日式海报中的骨肉魂。

引用一下日本平面设计大师永井一正的作品:《1989年个展海报》,这张作品结合了他早期的几何抽象风格,和具有东方传统美学与现代设计相结合的意象手绘风格。为观者描绘一个禅意空寂风格的生命世界。

那这张海报的骨是其黑白明确的信息呈现方式;肉的部分则是主体的白鹭形象,整体画面宁静,色彩素雅,蕴含着日本式的空寂之美;魂的部分是白鹭边缘由外至内汇聚的线,他将观者视线吸引至画面中心的几何抽象图形,简约却不单调。

第二张范例也是永井一正的作品《日本招贴的今天:苏黎世》。这张海报骨的部分是他所使用的留白技法,将空白作为图形的组成部分,把“留白”看作让人发挥想象的依据,用以衬托画面中的主体图形,同时也延展画面的意境;将具有吉祥寓意的仙鹤和植物图形的组合在一起构成了肉。通过对比动植物形态关系中的位置、大小、面积等因素,呈现出不同的特异视觉;

他的亮眼之处在于纸绘感反复强调的花朵纹路,个性与共性的强烈对比产生强烈的矛盾,使特异的局部成为整体画面中的视觉强化点。

最后一张海报是被誉为日本平面设计教父的福田繁雄的一张作品。

骨的部分采用了正负形的关系,图与底翻转融合,产生互生互存的双重意象;主体造型和颜色呈现出搅拌咖啡的旋涡,突出海报主题。这张海报设计的魂则体现了福田繁雄炉火纯青的图形语言,仔细观察可以发现旋涡是由许多正反向拿着咖啡杯的手组成,呈现螺旋状的重复并置,是一种诙谐的设计语言。

1.2建筑设计中的骨肉魂

因为我本身对建筑设计的造型与感受很感兴趣,所以我私心分享下关于建筑设计中的骨肉魂,能让大家更直观触摸和体验到设计的温度。

日本建筑设计师安藤忠雄大家一定都不陌生,他为真言宗本福寺设计的佛堂【水御堂】的设计方案一经面世就饱受世人争议,但是正因为有这些争议,“菩提本无树,明镜亦非台”这句诗词才与他的设计如此契合。

这座佛堂的骨颠覆了宗教建筑上行的概念,引导人们经由莲花池走入水下,有着洗涤身心的意味,创造了一种对水不同的观法。也是这件设计作品的主体构架。

在视觉的呈现上强调的是变化,红与白的对比,清水混凝土与错综复杂的佛堂红木的对比,表现一种“圣与俗的境界”。

魂的部分是对光线的运用。纯白色的墙把人的心灵从尘世净化,进入莲花池中、步下阶梯、光线渐弱、直至差不多全黑、进入大殿后突然被满堂的红色唤醒。这段旅程,象征了净化、死亡和重生。

接下来是著名日本建筑师隈研吾的作品:中国美院民艺博物馆。隈研吾的建筑作品以融合自然景观为特色,极具日式和风与东方禅意。

因为美院的构架绕茶山而建,所以民艺博物馆也是攀附着地面向上延展,与山水相融,这是一种顺应结构自然选择的骨。肉的部分由横平竖直的大面积瓦片组成,视野可见范围内皆为青灰瓦片。那与别的建筑设计相区分的‘魂’的地方在于,隈研吾在窗户区域调整了瓦片分布形式和疏密,使光透过瓦墙,在不同的时刻能使室内呈现不同的光影效果。

1.3游戏界面设计的温度

鉴赏了一堆大师的设计作品,那么回看下主题,如何在阴阳师的活动界面中做出有温度的设计呢?其实我们拿到的活动玩法策划案是较为复杂、理性的,会堆砌大量表格和数值换算,那么我们就要以感性的思路对待底层玩法构架,寻找合适的方式,将活动中的理念用更具温度的方式传递给玩家。

2. 骨

2.1 灵感的提炼

骨其实是对灵感的提炼,如何让活动更易于理解,如何做出交互表现的创新,我会从以下三点出发:剧情文本传达的情绪感受;活动版本式神/怪物的形象与插图;CG、电影、广告中提取可用的层次穿插与气氛参考。

游戏的世界观本质是联系和发展的,大型活动的玩法离不开阴阳师的主线剧情。好的剧情让游戏世界观更完整,新活动玩法更合理,也拓展了游戏本身,引导着玩家去探索故事,也推动着游戏不断发展。

举一个例子,阴阳师7月的版本活动【雅乐之邦】剧情,讲述的是紧那罗为拯救严岛化身神女驱赶长夜带来光明的故事,大致可以通过剧情文案知道这次活动“在哪里、是谁、做什么、达成什么目标”。

那在通读完剧情后,就要开始啃生硬的活动玩法策划案了,这其实也是一个关键词的梳理,将抽象的概念具象化。像这次活动提炼出主玩法的关键词:节拍器、音乐编辑器、音轨等要素,那这些朦胧不确定的元素怎样做才可以降低玩家的理解难度呢?那就需要通过设计化繁为简。

交互同学在前期设计上做了类似音游的感觉,将界面场景搭建在水上鸟居,将玩法拉回到剧情故事里,这是一个很好的概念提炼。我弱化了过于动感的结构,以线引导玩家,乐符承载入口,每一次点触配合音效让玩家感觉在演奏,给了背景水面和夜空更大的表现范围,去打造沉静空灵的氛围。

再举一个例子,阴阳师4月版本活动【万事屋】。同样是复杂的表格和密密麻麻的数字。

虽然配置界面信息较为复杂,但交互同学还是在考虑玩家操作的前提下用更合理舒适的结构呈现给玩家,将桌子作为承载主体,桌台和桌下合理切换利用,将信息布局归纳整合,玩家切换操作查找信息也更便捷。

2.2 如何提升活动界面的仪式感

在之前提到的安藤忠雄的【水御堂】,整个结构和带给观者的感受是充满仪式感的。那么在活动界面设计中如何将仪式感代入进去呢?一般游戏活动的大厅界面,都是比较规整列表式的呈现,看到这种界面就知道又要一个个点进去开始肝活动任务了,虽然大厅界面无外是不同入口的堆叠,但是在阴阳师活动里,我们想更弱化这种过于直白的传达方式。

在5月的版本活动【鬼王之宴】中,通过剧情CG的了解,整体想要打造严肃庄正的气氛。

将大厅界面的入口散布在场景里,整体打造一个月食笼罩下气氛诡谲的京都夜市。通过每个入口的前后层次不同区分其重要程度。在交互前期提取的‘京都夜市、妖气、破损的云外镜’等关键词的基础上,通过‘镜头位移、月食、鬼船’等关键词的添加让整个界面更具仪式感。

关键词中强调了镜头位移的打造,因此需要视频组的同学一起帮忙去实现这一效果。

第一张是大概拼的效果图,并标识了层次的拆分以及需要的部件;第二张是模型大致摆放,用于调整部件大小和位置;第三张是最终给到我们的分层渲染图;最后就是通过调整最终的大厅界面呈现效果。

因为是第一次在游戏内尝试三转二的感觉,所以很多表现上还不是很成熟,但是在仪式感的渲染上给予了玩家极大的代入感,不过这个前提也是玩家不会疯狂点跳过= =

第二个案例是【万事屋】活动的小纸人招募系统。在前期设计想打造一种仪式感,并且能让玩家觉得亲切熟悉,所以交互同学就考虑了抽卡模式的复用。将抽卡屋的符咒替换成神龛,虽然造型大相径庭,但是神秘感和未知的兴奋度是互通的。

↓↓↓推荐阅读↓↓↓

《阴阳师》大型活动交互设计

《阴阳师》手游头像框设计分享

《阴阳师》活动设计的骨·肉·魂(下)

评论 (6)

0/1000
网易游学APP
为热爱赋能
扫描二维码下载APP