23K

大家好，我是Arvin，网络代号23K，目前是上海LeafStudio新木创意工作室的UI部门负责人，也是叶子学堂的GUI讲师。

非常高兴这次比赛获得了金奖提名，虽然没能拿到金奖，但是整个比赛历程对我来说也是一次非常重要的自我整理和归纳，之前一直在项目里制作需求，被眼前的各种节点压的喘不过气，偶尔把自己的一部分分出来，做做作品，想想诗和远方。

比较遗憾的是除了GUI视觉本身之外在3D图形上面花了很多心思，动效板块实在是没时间推进，希望未来能够抽出时间把动效也跟进到位，让作品更加完整。

借着这次机会把比赛心得与一些设计和思考的历程分享给大家，希望能够对大家有一定帮助。

PART1：比赛限制与审题

在本届比赛元宇宙的的主题下，我明确了自身创作的几个要点：

优先级A——视觉性：不老套、全新的视觉元素。优先级B——差异性：题材上的差异化，不落俗套，有一定深度。优先级C——切题性：要为本届比赛的主题去量身设计

除此之外，和制作完全属于自己的个人作品比起来，参加比赛很大的区别是：

1、命题限制。我们需要在比赛要求的命题范围内进行创作，先随意创作后强行扣题，和直接为了命题去创作，带来的作品呈现感应该是完全不一样的。

2、素材版权限制。一款游戏是很多部门和岗位共通配合出来的，游戏UI作为产品的桥梁将他们搭建在一起，但是比赛中没有原画与3D部门进行配合，也不能随意调用网络素材。

3、赛期导致的工作量限制。比赛提交作品节点有限，在前两者完全需要扣题的情况下，去调配工作量的重点与重心。让最终作品的呈现显得尽可能完整。

在明确了这3个限制点之后，需要对比赛命题进行抽丝剥茧，最终形成一套方案和思路，最后去落地制作。

游戏立项一般先从原画与世界观开始立，所以我优先开始挑选原画与场景的素材，《寂灭》与《救赎的神邸》这2份令人惊艳的作品让我觉得十分喜欢，无论是精度，还是画面的冲击力，都非常符合我对新视觉的印象。

《寂灭》的机甲和尚，让我想到如果作为硅基生命体的自然演化，是否依旧会有宗教的产生。而《救赎的神邸》的巨大鬼头与火焰造型充满画面冲击力。于是我决定用这2份作品，去提取火元素的世界观，去完善游戏的设计。

而火元素——传递暴躁混乱情绪最好的元素，来去进行情绪版的设计，成为了我当时认为的最佳选择。（PS：和当时遇到了一些琐事心情暴躁也有关哈哈哈哈，想把情绪传递到作品里去，不过到了后期心情沉静下来以后的又把气质往回调了一点。）

但是问题随之而来：火所代表的——红色，其颜色特有的刺眼属性导致了它很少在游戏中作为主题色应用，容易在视觉上引起玩家的疲劳。由于界面中有大量红色，一些小的信息提示（如红点等）也不容易看清，大部分游戏会应用轻松的蓝、绿、作为主色调。

如何在界面里大面积使用红色，成为了在制作前，思路上首先需要解决的难点

除了颜色之外，同步也要开始挑选适合的游戏UE。

主角色“寂灭”——将唐刀、机甲、佛教、火焰等元素相结合，创造了一个沉稳但是又蕴藏着威严和怒火的机甲战士，比较适合《只狼》类型魂系游戏的玩法。

于是在UE上面选择了赛方提供的以下几张UE作为设计原型，开始进行初步的设计。

PART2：世界观、情绪版与视觉SEED

在制作任何一张图之前，情绪版（MOODBOARD）都是关键中的关键，它能够把视觉印象在早期就可以形成一个初步的认识，并且让想法能够约束在一定的范围内，不会因为天马行空的想法而导致大量反复的修改，更重要的是，它很适合与旁人沟通，去碰撞出更有趣的火花。

