2021年度赛事！叶子学堂GGAC参赛作品创作分享

Part  1

前   言

非常感谢GGAC的邀请。通过对此次活动的聚焦，我们也把手中掌握的知识体系进行了一次很好的梳理。

         

在接到邀请后，我们首先发起了内部讨论。以往，我们面对不同题材做了不少作品。但本次的主题是“元宇宙”探索计划，因此我们需要先从概念本身进行探讨。

1  元宇宙

“元宇宙”最早由科幻小说作家尼尔·斯蒂芬森提出。简单来说就是一个栩栩如生的、具备强沉浸感的虚拟世界。

它拥有相互关联的、并具备延续性的历史、人文、地理等极其复杂的细节内容。而这些细节的存在会使人产生信服感。它几乎相当于另一个完整的世界。

2  现实应用

举个例子，像《魔兽世界》这种具备相对完整世界观设定的游戏（或称其为IP更恰当）就可以称之为元宇宙的雏形。

当然，它不限于单款游戏，还包含系列游戏、影视作品、小说等。它们共同组成了让人信服的“真实世界”。

虽然《魔兽世界》的IP热度已逐渐淡化。但这种建立世界的经验和方式已经被很多行业和公司采纳。加之如今科技的进步，硬件不断在挑战摩尔定律，元宇宙概念将变得越来越接近真实世界。

就目前来看，“游戏”这个载体依然不可替代。因为它能提供的互动方式依然让人兴奋。在游戏中人们更愿意花钱，更愿意摆脱现实的自我，心无杂念地沉浸其中体验另一个世界的际遇。  

3  进入赛事

在本次赛事中，GGAC的元宇宙概念通过“元素说”、“元素师”和“元素时代编年史”这三个模块进行了大体的表述。

在进行初步会议后，我们决定从水、火、土、风、熵全部五个元素入手，结合元素说中东方、西方、异次元这三个文化背景来进行作品的创作。而不是单独挑选其中的一个或二个方向。

4  目前成绩

我们本次赛事的参与创作者ID共计24人；

截至11月23日，包含入围和晋级的创作者ID合计19人，占比80%；

其中有几名创作者ID的作品相对靠前。我们会持续跟进后续的评审。

Part  2

赛事过程及作品解析

1  设计与情绪版

01 需求解读

在明确了最上层的五个元素概念后，我们继续分析赛事的产品框架需求。也就是俗称的“工作量的需求”。

赛事对参赛作品的“量”有非常明确的定义。首先整套作品的界面内容不少于6张。而游戏类型也包含大量可选项。

界面内容至少要包含5个基本项。这就需要在后续制作过程中兼顾到UE方面的内容，系统的关联性和延续性。

值得注意的是，如果参赛作品中包含图标、动效、视频、系统、IP设定等内容，会拥有额外加分权力。

这就决定了本次比赛中多工种协作的必要性。针对这种需求，我们确定了以参赛者领头，3D、动效、图标等其他同学有选择配合的方式来进行制作。

在游戏行业中，UI工作必然会涉及到与其他美术工种的沟通和协作内容，这也是我们在教学过程中极度重视并一直对学生强调的。

02 确定选题

相对于那些严肃到有些束手束脚的实际项目来说，我们对GGAC这次更加概念化、发挥空间更大，选择权更多的比赛项目更感兴趣。因为这很适合学习，是更加正向积极的比拼。

首先、水、火、土、风、熵等元素概念并不是一个明确的标的，它们有很大的延展性和发散性。

比如“火”，可以代表热情、激烈、战斗、狂躁等大量情绪；

再比如“水”，可以代表柔和、宁静、神秘、包容等情绪；

更不用说以热力学概念为代表的，常用于科幻、未来主义作品中的“熵”元素——这些都能为我们创作提供丰富的土壤。

同时我们也鼓励参与者尽可能广泛的选题，而不要集中于某一个元素之中。

