跳到主要内容

间距、密度与视觉节奏

间距决定对象之间的亲疏关系。玩家会把距离近的元素理解为一组,因此间距既是视觉问题,也是信息结构。

先定义层级,再选择数字​

星际翻牌采用少量间距档位作为起点:8 用于图标与标签,12 用于卡牌间隔,16 用于局部面板,24 用于屏幕外边距,32 用于较大的区块分隔。数值可以因视觉需要调整,但同类关系应有可解释的一致性。

“全部使用 8 的倍数”不能代替判断。光学居中、字形边缘和插画留白可能需要少量修正;先把结构间距统一,再处理有证据的例外。

区分三种留白​

  1. 外边距:界面内容与屏幕或安全区之间的距离。
  2. 内边距:按钮、卡片和面板边缘到内容的距离。
  3. 元素间距:同组元素或相邻组之间的距离。

如果状态文字看起来离棋盘太远,先判断问题是状态栏自身高度、区块 gap,还是文本框内空白。不要给文字随意加负坐标来掩盖父层问题。

密度必须服务于任务​

游戏棋盘需要足够大的可识别图案和触摸范围;大厅可以容纳更明显的引导;设置页更强调清楚的选项分组。同一套设计值不要求所有屏幕有同样密度。

在窄屏时应先确定哪些内容可以压缩。比如辅助说明与装饰可以收敛,卡牌间隔和触摸识别不能无限缩小。把最低可接受条件写进交付规格。

请读取 Game 中 Header、Status、Board、Help 的 padding 与 gap。
给出“当前值 → 建议值 → 关系理由”表格。
优先统一同类间距;区分真实布局值和文字本身的可见边缘。
修改后用截图检查节奏,并验证 360 宽度没有新增溢出。

一个常见错误​

把所有元素上下居中后,空白看起来很平均,但相关元素被分散。标题、说明和主按钮应形成清楚的一组;平均分配剩余高度未必符合阅读顺序。

练习与检查​

先隐藏插画,只保留容器边界和文字。用三种线框颜色标出外边距、内边距和 gap。若无法说明一个空白来自哪里,继续检查层级和文本框尺寸。