如何基于世界观做界面设计

今天分享的主题是有依据的设计，也就是基于游戏世界观和背景的设计

此次的分享分为两个部分，一个是游戏世界观，这个部分主要阐述游戏世界观的概念，还有世界分别对游戏整体，和单一对设计的影响，这里的设计包括游戏性的设计、美术设计、UI设计等
第二个是元素提炼，这一部分的主要内容是，今天的讨论范围内的元素提炼是什么，以及我对元素提炼的思考，还有运用案例。

就我个人的感受而言，目前国内的环境似乎不太注重世界观这个东西，但作为设计师的我们，平常在设计中就能感受到世界观的存在，我们的设计造型材质色彩要符合时代特征、故事氛围，实际上就是世界观正在起作用
即使是普通玩家，也是能感受到它的存在，尤其是核心玩家，

说出来，你可能不信，我上百度百科，完全找不到关于【游戏世界观】的词条。
于是，我尝试从各个论坛或网站寻找具有权威性的定义
但没有任何一个明确的答案
原因是，恐怕现在很难有一个可以服众的答案。
就像“一千个读者就有一千个哈姆雷特”一样，一千个游戏参与者（包括开发设计和普通玩家）估计能有一千多个概念。

首先，关于世界观是否是每个游戏都必须拥有的，网上有不一样的论调，如陈星汉老师就认为世界观并非是必须的元素；
但从生活中所接触的游戏来说，绝大部分游戏都是拥有世界观的，例如斗地主棋牌游戏，其本身就是带有世界观的属性存在的；

大家可以看一下陈星汉老师的知乎答案，“世界观并非一个必须的元素，大多数休闲游戏都不需要很特别的世界观“，感觉他也不是很确定，这个问题的确很难界定，
作为知识浅薄的我，当然更加不好确定，但我的观点是，世界观是个好东西，近乎于一个游戏的灵魂


也许世界观不能决定一款游戏的成败，但至于游戏世界观到底对游戏的影响有多大，我们接着往下看

根据游戏世界观的完善程度，我们大概可以将游戏世界观分成三个层次
看完这三个层次，也许大家大概就能意会游戏世界观的迷人之处了
我这里指地狱边境的例子，并不是说，独立游戏的世界观就是属于第一层，独立游戏中也有很多有庞大世界观观的，
而是其实大多数游戏，都是属于第一层的阶段，这是游戏发展阶段，在游戏还不够成熟的时候，首要目标是争取更多的新用户，获得立足的根本，因此在玩法创新、数值平衡、更新完善，是比完善世界观更为重要的；
2.玩家和市场本身，我们国家直至现在还算不上富足，人们刚从解决温饱的阶段过来，根本还没意识到要去追求更硬核的东西，简单来说游戏与我们而言只是打发时间，我们还没开始学会欣赏他。

第二个例子是英雄联盟，代表的是拥有第二层次世界观的游戏

喜欢英雄联盟的同学应该知道，英雄联盟一开始，实际上是没有太多世界观的，甚至于有一些解释不通的部分，比如为啥英雄们只在召唤师峡谷打架，
但拳头也很有远见，从一开始就规划好了地理志、人物志、阵营志、生物志等这些世界观必需的元素，就是，我没有告诉你，但不代表我没有规划
但令人兴奋的是，拳头开始重视世界观了，英雄联盟官网有一个LOL宇宙站，里面就是英雄联盟世界观的内容，有兴趣的同学可以去找来看看

说到世界观，怎么都绕不开暴雪爸爸，魔兽应该是众所周知，世界观非常庞大的游戏，甚至光是世界观就有一本厚厚的书，
——这一层次，其实也就是‘星际’20多年积累后所达到的层次，商业价值就不说了，这样的作品，我说是艺术品应该没人反对吧？

但星际其实也有非常完善的世界观，并且世界观有很多有趣的设计，我挑几个给大家看一下

星际中主要有，三个截然不同的种族：神族，人族和人族，他们各自有着迥然不同的战斗单位与科技树。

