Toy有一个理念——让用户能在任意端。
PC、平板、小屏手机、大屏手机、折叠屏，等等等。
而且网页代码也有能力识别设备、环境，进而编码做到设备自适应。
所以很早我就发了这个Toy，为其他人抛砖引玉：使用代码实现多设备适配的demo。
但是在我后来持续更新 无尽深渊，被多个用户反馈无数问题，我才发现这个问题究极难解。
因为用户的设备实在太多了，尺寸千奇百怪。
整理了过程中发生的事情和一些经验如下：
屏幕宽 768，结束回合按钮的左边，却被挤到了 784 的位置。
也就是说，按钮还在。只是整颗跑到屏幕外面去了。
这是《无尽深渊》8 月 9 日的一次适配修复。手牌到了六到八张，在某些临界宽度和短横屏里，就会把右边的操作区顶出去。
一款卡牌游戏，玩家手里有牌，面前有敌人，却可能连这一回合都结束不了。
我想分享的多端适配经历，要从这些细碎的事讲起。
我是产品经理，不懂编程，平时和 Codex 一起做这款肉鸽卡牌游戏。后来，战斗界面有了 V1、V2、V3，还有很多没采用的稿子。但在给它们起这些名字之前，我已经反复在处理另一种任务。
按钮跑了。血条没了。牌看不清。横过来又挤了。
每个单独看，都很像再调一点就能解决的小问题。
8 月 9 日那次，处理方法也很直接。把底栏分成能量、手牌、结束回合三块，给结束回合留一列不能被挤走的位置，中间的手牌负责收缩和滚动。短横屏再把敌我改成左右排，追回高度。
按钮回来了。
但能结束回合，还只是能玩下去的第一步。屏幕很窄的时候，手里的牌又该怎么读？
8 月 11 日，我们试了文字摘要卡。极窄屏和很矮的触屏横屏里，先显示费用、名称和规则摘要，点开以后再看完整插画和确认出牌。普通手机仍保留卡面。
这次取舍有很明确的理由，先让玩家读得清规则。
结果同一天又补了一次边界。最初的规则覆盖到 374 宽，375 宽还没被算进去。
只是一个像素，也得回来再改。
回头看，摘要卡这一步不能简单算成走错了。它救的是当时小屏上的可读性。只是后来还要继续追问，哪些屏幕真的装不下，哪些其实有空间，不该跟着一起失去卡面。
问题也没有停在手机上。
8 月 17 日的一次修复，处理的是 PC 上密集状态挤掉血条。玩家状态还被关在一条窄窄的区域里，多了就往下换行；内容越长，整个玩家区域越高，最后主角和断臂回响底部的生命、护盾被战场边界裁掉。
桌面明明很宽，关键信息却在往下挤。
那轮让状态改走有边界的单行轨道，利用横向宽度；敌我也分别留出范围，避免谁的内容一长，就把另一边推到外面。随后把三角色、多敌、召唤物、药水、主动证物一起组合起来测。
检查密集状态时，还要看状态入口能不能点开。检查三只敌人时，还抓出了触摸区域互相重叠的问题。
所谓「UI 调优」，实际经常就是这样。调整了一个地方，再沿着它影响到的地方逐个看过去。
到 8 月 20 日，已经开始把这些零散经验整理成共同规则了。顶栏、日志、药水、证物不能各占各的位置，要共享空间；生命、意图这些影响当前决策的信息必须保留，长说明则需要能打开的入口。
但规则写出来，还有细节要追。
比如，横屏和竖屏分别打开，看着都可以。先在竖屏展开顶栏，再横过来，刚才展开的高度却被带进了矮横屏。
于是又补上旋转时收起的处理，测试也从「分别看两张图」变成「先展开，再旋转」。
还有出牌。立绘缩小后，如果只有立绘本身算目标，手指拖一张牌过去就更难碰准。后来把意图、立绘、生命条、状态所在的整个敌人区域都纳入命中面。
拖到这个敌人的血条上，也应该认得出我想打谁。
那一天从上午到晚上还有几轮修改。回归组合从此前的 50 组扩到 222 组，覆盖更多比例、阵容和临界尺寸。
结果，21 日再做审阅，仍然找到了三类结构根因和八个单点问题。
不是前面白修了。前面建立的信息分级、详情入口、触摸热区，都是有用的。但其他规则还在互相打架。
最典型的一个，同样是 1024 的页面高度，宽度 639 时有卡牌插画，变成 640，反而变成文字摘要。
地方更宽，待遇更差。
项目里两处判断移动端的规则，边界分别是 639 和 767。同一个宽度 700 的页面，选角和战斗对「这是什么设备」的判断都不一致。决定画完整卡还是摘要卡的逻辑，和决定它如何排版的逻辑，也没有同步。
同一轮审阅里，还有触屏 iPad 显示键盘快捷键提示，小屏五敌的信息互相遮挡，矮桌面里的药水和证物入口被裁。
把这些问题放在一起，才看见它们并不是一句「手机屏幕太小」就能解释的。
21 日恢复过高竖屏卡面，22 日还在继续修触屏手牌与横向滚动的关系。卡面回来以后，又追单敌、双敌首屏的血条和名字，追进入页面后才到达的尺寸变化，让取景重新跟上。
从「按钮别跑出去」，到「血条不能被状态挤没」，再到「卡面回来之后，战场也得完整」。
这中间没有一个很干净的时刻，让我宣布前一类问题彻底毕业，再开始下一类。
现在回头看，后来的集中重做之所以重要，就是因为目标已经不满足于补上眼前这个缺口了。我想把前面一点点保住的东西，放进一套更完整的战斗构图里。
角色要有存在感，牌要像牌。敌人多起来，信息还得归得清；换成横屏，也不能把同一堆东西重新挤一遍。
带着这些已经踩过的坑，故事才走到 V1、V2、V3。
先说明一下，下面的 V1、V2、V3 是那轮多单位审阅原型的编号，配图是当时保留下来的页面截图，不代表三个依次上线的正式版本。
这样看它们，也更有意思。因为能看到那些还没来得及被藏好的中间状态。
V1 已经有了完整战场的样子。角色、背景、手牌、操作区，一样不少。
这版很容易让人觉得，方向对了，接下来打磨一下就行。
它也确实有合理的出发点。给名字一个框，给意图一个框，每项信息都有归属，似乎会更清楚。
可敌人一多，每个人都带着自己的一套名牌、边框、数值栏。单看一个单位挺完整，五个并排，就要同时读五套小界面。
角色站在里面，周围却有很多东西争着让我看。
于是，后面的尝试开始做减法。长意图句收成图标和数字，姓名不再占一整块横向名牌，状态固定到血条下面。敌人下方那种单独的「查看战术」按钮也被放弃，立绘本身就能作为查看入口。
V2 让我更清楚地看到，空间可以从哪里省。
名字贴着角色，意图贴着头顶，生命和状态放在脚下。玩家扫一眼，就能把这些信息归到同一个敌人身上。
有意思的是，「贴近」本身也没一次做对。
同一轮商业美术修订里，第一遍把长意图改短了，但上排两枚意图仍离角色太远。后来又专门改了一次，只把这两枚往下挪，其他地方保持。
只改两枚小图标的位置，也算一轮迭代。
它听起来不像什么大升级，但如果玩家还得来回确认「这个 8 到底是谁的」，图标再精致，阅读任务也没完成。
当然，字少了，还有另一个危险。别把需要的信息一起省没了。
所以完整说明要有去处。平时点敌人，能看当前状态和下一行动；选好一张需要指定目标的牌以后，再点敌人，就应该选中目标。
同一块屏幕，同时承担阅读和操作。只研究截图里的排版，很容易漏掉后半件事。
到了 V3，问题开始从「怎么排」进一步变成「怎么让它真正像这款游戏」。
这时候，有几份废稿特别值得留下来。
一份是想把五张牌都塞进首屏的方案。
五张整整齐齐，看着很舒服。但为此缩小卡面，或者裁掉卡框，玩家实际看牌时就得付代价。我们已经给卡牌做了插画、边框、费用和规则层级，到了手机上，又亲手把它们挤坏。
后来接受了一个没那么整齐的结果。那版 390×640 审阅页，首屏大约四张半，剩下的横向滑动。
露出的半张牌还顺便告诉玩家，右边有内容。
再遇到八张、十张手牌，又继续试叠牌、滚动进度和边缘提示。这些尝试也有成本。叠牌会挡住一部分正文，就得让选中卡和详情承担完整阅读，不能当作免费多出了空间。
另一份废稿，是整条画好的漂亮底栏。
能量球、牌堆、结束回合，放在一起很统一。可数字和文字也跟着烘焙进图片了。
图上的「3/3」当然很稳定。游戏里的能量可不能一直稳定在「3/3」。
后来把它拆成独立的透明美术组件。外壳负责质感，数字和文字由界面实时显示。结束回合最突出，能量其次，牌堆再退一层。
这一改，也给不同屏幕留下了重新排列的余地。
还有一处，比美术更容易被忽略。
前面的容量稿，把主角旁边的几个召唤物都画成了有血条的小角色。作为挤九个单位进屏幕的实验，它很直观。但回到《无尽深渊》的真实机制，就不对了。
司马玥的信使不是几只各自挨打的小兵，它们没有生命条；老丁的断臂回响，才有自己的生命和格挡。
后续要按这个区别拆开。信使进入独立三槽面板，展示名字、主将印和回信；断臂保留自己的生命信息。
这件事给我的提醒很具体。做容量测试时，不能只拿几个同款方块填满屏幕。还得把真实角色带进来，看这套界面有没有把玩法表达错。
而 V3 的手机画面看起来成立以后，横版也没有自动成立。
横版有更多横向空间，但上下叠放的每一行仍然要消耗高度。我们试了我方左下、敌方右上的对角阵，把手牌放进底部横向操作区，用横向空间换回战场高度。
这样才能同时留下角色的存在感和完整卡面。
背景也得提前考虑。宽幅场景到了竖屏，两侧会被裁掉很多。后来给原画定了要求，中央大约三成宽的区域，要能独立形成竖屏构图，两翼负责展开环境。
如果重要景物全长在两边，最后再调界面，很难把它们救回来。
写到这里，似乎终于可以收工了。
然后，把护盾调到六位数，再给单位挂上一串状态。
常规状态下舒服的血条，碰上超长护盾就要重新交代。蓝色护盾段如果无限延伸，会把生命信息挤得没地方待；状态每多一个就往旁边排，也迟早要撞上隔壁。
最后分别处理。护盾图形到量程就封顶，用斜纹提示超量，数字仍保留精确值。状态按当前宽度保留关键图标，多出的收成「+N」，点开能看全。
这些角落里的规则，同样属于适配。
甚至静态画面都没问题，也还没有结束。后来的沉浸战斗闪缩修复里，查到一层布局保护逻辑还在寻找旧版按钮标记。新入口已经换了，它却误以为入口不可达，还连带压缩了手牌和立绘。
保护界面的逻辑，自己成了需要排查的对象。
所以验收还得看进入战斗、切换横竖屏、展开面板、召唤新单位的过程。尤其召唤时，已有单位不能突然换位置，让玩家刚瞄准的地方变成另一个目标。
回头看前面的细修和后来的改稿，有些原则是在一次次救急中形成的，有些是重做时才想清楚的。我现在会这样记下来。
1. 按实际可用宽高分配空间。 手机型号只是线索，真正需要算的是扣掉宿主顶栏、安全区、手牌和操作区以后，还剩多少战场。宽屏也可能很矮，高分辨率也不等于页面空间大。先把各区域的预算划清，再调里面的元素。
2. 跨端保持阅读规则，允许构图重排。 血条、意图、状态的含义和归属保持一致；手机可以上下排，横版可以对角排。背景允许裁切，关键信息和操作入口要留在安全范围里。
3. 提前决定谁必须常显，谁可以点开看。 生命、格挡、主意图、关键状态、可用手牌和结束回合，决定这一回合怎么打，不能为了保住大立绘而消失。完整规则可以进详情，但必须有明确入口。入口图案可以小，触摸热区要足够大，我们以至少 44×44 为验收要求。
4. 给不同的超量内容安排不同出口。 手牌多了可以横滑；状态多了可以摘要；护盾超量可以让图形封顶、数字保持精确。空间足够的高竖屏，就恢复完整卡面。每一种收纳都要让玩家知道还有内容，以及怎么取出来。
5. 美术层和会变化的信息分开。 按钮外壳、边框、纹理可以做成图片，数字、名称、规则和点击区域独立实现。这样更换设备、文字变长、数量增长时，才有调整空间。漂亮的设计稿也必须接上真实玩法，不能给没有生命值的单位画血条。
6. 用真实战斗状态检验布局。 除了几种屏幕比例，还要覆盖少敌、多敌、Boss 带小怪、不同角色、十张手牌、长数字和密集状态。再连着操作一次旋转、展开、出牌、召唤，检查过程中能不能看清、点准，已有位置是否稳定。尺寸断点两侧也要测，639 和 640 的教训我已经吃过了。
如果让我重新开始做一次，我会更早把小屏、多单位和十张手牌摆在面前。先让这一局最拥挤的时候也能打，再把画面一点点做漂亮。
这不是一套做完就永远不用返工的办法。新角色、新机制进来，界面还是可能遇到下一道题。
但现在再打开那个塞满 V1、V2、V3 的文件夹，我至少能说清楚，那些废稿各自留下了什么。
有一份让我接受首屏只有四张半牌。有一份让我把漂亮底栏拆开。有一份提醒我，召唤物的血条也不能想当然。
最早，只是要把那个跑到屏幕外的结束回合按钮拉回来。后来，才一点点弄清楚，要让玩家看清局面、读懂手牌、点准目标，再顺利结束这一回合，需要多少地方一起配合。
这些修补和废稿留到最后，才慢慢变成玩家手机里，那一局能好好打完的牌。
