为什么完整可玩后还要反复重做 UI

上一篇：第一个完整可玩版本

第一个完整可玩版本跑通之后，《Kibble Street TD》已经能够启动、选择阵营、进入 Home、升级、战斗、结算并保存进度。按照功能清单来看，主要页面都已经存在，按钮也能够完成各自的工作。

但当这些页面开始被连续使用，新的问题才真正暴露出来：玩家第一眼应该看哪里？下一步操作是否足够明确？资源、入口和角色都在争夺注意力时，谁应该退到次要位置？同一个界面换到更窄或更宽的屏幕上，还能不能保持原来的阅读顺序？

这也是为什么“完整可玩”之后，UI 反而进入了更密集的返工阶段。用户界面不只是覆盖在玩法上方的一层装饰，它负责把系统状态、操作机会和产品气质组织成玩家能够迅速理解的秩序。

功能完整之后，界面问题才变得可见

早期界面的首要目标是验证流程。资源数量能够显示，GO 可以进入战斗，底部入口能够切换页面，设置按钮能够打开菜单——只要这些动作连得起来，这一阶段就已经完成了任务。

可是一旦玩家不再逐项检查功能，而是按照自己的节奏游玩，判断标准就变了。功能是否存在不再是重点，重点变成玩家能否在几秒内找到当前最重要的动作。

《Kibble Street TD》的阶段性 Home 已经包含资源栏、主按钮、阵营角色和五个底部入口。后来重做时并没有把这些功能全部推翻，而是重新分配它们的视觉重量：资源信息集中在顶部，GO 成为画面中心最明确的行动入口，角色和建筑负责传达阵营氛围，底部导航则收束为稳定的系统区。

这类调整看起来像是在移动按钮、改变尺寸或替换边框，实际解决的是信息优先级。如果所有元素都同样醒目，玩家得到的不是“内容丰富”，而是一张没有重点的功能清单。

主界面重做，先改的不是颜色

项目的主界面经历过至少两轮整体重制，之后又持续调整顶部资源条、设置入口、GO、角色落位和底部导航。真正让这些改动收敛下来的，不是再找一套更华丽的配色，而是先固定布局关系。

线框阶段先回答几个不会因为美术风格改变而消失的问题：顶部信息占多大范围，核心按钮位于哪里，角色展示不能侵入哪些区域，底部导航需要多高，背景在哪些位置必须给前景内容让路。布局确认之后，猫与狗两套界面再共享同一组几何关系，用不同色彩和阵营元素形成区别。

这一做法还修正了早期局部设计各自成立、放回整张界面却互不协调的问题。例如设置入口曾经更像工具按钮，顶部资源条的结构也没有完全统一。后续版本把它们拉回同一个材质和轮廓体系，并让猫狗两套资源共用一致的结构。局部更精致并不等于整体更完整，界面最终必须作为一个系统被判断。

统一外壳，不等于所有页面长得一样

Home、Upgrade 和 Shop 都沿用顶部资源信息、阵营配色和底部导航，但三个页面承担的任务不同。

Home 要让玩家迅速确认进度并进入下一场战斗；Upgrade 要支持比较当前效果、下一等级和成本；Shop 则要在更高的信息密度下区分商品内容、价格、限制和购买状态。它们需要共同的视觉语言，却不能套用同一份内容模板。

这也是升级页和商店页反复调整的原因。增加一个数值、状态或商品，看似只是在卡片里多放一行文字，实际可能破坏原来的阅读顺序。界面重做不是把所有页面变得相似，而是在相同规则下，让每个页面最重要的任务最先被看见。

战斗 HUD 的约束比普通页面更严格

战斗界面的问题更直接。上方要显示阵营、基地状态、关卡、速度和暂停入口，下方要放置单位、战斗道具、冷却和能量，中间还必须给角色移动、攻击反馈和战线变化留下足够空间。

如果 HUD 只追求容纳更多信息，结果很容易是上下两端不断向中间扩张，真正的战斗反而被挤成一条狭窄窗口。相反，如果为了画面干净而隐藏关键状态，玩家又无法判断为什么不能召唤、何时可以再次使用道具，或当前战线是否正在失控。

因此这里的返工通常不是“换一个更好看的面板”，而是在可读性、触控范围和战场可见面积之间重新分配空间。战斗规则增加以后，HUD 也必须跟着重新验收，不能假定旧布局会自动容纳新内容。

一张设计稿，不能代表所有屏幕

当前界面使用 1080×1920 作为统一设计基准。前景内容保持完整比例并居中，背景单独向外铺满；顶部交互区域还要避开设备安全区。这样做的目的不是让所有屏幕显示完全相同的像素，而是让阅读顺序、触控位置和主要构图保持一致。

窄屏上最容易出现上下空间不足，宽屏上则会暴露背景不足、内容过度分散或按钮偏离视觉中心的问题。仅在设计基准尺寸看起来正确，不代表它已经适合真实设备。每次调整顶部栏、底部导航或全屏背景后，都需要重新检查至少一组窄屏、基准画幅和宽屏结果。

这一步也改变了“界面完成”的定义：组件尺寸正确只是基础，玩家能否在不同屏幕上看到同样明确的主次关系，才是最终目标。

AI 让返工更便宜，但不能替代判断

在这一轮工作里，AI 适合承担的是高频、可核对的部分：整理现有页面和资源，生成带尺寸的线框，按照确认后的坐标组合预览，检查图片尺寸与透明区域，核对猫狗两套组件的结构，并在多种画幅下重复运行和截图。

人负责的仍然是最难量化的部分：决定当前页面唯一的主任务，判断哪些元素应该被弱化，选择哪一版视觉方向，确认返工成本是否值得，并对最终体验负责。

这套分工并不会让第一版自动正确。它的价值在于缩短“发现问题—形成约束—做出版本—运行检查—再次判断”的周期。AI 可以快速产生和复查多个明确方案，但如果没有人的优先级和验收标准，快速迭代只会更快地产生更多不一致的候选。

这个环节由谁负责

人负责定义页面目标、信息优先级、审美方向和取舍边界，并确认线框与运行效果是否达到产品要求。AI 负责梳理页面结构、把判断转成尺寸和约束、制作可比较的预览、执行确定性处理，以及重复完成多尺寸和资源一致性检查。

双方都不能跳过运行验证。线框能够证明布局意图，静态预览能够检查组合关系，只有实际运行画面才能暴露字体、动画、触控、安全区和不同画幅中的真实问题。

如果你想开始

不要从“做一套更好看的 UI”开始。先选出最常使用的一张页面，写下玩家进入后最重要的一个动作，再把页面里的信息按主、次、辅助三级排序。用灰色方块完成线框，在两种差异明显的屏幕比例上检查，确认阅读顺序成立之后，再投入时间制作组件和视觉细节。

界面返工并不是完整可玩阶段的失败，而是项目从“系统能够运行”走向“玩家能够理解”的必经过程。