E1.15.3full-width mobile primary设计研究

移动端主操作常需要撑满宽度以降低触达难度

别名: 全宽主按钮 · 移动端主操作 · thumb-friendly primary

概念解释

手机上的主操作经常做成贴左右边的全宽键。这不是为了好看,是为了降低触达难度:单手握持时拇指在底部画弧,一块横贯底部的目标比右下角一枚小胶囊更容易命中。移动端主操作撑满宽度,是在用屏幕的水平尺寸当菲茨宽度,把终点散布吃进按钮里。

机制

单手持握时,拇指舒适区偏底部内侧,边角和顶部都贵。底部一条全宽目标把舒适弧上的许多落点都算命中,运动时间下降,滑到屏幕外或点到底栏手势的概率也下降。小胶囊主按钮若放在视觉中心或右下,落点要更精确,边缘误触系统手势的风险更高。全宽还有副作用:它几乎必然成为视觉主按钮,所以不能把取消也做成全宽第二条,否则两条同样好点的键会打平推荐。桌面指针没有这条弧,全宽主按钮会显得像广告,触达收益接近零。

怎么研究

单手握持任务:全宽底栏主按钮 vs 右下角胶囊,完成「提交」。记录运动时间、滑出、误触系统手势、左右手差异。

自变量:宽度策略、按钮垂直位置、单手还是双手、屏幕尺寸。 因变量:命中时间、错误、拇指是否离开舒适弧。

桌面或双手持握会抹掉效应。要指定「只用一只手、另一只手不许帮忙」。

边界

横屏、折叠大屏上全宽可能过长,落点分布变成分区,应改成底部居中的有上限宽度。平板常用双手,全宽收益下降。主操作若在键盘上方被顶起,全宽仍有用,但要避开键盘附件条。无障碍开关扫描不靠拇指弧,全宽不是为他们服务的,仍要保留键盘可达。

怎么落地

  • 移动端的页面级提交、付款、发送用底部全宽或接近全宽,取消保持跟随文案或文字按钮。
  • 不要把两条全宽键叠在一起争夺同一条拇指弧。
  • 大屏设最大宽度并居中,避免一条 20 厘米长的键。
  • 验证:单手完成提交 20 次。胶囊版若明显更多滑点或需要换手,全宽就在承担触达,而不是装饰。

延伸

  • 同组E1.15.1 按钮宽度可跟随文案长度或撑满容器,两者语义不同 · E1.15.2 定宽按钮里过长的文案会被截断或换行 · E1.15.4 同一组内的按钮宽度需要保持视觉对齐
  • 相邻C2.11 拇指可达区 · B1.01 菲茨定律 · K1 移动设备
  • 站内检索full-width button · thumb zone · mobile primary

同组卡片

快捷操作

分享

分享当前页面

ios_share

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