“虚假的事物可以被随意想象，唯有真实的事物才能被理解。”
我们在讲述自己设计作品的时候常常会说“我以为”、“我觉得”这样的词，这些在旁人看来都是随意想象出来的。而那些被剖析、论证、测试过的，经由韶光沉淀的，可能便是牛顿说的真实的事物。
设计中视觉、交互都存在一定的规律和逻辑。当设计师能够闇练节制一些干系的设计规律之后，无论做什么设计创新都会更加准确和有效率。 但总结这些规律须要大量的实际事情履历或行业案例剖析、论证，完善一个逻辑，须要付出极大的精力。如果已经有人总结出了干系的设计规律和逻辑供我们学习，那我们就不要轻易错过。——《规律与逻辑-用户体验设计法则》
笔墨有点多，建议大家不用一次看完，可以利用碎片化韶光看。
一、即时验证
只管我们担保表单问题设置清晰，而且供应故意义的输入暗示，但总有些问题的答案不止一个。此时，直接反馈有助于再次确保用户的回答有效。这种实时沟通办法即为即时校验。
1. 确认
填写表单便是一次系统与用户之间的对话，用户可能不知道是否回答精确，那么确认他们的回答就显得非常主要。用户名便是一个常见的例子，用户不知道哪些用户名可以利用，以是只能一直地考试测验，直到能被利用为止。这个过程中须要表单对用户供应帮助，奉告那些是不能用那些是可用。
如果表单无法供应帮助，情形会变得很糟糕，用户须要不断的猜用验户名的同时还要不断输入证码，点击确定后才能知道是否能用。
2. 建议
系统反馈并不仅限于确认所供应的答案，还能供应回答建议。如果有一组特定答案都有效，但范围太广，无法设计成单一用户界面。
例如：我输入城市“武”会带出与“武”干系的城市，利用即时建议来帮助用户供应旅行目的地的有效答案；
3. 限定
有些问题没有明确定义的答案，但有明确定义的限定，在这种情形下，即时验证也能发挥浸染。
例如：飞书添加会议室，备注最多 100 字符，输入框下方会显示计数器，以显示用户还能输入多少字符。 这类即时验证有助于避免由于超过输入限定而产生的潜在缺点。
4. 最佳实践即时确认最适宜用于缺点率高、或者有特定格式哀求的问题；即时建议最适宜用于有大量可供选择有效答案的情形；如果须要即时验证答案，应该在用户输完答案之后进行，不要在输入过程中进行；如果有输入限定，应该采取实时、动态更新的方法通报输入限定。
二、多余输入向用户提出的任何问题，用户都须要解析，形成答复，并在表单供应的地方输入答案。如果某个问题并非绝对必要，要么可以去除，要么可以在更好的韶光或者位置提出，要么可以自动推断出答案。 提出的问题越少，用户可能越快越随意马虎填完表单。
1. 去除问题
在知足用户需求或者商业目标的根本上，减少多余的输入框。
例如：N 年前我记得添加银行卡是须要选择所属银行的，现在只要输入银行卡号，所属银行就自动带出来了。
2. 智能默认
即在知足多数人须要的地方放置选择，来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数，加速表单完成过程。
一组单选按钮中预先选择了一项，这可能是最大略的默认选择形式。如果无法为大多数人供应得当和默认选项，智能默认就不能很好的发挥浸染。
3. 个人性化默认
根据上一次的记录进行设置。
例如：由于疫情，学校须要隔天上报学生情形，第一次全部须要自己填写，第二次只须要填写很少一部分，其它选择都被记住了。
4. 最佳实践仔细检讨表单所有问题，去除多余的问题；通过恰当设置知足多数人须要的默认选择，智能默认可以帮助用户回答问题；用户会忽略默认选项，以是要确保默认选项符合多数人目标；设置个性化默认选择，客户能更快完成表单，由于答案具有“粘性”。
三、额外输入并非所有时候所有人都须要填写表单的所有输入框。很多情形下，几个大略的选项就能知足多数人须要。其他情形下，可以借助额外输入：即时增加、层叠加和循规蹈矩。
1. 即时增加
即时增加供应额外输入框给须要的人，同时不会阻碍不须要的人。这类输入框常常被作为高等选项或者额外选项。
例如：填写目标任务，可能大部分人都只须要填写一个紧张目标，就可以连续往下操作。小部分人，须要添加多个目标，这类用户可以选择连续添加，也可以删除，但原始输入框不能删除。每位填表人至少填一个目标，即时增加并不阻碍完成这项主任务。
2. 叠层
层叠是显示额外选项的另一种办法，额外输入框涌如今表单上方，就像电脑桌面上涌现的对话框。 日历控件可能是最常见的例子，用户能够选择特定日期回答表单问题。
利用场景：
如果有必要占用专门的屏幕空间放置编辑窗格，而且页面的高下文对编辑任务也不主要，就可以考虑利用覆盖层编辑。
利用覆盖层时该当考虑的成分：
展后的编辑模块可能会有一部分伸到窗口可见范围之外。而覆盖层则可以担保编辑模块完备可见。你希望为用户供应一个清晰的编辑区域。用户不会频繁编辑的内容。与其让用户单击编辑链接、调度弹出式窗口位置、编辑、关闭窗口才能编辑一组数据项，不如在页面上为每一项都供应专门的编辑空间，让用户可以选择修正；要么，就让用户在高下文中编辑，从而节省处理覆盖层的韶光。被编辑的多个项是一个整体。在编辑一组数据项时，不应该让覆盖层遮住类似的数据项。由于高下文得到保持，用户在编辑过程中可以参照其它项的值。3. 循规蹈矩在个别情形下，额外输入可用来显示一组选项，厥后果比显示一组范例的输入框更好。
这里说的实在便是分类，就像我们会衣服分为春夏秋冬，放到不同的箱子（柜子）里，这样找起来就会快捷很多。
4. 最佳实践额外输入可以供应更多选项或者高等选项，知足有须要的用户，同时不妨碍不须要的用户；如果须要显示大量额外输入，可以考虑采取层叠办法代替即时显示办法，避免网页跳动以及用户迷失落方向；确保层叠不会遮住帮助用户填写的输入框，确保用户仍旧可以自行填写；确保供应用户明确办法关闭或者取消模式叠层并返回表单。
四、基于选择的输入弹性输入许可用户按照希望的办法回答问题，额外输入许可用户补充回答想回答的问题，而基于选择的输入根据对初始问题的回答哀求用户连续回答。
用户有两个初始选项：要么选择支持，要么选择不支持。根据用户的回答，会涌现一系列要回答的后续问题。涌现什么输入取决于最初选择–因此称为基于选择的输入。
实在每一种基于选择的输入办理方案都有很明显的优缺陷，为了免去大家自己摸索的烦恼，可用性公司 Etre 进行了一系列研究，测试了 8 种不同的基于选择的输入办理方案，这里只列举常用的 6 种。
1. 页级选择
把过程明确分为两步，这可能是办理表单中选择性输入问题最大略的方法。互联网上常见的做法是采取两个单独的页面。
第一页或者称为过程第一步–向用户显示初始选项。如果用户选择个中一个，就涌现干系的选择性输入，取代初始选择。对多数用户而言，初始选择和干系输入之间关系明确，一旦做出初始选择，就无法查看并访问到未选选项，除非退出重来。
在测试中，页级选择出错数量较少，眼动仪参数表现较好，例如眼睛固定次数、总固定时长以及均匀固定时长。
2. 水平选项卡
为避免涌现跳转页面，水平选择卡也是一种不错的选择性输入方法。
把水平选项卡放在上方，用户可以浏览表单板块，并进入含有得当的基于选择的输入的部分。选项卡不仅显示了一组初始选项，而且还发挥了当前选择的强大指示浸染。如果只考虑标准可用性指标，水平选项卡在所有测试中整体表现最佳，没有参加者出错，他们能够迅速完成任务，而且对这种设计打了满意度最高分。
3. 垂直选项卡
用户自上而下填写表单，但水平选项卡缺少清晰性，为了填补这一点，可将垂直选项卡直接放在扫描线之内。
就眼睛舒适度而言，垂直选项卡在测试中表现最佳。该方案中，眼睛固定总时长最短，均匀固定时长最短，均匀固定次数最少。像其他被测试的方案一样，垂直选项卡隐蔽了无关的表单控件，只在用户须要时才涌现。该成分彷佛对眼睛舒适度和测试者完成表单的速率至关主要。在测试中垂直选项卡取得了近乎完美的满意分。可能由于显示的单选按钮和基于选择的输入彼此都很靠近，而垂直选项卡确保了选择一个单选按钮后，眼睛不须要太多移动，设计更有效率。
在其他可用性测试中，垂直选项卡的表优于水平选项卡的。由于垂直选项卡在满意度、眼动指标和完成时长方面得分较高，我方向于利用垂直选项卡，而不该用水平选项卡。
4. 下拉列表
水平选项卡和垂直选项卡都坚持着独特的界面元素，每个选项卡对应一个初始选项。这样既能保持所有初始选项可见，而且会占用相称的屏幕区域。随着初始选项不断增加，这些方法每每无法保持很好的比例。而下拉列表利用菜单和分组框将所有基于选择的输入放在表单中的特定区域。只管这种方法会暗藏大部分初始选项，列表中一次只能显示一个选项，但利用单一控件可能会更好地传达初始选项的范围和影响。
和垂直选项卡一样，下拉列表办理方案隐蔽了无关输入，仅在用户须要才会显示。也便是说，下拉列表中基于选择的输入对眼睛压力小，能迅速完成。 被丈量的其他数据点中，下拉列表办理方案表现均匀，满意度分数相对较高，而且 23 名参加者一共只犯了一个缺点。因此，如果初始选项列表超过水平或垂直选项卡所能支持的范围，下拉列表基于选择的输入可能是安全方案。
5. 单选按钮下方显示
另一种基于选择的输入即时办理方案涉及到从各自额外输入中垂直分离初始选项。这种做法的优点在于能保持所有初始选项，以及这些选项中的个人选择始终可见。通过强烈视觉指示来表明初始选项和其额外输入之间的依赖关系，有助于更清晰地表明两者关系。
不过，如果人们改变选项、屏幕刷新来变动额外输入内容，页面跳转的效果会导致人们迷失落方向，尤其是额外输入很永劫。
像垂直选项卡一样，该办理方案的满意度也近乎完美，由于它显示的单选按钮和选择性输入在位置上非常靠近（视线是垂直的，不须要像水平选项卡旁边移动）。然而，该办理方案也有缺点，由于所选单选按钮及其干系表单选项之间的视觉间隔会给用户带来更多视觉上的不适（须要深入体验可能才会有这种觉得）。
测试中也存在这种情形。用户考试测验了初始单选钮中一些不同选项，分不清哪个选项是活动状态，也分不清与其基于选择的输入之间的关系。如果选择性选项的数量很多，这种征象更成问题，由于初始选项和额外选项之间的关系变得更不清晰。
6. 单选按钮内显示
与单选按钮下方显示的办法相似，单选按钮内显示的办理方案在初始选项内显示额外输入。如果额外输入很少（只有一两个）该方法可以保持初始选项的情境，同时又能在最干系的地方显示所需的选择性输入。由于显示的单选按钮及其选择性输入位置非常靠近，该办理方案的满意度也近乎完美，对眼睛压力小，能迅速完成。
但该方案不适宜输入数量很多，和单选按钮下方显示类似，由于页面跳动加上初始选项移动两者之间的页面元素不断显示隐蔽会造成交互迷失落方向，用户会频繁困惑于哪个用户界面元素触发了哪套选项。
如果用户改变初始选项时，加入轻量级动画过渡可能会有助于填补交互方向的迷失落。
7. 最佳实践如果每个初始选项的额外输入选项数量很多，那么页级别的基于选择的输入选项可能是最佳方案；在综合可用性、满意度和眼动跟踪指标方面,垂直选项卡和水平选项卡的表现都不错；如果选项比较多(4 或者 5 个以上)，而且每个选项都自带一套基于选择的输入，最好能针对额外选项采取下拉列表；如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳方案。
作者：夜莺YEAH；来源：优设
原文链接：https://www.uisdc.com/form-interaction
本文由 @夜莺YEAH 授权发布于大家都是产品经理，未经作者容许，禁止转载
题图来自 Unsplash，基于 CC0 协议
