美叶学习
  • 最新
  • 主题

      文章主题

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

      关于

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

    第1节

    本小册能帮你解决什么

  • 第2章:表单思维框架

    第1节

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

    第2节

    好表单的四个底层原则

    第3节

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

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

    第1节

    标签排版与对齐策略

    第2节

    输入框选型与使用禁区

    第3节

    动作按钮与任务完成路径

    第4节

    写得少又有用的帮助文字

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

    第1节

    默认值替用户多走半步

    第2节

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

    第3节

    新增输入只在需要时出现

    第4节

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

    第5节

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

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

    第1节

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

输入框选型与使用禁区
2025年12月18日

当标签把问题说清楚之后,该轮到输入框登场了。对用户来说,填写表单的全部动作,几乎都是通过输入框完成。这里的输入框,并不仅指那一条细长的文本线,而是指所有用来回答问题的组件,包括单选按钮、复选框、下拉菜单、文本输入框等。它们共同构成了表单的答题界面,也决定了用户需要付出多少力气,才能把这张表填完。

这一节,我们就从输入框出发,讨论几件事:常见输入组件的类型,输入框长度的隐性暗示,必填和选填的标记方式,多字段输入框组的组织方式,以及如何让输入更具弹性。


一 、输入框的类型

在表单世界里,用户要做的事情无非几类:在若干备选项中挑选,或者自己输入答案。围绕这两类行为,逐渐演化出几种基础组件,它们各自适合解决不同的问题。

1 单选按钮

单选按钮的使用频率非常高,适合在两项或多项互斥选项中,强制用户做出唯一选择。只要存在“只能选一项”的业务规则,这类组件通常都是首选。经典的单选按钮是一个空心圆,被选中后,中间出现一个实心圆点。

但实际产品中,视觉样式可以被定制,有的用边框线、颜色块甚至小图标来表示选中状态,只要不同状态之间区分足够清晰即可。


如图,一款网页产品的设置表单,使用了特殊样式的单选按钮

如图,一款订阅机票的网页表单设计,在对包裹重量的统计中,使用了特殊样式的单选按钮

在设计上,需要特别注意两点:

第一,选项之间必须是互斥关系。比如性别、套餐类型、计费周期。如果选项本身允许叠加,就不应该用单选按钮。

第二,选项数量不宜过多。三到五项是比较舒适的范围,再多就要考虑分组、折叠或改用其他形式,否则用户需要阅读和比较的成本会迅速上升。

2 复选框

复选框同样用于在选项集合中进行选择,不同之处在于它允许用户选择零项、一项或多项。只要答案可以是一个集合,而不是单一值,就应该考虑复选框。

例如在音乐偏好设置中,用户可能同时喜欢爵士、摇滚和古典;在通知设置里,用户可以既接收邮件提醒,又接收短信提醒。此时,复选框能够直接表达“可多选”的含义。

支付¥29.90,解锁全部14篇