选题是一个“开”的环节，它是宽泛的、不设限的、头脑风暴式的过程。而进入到具体设计又需要进入“收”的环节。                

03 背景设定

根据选择的主题，我们会先进行背景设定。元宇宙的显著特点就是内容具备很强的关联性与合理性，此外丰富的细节内容也需要一个统一的世界观构架来约束。这对于后面的展开制作有极大意义。          

04 关键词与情绪版

在我们开始碰头会前，所有人都需要先对自己的想法进行最基本的梳理，然后在会议中由此设计的发起者进行描述并展示相关素材，以此来加强概念认知。

结合赛事的概念，再针对选择的主题框架进行概念分解，每个参与者都会获得若干关键词。这些关键词都是会贯穿制作流程始终的。             

一般来说，获得关键词就能以此为基础制作情绪版。

情绪版并不是无序的，通过对关键词的逐个定位，从色彩、表达物、平面构成、材质肌理等多维度进行参考素材的填充。

而会议中的其他人以此思路为基础再进行大量的补充和反思，直到发起者自觉所需细节已相对清晰可见。之后再由下一个发起者开始，依次进行。经过1~2次会议后，情绪版最终形态基本确定。

05 制作流程

综上所诉，在参与之初，我们就决定采用有节奏的碰头会来对所有参与者进行进度把控。因为各个参与者都有自己的本职工作要做。为了保证效率，沟通周期为2周左右。复盘节点如下：

2  交互设计

01 过往研学

以本次比赛的规格来看，我们深知一定会有高水平的团体、机构、个人来参加。因此在进行作品制作时，我们会对比以往的研学内容，寻找更有突破点的设计。毕竟整个游戏行业都具有快速迭代特征。

往期作品可以通过关注我们公众号（叶子学堂）来查阅！

02 交互内容

为了满足多样性，除要求的5个基本项。我们还提取常规游戏框架的其他项作为增加项。

          

增加项内容具备大众认知特点，比如阵营界面，就属于交互认知非常明确的类型。

03 交互框架及焦点优化

在制作框体布局时，我们会根据所选主题来进行优化。

举个例子：根据游戏类型和设计者要强调的信息的不同，界面中角色占比也应该是不同的。

突出角色压迫感，战斗为越肩视角。增大角色占比，强化角色细节和冲击力。    

第一人称战斗不需强调角色体积；科技末世突出空间感、意识化风格，弱化角色占比且居中。

   

战棋游戏的系统操作更重要，角色只是表达手段，可以弱化占比做偏移，突出系统的丰富度。

以上的设计依然遵循左右布局、三分法布局等常规的布局手法，但会根据游戏类型不同而进行调整。为了突出压迫感，选择半身像；为突出系统性，把重要系统放大，次要缩小等，都是在对视觉焦点进行优化。

04 尺寸与字体

内容规定的界面尺寸为1920x1080，相比以往教学中的尺寸略大。如今手机性能提升，分辨率的增加非常有利于展示更多细节和内容。

在个人作品中，文字的规范——间距和栅格的要求不如项目中那么严肃和详细，很多时候会为效果而妥协。

为了视觉美观且完整，在有较大量的文字和信息的情况下，要保持框体内的整齐一致。而文字的对齐方式就需要根据布局位置来调整。

同时，作品中的不同字体数量也要进行控制。充当系统字和美术字的总数量会控制在3~4种。   

05 交互的演变

早期游戏的UI更多依托于框体呈现，其好处是文本清晰，信息明确。但随着整体市场的审美提升，僵硬的大面积框体已无法满足市场需求。更加视觉化的、去框体化的设计应运而生。

目前，游戏玩家群体接触的游戏类型越来越广泛，主机游戏、独立游戏的工业化和艺术化表现被玩家、特别是年轻玩家习惯后，整个UI行业的趋势已有所演变：

突出主要视觉点，通过加入平面构成和色彩构成，在保证内容、文字信息足够清晰的情况下，追求艺术化和风格化的UI展示效果。通过流畅、丝滑的动态交互体验，极大提升和丰富玩家操作感受，使玩家能更加舒适自然的体验游戏内容。