由于星际的世界观设定跨度非常大，以太空歌剧的架构，融合了截然不同的三个种族，
神族的科技非常发达，并且神族的身份，外形和装备在设计上，结合了西方铠甲、埃及图形线条、赛博朋克的元素
而虫族则带有强烈的西方魔幻色彩，带有龙与地下城的设计风格
而人族武器装备不像传统的太空歌剧中设计成常见的流线科技感，而是设计成粗犷笨重的造型，全都做旧处理，增加了真空管朋克风格的那种颓废感。

再看单独人物的塑造，主角吉姆雷诺加入了西部牛仔的游侠气质，对于大反派蒙斯克，为了彰显其权力，则用加入了与整个太空元素形成强烈反差的复古巴洛克风格设计。

这个游戏的世界观可以说是很特别了，按道理来说，应该非常难以表现，但是暴雪的设计师就是把他表现得毫无违和感

在核战之前，联邦政府建立了一些地下防核地堡称为避难所，少数人进入了避难所，进行了冷冻。200年后，辐射减少以后，各避难所的大门开始打开，荒野上出现了失去科技的原始部落人，以抢劫为生的强盗，作恶多端的毒贩和奴隶贩子，还有重新建立文明的城市人，以及没有丧失科技的钢铁兄弟会。而主角是111号避难所唯一幸存者。

这种题材主要特点是描述末世废土的世界背景，通常手法以核战争等具有不可逆的毁灭性手段致使世界毁灭
背景格调通常带有末世废土的颓废、荒芜、物资紧缺等氛围，也经常伴随一些嬉皮、诙谐的设计在其中。

真空管朋克风格根植与全世界掩埋在骇人核战阴霾中，所有人都必须时刻警惕甚至置身在环境、秩序、精神全面崩溃，一番残酷社会浩劫景象的这样一种假想废托邦历史阶段。
真空管“朋克”的称呼十分精确，无论背景主旋律正是朋克文化兴起的重要前兆，还是近现代性、可参与性的文化特性，都直接支撑其朋克定义。
真空管朋克与蒸汽朋克有着时代沿袭性，但是格调则截然相反，后者通常追求积极向上的氛围，从各宗作品中维多利亚式繁复而唯美的描写确实印证了这一与当下朋克精神背道而驰的特点。相反，虽然继承了蒸汽朋克诸多创造意识，但是真空管朋克则明显并不阳光和美好，而总是采用灰色幽默的表现手法去刻画融合了人性、社会、历史等复杂矛盾的一面，可以更真实地描绘人们在逆境中是如何憧憬高效、舒适生活。更强硬更直接的强调想象力、创造力对世界的重要性，本身就是突出存在感的一种抗争形式。

谈完了世界观对游戏的影响，我们来探讨一下，我们最关心得问题，世界观会怎么影响设计？
辐射在后启示录+真空管朋克的影响下，又演变成出了什么样的设计形式

在我搜集资料的过程中，辐射系列被誉为真空管朋克最具代表性的游戏；最左侧这个装甲，相信大家早就看过了，
厚重的工业造型、大量裸露的传导结构、粗矿的质感，应该算是辐射4当中一个教科书级别的设计了

中间的场景概念设计，核战争摧残过的世界，一片废墟的景象，没有钢筋水泥的结构，只有用有限物资搭建起来的建筑，有点像暴力街区里面的第八区贫民窟，非常符合物资紧张、人力有限、科技倒退的设定

这个游戏当中出现的插画，是不是觉得似曾相识？有同学知道来源于哪个作品吗？

没错，就是这个，第一次世界大战，美国山姆大叔的征兵海报
说起这个海报，那可以说是非常牛逼了，有无数的美国年轻人受到这张海报的影响，而奔赴战场，可以说美国今天的霸主地位，有这张海报一份功劳

自1919年第一次世界大战直到1933年的经济大萧条结束期间，都是这种风格的海报
这种海报有明显的色彩倾向，并使用大量的对比色和补色，画面非常有冲击力，并且具有鼓舞的性质，非常具有当时在战争和经济萧条阴影下的特点

看完这些，我相信大家又有似曾相识的感觉了
没错，就是我国1954年以后的大跃进时期的海报，比如以前我们期末时发的那个“死猪不怕开水烫，越到考试我越浪”，这里我就不继续展开了

