E1.15.4aligned widths in a button group设计研究

同一组内的按钮宽度需要保持视觉对齐

别名: 按钮齐宽 · 组内对齐 · equalized buttons

概念解释

成组出现的按钮——对话框里的一对、分段动作、并排的两个次要项——宽度需要对齐:同样高、同样宽,或按同一网格起止。一枚跟着「OK」缩成小方块,一枚跟着「稍后再说」拉得很长,组会散掉,短的那枚还更难点。组内对齐的是视觉外盒,不是把字硬拉成一样长。

机制

齐宽强化「这些是同一排答案」。外盒参差时,短键像附属、长键像主,即使样式层级规定相反。齐宽还有运动上的好处:两个同等大小的目标,终点程序可以对称,尤其在垂直堆叠时拇指不用换一套尺度。不对齐往往来自跟随文案的默认实现:每枚 hug 自己的字符串。英文 OK / Cancel 碰巧差不多宽,中文「确定 / 取消」也还行,一旦变成「删除这项草稿 / 保留」就裂开。对齐可以用「都等于最宽那枚」或「平分容器」,两种都会改变单枚的宽度语义,但这正是组所要的:组的身份压过单枚的 hug。

怎么研究

成对按钮用 hug 各自 vs 齐为最宽 vs 平分容器。测哪一枚被当成主、短键的漏点、组是否被看成一对。

自变量:对齐策略、两枚文案长度差、横排还是竖排。 因变量:角色误读、短键漏点、主观成组。

长度差才是有效刺激。两枚都叫短词,对齐看不出价值。

边界

主次层级明确时,故意让主操作更宽是在用宽度说话,不应为了「齐」把主操作缩到和取消一样——那是另一组知识。工具栏里一串不同动词很难齐宽,也不应齐,那些不是成对组。网格卡片里每张卡片一个按钮,应对齐的是卡片网格,不是跨卡片把文案撑到一样长。

怎么落地

  • 对话框成对按钮取最宽文案的外盒,或平分页脚,不要各自 hug。
  • 垂直堆叠的移动端成对按钮应同宽,避免上面一条全宽、下面一条短右对齐。
  • 对齐后仍要用样式区分主次,不要只靠宽度。
  • 验证:把成对按钮排成线框。两条外盒左右缘应对齐。短文案那枚明显更窄且更难点,组内宽度就没有对齐。

延伸

  • 同组E1.15.1 按钮宽度可跟随文案长度或撑满容器,两者语义不同 · E1.15.2 定宽按钮里过长的文案会被截断或换行 · E1.15.3 移动端主操作常需要撑满宽度以降低触达难度
  • 相邻E1.14 按钮组与分裂按钮 · E1.10 按钮排列顺序 · F2 布局系统
  • 站内检索equal width buttons · dialog footer · visual alignment

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.15.4