E1.13.4consistent icon-text button metrics设计
图文按钮的间距与对齐需要统一的规范
别名: 图文间距 · 图标文字对齐 · optical alignment
概念解释
图标和文字之间的空隙、二者相对中线、图标在左还是在右，必须在产品里走同一套量值。这一套量值就是间距与对齐的统一做法。一枚按钮图标贴着字、下一枚空出半个字宽、第三枚图标改到右边，扫描会把它们读成不同控件族，辅助识别的加速也失效。统一的是几何关系，不是把每枚按钮做成一样宽。
机制
人用重复的几何当「这些是同一类按钮」的证据。空隙忽大忽小，会被看成两组；图标相对字的视觉中心若按包围盒对齐而不是按光学重心，有的图标看起来偏上（箭头）、有的偏下（放大镜的柄），整行像在跳舞。左右方向不统一时，阅读起点每次都要重找，图文作为整体的外形不稳定，搜索记忆无法形成。光学对齐往往要让图标比文字的数学中线略偏，以抵消图形空白；各业务自己调一次，产品级的重复性就被打散。
边界
RTL 会把「图标在文字起始侧」镜像，这仍是同一规则，不是第二套。仅图标按钮没有字可对齐，不适用这套空隙，但应与图文按钮的外盒高度一致，以免混排时一行高忽变。图标尺寸变化（24 与 16 混用）无法用同一空隙挽救，应先统一字形尺寸。个别营销大按钮可以更大，但内部图文关系应仍走同一比例，而不是另发明一套贴齐方式。
怎么落地
- 规定图标与文字的固定空隙、共同的光学垂直中线、以及「图标在文字起始侧」这一方向，全产品的图文按钮共用。
- 不要按图标包围盒垂直居中了事，要用目视校正后的偏移，并写进组件而不是靠业务微调。
- 混排仅图标与图文时，外盒高度一致，只允许内部缺字，不允许缺完字之后变矮。
- 验证：把一排图文按钮做成线框，看图标左缘是否在同一竖线、字的基线是否共线、空隙是否等宽。出现两种空隙或两种左右方向，几何关系就不统一。