条件表单根据用户的选择显示相关字段,例如选择“快递送达”后填写地址,选择“门店自提”后选择门店。设计时不能只规定显示和隐藏,还要分别决定隐藏值是否暂存、是否校验、是否提交,以及切回原分支时怎样恢复。隐藏一个字段,不等于它已经从业务数据中消失。
可以在墨刀原型中把表单分支和返回路径连起来,让团队实际走一遍“填写—切换—再切回”。先确定每个分支的数据规则,再选择用独立页面或组件状态表达,能避免只做好显隐动画、遗漏提交结果。

短追问在原地展开,复杂分支另设步骤
选择配送方式后追加一个地址区域,用户容易理解前后关系;如果选择“企业配送”后突然展开联系人、账单、仓库和批量收货等十几项内容,页面高度与任务范围都会发生大幅变化。此时更适合进入明确命名的下一步,而不是不断嵌套显示。
GOV.UK的单选组件指南建议保持条件追问简单,复杂或包含多个部分的问题放到后续页面。这个原则可用于判断结构,但不能把某套组件直接视为所有产品都适用的答案。配送表单仍需按实际字段长度和用户任务测试。
若业务分支已经形成连续的小流程,可参考分步表单的步骤拆分和返回规则。条件显示适合减少当前不相关的信息,分步适合组织真正不同的任务阶段;两者不能只按“哪种页面看起来更短”来选择。
用一张字段表确定分支归属
下面以一份自拟的商品配送表单说明。用户选择快递送达时填写收货人、联系电话和地址;选择门店自提时选择门店、可预约时段和取货联系人。实际是否需要这些字段,应按产品的履约规则确定。
| 字段 | 所属范围 | 切换后的处理 | 提交时的规则 |
|---|---|---|---|
| 配送方式 | 所有分支共用 | 始终显示当前选择 | 作为解释其他字段的依据 |
| 收货人、电话、地址 | 快递分支 | 本次填写过程中暂存,切回可恢复 | 仅快递分支校验并提交 |
| 自提门店、时段 | 自提分支 | 切换门店后重新确认时段 | 仅自提分支校验并提交 |
| 取货联系人 | 自提分支 | 与收货人分别保存,避免默认等同 | 按自提规则校验 |
| 订单备注 | 所有分支共用 | 切换方式时保留 | 两种方式都提交 |
“本次填写过程暂存”不是承诺跨设备或长期保存。在这一示例中,它只用于让用户探索两种配送方式时不丢失输入;关闭后是否保留草稿,需要另行确定保存范围和有效期。不要让一次局部显隐需求,悄悄扩展成新的账号资料存储功能。
隐藏值可以保留,但不能偷偷参与提交
用户先填了快递地址,后来改成门店自提。为了允许反悔,界面可以暂存地址;正式提交却只应包含当前有效分支要求的数据。这里的“保留输入”和“作为订单生效字段”是两种不同状态。
如果后端同时收到了快递地址和自提门店,究竟哪一个有效?不能让接口根据哪个字段不为空来猜。提交约定应明确配送方式,忽略或拒绝不属于该方式的字段,具体策略由团队统一。前端隐藏仅是呈现行为,最终数据校验仍需要研发实现。
也有需要切换即清空的情况:字段与新分支存在冲突、值无法安全复用,或者业务明确禁止保存。此时不要等用户切回后才发现输入没了。若将丢弃的是一大段已填写内容,在切换前解释后果并允许取消;只有空字段时不必弹出没有意义的确认。
最实用的规则不是“全部保留”或“全部清空”,而是按字段归属决定。共用备注继续保留;门店特有时段在更换门店后失效;快递地址可以作为当前会话里的分支草稿暂存。三种情况应在设计说明中分别出现。
父项变了,子项可能需要重新选择
自提门店A支持周六上午取货,门店B却不支持。如果用户先选择A和周六上午,再改为B,时段字段不能只换一下选项列表,却继续暗中保留原值。
建议采用可解释的顺序:用户切换门店后,先提示时段将按新门店更新;若原时段不再可用,清除该选择并显示“请重新选择门店B的取货时段”;若仍可用,也应按产品约定重新核验,而非只比较显示文字是否相同。

异步加载还要考虑先后顺序:用户快速从门店A切到B,A的时段结果晚到,不能覆盖B的结果。原型可以用说明和加载状态表达这条要求,研发需要按当前选择校验响应。加载失败时保留门店B,提示重新获取时段,不要把A的旧时段伪装成B可用的选项。
只校验当前分支,错误也要回到可见位置
选择自提后,快递地址为空不应阻止提交。反过来,如果提交时后端返回“所选门店暂停自提”,页面应展开或定位自提区域,保留其他输入并告诉用户改门店。不能只在已隐藏的字段上画红框,让用户找不到失败原因。
错误汇总中的链接也应能带到对应字段。若错误属于当前已不适用的分支,先核对是否使用了旧请求或旧校验结果,不要为了显示一条错误自动切回用户已经放弃的配送方式。
字段重新出现时,需要区分旧值是否还有效。切回快递分支恢复地址,不代表它已经经过本次提交校验;过时的配送范围、门店营业状态等可能需要重新检查。普通格式错误如何反馈,可参考表单字段、校验与提交状态设计。
内容出现后,让用户知道发生了什么
相关字段应紧接触发它的选项,而不是在屏幕远处突然出现。保持阅读顺序稳定,尽量避免选择后自动滚到页面底部。对键盘用户,通常先留在当前选择,再能按顺序进入新字段;用户不应因为切换一次选项失去自己所在的位置。
给分支区域加清楚的名称,例如“快递收货信息”和“门店自提信息”。需要交给研发的还有展开状态如何表达、隐藏内容是否退出键盘与辅助技术的阅读路径,而不只是设置透明度或移出可见区域。画面看不见,但键盘仍能进入隐藏字段,会造成另一种填写混乱。
在手机上检查展开后的按钮位置和最后一个字段,不要让固定底部按钮盖住错误说明。如果新增字段很多,应重新考虑是否分步;不停压缩间距不能解决任务过长的问题。
按往返路径搭建并评审原型
- 建立默认表单,配送方式、共用备注和提交入口保持位置清楚。
- 建立快递分支,填入一份完整收货资料;切到自提后,界面只展示自提所需字段。
- 切回快递,核对需要暂存的资料已恢复,备注始终不变。
- 在自提分支先选门店A和时段,再切换到不支持该时段的门店B,展示重新选择提示。
- 提交自提表单,确认结果页显示自提门店而非旧地址;模拟时段不可用,返回可见字段修改。
交付中同时保留字段归属表、切换行为与最终提交示例。判断一个条件表单是否完成,不能只看新字段能不能展开;要看用户改变主意之后,旧值有没有被正确保留,新规则有没有真正生效,提交结果是否仍与当前选择一致。