美叶学习
  • 最新
  • 主题

      文章主题

    • 规范指南
    • 原理法则
    • 研究方法
    • 控件
    • AIGC
    • 色彩
    • 排版
    • 无障碍
    • 亮点
    • 槽点
    • 对与错
  • 小册
  • 关于

      关于

    • 关于我们
    • 在线支持
    • 投稿
    • 成为作者
    • 寻求合作
    • 使用帮助
目录
表单设计怎么做
名志
  • 第1章:1. 前言

    第1节

    本小册能帮你解决什么

  • 第2章:表单思维框架

    第1节

    表单为什么左右转化与留存

    第2节

    好表单的四个底层原则

    第3节

    把问题问对的内容组织方法

  • 第3章:表单五要素实战

    第1节

    标签排版与对齐策略

    第2节

    输入框选型与使用禁区

    第3节

    动作按钮与任务完成路径

    第4节

    写得少又有用的帮助文字

  • 第4章:填写交互全流程

    第1节

    默认值替用户多走半步

    第2节

    即时验证减少提交后的崩溃

    第3节

    新增输入只在需要时出现

    第4节

    选择输入让用户做决定不是做题

    第5节

    渐进选择从宽到窄的筛选路径

  • 第5章:提交反馈与结果闭环

    第1节

    提交成功的愉悦感与失败补救

动作按钮与任务完成路径
2025年12月18日

在一张表单里,标签提出问题,输入框承接回答,而动作按钮负责把这一切真正“落地”成一次操作。

用户点击按钮的那一刻,不只是点击了一个矩形,更是在下意识地回答三个问题:我准备好了吗,这一步会发生什么,如果点错我还能不能回头。这一节,我们从主次动作、按钮排布、状态反馈、同意条款和提交响应五个方面,把表单里的动作按钮讲清楚。


一 、主动作与次动作

大多数表单都会同时包含两类按钮。一类是推动任务向前的主动作按钮,用来完成提交或进入下一步,例如 下一步、提交、完成、登录 等。只要用户顺利完成表单,这个按钮就应当是他们最终会点击的那一个。

另一类按钮则会让当前任务中断、撤销或暂缓,例如 返回、取消、上一步、预览 等。它们并不直接服务于“完成表单”,却服务于更真实的使用情景,比如想回头修改、临时放弃、先看看结果预览等。这类按钮可以看作次动作按钮。

在实践中,很多设计师出于转化率的考虑,主张尽量减少次动作,甚至干脆删除。这种做法虽然有时能短期提高提交率,却也埋下隐患。如果用户没有体面的“退出路线”,他们会用更激烈的方式离开,例如直接关闭页面或卸载应用,这种离开比一次清晰的取消要危险得多。因此,更稳妥的思路并不是一味压制次动作,而是在视觉和交互层面建立清晰的层级:

  • 主动作更突出,承担视觉焦点
  • 次动作保持存在感,但不与主动作抢位置、抢颜色

常见的处理方式包括

  • 主按钮使用实体色块,次按钮使用描边或文字样式
  • 主按钮采用品牌主色或较深颜色,次按钮使用中性色或浅灰
  • 主按钮尺寸略大,且位于阅读路径的终点,次按钮靠近但略微后退

需要避免的一点是,用红色实体按钮来表示普通次动作。对绝大多数用户而言,红色更接近警告和危险,一般适用于删除、关闭账户这类破坏性的操作。如果把红色用在简单返回或取消上,很容易让人误解这个动作的后果。


支付¥29.90,解锁全部14篇