另外，大家知道最右边的可乐是什么吗，是游戏内的道具，吃了会加攻击力和行动点，还有瓶盖，瓶盖在游戏里面是作为货币的，感觉可口可乐应该是投了广告吧，但是这情怀又让我不得不服，
从表面上看，真空管朋克则明显并不阳光和美好，而总是采用灰色幽默的表现手法去刻画融合了人性、社会、历史等复杂矛盾的一面，可以更真实地描绘人们在逆境中是如何憧憬高效、舒适生活。

这其中涉及到金属原色、亚光银等极具时代表现力的色彩元素，以及铝板冷锻、冲压成型、一体铸造、喷气引擎、镀铬等重工及制造业工艺。

设计师犹如一个催眠师，利用专业知识为玩家创造一个符合世界观、具有沉浸感、代入感的界面，将信息以合理、清晰的形式传达给玩家，并令他对所处的有游戏世界有真实代入感。
当被催眠的人被突然的强硬打断，会出现精神失常；而当玩家被一个不合理的设计所影响，也许不至于流失，但失去一定的兴趣是肯定的。

上世纪二十至四十年代的民国统治下的中国，也就是1912年民国刚建立的第八年，虽然推翻了清政府，但当时仍然是军阀割据，战事不断
社会现状是混乱与无序的，但同样是自由与理想化的，比如我们现在过的五四青年节，就是为了纪念1915年的五四运动，可见当时的思想风气是非常自由的
而最著名的大文人鲁迅先生就是那个时期的作家，而鲁迅先生就是主人公的萧红的朋友，放到现在来说鲁迅先生简直是萧红的经纪人啊，帮助她发文章，帮助她逃命，可见鲁迅先生这方面真的很有经验嗯哼
而主人公萧红（民国女作家、与张爱玲、吕碧成、石平梅并称民国四大才女，乳名荣华^^），一路流亡，从北方到南方，所经历的爱情和人生

这是英雄联盟的英雄河流之王【塔姆】上线时的宣传网页，塔姆是符文之地河流中的怪物，特点是拥有血盘大嘴，可以一口把人吞下，
另一个特点是拥有长长的舌头，可以攻击敌人

感觉我说完这些，大家应该就明白，这个网页把这个英雄的特点都表现出来了，对于元素的提炼非常到位

比如以房屋作为载体，将信息融入到场景当中，有明确的视觉中心，清晰的信息展示，以及强烈的代入感
厚重的通用底板，雕刻了粗犷的纹路，以及体现地理环境因素的积雪，还有北欧神话的壁画效果

这些是我挑出来比较有特点的界面，大家有趣可以搜索一下
当时第一次看到的时候，简直惊了，这竟然是一个网页游戏，再看看一刀99级，我陷入了沉思

这是元素提炼的第二节，前面讲了元素提炼是什么，所以接下里应该是这次分享里最干的部分了
我会结合真实的案例，展示自己提炼元素的过程

但在真实的工作中，我们会遇到很多情况，比如信息有限且不明确，信息混乱导致不知道如何下手
下面我们一起复盘一下这一次的设计过程

恩，没错

这是我个人习惯，我每次都要认真读一遍策划文档和UI文档

这是真的，这不是梦
真的只有这两句话，我又惊了
谁知道棉布杰克一件杰克外套还是一个人啊，船长为什么找这个东西或者人，三个章节又是什么意思，为什么要有人鱼之泪解锁

这种情况下，带着一肚子疑问，就去找策划了

最后就是，各种发挥主观能动性
从策划嘴里掏出更多的信息，甚至有时候策划也没想过那么多为什么，反正就老子要玩家去找一个叫杰克的人

最后各种沟通，才还原出这一个东西，这个需求才算是明确了

在思考之后，我将侦查和破案这两个关键词，跟侦探破案的情景结合起来
但实际上，我说侦探破案，虽然能形成画面，但都是比较零碎并且不清晰的画面
另一方面，这个信息的画面感很混乱，很复杂，并不能达到承载信息的目的

所以，在这个基础上，我又把这个画面进一步简化，使他看起来不会混乱，有明确的视觉中心