在设计上尽可能去框体化，界面之间保持足够的延展性。在加入动效后提升交互体验。 

3  视觉传达

01 风格选择

因为参与者人数较多，我们并没有在内部明确规定界面的风格方向。大家会根据自己擅长或喜欢的方向自主选择。

截至目前，全部参与者中包含的风格种类极多。这也极大的拓展了我们对于主流和非主流风格的接触面。

随机展示部分参赛作品

风格选择和游戏类型有直接关联，举例说明：

• 第一人称射击类型很少涉及历史化、色彩感丰富的卡通化等风格。因为年代不合适，且画面信息较多，不符合精准定位目标的玩法认知。

• ACT、格斗等压迫感强的游戏类型则尽可能避免采用数据化、强调科技感的风格。因为科技程度越高，越容易轻量化，并且近战格斗的意义会产生质疑。

• 音游类型的用户更加年轻化，因此厚重的、写实的，带有历史感的风格就极不适合。

• 策略、战略游戏，偏向系统操作的类型，则不适合使用卡通、二次元等扁平、轻量化的风格。

02 色彩规范

色彩规范是从情绪版提炼的，距离最终作品更近。同时色彩中的主色、次色、点缀色等都必须来自于规范内，不能有其他颜色参入。这能最大保证色彩感受的一致性。  

03 调性与关键元素

提到调性，在教学中经常会有学生询问其含义。在产品领域中，调性指的是用户对产品情感上的一种理解和认知，也可以理解为初次体验所感受到氛围。

在UI设计中，为了让体验更加的明晰，我们会通过代入确切的物体形象、设计元素来为设计带来调性特征。

在《鲸落》中，五光十色的光线、鲸造型、速度线、带有硬度的元素边界都是调性的展示。  

在《般若》中张狂的火焰、佛莲、猛烈的字体、立体与剪影的冲击就是调性的展示。

在《无声细语》中未来科技化所带来的低人性、高秩序的造型特征，以及冷灰色调下带有佛教特征的机械发光元素，人为的制造了科技进化与人文符号的强烈冲突，这也是调性的展示。   

04 光感明度

在教学过程中，我们发现很多同学对黑白灰关系的把握是弱项。一套作品中表达的时间、视觉焦点、主次关系都需要通过亮度的安排来实现。

突出空寂感，背景占比较大，使用大面积灰度表示。角色的和信息内容则使用高亮度，提升识别度。控件使用深色，在保证识别度的情况下，与角色和信息产生强烈对比。

亮背景深色视觉元素。为了强调佛莲和角色，在暗调子内做大量强对比细节，提升识别度。

注意，没有人规定“只能在主元素上用亮色”，但一定要保证对比强烈，识别度清晰。否则界面就失去了重点突出、次序清晰的基本功能。

05 质感表达

元素形象在表达了真实质地时，会引起的人的审美感受。这种感受就叫质感。质感的选择与主题也是息息相关的。前面讲到的调性也包含质感的表达。

坚固厚重的佛莲采用金属质感来表达，结合耀眼的火焰一样的暖光，能够加深主题中强烈的力量感，也呼应佛的那种稳如泰山的气质。               

白色的光滑外壳，内部丰富的机械肌理。这种类似二元对立的方式很符合强烈冲突的主题。  

梦幻的调性需要气氛渲染，在界面中增加阳光洒落的光斑能够使画面气氛更加突出。  

略显古旧的棋盘、机械齿轮、暗色的玻璃球，这种带有机械的厚重感搭配策略游戏中细致思考和谨慎选择的游戏特性，会让视觉感受更加强烈。

带有超现实主义的风格中，巨物结合光晕可以使人感受到一种超越真实感的错觉。在UI中这种处理手法非常适合带有宇宙、科幻元素的游戏类型。

 

06 图标徽章