在寻找参考时，我发现了大量关于“爆炸”、“混乱”的纹理，但是又发现角色本身的佛教古风气息又带有“沉稳”、“宁静”的气质。当阅图量上来之后，寻找参考的方向慢慢演变成如何将“躁动、混乱”的意向，与“宁静、沉稳”的气质结合在一起。围绕这个关键核心点，我去寻找了大量的视觉参考。

那是否有一种具象化的物件，可以将这2者贯穿在一起呢？

围绕着这些信息，我针对世界观初步整理出了一些关键词。

1、神秘学 2、无机生命 3、怒火 4、暴乱 5、秩序 6、重生

于是“火焚怒莲”的概念应运而生。也成为了这套UI设计的视觉核心SEDD。

简单讲述了一个被火神毁灭后，正在重新构建的世界。在这世界中，作为无机物的金属体却拥有意识。金属质地的火莲成为贯穿世界的核心线索。

在此基础的同时，也对应寻找了关于各种红色调性的参考，结合角色本身的金属气质，最终选定了以红白黑金为基调的色彩方案。在这期间也逐渐找到了大面积运用红色的感觉。

在排版构成方面，要求保证每一张图有比较明确构成印象的同时，又希望尽可能保证项目的落地性，所以在UE功能上选用了偏保守的栅格型排版（主机游戏感）。

在这个阶段也十分感谢一起参与头脑风暴的新木创意的同事们，提了非常多有趣的构思与意见。

PART3：节点安排与落地制作

想了再多不动笔也没有用，在教学和日常工作中，给同学们提供修改推进建议时经常会发现，很多同学会在制作画面的时候会钻进细节出不来，同时又因为想法太多而停滞不前。

在早期进行创意设计的时候，细节不耐看没关系，UI看的是整套视觉的整体性。

我倾向在前期尽可能减轻细化的工作量，大量的用半P半画的方式，去把想法全部铺量出来。同时不停的设置项目节点，如果当下情况实在是想不出来，先放一放达到基础标准即可，继续往后做，等待未来设计思路稳定之后，回过头再处理没有解决的问题，以此来保证推进进度。

我把UI界面的设计阶段拆成了3段：

1、概念氛围阶段。

在这个阶段，以大量的P图、扣图方式把画面完成度提上来，但不去纠结任何精度、模糊、UE是否完全符合等等详细的细节。只需要注意画面是否与之前定义核心SEED与视觉内容相匹配。

2、细节填充阶段，矢量细化、精度落地阶段。

把一些模糊，P图素材代替的部分，用原创的概念去调整修改掉，同时将UE完全匹配上，成为可落地的画面。

将所有外轮廓需要矢量，弱层次需要细化的设计细节，还原为高精度的素材。不仅限于花纹、材质、图形、字体、等等。保证弱层次细节的清晰度与层次丰富性。

3、最终整体调整，形成一定设计规范。

将所有界面整体统一处理，字体字色字号、内容范围区域，通用控件、纹理样式等与设计规范有关的内容进行统一。

PART4：图形制作与完善世界观

在未来，GUI表现会越来越多样性，精度也会越来越高，GUI设计师们在工作中也经常会遇到需要接触3D的情况。这也给GUI设计师一份新的挑战——会有越来越多的团队需要设计师具备基础的3D设计能力。

原本是打算制作4-5个势力徽章，然后通过平面图形去表现。为每个势力去增添一个故事背景完善世界的架构。

但是在推进过程中发现，光有扁平类图标，无法支撑起一套作品的视觉体量，所以我额外加入的关于3D类图形的设计。

3D图形方面除了核心SEED的火焚怒莲之外，也对货币，材料，空间环境，等进行了一些3D图形设计。在设计的同时，为每个物件赋予故事与属性。

同样，在制作每一个图标前，也需要寻找相应的情绪版与设计参考。