还有一类关键词，他非常的复杂，光是听到，你脑海里就开始闪过各种各样的画面
比如对抗，我就想到两军对垒啊，战马飞驰，刀光剑影啊，你砍我一刀，我捅你一剑
比如利益，我就想到钱啊，金库啊，一辈子享之不尽的荣华富贵啊~
这样的关键词，咋一看，好像没毛病，但毛病就在于他太容易引起联想，从而非常混乱

所以，我们要把他进行单一化的处理，使他变成一个可见的具有代表性的元素

比如对抗简化为刀或剑，寻找简化为指南针和地图，利益简化为金币

经过前面的步骤，我们通常感觉充满了洪荒之力，似乎拿起笔就能画了
但总感觉还是有点混乱，原因大概是我们没有对前面的元素进一步提炼

我们所得到的资料与元素中，分别有不同的特质，有些适合作为信息载体，有些则只能作为画面氛围，找到他们的特点
将他们的好处提取出来。


简言之
物尽其用


至于为什么这里突然出现了一个中国风的设计，是因为这张图很好的符合我要说的内容

形的方面，其实对于信息而言，【形】就像是一个容器、载体，所以一个具有载体功能的形，就非常重要，
如果一个本身不适合作为载体并且没有经过加工的形，就显得不合适，这个只是针对作为信息载体的形，
前面说的形包括很多方面，当形不需要承载信息时，当然就不算是一个容器

这里我选择船长桌、地图、纸片这种形式作为信息容器的形

在色的方面，我主要提炼出三个元素，
1.明确的光源，这样有两个好处，明确的视觉焦点，吸引视线，还有强烈的氛围感
2.暗角处理，这样同样有利于塑造视觉中心点，进一步提升画面中神秘的氛围感
3.饱和度的变化，以饱和度的变化，促进信息层级的变化，我说的是促进，而不是控制，因为还有其他因素在影响信息层级的变化

质感方面，主要是符合世界观的设定、还有背景故事的氛围，质感有一个很明显的作用就是，区分物品的特征，给人不同的感受
但质感也不能过度，如果一个画面里出现过多的质感，并且比例没有很好的控制，那家伙，就跟过大年似的的

我仍然在学习的路上，关于这种具体的设计流程方法论，我是抱着保留的态度，只敢向大家展示一下我的刀工，而不敢秀自己的厨艺

构图：举个例子，我们根据需要，会购买一个大小合适的房子，这个房子首先要满足居住的基本功能需求，整体改造也在可控的成本范围内，就像我们选定的元素，能够满足承载界面的信息需求。选定房子后，我可能需要拆除分割空间的墙来满足自己的需要，比如我们拆掉客厅与阳台之间的分隔墙，改造成一个无敌落地窗，以便我更好的看风景，就像我们剔除一些干扰元素从而让信息更清晰的呈现；当然，做减法还是要有节制的，我们要保留具有识别性的部分，就像房子的柱子和承重墙，如果拆了，无论是房子里的物件和房子本身都是不存在的。

分块：这个部分，就像我们对我的房子有个具体的规划，比如：我需要一个书房、我要一个大厨房、我要客厅和饭厅一体化等等，就像我要为我的一级按钮预留一个位置，界面标题需要一个显眼的位置等等。
这一步主要解决功能性的问题，满足功能我们所做的一切才有意义，换句话说，信息和功能的呈现是第一位的。

塑造：在清晰的规划了信息的呈现后，我们需要令界面更有美感、层次感；比如我们把房子装修好之后，沙发、床、电视机都有了，但总感觉少了点什么，这时候缺少的可能是一些装饰物了，比如墙角的落地灯、书柜上的高达模型、还是墙上的装饰画，这些就像我们界面的细节和装饰，加上这些东西之后，界面从而变得更精致、更有情感了。

这个界面到这里就算完成了

最后我将效果图发给策划看，我说我还要调整一下，他直接就说，已经很好了，不用调整了
我就明白了，成了
所以起了想总结一下这次的经验的想法，所以冒死出来分享

最后我们总结一下元素提炼部分的内容

没了，感谢观看