【拼好克·开发者日志】美术UI制作复盘与总结

大家好，我是《拼好克》的游戏UI设计JJavi，《拼好克》游戏体验人数已经达到一千人，感谢各位的支持。比赛期间注意力总是在眼前的事情上，等到所有工作结束之后整理素材，发现很多问题从开始到解决的过程值得复盘一下。

《拼好克》策划案里不同的身体、腿脚和其他部件组合在一起，会产生带着一点怪诞、又有些好笑的结果。项目组里的大家都很喜欢这套逻辑，但是这套玩法需要好的流程逻辑来接住玩家，于是尝试参考策划老师的流程图建立灰盒：

一边和策划老师沟通，一边假想玩家会怎么样操作，不断推敲打磨。在灰盒状态大胆建立，操作，迭代，方便大家开会讨论时有落地的参考对象。

随着流程逐渐补齐，各个界面的信息安排不能完全使用同一种思路，页面交互也需要不同形式，于是在飞书上将所有想法都写在了UI美术看板上：

建立好后和主美老师逐一讨论哪些不够 ，哪些可以作为参考，推推又敲敲。回过头看，很多想法丰满但不适应游戏本身，形式大于功能了。

设计理论再多，真正落地的时候还是要围绕被设计物本身。克苏鲁、幻想生物、神秘书籍、炼金一样的拼接和恶搞元素的生物部件、打工人形态阻碍这些种种，让游戏气质扑朔迷离。基于粗描边卡通风格的建立、恶搞的怪物组件设计、配合主视觉场景图，UI画风和配色就不用过多考虑了。但是整体游戏「抽象」「恶搞」与「克系」「神秘」的天平逐渐失衡，UI需要补足恶搞之外的神秘气质，于是使用ps进行设计与细化：

其他的道具，图标也都按照粗轮廓简单二分光影进行设计。其中，养成主界面的图标在刚开始时为了追求中世纪博物志手稿的质感刻意加强了碎纸轮廓质感，但是在主美老师的提醒下发现拼装安排进页面后效果非常跳脱，于是改版为石刻剪影卡通风格：

尽管迭代后仍有不足，但是对比初版显然更适配游戏风格，也更能辅助游戏氛围。做设计需要做取舍，而这次图标设计陷在自己内容里了，好的理论和好的落地差着经验的补足。

拼装界面是游戏重点玩法页面。在这个界面上的图标排版、效果适配、流程连接都出现很多问题：玩家要怎么在一个界面里选取、拼装、试验，同时又要凸显神秘、克系、怪诞的视觉风格，该从哪里进入此页面，又该引导玩家去向哪些页面。于是在骨架大框和背景主视觉图之下进行设计：

其中，配色在保留骨黄灰固有色的同时加入来自背景页面的紫色调反光让整体更协调。而框内的肌理底纹则延续中世纪博物志手稿的气质，调整透明度直到作为纹理不抢主要内容。按钮和容器框则做了破碎纸片效果，与游戏中死灵之书的设定适配。同时左右两侧碎纸的不规则轮廓之间顺应骨架框的曲线来做咬合关系。六种颜色的瓶子对应头、翼、肢、爪、尾、身体，拼接交互颜色也对应六色。效果还不错，但是回过头看显然不够。1、容器区域太小，以至于游戏后期部件溢出，左右完全翻找不过来。2、拼装小窗并没有单独做适配，导致纯白色小窗画面在页面中央丧失色彩协调。3、瓶子的设计完全冗杂，标签、绑绳、金属托底都仅是装饰，反而影响了部件被收纳的效果，以至于到最后有些部件还会出现和瓶子轮廓有叠压，形式大于功能。整体页面完全可以做收纳背包式设计，给玩家带来更好的交互体验。

第一次独立做UI美术，以为做完UI美术素材就结束工作了。但是素材提交给程序落地后和设想的效果差太多，遂发现在各种美术细节上更需要的是清晰演示和详细说明。figma里的文档并没有在原型上给到足够的示意，动效方面也仅是在场景拼接排版后截图存档。按钮与界面的交互逻辑、按钮本身的交互状态等等都没有给到足够的说明。以及最后压缩包里的文件命名、演示图例里的文字说明都并不规范。这些问题导致了临近截止日期UI工作翻倍，好在飞书协作可以反馈，于是将问题一一复述在程序和美术对接的工作列表里：

成熟的合作流程给予了容错。逐一排查流程、素材，一遍遍对比实机，直到效果满意。

UI 不只是把页面做好看，更需要服务玩法，让玩家看得懂信息、找得到操作，也要和游戏整体的美术风格保持一致。过程中也发现，设计稿上的效果和实际游玩中的感受并不完全一样。信息是否清楚、按钮是否醒目、界面节奏是否合适，都需要放进实机里反复检查和调整。及时沟通、尽早验证，才能给后续修改留出空间。

非常棒的21天，非常棒的伙伴。感谢大家的付出与帮助，也很开心能一起把《拼好克》做出来。

最后的最后，醋终于来了

基于怪诞、神秘、拼接、零件、恶搞、克系做了很多概念海报：

请投票！

#发现好游戏 #TapTap聚光灯独立游戏 #聚光灯游戏创作挑战 #游戏ui界面 #游戏美术 #TapTap聚光灯游戏创作挑战 #拼好克 #克苏鲁 #独立游戏 #聚光灯gamejam