7.4
深览指数
产品人人都是产品经理·CHI··AI 生成
别把视觉只当“画皮”！手搓 Axure 坦克大战，我提炼了高阶原型的“六维架构”
作者用 Axure 手搓坦克大战原型，提出视觉应拆为语义、空间、时间、逻辑、动态、隐喻六维，与状态机和性能同构生长。具体做法包括：同语义同色系的色彩协议、三层背景明度差制造纵深、环境光时长精确锚定技能持续时间、用红绿双线段不透明度叠加可视化 Timer 延迟、以及用「心房」「吃空饷」「结界」等隐喻命名架构模块。适合做复杂交互原型或想提升 Axure 工程化水准的产品经理。原文 ↗
核心观点
- ▍视觉不是最后贴上去的皮，而是和状态机、性能同构生长的骨架；原型卡顿与混乱的根源是把视觉只当「好看」来处理。
- ▍作者把复杂原型的视觉拆成语义、空间、时间、逻辑、动态、隐喻六个维度，每个维度都有可执行的工程化协议。
- 01颜色按语义归类：同语义元素强制同色系，紫色从个人幸运色升格为「生存/增益」信号，建立玩家的直觉判断。
- 02用页面背景 #333333、画布背景 #666666、战场背景 #000000 三层明度差强制拉开纵深，配合双中继器行对齐实现图层物理遮挡。
- 03外场脉冲（环境光）的持续时长精确锚定逻辑事件时长：时钟冻结持续 6.666 秒，蓝色冷光也亮 6.666 秒，做到「光在效果在、光灭效果结束」。
- 04终局视觉分两套：基地被击中则坦克石化配暗红长闪，全胜则保持活动配金绿循环脉冲，避免画面「木」掉。
- 05Axure 颜色不能函数绑定，作者用纯红、纯绿两条线段的不透明度在黑色背景下叠加，模拟连续色变，把 Timer 心跳的延迟偏差可视化成一条光带。
- 06全原型完全由 Axure 原生控件或 Emoji 组合而成，零图片，体积控制在不到 1MB，同时规避版权风险。
- 07架构变量用隐喻命名：「池」指单状态动态面板，「心房」是性能探针的家，「军师」是负责复杂逻辑推演的不可见元件，「结界」是子弹周围 24px 的无效计算隔离带。
反方 / 局限
- — 「性能探针」只能让测试者截图后肉眼判断延迟区间，不是精确量化；作者自己也承认这是 Axure 颜色无法函数绑定下的偏门替代方案。
- — 六维框架和隐喻命名高度依赖作者个人在 30 天极限开发中积累的 Axure 手感，缺乏可复用的量化验证，换一个人或换一个工具未必能同等落地。
8 分钟 · 4 卡片 · 4 资料
读原文 →