在前面的章节里，我们一直在帮用户减轻输入压力。删掉多余的问题，给出合适的默认值，用即时验证兜住明显错误。这些做法，本质上都是为了让用户少打几次字。
但只要认真翻几张真实的表单，很快就会发现另一条同样重要的路径。不是让用户写，而是尽量让用户选。能用一次点击完成的事情，就不要让他在小小的输入框里一点点敲完。
尤其是带有分支逻辑的表单，后面要填的许多内容，其实都取决于前面某一次关键选择。如果这个选择被埋在中间某一行普通的单选按钮里，用户往往意识不到它的分量，只当它是一道和其他问题差不多的题目。一旦把它抬升到页面级入口，变成一眼就能看懂的模式选择，整张表单的结构就会突然清爽许多，接下来我们就进入本节内容的学习。
一 页面级选项
在一张表单里，并不是所有选择都处在同一个层级。有些只是微调口味，比如要不要订阅邮件；有些却更像岔路口，一旦走上去，后面整条路都会变样。
最典型的例子是账号类型。是注册个人账号，还是开通企业账号，看起来只是点了不同的单选，但后面要填写的字段完全不同。出行预订也是如此，同一个入口里，同时承载买机票和订酒店，两条流程在页面上可能长得很像，真正需要的信息却差别极大。对学生来说，校招和实习往往也共用一个入口，可企业关心的简历字段、可接受的时间安排，并不完全一致。
如果这些关键决定只是被随手塞进一长串问题的中间，用一行不起眼的单选来带过，用户很难在第一时间意识到这一步有多重要，更谈不上对后续流程有清晰的预期。更稳妥的做法，是把它们提升为页面级选项，让用户一进入表单，就先站在一个明确的路口，再往下走。
这类页面级选项，通常有几条共同特征。
1. 它和后续表单的结构关系非常紧密。不同的选择，不只是某一两项文案有所区别，而是会带来完全不同的字段组合、必填要求和校验规则。
2. 对用户来说，这一步的含义很清楚。用户能用自己的话说出自己在选什么，例如我现在是在选账号类型，在确定结算方式，而不是在几组难懂的内部术语之间盲选。
3. 它最好出现在流程的前半段，越靠近起点越好。用户一开始就知道自己将要走哪条路，心里会更踏实。如果已经耐心填完十几项内容，才发现某个选择会让整张表单换一套逻辑，那种被半途换轨的挫败感，很难不迁怒于产品本身。
所以，当你在表单里发现这类会影响整体路径的关节点时，不妨停下来想一想，是否应该用页面级选项来承载它，而不是把它埋在某一行普通标签旁边。
二 水平选项卡
在页面级选项的几种做法里，水平选项卡大概是大家最熟悉的一种。它像一排贴在页面上沿的标签，把不同模式各自安置在一块独立的面板里，用户点到哪里，内容就切换到哪里。
这种方式最适合那种数量不多、彼此平级的模式。三到五个是比较舒服的区间，再少就显得有些兴师动众，再多又很容易在一条横线上挤成一团，标签字一长就不得不缩写，用户既看不清，也点不准。常见的例子有几种登录方式之间的切换，个人和企业账号的切换，或者几条业务线在同一入口下分开承载。
水平选项卡有一个重要前提，下面承载的内容结构要相对稳定。用户切换时，最好是一整块内容整体更换，而不是页面某个角落轻轻抖了一下。只有这样，用户才会把它理解成真正意义上的不同模式，而不是同一张表单上的几个微调开关。
它的优势很直接。用户一抬头，看到的就是一排清清楚楚的入口，不必去猜哪里可以点、点完会发生什么。当前所在位置也一目了然，被选中的标签在颜色、下划线或底部高亮上都有明显的强调，用户随时知道自己正站在哪个模式里。
但它也有先天的限制。横向空间本来就不算富余，标签文字稍微长一点，就开始互相挤压。在桌面端还可以靠加宽、留白来缓冲，一旦放到窄屏设备上，多语言、本地化这些现实问题立刻暴露出来。再往上堆，往往只能用横向滚动或者折叠菜单来兜底，而这两种补救方式都会削弱选项卡原本带来的那种全局鸟瞰感。
所以在决定用水平选项卡之前，可以先问自己几个简单的问题。模式是不是够少，少到一眼能扫完。每一个标签是不是都值得单开一块内容，而不是从同一张表单里随手拆出的一种状态。如果这两点都能给出肯定的答案，水平选项卡才算用在了对的地方。
三 垂直选项卡
当模式慢慢多起来，或者每个模式下面都拖着一长串表单内容时，原本干净利落的水平选项卡就开始吃力了。这时，把入口转到页面左侧，用垂直选项卡来承载，往往会更从容一些。
垂直选项卡最常见的形态，是桌面端界面左侧的一根纵向导航。账号、安全、通知、隐私，各自占据一行，看上去更像一本书的章节目录。用户进入页面时，先扫一眼左侧目录，再在右侧正文里填写内容，心里很容易建立起一份整体地图，而不是被一屏一屏散碎的字段牵着走。
它的第一个优势在于容量。纵向空间通常更宽裕，就算有七八个甚至十来个入口，只要分组合理、层级清楚，用户依然能把它当作一份有结构的目录，而不是一串堆叠在一起的按钮名单。对那些设置项较多、功能线较长的产品来说，这一点格外重要。
第二个优势在于文字伸展。很多业务场景下，模式的名字本身就不短，如果硬塞进水平选项卡，要么被迫缩写成几个生硬的缩略词，要么挤成两行，整个界面看上去东倒西歪。垂直选项卡给文案留出了一点呼吸空间，可以用更接近日常表达的方式说话，用户一眼就能明白自己点进的是哪一块，而不必反复猜测。
它特别适合承载复杂设置或者多步配置。常见做法是把一整块设置区域交给垂直选项卡来切换，左侧是稳定的章节目录，右侧是当前章节下的表单。用户在不同入口之间切换时，左侧几乎不动，只是右侧内容成块替换，这种稳定感会让人觉得安全，知道自己只是换了一页，而不是被带到一个陌生的地方。
当然，垂直选项卡也不是随处可用。它更适合宽屏的桌面或平板环境，需要同时给左侧导航和右侧内容留出足够空间。窗口一旦变得非常狭窄，左边的导航就会压缩到只剩一条窄缝，右侧的表单也会被挤到难以阅读。遇到这种情况，就不必死守侧边栏，可以考虑改用顶部抽屉、底部抽屉，或者把流程拆成多步向导，逐屏引导用户完成，而不是硬把原本一整根竖导航压扁在小屏幕上。
四 下拉列表
些时候，页面级选项的数量开始超标了。用水平标签放不下，用垂直导航又有点大材小用；给每一种模式单独做一个入口，更是得不偿失。这时，下拉列表常常被当成一条折中的路。
你在不少产品里都见过它。导出报表时，点一下按钮，会弹出一串文件格式；再比如复杂的分析工具，同一块区域里预设了很多视图，按地区、按时间、按产品线拆得密密麻麻，最后都被塞进一个小小的选择框里。对熟悉这些工具的老用户而言，下拉列表是顺手的，他们知道这里理应能切换模式，也大致明白每个名字背后代表着什么。
下拉列表最大的好处很朴素，就是省地方。表单头部只留一行当前模式的说明，旁边一个小箭头，界面干干净净，不会像一排选项卡那样把上缘撑得满满当当。尤其是在需要同时容纳很多视图、很多格式，但它们又不至于重要到“人人都该看到”时，下拉是一种很合适的收纳方式。
不过，省出来的空间，往往是从“可见性”里扣来的。闭合状态下，用户眼前只有当前这一项，其他可能性都藏在控件里。对第一次来到这个页面的人来说，他甚至未必意识到这里还能切换模式，只会下意识把它当作一行普通文案，顺着默认选项一路填下去。这种“隐藏入口”的设计，对新手并不友好。
所以，下拉列表更适合这样的场景：使用者对这类工具已经有一定经验，知道同一个位置往往会提供多种视图或多种导出方式；不同选项之间的差异更多是细节和视角的调整，而不是让整个流程换一条轨道；页面主要服务的，是反复回来使用的那批人，而不是偶尔路过、只想尽快完成一次任务的访客。
如果页面需要优先照顾初次使用者，或者不同模式的差别非常大，就不要把关键分叉藏在下拉里了。更安全的做法，是把几条主要路径堂堂正正摆在用户面前，用选项卡也好，用清楚的按钮组也好，让人一抬头就能看见自己究竟可以往哪几条路走，而不是先被默认选项悄悄带走一段路程，才发现原来这里还有别的选择。
五 单选按钮
在前面讨论页面级入口时，我们更多关注的是整条流程的岔路口。往下再走一层，就会遇到另一类更细小的分叉点：某个字段一旦做出选择，下面就会长出一段全新的内容，而单选按钮往往是那个开关。
日常最常见的情形，大概是这样的，以下方认证表单填写为例。一组单选安静地躺在表单中部，看上去只是平平无奇的一行问题。用户勾选一种认证方式后，下方立即出现相关认证需要提交的信息。从表面看，只是把圆点从左移到右，实质上却是让整张表单多出了一小截分支。
让新增内容紧跟在单选按钮下方，有一个很直接的好处。空间位置天然地表达了因果关系。用户先看到一组平级选项，在大脑里完成取舍，做出选择后，只需要顺着视线往下移动，就能看到这一决定带来了哪些额外工作量。主问题在上，补充问题在下，谁依附于谁，一目了然，不需要去页面的另一个角落寻找结果，更不用回忆刚才点的是哪一项。
这种做法还给了用户一份可见的成本清单。很多人面对复杂表单时，心里不是怕多填几行，而是不知道这一选下去，后面会不会无穷无尽。单选按钮下方的即时展开，把代价摊在用户眼前：有的选项只额外多出一两行，有的则拖出一整块信息区。人在犹豫时，很容易根据这份直观的差别重新权衡，决定自己究竟要不要坚持原来的选择。这种建立在界面上的预期管理，往往比一段抽象的提示文字更有力量。但优势越明显，副作用有时也越容易被忽略，其中最典型的一项，就是布局跳动。
如果新增的内容很短，只是几行说明或两个简单字段，页面整体的结构不会被打乱，用户也不会太在意。可一旦展开的是整块地址表单、完整的公司信息，后面的所有字段就会被整体推下去，超出当前视窗。用户原本记得刚才看到的那一行在屏幕中部，再抬头时，位置已经完全变了，有些内容甚至被挤到了下一屏，这种空间记忆被打断的感觉，会让人迅速迷失方向。
在同一张表单里，如果多组单选都采用这种在原地向下“长出一段”的方式，问题会变得更加明显。每一次选择都在中间塞进一个高高的区块，页面就像被反复拉开的手风琴，用户很难说清自己究竟在哪一步展开了哪一段内容，更别提回头修改时该从哪儿找起。
要缓和这种不稳定感，并非没有办法。一个思路，是为同一组单选预留一块相对固定的区域，不让每个选项各自在底下长出一块。无论用户选中哪一项，附加字段都出现在同一个位置上，页面的骨架保持不动，只是这块区域里的内容在切换。上下依附关系仍然清楚，但整体高度的变化被限制在可控范围内。
另一个思路，是控制附加内容的“体重”。真正冗长、逻辑复杂的部分，可以拆到浮层、侧滑面板或者下一步向导中去展示，让当前页面只负责触发和概览，而不承担所有细节。用户点选单选后，在原地看到一小段摘要信息和一个清晰的入口，例如编辑报销信息、完善邮寄信息，愿意继续深入时再进入专门的填写空间。
最后，还可以借助视觉手段给新增区域画出一个清晰的边界。浅色底、细描边、小标题，这些都能帮用户迅速锁定变化发生的位置。即便页面高度有所增加，用户也能一眼看出自己需要关注的是哪一块，而不会误以为整页内容都重新排过队。做到这些之后，单选按钮下方显示附加输入，才既保留了步步揭示的直观，又不至于让整张表单在用户手下反复“跳动”。
六 显示非活动选项
在有分支逻辑的表单里，还有一个经常被忽略的问题，就是那些暂时不能使用的选项，要不要让用户看见。最省事的做法，是干脆从界面上删掉。系统只把当前可选的几条路摆出来，版面干净，开发也轻松，看上去似乎皆大欢喜。但这种干净，是拿信息完整性换来的。用户很难分辨，自己眼前本来就只有这么几种可能，还是因为某些条件不满足，其他选项已经被悄悄拿走。尤其是在多步骤的流程里，前面做过什么选择、走过哪条路径，往往已经记不清了，当某个选项在后续步骤里不声不响地消失，很多人会本能地怀疑，是不是系统替自己做了决定。
更稳妥的方式，是保留这些选项，但明确告诉用户现在为什么不能选。常见的做法，是用略浅的颜色或较低的灰度来表达不可用状态，同时在旁边加一句简短的说明，例如当前地区尚未开放、需要先完成实名认证、仅对企业账号开放等。这种解释不需要写成一段长文，只要让用户大致明白原因即可。有时也可以把说明集中放在分组标题处，用一小行概括性文案交代清楚整组不可用的前提条件。
按钮虽然不可用，但是需要显示出来，同时说明为什么不可用
这样处理，至少有三层收益。
1.用户知道那条路真实存在，只是暂时关着门，而不是凭空消失。
2.用户能理解自己不满足条件的原因，进而判断有没有可能去满足，心里对未来的空间有数，而不会被动接受一个封闭的世界。
3.当条件发生变化时，只需要把状态从禁用切换为可用，无需再向用户解释这里为什么突然多出一个选项，之前的学习不会被推翻。
表面看，显示非活动选项是在暴露更多信息，似乎让界面“复杂了一点”。但从长期关系看，这种做法维持了一种更诚实也更稳定的人机对话。系统不再替用户悄悄做减法，而是把边界摆在台面上，让人知道此刻能做什么，也知道在什么条件下，未来可能有更多路可以走。
七 组的显示
选择控件很少单独出现，更多时候，它们以一整块区域的形式和其他元素一起登场。一个支付方式区域，往往既有单选控件，又有图标、文字和附加说明；一块权限设置区域，可能同时包含复选框、说明文字，以及少量二级选项。如果这一层结构处理得当，用户在扫表单时，会自然把它们看成几块有内在逻辑的小单元；如果处理不好，就会变成一堆零散的控件堆在一起，看不出边界，也说不清主次。
因此，在展示选项组时，首先要做的是把组的轮廓画出来。可以适当拉开组与组之间的空隙，必要时加一条轻微的分割线，或者给其中一组加一块很淡的背景色，让用户在浏览时本能地按块来理解，而不是一行一行拆着看。哪怕用户没有意识到这里有“分组设计”，也能感到自己是在处理几块不同的话题，而不是面对一长条杂乱的问题清单。
在组的内部，则需要重新安排主角和配角的站位。真正需要做选择的内容，例如组标题和具体选项，可以用更醒目的字号或对齐方式呈现；解释性的文字则退后半步，稍微变细、变浅，既不抢眼，又不会被完全忽略。这样用户扫到这一块时，会先看到“要决定什么”，然后在需要时再顺势去读“为什么”和“怎么选”，而不是一上来就被大段说明淹没。
还要尽量克制在同一组选项里堆叠控件类型的冲动。如果一块区域里同时出现开关、复选框、单选按钮、下拉列表和文本输入，又缺乏清晰的层级关系，用户很难判断哪些选项互斥，哪些可以叠加，哪些只是辅助信息。能拆开的，最好拆成几个逻辑更单纯的小组，每一组配一个清晰的标题和简短说明，让用户在每一块区域内只做一种类型的判断，而不是在一团混合控件中摸索。
最后，选项组之间的顺序同样需要斟酌。页面级的关键选择，最好放在靠前的位置，让用户先定方向；那些只是补充细节或微调偏好的组，可以顺延在后面。这样用户的注意力可以先集中在路径性的决策上，确认自己要走哪条路，再沿着既定路径补齐细节，而不是一边填细节，一边被迫在中途频繁回到关键分叉口，来回切换思路。
九 小结与设计要点
从页面级选项，到水平和垂直选项卡，再到下拉列表、单选按钮、非活动状态和选项组，我们一路讲下来，看上去像是在拆解一堆控件的形态，其实绕了一圈，又回到了同一个问题。当用户站在一张表单面前时，他到底看到的是一片零散控件的拼盘，还是一张有条理的路径图。
这张路径图可以内容繁复，也可以层级丰富，但不该显得混乱。哪些是会改变整条流程走向的关键分叉，哪些只是局部的小调整，哪些暂时还不能选择，都应在视觉和交互上有清楚的信号。只有这样，用户才能一边做选择，一边大致看懂自己在往哪儿走，而不是被系统牵着手，糊里糊涂地走完全程。
下面这几条，可以作为本节的小结，也可以当作实际落地时的检查清单。
1.会影响整条流程走向的关键选择，尽量提升到页面级，用清晰的入口承载，不要随手塞在某一行普通字段后面，让用户在不知情的情况下就改了路线。
2.水平选项卡适合数量不多的模式切换，垂直选项卡适合模式略多、且每一屏内容偏长的配置场景；模式再多一些，再考虑用下拉列表收纳，而不是一味堆满一整排标签。
3.字段级的分支输入，宜由同一组单选控件集中控制，并尽量在相对固定的区域展开，避免在页面多处各自“长出一块”，堆成高高的内容楼层，让用户难以回头定位。
4.卡片式单选有利于横向对比，是讲清“选项之间有什么不同”的好工具，但不要在一张卡片里塞入过多复杂输入，否则用户会在同一块区域同时面对理解和操作的双重负担。
5.对暂时不可用的选项，优先保留在界面中，用灰显加简短说明的方式表达，让用户知道这条路的确存在，只是当前条件不满足，而不是让选项无声无息地消失。
6.在选项组的层级和顺序上多花一点心思，用间距、标题、背景色等手段划出逻辑边界，尽量避免在同一块区域里无序混搭多种控件类型，让用户一眼看不出主次。
7.在移动端要更加克制复杂布局的冲动。必要时将决策拆分为多屏或全屏子流程，让每一屏只承载有限数量的选择，相比在一页中硬塞所有分支，更有利于用户保持专注。
当这些做法被认真落实之后，选择输入就不再是一堆零件的堆叠，而会变成一个有节奏、有结构的决策空间。用户在其中一步步作出选择，也许不会觉得轻松愉快，但至少会感觉到，自己始终走在一条看得懂、也走得明白的路上。