但是此时世界观已经趋近于完善，物件本身也逐渐从抽象变得越来越具象，所以情绪版也相应更容易搜寻一些。

在制作图标的期间，也为了游戏战斗画面，通过UE4地编的方式，特地制作了一个战斗环境，将世界观内的苦厄水晶能量体，融入战斗场景中，让世界观更加丰富，同时增加战斗界面的真实可信度。

势力图标

势力图标方面，完善了苦厄势力与梵音势力——苦罗摩与梵音天的背景故事。

苦罗摩势力在设计的时候，以苦行僧盘腿打坐作为基本图形，增加瘦骨嶙峋的图形感受，表达该势力的苦修感。

设计结束后为该势力写了半句题诗：诸行无常参印法，四业八苦肉凡间。

强调苦行僧苦肉凡间，希望参透世间的价值观。

梵音天方面则强调崇拜的气质。用莲花花苞作为基础图形，增加瑜伽姿势举头合十的动态，以火焰作为外轮廓，来丰富崇拜火神概念。

同样，梵音天也有半句题诗：六欲梵音焚怒莲，安得世界妙法缘。

强调梵音势力为了维护秩序，焚尽六欲的价值观。

PART5：作品包装与总结

设计从来没有凭空设计，一直都是要为了某个特定的需求而去量身定制方案，在制作方案的过程中，尽可能的满足需求，又要在框架内碰撞出属于自己的火花，让设计有理有据。

这要求设计师的专业度要达到一定水准的同时，有一定的知识与阅历积累，才能懂得沟通与描述，才能够流畅的去说明设计思路和方案。除了专业技能的不停提升外，还需要不停的补充自己的横向知识，拓宽自己的认知面。

光会做，对设计师来说远远不够，我们还要会说。包装时则需要考虑到这些。

在封面上我选用了中轴心对称构图，目的是为了表达庄严与沉稳的气质。核心的火佛莲作为封面，用金箔材质进行装饰。

考虑到阅读时是瀑布流的表现形式，进行了封皮与封底，有天有地的设计。

因为与宗教感相关，在封面文案上采用了经文书籍的竖版阅读排版方式，并且将半句主题诗，合成一整首去扣整个游戏的主题。

图标展示部分的排版方面尽可能避免过于规矩的列表形式，采用了比较经典的之字型视觉展示。

这些所有的设计目的都是为了让阅读瀑布流的读者，能够有一定的“启承转落”的阅读体验。

最后希望大家允许我装个（滴——消音），一起品味（呸）一下写的蹩脚古诗：

《般若·无象见识》

诸行无常参印法，四业八苦肉凡间。 

六欲梵音焚怒莲，安得世界妙法缘。

完整作品图展示：

最后感言

我认为对于UI这个岗位，如果是以MOBA类游戏做比喻的话，往往是类似辅助的角色。

扛把子-上单位: 客户端程序、服务器程序（程序代码本身的抗压性，稳定性）

节奏-打野位: 市场、渠道、运营（全程需要带节奏，宣发、运营、长期存量、粉丝维护等等）

后期输出-ADC: 系统策划、数值策划、文案策划（各种关键留存节点、全期、乃至大后期的游玩体验）

前中期输出-APC: 2D 3D视觉表现（核心视觉是否好看，游戏前期能否第一印象就吸引人）

链接全局-游走辅助: UE、UI、VX（存在感似乎不强，但是需要链接所有其他职能乃至音效）

也正是因为这样的特殊性，在早期的游戏研发环境中，UX在项目组往往不被重视，觉得谁都可以干。

但是值得欣慰的是，随着行业越来越成熟，对于美术效果与交互体验打磨的要求度越来越高，UI是否优秀，成为了一款游戏视觉与游玩体验是否合格的重要门槛。行业对UI的重视度也逐渐上升，UI也在大环境中，获得越来越多的话语权。

