《阴阳师》UX篇：设计的温度——活动设计的骨·肉·魂（下）
学超
2023-01-033627次浏览
5评论
40收藏
11点赞
分享
文章分为上下篇，为了更好的阅读感受，请按顺序阅读。上篇链接：《阴阳师》UX篇：设计的温度——活动设计的骨·肉·魂（上）
3.肉
肉的视觉风格设计与骨的构架是分不开的，都需要从剧情文本中提炼关键词，搜集图片视频资料，确定各个活动界面的情绪板，再进行进一步的色彩材质分析，组成整个系统的视觉风格。
3.1 色彩的感受
阴阳师本身是一款和风游戏，所以日本的一些画家作品有很高的参考价值。我本身对版画和岩彩等丰富的色彩变化和肌理感比较感兴趣，在看这些作品的时候仿佛可以触摸到上面的纹路，带入到那些或清冷或温暖的画面中。
第一位介绍的是日本近现代版画巨匠：川濑巴水。其丰富的风景表现力被称为“昭和的歌川广重”。他的作品更多地去描绘了较为冰冷、雾气氤氲的雪雨夜，这种不常见的、朦胧的画面感觉更能引起人的愁思。
第二位是与川濑巴水齐名的版画大师吉田博，他的作品因有别于日本传统木刻的非日本主题图像而闻名，色彩更加温暖柔和，但其适宜的构图又增添了一丝疏离感。
庄田耕峰是明治时代的日本画画家，他很喜欢成套作画，对同一场景进行不同时段的氛围表现，表达不同的色彩情绪。
最后一位日本岩彩画家吉村诚司，是我很喜欢的一位现代画家，他的作品有别于其他浓墨重彩的岩彩，在各种灰色调的堆砌里寻找细微处的变化，疏密节奏控制得当，很适合在视觉设计中作为区分主次的参考。
提高自身的审美眼界是第一步，除此之外在闲暇时间还可以做些小色稿的练习与情绪板配色。小色稿的练习可以考验对整体色调氛围的把控力，互补色与同类色的区分，以及重点色在界面中的引导作用。
比如这几张活动界面，不考虑别的场景氛围，仅仅用色彩就可以感受到：第一张的喜庆欢乐、第二张的优雅静谧以及最后一张的沉稳低压感。
在鬼王之宴活动的界面设计中，首先需要理解活动的剧情及玩法系统，也就是他的骨的部分，再从活动当期的插画物料中寻找灵感。比如通过这张当期活动的插图，我便延伸联想到了《无限回廊》以及鬼灭中的无限城。
那么下一步就是思考框架里的色彩分布，这里我选取了木质框架的暖棕色以及代表海国的青蓝色。这时脑海里会有对整体色彩的初步构思，想打造一种沉稳而又典雅的色彩氛围，川濑巴水的月落千江完美契合了我想要的色彩情绪，青蓝色为主调，金色为点缀，提炼出我需要的色彩。
但是色彩并不仅仅是考虑配色就可以了，它需要尽可能向玩家传递一种真实。色彩的呈现方式是怎样，色彩的肌理感受是什么样。在这个界面里，我希望整体可以是偏向岩彩的质感，触摸时可以感受到混合了不同颗粒质感的矿物颜料，在一些点缀和重点控件上加入烫金的感觉，增添整体的精致度和华丽感。
下面就能打造出最终想要的场景氛围呈现，以及界面与场景的结合。
那我们来与最初的版画作品比较一下可以看出，原参考的湖边和最终的室内效果呈现，我增加了暖色的配比，加入了类似白茶、焦茶等日式传统色，让整体色彩更沉下去，也更能感受到茶室里灯笼的暖意和烟气的氤氲。
确定了主要界面的呈现方式后，色彩及肌理也延伸运用至活动内各个系统的场景部件、交互控件及文字标题等，保证了活动系统的整体性。
色彩感受的第二个例子是情人节时期的版本活动与君结缘。听活动名就能感知到这是一个樱花烂漫的活动氛围，还是例行的玩法文案关键词提取。在这次活动中我想使用偏向自然的颜色：樱花林里的日式建筑、疏影斜照的阳光、圣洁的富士山和隽永细腻的米色和纸，让玩家感受缘结神社的浪漫与诗情。
这一张的色彩提取选用了吉田博的上野公园写生。前面也说过吉田博的色彩风格鲜丽明快，很适合去做一些轻松的活动主题。上方的色块是画面的色彩提取，版画印制的作品由于纸张材质不同，颜色风干后会有发黄发旧的问题，那就需要我们站在更新更现代的审美角度上去进行更合适的颜色修改。
第一步同样也是先确定主界面背景的颜色基调。因为这次的色彩大多是粉色的邻近色和同类色，所以要特别注意颜色的配比和分类，也就是常说的‘随类赋彩’。像在这次活动中，我选用了较为沉稳的枣色作为框体底板区，类似木框和书的封页的使用，将画面从高明度的色彩中沉稳下来；偏明亮饱和的柿色作为关键按钮的颜色；为了防止整体色彩过于甜腻少女，在背景天空和雪山的颜色上选择了楝色中和视觉上的感受。
下面这些就是与君结缘活动色彩延展界面效果，前面提到的颜色配比都有运用其中。
3.2材质的温度
聊完对色彩的感受，接下来就是设计者们熟悉的材质的选择。阴阳师界面本身的材质已经足够有故事感，比如大家熟悉的木框砖瓦、灯笼太鼓等，情景拟物化的打造，让玩家身临其境，似乎可以亲手触摸到这些材质，感受界面每个部分带来的温度。
但是游戏每一次的活动情绪传达都不尽相同，材质的选择也需要更多的突破尝试，那么如何在保持原有风格的基础上做出材质的创新，也是一个我们需要思考的问题。
下图两张是活动界面材质的极端化差异对比。第一张沿用了原本的材质，整体感受热闹温暖；第二张是雅乐之邦活动主玩法界面，剥离了木框太鼓等常见材质，利用水面和半透的材质打造了一种疏远清冷的感觉。
但是活动风格差异再大，还是要让玩家认可你的视觉呈现。那在这个活动界面里要考虑的有以下三点：游戏中原有seed的维持（鸟居、纸人）、木质框架的继承、固有按键的沿用。下面这张乐器选择的界面，沿用了木质栏杆和纸质符咒材质，以及复用了通用按钮。
章节切换的表现也复用了阴阳师logo的金箔材质和日轮鸟居等元素表现。
虽然这次活动整体构架搭建在看似缥缈的严岛水面上，但部分界面材质的继承和关键控件的复用，以及场景选取了日本平安时代的能舞台，可以将玩家再次拉回阴阳师游戏中。
既然考虑了材质风格的保持，那么如何运用材质的温度打造耳目一新的活动感受呢？前面色彩感受里有说到色彩的情绪板，材质其实也有自己的情绪表现，二者相辅相成。不同材质能带来不同感受，材质不仅仅局限于触摸到，更在意的是感知。我们不仅需要摸到木头的粗糙和纸张的柔软，也需要感受到山间雾气带来的平静祥和。
在阴阳师五月版本活动鬼王之宴中，其活动的主玩法-百妖退治运用了很多虚的材质。比如将日本传统的香道融入界面，以烟化形承载入口，配合场景中层楼叠榭的屏风，打造出神秘庄严的厅堂氛围。
而在其剧情玩法-破晓之征中，我尝试了软硬材质的对比，从剧情CG中提取了不规则/反光的镜子碎片以及流动的水帘。以镜片反光不断变幻的特质承载不同主角的回忆。剧情解锁则是置于水帘上，水的材质捉摸不住，却又因为向下流动的动态氤氲着水雾，契合了剧情未解锁时的朦胧感。
虽然剧情界面采用了全新的材质加强玩家的感受，但关键按钮和交互结构的复用同样能让玩家操作自如。
4. 魂
最后一部分要说的就是点睛之笔——魂。下图是阴阳师的一个通用关闭按钮，其实在阴阳师发行初期，我在游戏中看见这个按钮眼前一亮，虽然只是一个小小的功能性按钮，简约但不简陋，有细节又不抢视线，樱花与妖气的完美融合，看似缥缈却又有固定的形，这就是一个很好的点睛之笔，也是界面设计中的亮点所在。
视觉设计中的魂体现在其品质感、仪式感以及动效表现。过场界面是一种比较典型的提升品质感的设计，可以很好地突出活动主题，衔接不同功能，提升沉浸感。但手游节奏较快，玩家偏浮躁，也需要再寻找一个美观和便捷的平衡方式。
4.1在界面中如何创造惊喜点
魂作为视觉设计中的亮点，可以体现设计者的创意和小心思，为玩家带来体验上的惊喜。
在阴阳师四周年庆活动中，我也在部分界面中尝试了些小的设计。在活动的养成系统中，做了一个较为简单的室内场景，在点选两边不同的技能图标时，中间的鬼面会显示不同的色彩和动态。虽然只是一个无关紧要的小设计，却可以让界面的趣味性和品质感稍稍提升。
在活动的宝物系统中，虽然整体结构只是式神录系统的复用，但在点击祈愿按钮后，宝物上方的祈绳会往下拉一下，类似日本神庙里的祈愿摇铃，增添了一些仪式感。
再用阴阳师新年版本活动【百鬼夜行图】举个例子，主体界面采用了较为稳妥的折本承载画卷。但是缺少了一些新年的感觉，和百鬼夜行诡魅的气氛。
于是考虑融入合适的元素，在这里选取了花和绸缎，利用其柔软变幻的特性打造热闹诡魅的活动氛围，并穿插连接每个界面，既烘托了活动氛围，也为动效的制作提供了不一样的思路。
4.2光影如何承担引导/氛围打造的功能
在开头提到建筑设计中的骨肉魂时，发现建筑设计很喜欢用光去表现设计的亮点，那么光影如何成为界面中的亮点呢？第一种是我比较常用的有形状的光影。界面中不断堆积元素会让界面层次变乱，找不到关键信息，但是有形状的光影添加可以在不破坏主体构架的前提上，增添细节和层次，营造界面氛围。
第二种是电影式暗角。它可以明确界面中的主次关系，实现聚焦画面中心。在打造偏神秘、紧张界面氛围的同时，还可以保留原有画面细节。
第三种是虚化的氛围光晕。偏向用于表现类界面，给予界面故事情境，赋予平面化的界面时间感与空间感，增添整体活动的沉浸感。
5. 结语
设计中的骨肉魂大致介绍到这里，返回文章的开头，再回顾一下怎样创造有温度的设计：骨的部分追根溯源，打造结构；肉的部分是要在创新中寻求稳定；魂则是点睛之笔，创造惊喜。总得来说，我觉得好的设计不局限于年代时间，也不局限于你用什么题材，而是你能通过设计进行与生活的沟通再创造，并将你的感受传递给用户，就是我希望的，能感受到的设计的温度。
↓↓↓推荐阅读↓↓↓
评论 (5)