在UI作品中，一个符合主题的完整形象往往能加深视觉印象。而图标和徽章恰好都属于相对完整的单点形象。

参赛作品中部分图标和徽章的展示

在以往参与过的项目中，图标和徽章都是作为重要的UI视觉点而存在的。

在装备收集、促销活动、养成、奖励、战令等大量界面中都有图标展示的需求。而这些界面很多时候具备表格型界面的特征。                

          

优秀的图标和徽章可以让视觉焦点得到很好的聚集，并因此产生良性的系统交互行为（付费、留存等）。

07 文本视觉

与前面讲到的交互内容不同。在这里，文本的价值很大程度上在于：其优美和富有设计感的样式为UI乃至整个游戏体验所带来的积极作用。同样，文本分为系统字与美术字。

作为交流工具，文字是最容易携带大量信息的载体。游戏设计的情绪体验、情感表达如果用文字来体现，能起到事半功倍的效果。

单从字体就能表达出的趣味性、主题性。很容易的点明界面调性。             

在有大量视觉内容的界面中，美术字更加跳跃。并且富有动感的字体能够引导玩家视线聚焦在重要的信息和按钮控件上。

在信息较多的界面中，字体的差异性和字体的大小变化，也能够快速梳理信息，把更重要的信息凸显出来。   

文本的视觉表现在界面中很少会作为唯一主视觉。一般都是配合界面中的其他重要元素来设计，如立绘、图标等。因此要避免用力过猛，把握好度是关键。

Part  3

动效与3D

1  动效的价值

动效在UI中的价值越来越重要。为了让用户操作更加流畅顺滑，一个界面的不同层级元素在进行切换和交互时会设计成富有层次感的动态表现。

角色的形象立绘也不是直板的站在画面中，会有拟人化的呼吸动作和丰富多样的待机动画。

在战斗中，操作界面的UI还会根据角色技能的释放和攻击、受击的节奏、幅度来进行反馈式运动。

不止以上内容，在抽卡、结算、角色交互等各个系统中，动态的、富有真实感的UI动效都是备受欢迎的。而这些都是为了让交互时的沉浸感、临场感变强，从而增加用户粘性。

2   3D辅助

UI中的3D辅助最早用于解决那些难以被手绘方式实现的质感或复杂结构上。

随着对效果精度的需求越来越高，现在很多界面的制作也加入了的3D辅助的环节。本次参加比赛的过程中，就有很多同学采用3D辅助建模再由2D进行手绘细化的内容，这会使最终的成品完成度更高。

3  协作流程

因为参与者较多，为了不影响动效和3D同学正常的工作，我们采用了选择性协作的方式。会议之外，参与者之间进行了单独的沟通。

这种形式也是我们首次采用，略有遗憾的是最终效果只达到了基本需求。但有了这一次尝试，再遇到类似的协作就会好很多。

Part  4

部分学员参赛作品点评

         

作品连接：

https://www.ggac.com/v2/work/detail/183816

点评：丁老师

虽然只有1年工作经验，但百世同学天马行空的想法是我们各位老师啧啧称道的。初期时受市面作品影响较多，偏保守。在讲了构图和画面的技巧后，灵感就如脱缰的野猫一般，拽都拽不住。我们初期教学目标就是开拓思路，提升眼界，跳出原本的思维定式。而后期教学目标则更偏向落地执行。

专注是我要夸赞的第二个优点，新人同学往往坐不住或在工作中容易养成划水的习惯。而百世同学则特别专注，往往会沉浸设计中，去享受设计而不仅仅是为了完成一个学习。虽然很年轻，但这个优点却是成为优秀设计师非常重要的关键之一。后面还需要多走走，让自己更放松的作图。 

作品连接：

https://www.ggac.com/v2/work/detail/183854

点评：林老师

睡觉小狗是一位非常有灵气的同学，提建议和反馈的时候往往能快速而准确的抓点，沟通轻松。这套图定调就很惊艳。

