从《黑潮之上》聊一聊场景化UI设计以及光影运用
网易的《黑潮之上》今天上线啦！骨头这段时间研究了一下黑潮之上的美术风格，发现他们项目组在场景化UI部分做的很不错，所以就这个特点和大家聊一聊他们在场景化UI设计哪些地方做得比较出彩。
Part 1
美术风格
1.玩法影响视觉语言
《黑潮之上》的美术风格是由世界观，玩法还有游戏调性综合决定的。
Roguelike策略卡牌，结合了Roguelike玩法和多分支剧情的全新卡牌游戏。
世界观：“黑潮作为人类社会毁灭性打击的灾难至今成因不明，于是名为“未来”的主角不断轮回到第三次黑潮中企图拯救世界，但都以失败收场。最终未来释放大招牺牲自己将将另一位少女艾尔莎传送到了过去。”
说白了，《黑潮之上》其实就是一个美少女打牌游戏。
打过牌的大宝贝们当然也知道，牌的外缘是有倒角哒！于是我们可以看到，游戏UI的视觉语言的外框设计也是如此。
2.五彩斑斓的黑
材质决定了视觉的整体配色。这样也可以很明显和同类竞品配色区分开（比如方舟是黑色+蓝色）
在这里顺便放一张和方舟活动UI的对比，大家就能看出来加强了镭射风格视觉之后其实更突出了《黑潮之上》本身的辨识度。
3.黑潮具象化：镭射风/蒸汽波风格
由字面意思“黑潮”衍生出来的关键词：黑色，潮水，异能，都市。配色也是运用了黑色结合亮调子的镭射风格元素。
在《黑潮之上》我们可以看到近两年非常火的蒸汽波风格，镭射风格材质的包装。
从2017年开始渐渐刮起的蒸汽波风格，无论是展览，还是T台秀场，都开始大量运用。
包括最新的LOL女团的海报中也大量运用了这种镭射风格材质。
4.视觉元素贯穿
五彩斑斓的黑视觉元素非常洗脑。
所以我们可以在游戏的系统UI中大量的看到它们。
从结算页面
到各种弹出页面
5.排版和构图
在排版上《黑潮之上》运用了最近很流行的“BANNER化”的设计理念。整体更注重整个页面的视觉效果。以英文为大标题，背景扁平化，把整个页面当作海报宣传来设计。
获得角色这种强展示型界面层级感和元素更强，毕竟是和“氪金”有关的～
右侧的英文标题支撑起整个页面。背景运用了和海洋有关的“洋流”线框元素。注意看字体的比例和节奏感。
左侧角色名称和小队名称也都整合为视觉的一部分。可以说起到了整个页面的“点睛之笔”的作用。
Part 2
场景化UI
场景化UI不同类型
场景化UI的特点主要是营造出更强的空间感，让玩家在体验游戏的时候可以快速带入情境。
在这里大家可以牢记一个场景化的万用公式：
场景化的具体体现=以桌面（或某空间）为场景+主光源+物件之间相互有联系+故事感表达。
我们找几个做的比较好的例子。
1.桌面展示型UI
在我们的课程中，有给大家举例场景化UI设计最常见的形式--桌面展示型。
这种场景化UI的核心要素就是运用了在桌面展现我们很常见的物件，比如书本，杂志，菜单等，同时在背景和周围的物件做一些其他关联物件的穿插关系。
商店毕竟是需要让大家来氪金的，所以看的出相比其他页面来说做的更精致一些。整体的包装更像是一本期刊杂志，每一页好像都在和我们说：“买它！！！”
背包UI相比章节UI，“纸”底框的面积展现得更大，这样可以更突出物品以及物品状态。
在这里大家注意，场景化设计也需要结合功能表现。比如背包UI底部有一个深颜色的页签层级，从整个画面的黑白灰关系上加强了页签的存在感。
还有一个有点像档案文件夹式的设计，这样的设计更能和本身任务的包装功能结合。
2.场景化UI：交互物件
邮箱UI设计
老二次元玩家应该都对猫有着不可抗拒的抵抗力～在邮箱设计这块把邮箱设计成了一个有点交互感的小邮筒，让大家对于邮箱更有期待。
在这里，需要把邮筒想象为在场景里的物体。
在邮箱的设计这块，之前还有另一款游戏《动物森友会》有类似有趣的交互设计。
抽卡UI设计
在抽卡这块的设计，结合了现在很流行的盲盒机的形式。
包括从抽卡，到卡包从“抽卡机”出来，都参考和还原了现在的盲盒机的流程。
同时大家可以对比一下UI里的设计，游戏里的抽卡设计把热销主推的卡包设计成屏幕里的主海报，右侧为切换其他的卡包的切换按钮。
在咱们自己设计UI的时候，也是可以用这种观察生活中物件的方法，巧妙地和UI设计结合起来。
从获得卡包到获得角色，大家注意看都有用同一个“五彩斑斓的黑”的视觉元素做贯穿。
3.场景化构图：组合构图
主UI界面/角色信息UI
主UI界面的包装更像是角色的家，所以在场景展现上更突出了背景温馨的氛围。
为了让右侧的主UI模块显得不这么突兀，还用异型设计来增加了模块之间的联系。
角色信息页面也运用了场景化设计，整个场景更像是一个小的研究实验室。
备战实运用了全息投影的设计，科技感满满～
4.主游戏UI
刚才我们也了解到，《黑潮之上》其实是一个美少女打牌游戏。
所以我的卡组这里设计成了一个卡包。
注意看下方牌设计成了有弧度，更符合人们一手拿牌的视角。
场景UI中的光影运用
光影在场景UI中就如同灵魂一般的存在。
在《黑潮之上》游戏中，有设定正常世界和异能世界。所以在设定上，正常世界的光都是极度凸显温暖和治愈的感受，异能世界更偏水下光的效果，偏冷。
1.什么是光影
所谓光影，就是光效和影子。
通过一张图来认识光影，只要是场景或者物体，必然受到光效的影响，同时在光照之下形成影子。
2.光的类型
一般光分两大类，一种是自然光，另一种是人为光。
如上图所示，常用到的光效分五种，分别为日光、夜晚、夕阳、阴天和火光战斗气氛。
从主UI中，我们可以看到场景中的光线用的就是这种夕阳光线。
我们通过观察自然界中的夕阳，这是最治愈的光线。
整体色温是比较温和，光的边缘有偏橙色的交接光。
我们日常生活中的台灯属于“人造光”，也是一个运用到我们的UI设计中很好的道具。
在这里科普一个关于色温的小知识：
色温是表示光线中包含颜色成分的一个计量单位。从理论上说，黑体温度指绝对黑体从绝对零度（－273℃）开始加温后所呈现的颜色。黑体在受热后，逐渐由黑变红，转黄，发白，最后发出蓝色光。当加热到一定的温度，黑体发出的光所含的光谱成分，就称为这一温度下的色温，计量单位为“K”（开尔文）
同时光也会传递出不同的心理感受，通常在生活中大家应该很有体会～
光源色温不同，带来的感觉也不相同。高色温光源照射下．如亮度不高就会给人们一种阴冷的感觉；低色温光源照射下，亮度过高则会给人们一种闷热的感觉。色温越低，色调越暖（偏红）；色温越高，色调越冷（偏蓝）。
3.光影的运用
在这里咱们展开来聊一聊场景UI中的光影，给大宝贝们剖析一下大厂的光影套路。
以章节UI为例，我们可以观察到画面中通过光影的表现，突出了桌面的空间感。
（1）首先先观察下黑白关系，大家观察一下画面里光影的大致位置。
（2）得出一个大致这样的一个光影的轮廓。同时我们可以观察到轮廓形状会起到一个视觉引导的作用。
（3）大家可以注意看看光影边缘的位置，也是有虚实关系的。
“实”的部分为最需要让大家注意到的部分，“虚”的部分为不太重要的边界部分。
（4）光在整个页面里的分布，可以清晰地看到光是有层次的。
标注1的部分为画面最亮的高亮区域和光斑，标注2～标注4的光是呈一个递减的表现。
所以综合来看，光影在整个界面里起到了突出视觉中心的作用，同时也让本来较平的俯视角提升了立体感和空间感。
2020/11/19
叶子学堂读书笔记
骨头老师为大家复盘一下今日份知识点噢～
《黑潮之上》作为网易爸爸新上线的游戏，在美术表现方面下足了功夫：
美术风格受世界观影响，提炼出属于自己游戏调性的视觉元素贯穿，“黑潮”关键词具象化；
排版和构图“BANNER化”设计；
场景化的具体体现=以桌面（或某空间）为场景+主光源+物件之间相互有联系+故事感表达；
光的类型：一种是自然光，另一种是人为光，光也会传递出不同的心理感受；
光影的运用：确定黑白灰->光影的轮廓->光影轮廓的虚实->光的层次。
光影在整个界面里起到了突出视觉中心的作用，同时也让本来较平的俯视角提升了立体感和空间感。
总 结
总而言之，《黑潮之上》的美术包装基本是通用UI用五彩斑斓的黑作为核心要素贯穿始终，同时在各种付费点UI界面用心设计场景化，达到了辨识度和视觉效果的统一。
大家还有什么想要骨头分析的游戏，可以在评论区留言！
