开发日志 03｜三种画风，一个界面

修改于10/208 浏览

大家好，我是超级梁山泊工作室的R，团队里我负责 UI 和视觉规范。这期由我来给大家带来开发日志，上一篇结尾说，这期聊三套视觉语言，所以除了「三套画风是什么」，我还会讲讲我每天在头疼的那件事：怎么让三套画风住进同一个界面里，不打架。

一个游戏，为什么要三套画风

第一篇里提过一句：我们选了三套不同的视觉语言来做三个层次。这一篇展开说。

出发点其实和我们理解「涌现」的方式有关：这个游戏想讲的是「看世界的方式会变」这件事。我们最后决定，不靠台词讲，靠画风讲——玩家看着画面，就能感觉到自己正在待在哪个世界里。

暖的那层。参考《Spiritfarer》：手绘感、琥珀暖色、造型圆润、怪但可爱。这是玩家大部分时间待的地方——酒馆的灯火就是这个颜色。

冷的那层。参考《三伏》：冷、写实、低饱和、带怀旧颗粒，平涂但很「干」。它什么时候出现、什么时候从上面翻下来——先卖个关子，玩到就知道。

第三层，只有一个人在用。参考《GRIS》：极简、大色块、剪影、几乎不画细节。它和另外两套都不沾边，而且我们给它定了一条硬规则：不管玩家什么状态，它的画风永远不变。全家福里唯一一个「干净」的东西，这件事本身就是叙事。

三套画风如果各画各的，玩家会觉得在玩三个游戏。所以我不把它们当三张画，而是当三套「口音」——共用同一套零件箱，只是每套口音念出来不一样：

配色共用一个调色板。不分家。三层的区别是「用哪些、用多少」，不是各拿一套颜色——这样它们怎么切换，都还在同一个世界里。

字体中英文各一套，外加一张用字规范。标题、正文、提示、数字分别用什么字、多大、什么颜色，全部写死在规范里，程序照着接就行。

图形零件是共享的。月相、酒杯、酒瓶、摇壶、钥匙孔、门角——每个零件在所有层里长得一模一样，换个颜色、换个材质，就换了口音。

还有一件事是双端的：同一套布局，同时给 PC 和安卓。界面坐标写在一份规格文件里，两端的差异只有交互方式——鼠标拖拽和手指拖拽。下面两张是同一套界面在两个比例下的样子，宽屏会重排，不会拉变形：

VI 视觉规范手册出了两版：中文版（配色 / 字体 / 图形 / 布局四章）+ 英文用字规范（英文标题、数字、大小写规则）。
调酒界面的完整操作链跑起来了：拖瓶子 → 量 → 倒进摇壶 → 盖上 → 摇晃 → 选杯 → 加冰 → 端过去，八个动作的拖拽、命中区和提示全部接上了程序（上面两张截图就是它）。
图形零件全部整理成可编辑的矢量源文件（SVG，分了图层，美术可以自己改），顺手做了两个 Figma 插件：一键建样式、一键建白模。
LOGO 有了提案：两只酒杯上下颠倒拼成一只沙漏——上面冷、下面暖，清醒和沉溺各占一刻；中间走着的那一滴，就是时间。
另外把游戏里所有小字的字体修了一遍

第一，三套画风同屏到底成不成立。

暖色调的世界里，突然出现一个极简的、干干净净的人——这到底是「叙事效果」还是「贴错图」？我们自己相信是前者，但相信不算数，得真的放进场景里，让人看一眼就知道。这个对照测试正在做。

第二，双端适配的松紧。

一套设计喂两个平台，触摸的命中区得比鼠标大一圈，界面会显得「松」。松多少、哪里可以收紧，还在调。这是我们第一次做双端同步设计，没有现成经验。

希望对大家能持续关注我们的作品