视觉冲击力是这套作品的核心。红黑主色搭配其他辅色，强烈对比给玩家十分深刻的视觉冲击体验。个人很喜欢界面中的元素小惊喜。如晃动的小尾巴，恶魔小角，恶魔眼睛等，整个游戏气质更为欢乐。

此外，作品的字体设计也极具趣味性，结合美漫夸张风格和围绕地狱岩浆的元素来设计，使整个界面非常统一。岩浆外轮廓的流动感还打破了画面中规中矩的感觉。

问题也有，因为时间仓促，一些地方完成度还是不太够。比如，重要的游戏战斗界面，可以设计成一个跑道，让画面景深更强。而现在画面过平，底部光的细节和层次也没有经历足够打磨。整体的信息层次没有完全拉开。  

        

作品连接：

https://www.ggac.com/v2/work/detail/183832

点评：皮皮老师

大头狐狸是个非常肝的同学，真正做到了“女人要对自己狠一点”。哈哈。

这套参加GGAC的图真的付出了超多心血。

这套美漫风格作品在光影、造型和主题契合度上的设计刻画都很不错。初期她围绕主题做了大量头脑风暴，有了一些基础雏形。完成一系列风格稿之后，再从中思考就很容易找出亮点。

有时候，她甚至会在同一张界面中制作很多套不同风格的稿子，反复对比后选出最优的。通宵更是常态，真可以说是肝出激情、肝出质量，当然也肝掉了大量头发（也包括我的头发，哈哈哈）。但是当这套作品完成的时候，瞬间感觉值了。    

     

作品连接：

https://www.ggac.com/v2/work/detail/183844

点评：花花老师

刘索隆同学的这套作品是根据楼兰主题来做的。虽然最终的完成度还可以再提高，但就整体风格的把控，以及标志性文化元素的选择等方面都做的比较出色。

作品采用以平面造型为主的方式来表达楼兰的特色风格，感染力强烈。角色的造型和用色都是比较张扬和大胆的。

为了平衡感受，刘索隆同学在背景上运用灰调做调和，很好的掐准了界面与角色的关系。整体媚而不俗，最终的层次关系控制的很不错~

作品连接：

https://www.ggac.com/v2/work/detail/183838

点评：天哥

我们秋总刚大学毕业。如果要用一些词语来描述她，那就是“清秀”+“腼腆”。这套界面是赛博偏美漫风格，整体色调偏暗。营造出一种未来都市夜晚的罪恶感。主色偏蓝青，加上高饱和的红色作为点缀色，色彩搭配非常的出彩。

为了满足科技感，造型轮廓运用了一些规则型和尖、直角，并在此基础上做出了一些变化。排版讲究，符合现代视觉审美。元素科技风格的点线面构成带来了十足的科技感。

层次把控不错，但弱层次还有继续优化的空间。总体来讲完成稿很出色了。秋秋同学也是顶住了压力，经常做图到很晚。这个过程中，我们能看出这是一位善于推翻固有思路，很有灵性、韧性，敢于挑战的同学。加油秋总！

Part  5

内容总结

叶子学堂一直致力于研究行业趋势，力求把自己的教育资源放在最有价值的内容上。我们的教育环境也非常用心的在维护。

本次活动我们调动了不少人员参与，而且本届和往届的部分学生也参与了比赛。这不仅为当前的学习周期增加了明确的目标和积极的动力，也帮助我们更广泛的、深入的接触到了行业内优秀的人员。

在这个过程中，我们还认知到不少之前忽略但实际上很有价值的内容，这会帮助我们叶子学堂更好的成长。

非常感谢您的阅读。再次感谢GGAC组织的大赛，期待明年再见！

本期活动：

大家可以到公众号“叶子学堂”本期文章下方留言区参与随机抽奖活动！

叶子学堂为大家准备了一些小礼物，因为种类多样，所以会用盲盒形式发给大家。

奖品内容：

叶子学堂主题 盲盒 1个（里面会包含多种物品哦~~ 都是老师们设计的，不要错过！）