但这同时也要求所有从事这一专业的设计师们，要不断进步，除了掌握基础的入行门槛之外，还需要横向掌握更多技能，才能跟上市场环境的需要，不被淘汰。

最后，再次感谢这次比赛给了我一个自我整理的机会，也能够分享一些心得和设计历程给大家，给对行业向往还未完全进入的新人，又或者卡在瓶颈期不知道未来如何往前走的UI设计师们一点前进方向上的小小的帮助。

在大厂里，岗位分的非常清楚，成为了庞大KPI考核系统的一个渺小指标，成为了构建一个庞大项目中一个螺丝钉。但是如果抬起头，把目光聚集到自己身上，只要我们还在游戏行业，那就是一个需要学无止境的游戏人。

每个人都会有表达欲望，我一直以来的梦想是希望能够做一款完全属于自己的独立游戏，把肚子里存的故事和体验分享给大家，但是制作一款完整且优秀的独立游戏的难度之大，策划，程序，美术流程之复杂，再加上巨量的落地工作量，只有深入制作了才会觉得是一个无底洞的深坑。

需要足够的热爱、强大的毅力和没有后顾之忧的金钱压力才能支撑一个团队持续制作下去。

但是只要热爱，我们就会排除一切困难，奋斗（zheng zha）在这个行业。我们眼前的起步可能是UI，但是未来会是星辰大海。

最后藏个私货，欢迎有志向也有能力的小伙伴加入“叶子学堂”的兄弟部门——“leafstudio新木创意工作室”，这里有最前沿的游戏视觉项目，有很多能力强大的老师愿意带你成长，当然这里也有更多的不只是螺丝钉的未来可能性。（手动狗头）

皮皮

HELLO，大家好，我是皮皮，是叶子学堂的一名GUI讲师。

 这次参加比赛获得了金奖提名，非常开心，虽然最后没能拿到金奖，但是通过这次比赛还是学到了很多，下面我就把比赛过程中一些的小纠结和作品中的一些有意思的“小可爱”跟大家分享一下，希望可以给小伙伴一些启发~

PART1：明确“游戏（比赛）”规则

本届比赛的主题是元宇宙的的环境下，在不同的元素时代背景下创作“探索之旅”。

 1.搜索合适的设定作品。比赛的其中一个小要求就是在创作过程中，为了不涉及版权问题，可以在历届大赛获奖作品中任意选择人物/场景等设计资源，所以我选择先去历届作品里找找，看看是否有设计灵感。

第一眼就相中了现在作品里用到的这套人物原画设定（原画老师G站ID：冷可汀）。（只因在作品群里多看了你一眼），缘分呐~不光画风我喜欢，设定我也很喜欢，这套人物设定是：在一个神秘的海域中，有一个奇特的海贼团，他们立志要搜刮齐全世界的甜点。从此开始了一段奇特的冒险......

2.元素时代主题背景确定。水元素，象征生命力，净化。所以海盗团用甜品这种可爱、甜蜜又温馨的武器净化黑暗势力最贴切不过了~

于是我根据上面2点的，我初步建立起了自己的世界观和主题~

到这里我的游戏大致就设定成：在一片神秘的海域中，有一个奇特的甜品海盗团，他们用甜品作为武器，（寻找传说中的神秘魔法钥匙。）从此开始了一段奇特的冒险。试问谁能抵抗的了冒险+航海的热血漫一般的诱惑！

主题定好后我脑海中冒出了好几个场景，甲板上party的聚光灯，海盗旗，蝙蝠侠标志的射灯一样的骷髅射灯~

发射甜品炮弹的混乱场景。滑稽可爱中带点严肃~

活泼可爱的净化战士们当然必须搭配明快的颜色。

虽然比赛是命题作文在主题人物场景上有很多的限制，但这不能阻止你转动你聪明的小脑袋~

UE方面，我大致设定就是一个横板的闯关跑酷游戏。3条命跑到头的紧张刺激，更符合冒险的设定。

