#83 探索 Switch 游戏字体大小
“哪里小了？这么多年都是这个字号，不要睁着眼睛乱说，做游戏很难的。”
在交互设计不为人知的角落，Nintendo Switch 掌机玩家一直饱受「有障碍设计」的折磨，其中最为之诟病的是字体大小问题。你可以看到游戏媒体都曾报道过相关新闻，Reddit 上还有一条统计字体过小的游戏清单。直到现在，玩家除了祈祷移植厂商能大发慈悲推出改善补丁外，也只能使用系统自带的放大镜（zoom）功能来暂时自救，游戏体验大打折扣，终究不是解决方案。在这块 6.2 英寸的屏幕上发生了什么？
这次以初版 Switch 的掌机模式为例，探索一下其屏幕规格所对应的界面字号规则。
字体哪里小了
我们游玩 Switch 时，和使用手机时眼睛与屏幕的距离相似，所以这里先假设复用 UI 设计经验作为评判标准。一般来说（参照 Apple 的 Human Interface Guidelines），默认字号为 16pt，小一点可以是 14pt，最小不超过10pt。由于 Switch 的屏幕素质堪忧，字体笔画较细的时候都渲染到子像素上会很模糊，所以一般最小 12pt 看起来较为友好一些。
参数上 Switch 按分辨率 720p、6.2 寸屏幕计算 PPI 为 236.87。为了直观地方便对比，使 1pt = 1px，这里先都用 1 倍的逻辑分辨率计算 PPI。
- Switch: 640*360 - PPI: 118.44
- iOS (iPhone 14/15 Pro): 393*852 - PPI: 153.81
保持物理尺寸一致时，Switch 字号是普通界面设计字号的 0.77 倍 (118.44/153.81)，也就是说，12px 在 Switch 上约为 9px，这便是理论上对于 Switch 而言的最小合适字号。
当然并不是界面字号都比 9 大就可以，涉及到字体在不同功能下的不同排印逻辑，实际上标准要复杂一些。
验证
接下来找几个游戏佐证一下，都使用 360p 下的尺寸测量。
首先是极为糟糕的 Need for Speed™ Hot Pursuit Remastered，下面是中文截图（来源网图）。
「车手详细资料」一行小字，有 7px，相当于界面设计中的 9px，相当小的数值。再加上繁体字笔画复杂，字重偏细（已经是 1px 粗细），所以理所当然看不清。另外看到其他玩家的菜单截图，目测字号是已经小于7px，以至于屏幕已经无法渲染出完整的字形，笔画大量丢失，非常离谱。
妇孺皆知的《塞尔达 王国之泪》也有轻微的问题，菜单字体大小是 9px (界面 11.7px)，一眼 light 字重，处于可识别度边缘，严格来说也对无障碍不友好。
王国之泪的中文很喜欢使用细斜体，上图设置、按键说明和加载界面中的字体，都和主界面一样，不是非常易读。在 Switch Lite 上可能效果更差。
到装备界面字号整体都大了一些，右下角装备描述字号为10px（界面 13px），勉强能看，但是因为字重偏细依然处理得不是很好，比如白色鞋上的前景文字就需要定睛细看。
另一方面任天堂第一方的本地化也喜欢使用字重较粗的综艺体（确切说是华康新综艺体，任天堂买了大量华康字体作为本地化使用），比如下面《密特罗德 究极 复刻版》的设置菜单截图：
图中右侧灰字字号为 11px（界面 14px），但综艺体字面大，字腔小，字体再不大的话一样难以阅读，「量」的底下横划都消失了。红色系背景加上红色字体，OMG。
像是卡比、马力欧兄弟这种界面文字信息少的游戏，字号应用比较正常。像马力欧惊奇的联机昵称字号是 11px（界面 14px），并且还会赋予外描边样式强化对比度。右一图的火纹 Engage 角色信息表格字体为 10px（界面 13px） ，也算及格。
在火纹 Engage 的战斗界面中，最小字号为底部「物攻」一类 8px（界面 10px），也是属于较小的字体，但是在布局关系上整体找到了一种平衡。
而上一代的火纹风花雪月就没有那么「好运」了，如下图我在 Resetera 论坛找到的一张截图：
图中英文为 7px（界面 9px）字体，明明框内还有很充足的显示区域，依然使用了小号字体，可能从一开始就没有注意到 i18n 背后的无障碍设计。
搭建 Switch设计界面
涉及到现实物料尺寸的，在 Adobe Illustrator 或 Photoshop 改变单位便可搭建出框架，能所见即所得地看到界面上各元素的实际大小。但如果在 Figma 中，我们需要计算屏幕 PPI 比例做一下缩放。
上面提到，720p 下的 Switch PPI 为 236.87。以我使用的 16 寸 MacBook Pro 为例，不算「刘海」的逻辑分辨率为 1728*1079，对角尺寸为 16 寸，PPI 为 127.33。所以当我们在 Figma 建立一个 1280*720 的 frame 后，将屏幕缩放调整至 127.33/236.87 ≈ 54% 即是 Switch 在屏幕上呈现的实际大小。
如果你像我一样调整了 Figma 的界面缩放（interface scale），比如我调整到 110% 缩放，那么还需要再除以该比例，也就是 127.33/236.87/1.1 ≈ 49% 的画布缩放。
Switch 插入底座后的主机模式大多数情况为 1080p 渲染，这样仿佛又看到了界面设计中的 @2x、@3x 等缩放因子。如果想在 @1x 下做设计的话，缩放再乘 2 即可。640*360，这和以前 16:9 的手机界面设计倒是差不多。
值得注意的是，像异度神剑 2 这种吃性能的游戏，主机模式下是 720p 的分辨率，掌机模式是 360p 到500p 左右的动态分辨率。但字体部分似乎是独立渲染，无论场景多么模糊依然保持字体的清晰度。所以异度神剑 2 无论是字体布局排布还是可辨识度都做得很不错。顺便一提，到异度神剑 3 时游戏似乎自带了上采样至 720p 的技术，但界面字体方面不如上一代。
总结
之前我一直连着电视在玩 Nintendo Switch 的主机模式，所以这个方面没太在意。直到前阵子我去帮忙改善一款 Switch 游戏的界面才发现这个现象是多么普遍和无奈，即便是在 Switch 服役末期！听说任天堂开发文档中默认不提供 Pro 手柄的适配，那么像是界面这些细枝末节的东西可能更不会提到。我使用了上述方法在 Figma 中完成了游戏界面体验的优化，效果不错，特来分享。
对于游戏而言，即便是无 HUD 场景也需要玩家读取界面上的信息，所以在诸多信息层级之下，一些字号只能作为妥协后的产物。但妥协不代表无底限的妥协，看看 3DS 时代的怪物猎人XX 截图，400*240的分辨率下实打实的文字信息优先。
传闻中的 Switch 2 代机型大概率在今年公布，待上手体验时我也会着重注意字号细节是否有所提升🧐。真诚希望所有厂商有余力的情况下，多注重掌机模式的体验吧。