当视觉设计只停留在“好看”，复杂原型就会陷入卡顿与混乱。作者在 Axure 坦克大战中，将视觉拆解为语义、空间、时间、逻辑、动态、隐喻六个维度，用色彩协议、性能探针和隐喻命名，让视觉与状态机、性能同构生长。本文带你重新理解：视觉不是皮，而是架构的骨架。

在很多产品经理的认知里，视觉设计就是“挑个好看的颜色，把界面填满”。 但在实际开发复杂原型（比如我最近手搓的 Axure 坦克大战《终章 2026》）时，如果视觉只停留在“好看”层面，原型很快就会变成一场灾难：满屏的元件堆叠导致浏览器卡顿，状态反馈混乱让玩家无所适从。

良好的视觉，不仅是信息，更是状态、层级、反馈、甚至性能的具象化。它不仅活在静态的画面里，更活在语义、空间、时间、逻辑、动态、隐喻这六个维度的交汇处。

视觉六维与色彩语义模型

一、 语义与空间：颜色是底层协议，明度差是物理纵深

在游戏引擎里，颜色是有严格语义的。我给自己定了一条铁律：同语义元素，必须使用同色系。

色彩语义协议

注：原本紫色只是我个人的幸运色，当它被升华为系统设计后，玩家对“生存/增益”的直觉判断就建立起来了。

在空间上，很多原型看起来“平”，是因为缺乏物理纵深。我用三层背景的明度差，强制拉开了视觉深度：页面背景（#333333） -> 画布背景（#666666） -> 战场背景（#000000）。

配合“镜轨渲染法”（双中继器行对齐），我实现了严苛的图层物理遮挡关系。

战场图层物理遮挡（从上到下）

当子弹从坦克下方飞出时，视觉上就像是“从炮口发射”一样自然，这就是“空间协议”带来的物理真实感。

二、 时间与视觉：心跳机制与状态时长锚定

视觉在时间维度上的核心，是表达状态变化。

在画布外，我做了一套外场脉冲系统（环境光）。这绝不仅是为了酷炫，它承载了双重身份：前一半是 “气氛组”（如玩家被击中、Game Over），负责提供情绪冲击；后一半是“指示器”（如时钟冻结蓝光、幽灵无敌紫光），负责映射游戏状态。

视觉反馈的持续时长，必须严格锚定逻辑事件的时长。比如“时钟冻结”技能持续 6.666 秒，画布外的蓝色冷光就精确亮 6.666 秒。光在，效果在；光灭，效果结束。这种在时间维度上的一致性，会给用户极强的掌控感。

外场脉冲与逻辑状态机映射

三、 逻辑与视觉：没有逻辑的视觉是装饰，没有视觉的逻辑是哑巴

视觉必须服务于游戏逻辑（状态机）。

• 暂停：外场亮起灰色常亮光，玩家立刻明白“时间凝固了”。
• 终局：如果基地被击中（Game Over），玩家坦克会石化，配合暗红长闪；但如果是全胜（SHUTOUT），玩家必须保持活动状态，配以金绿交织的循环脉冲。

如果全胜也让玩家石化，战场就彻底“木”了。优秀的终局视觉，不只是逻辑的兜底，更是情绪的延伸。每一个视觉反馈，都必须对应唯一一个逻辑事件。

四、 性能与动态：把“卡顿”做成可视化探针

这是这套视觉系统中，最硬核、也最具工程感的一环。 在极高并发的坦克大战中，“卡不卡”靠人的感觉是无法量化的。为此，我采用了 “性能指标探针可视化”。

Axure 的 Timer 心跳在游戏进行中，会因为事件队列拥堵产生延迟。我把这个“延迟偏差”，映射成了画布外的一条彩色光带。但在 Axure 里，颜色不能用函数绑定。于是我用了极其偏门的一招：用纯红、纯绿两条线段的“不透明度”叠加，在黑色背景下模拟出从绿到红的连续色变。

当他人测试原型时，只要截个图，一眼就能看出他机器上的延迟是多少、瓶颈在哪里。“人情反馈”被彻底剔除，剩下全是数据。

性能探针的双线段不透明度映射模型

五、 隐喻与命名：让架构拥有灵魂

视觉的最后升华，是隐喻。在长达 30 天的极限开发中，面对满屏冷冰冰的变量和事件，我喜欢用一些带有隐喻的词语来给它们命名。这不仅仅是“好听”，更是为了在极度复杂的架构中，时刻提醒自己这些模块的本质职责。

架构层的隐喻：池、心房、心跳、军师

• 池：在 Axure 里，所有“只有一个状态的动态面板”，我都命名为“池”（既是我的名字，也是“舞台/容器”之意）。
• 心房：性能探针的家。因为那里是 Timer 心跳搏动的地方，探测着整个系统的脉搏。
• 心跳：全局时间基准变量（Timer）。它不叫“授时器”，它不需要等人来问，它自己按照固定频率搏动。
• 军师：玩家坦克背后，专门负责复杂逻辑推演（下一步计划、放行步进）的那个不可见元件。

逻辑与性能的隐喻：吃空饷、结界

• 吃空饷：指那些跑了循环却没有实质工作的计算（比如子弹在空旷区乱查碰撞）。
• 结界：原叫“护城河”（也是池的意思），它是子弹周围 24px 的缓冲区。它像一层魔法场域，隔离了无效计算，也感知着危险。
• 非受控滑步：形容监听周期短于步进周期时，读取半途状态导致的累积漂移。

情感与图腾的隐喻：BUG虫、终章

• BUG：游戏里的基地，不是老鹰，而是一只 BUG 虫子。守住基地，就是“守住代码”。
• 终章：不仅是 2026 年的时间戳，更是对 Axure 这场漫长逻辑探索的谢幕。

六、 体积：纯原生控件与零图片的极致压缩

包括爆炸效果（Emoji ），所有的介质、道具、坦克、子弹、火花、基地，全部由 Axure 原生控件或 Emoji 组合而成。最终原型体积控制在不到 1MB。轻量化视觉，既避开了版权风险，也保住了性能下限。

Axure 坦克大战（ChiTank）丝滑运行中

附录：视觉认知决策洞察清单：

1. 语义归一：同语义元素，强制使用同色系，建立用户直觉。
2. 空间纵深：用背景明度差（暗、中、亮）建立纵深，拒绝扁平。
3. 逻辑映射：每一个视觉反馈必须对应一个逻辑事件，没有逻辑的视觉是装饰。
4. 时长锚定：环境光的持续时长，必须精确锚定底层逻辑效果的时长。
5. 终局动态：终局不能全部“石化”，必须保留一方动态，避免画面“木”掉。
6. 性能可视化：用双线段不透明度叠加（2t 和 2(1-t)），在受限工具中实现连续色变。
7. 隐喻命名：元件和变量命名带上隐喻（如“心房”“BUG虫”“池”），让架构有灵魂。
8. 工具降级：能 Emoji 就 Emoji，能原生控件就不放图片，极限压缩体积。
9. 色彩夺权：用环境光（外场脉冲）把用户的注意力从战场内部拉到外部状态上。
10. 视觉即架构：视觉不是最后画上去的皮，而是和状态机、性能同构生长的骨架。

本文由 @CHI 原创发布于人人都是产品经理。未经作者许可，禁止转载