PART2：更周密的计划

大概有了雏形后，就可以着手情绪版的制作了。情绪版在界面制作过程中非常重要，它可以帮助你整理你的思路和元素，把你之前天马行空的想法筛选的更精准。不仅方便自己查看，在你同他人讨论的时候也更直观，便于他人理解你的设计思路。

围绕我的主题，从海盗，甜品的方向出发，我整理了一些关键词。

1. 航海  2. 海盗旗  3 .骷髅  4. 甜品奶油  5. 潮   6. 冒险  7. 钥匙

最后选择了骷髅和奶油的喷溅效果作为作品的视觉SEED。

颜色在这个时候基本上也定了几个配色蓝色，黄色和淡蓝紫。

排版方向因为游戏玩法的原因，并没有太多的信息。基本采用左右排版。

PART3：界面里的“小可爱们”

出了第一张角色界面的时候，基本的大感觉出来了，趁着热乎劲儿，随后制作了登陆界面：全员POSE的大合照~哈哈哈

情绪版整理的关键词和SEED，在整个制作过程中，需要用不同的方式在界面中呈现。

很多小伙伴在制作界面过程中，虽然提取了关键词和SEED，但是在制作中又没有贯穿所有的作品中，反而经常出现每一张都会有新的元素。整套作品不统一的情况就会出现。

1、找出“小可爱们”：在制作每个界面的时候，尝试将元素改变形态去贴合实际界面情况，而不是替换元素。比如我的“小骷髅元素”在每一张界面里都有使用：loading页logo、背景的结合、角色界面同icon、背景的结合、战斗界面同操作控件的结合等。

奶油同样也贯穿其中，比如loading页的进度条，就是结合裱花袋挤奶油的方式呈现的。

 因为风格偏欧美卡通，所以在元素上也想偏向潮酷的方向，于是就诞生了贴纸类的职业小装饰。

2、“游戏”的隐藏规则：比赛还有一个规则，那就是LOGO图案需要作为作品元素（可设计、可变形）通过任何方式清晰的呈现在作品中，非水印模式。这就是我界面里的一个隐藏“小可爱”：魔法钥匙。这也是我的游戏核心玩法：在对抗黑暗势力的过程中收集魔法钥匙。所以我把魔法钥匙跟LOGO做了一个结合再设计~就是现在的这把魔法钥匙了。

PART4：踩线“通关”

比赛最“残忍”的一点就是：节点！白天有自己的工作需要做，抽空做作品真的压力非常大，一度想要放弃，熬到头秃，好在最后完成呈现了，真的是非常不容易。甚至在角色属性界面里，配色都做了好多版，最后推翻了最初的版本，选择了最后的这个版本。

在做作品的过程中真的会有很多你想不到的事情发生，甚至影响你最后作品的呈现。所以如果小伙伴想在工作之余提升自己的能力，真的真的需要给自己一个“结点”。

条件允许的前提下，每天留给自己一点点的时间，做一些小练习~不论大小~也不要害怕定下了初稿后，就“不舍得”推翻。可以多尝试几个版本，说不定会有不一样的火花碰撞。

PART5：“打包”发货

 设计作品本身很重要，但是最后的包装也同样会给作品加分~可以展示一套作品从“无”到“有”的一个简短缩影。可以方便观者从包装里对你的设计语言有一个更深的理解，告诉观者你的设计是有理有据的。完成你的作品很重要，但是把你的作品表达出来同样很重要~

 完整作品图展示：

最后感言

 感谢这次比赛让我学到了很多，也是对我个人的一个阶段性的整理总结，希望在未来的设计路上可以有不同的尝试和新的突破。而这次创作过程中得到的启发和经验也都会应用在后续的教学工作中~

最后，希望这次的分享，对正在纠结作品的小伙伴有帮助。那么就这样啦~byebye~

Powered by Froala Editor