一、认知策略
1、表单排列
表单承载的主要功能是向用户清楚地传达信息，单列表单形式更利于用户浏览动线，帮助用户识别和填写内容。而多列表单形式用户的视觉横向移动范围更大，浏览和填写效率更低。
例如QQ邮箱设置页面中，选项都是采用了纵向布局的方式。当然这种布局方式是比较理想化的，是与场景相匹配的。首先作为设置界面，并非高频操作业务，用户只会调整部分内容，而不是全业务的操作。所以更强调信息的查看，纵向布局更有利于浏览。
其次，表单项内容应并不复杂，即使采用纵向布局，对整体的表单长度影响也比较有限。另外配合底部常驻按钮，对用户的操作效率影响不大。
而在B端输入型表单中，本身内容填写的任务就比较重，所以需要适当控制表单的整体长度，因此一味地追求浏览动线也是不可取的。
2、输入框长度
1）输入框排版
如下图所示，右图采用的是错落有致的排版，左图更加整齐划一。但是相比较而言，似乎右图的诗句舒适度更高。因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体，但左图过度的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。
所以表单中要注意整体的协调性，不要为了对齐而对齐。
2）输入框长度的暗示
输入框的长度具有一定的暗示作用，因为用户会认为它是与输入的内容是相对应的。尤其是邮政编码、电话号码和银行卡号等长度固定的字段。在设计这类输入框的时候，可以采用与内容相互匹配的长度，避免过长引起用户对输入内容正确性的疑虑。
下图即一典型案例。在上图中，不需要花多少钱的金额输入框进行等宽处理，容易误导用户对所需输入金额的判断，造成用户的不安全感。
3、必填与选填
必填和选填是表单的基本信息，用来引导用户识别关键信息，做出行为决策。
通常必填字段较少时，优先采用星号（*）标注显示，更好地提高信息识别效率。当必填字段较多时，则可以标注选填项的方式，避免出现满屏星号，增加额外信息量。
但是同一个系统中建议还是采用统一的标记方式。我个人更倾向于星号（*）方式，用户成本低，对内容干扰性更小。
4、识别好过记忆
这是尼尔森十大可用性原则之一，要求能够通过各种方式给予用户足够的信息，减少用户的记忆成本。在表单设计中，主要是各种提示信息辅助用户完成表单填写。
1）主动性提示
对于开放性、复杂的、超出用户认知的输入信息，需要做出主动性提示。例如在阿里云、腾讯云中，很多名称字段都是需要以字母开头的。而普通用户为了便于信息的识别和记忆，更习惯于中文命名。这种情况下，表单中就需要默认给出填写说明，减少用户的记忆和出错概率。
另外一些具有限制性的规则，对用户的操作会产生直接影响的，也需要显性地告知用户，尽量避免出现理解偏差，带来用户投诉。
主动性提示可以通过输入框中的「占位标签」告知用户；不过过长的提示信息通常放置在输入框下方，便于用户查看。
2）交互性提示
还有一种提示增加了信息交互。例如密码设置时，光标停留会触发密码规则提示。既保证了默认界面信息的精简，又可以保证提示的有效性。用户输入时，还会进行内容校验反馈，交互性更强。
3）被动性提示
对用户而言，解释说明、帮助信息更偏向于业务属性。随着用户深入使用产品，这些信息会变得不再重要，用户查看的频率也会越来越低。所以这类信息通常被默认收起，减少界面的信息量，用户在需要时主动触发查看。
5、主任务与分支任务的协同
有些展示型表单，主要是为用户提供信息服务的。但是为了保证操作链路的流畅，会加入一些分支任务。例如任务预览时，会增加「发布」或者「编辑」功能，便于用户直接完成二次操作；或者智能报告表单中会增加人工「修正建议」，对内容进行纠偏。这些操作只是可选项，并不是用户必需的操作行为。
如果按照顺序将信息罗列展示，这些内容会被放在页面底部。长表单场景下，这些信息会无法直观展示，用户难以感知。所以需要为这些支线任务增加额外曝光。
例如顶部的引导文字按钮，借助定位锚点，实现路径直达，提高操作效率；或者采用底部浮层弹窗的形式，方便信息的填写及表单内容的查看。
具体的设计方案有很多种方式，需要根据场景和用户确定。但是设计师需要能够将主任务和分支任务进行有机的协同，保证用户对页面内容的全感知和操作效率。
6、数量级的影响
有些时候我们不得不面对很大的数据量，这对设计师和用户都是一个挑战。设计时，我们需要根据信息量做出合适的设计方案。
信息量比较大时，首先要进行内容拆解，按照用户的认知习惯完成信息分层，让用户不要直接面对大量数据。例如通过树表结合，或者双层关联下拉选择，逐步缩小用户的目标范围。
某些场景下，还要增加辅助搜索功能，让信息筛选更加简单。
二、交互策略
表单设计除了静态展示效果外，还有大量的交互操作。主要的设计目标就是「效率」和「防错」。
1、操作效率
1）减少用户输入
虽然PC端输入比移动端更加便捷，但是输入型操作对用户而言成本仍然较高。一方面用户需要思考应该填写什么内容，另一方面需要准确地完成内容输入。而选择的成本相对更低，因此在表单设计时，尽可能让用户以选择的方式完成任务。
例如邮箱在上传附件时，如果邮件没有填写过标题，会将附件名称直接填入邮件标题中，减少用户输入。
2）合理预设
表单信息可以通过信息的抓取、内容关联度分析，预设合理内容值，减少用户的操作。例如QQ邮箱设置时，系统提供了默认话术，用户只要快速启用即可。
对于如证件类型、手机区号、国籍等较为通用的选项，为用户提供默认选择，同样可以有效简化操作步骤，减轻用户输入，帮助用户更快地完成表单填写。
2、业务流程顺畅
当我们在填写A任务时，需要关联选择B任务。而B任务并没有创建，该怎么办呢？
通常情况下，需要在A任务中完成创建B任务。例如弹窗、抽屉、甚至是新开页面的形式，保证主流程的畅通。否则对于高频操作的任务，会严重影响用户的操作效率。
如果由于各种因素，在流程中无法直接创建分支任务，或者由于各种限制条件阻断用户操作时，该怎么办呢？
此时需要在任务开始前，给用户足够的信息提示。避免用户已经填写了部分内容后，发现缺少相关的内容，导致任务无法完成。这会带给用户非常糟糕的体验，尤其是会消耗用户较大精力的工作。
3、保存机制
表单填写时，可能会遇到各种异常场景，需要有防错机制和保存功能，避免用户误操作时造成信息丢失。
4、即时反馈
表单填写是为了向用户收集正确有效的信息，所以需要在用户填写完成或者提交表单时增加校验机制。
校验机制分为前端校验和后端校验。
前端校验无需服务器传输数据，前端页面会根据校验规则，对输入完成的内容进行验证。例如邮箱格式、手机号长度、密码是否符合规则等。
后端校验需要将表单内容传入后台数据库进行匹配，不匹配则会将信息反馈至前端页面。通常用在点击提交按钮后，例如账号不存在、密码错误等。
前端检验可以帮助用户及时发现问题并修改，纠错的效率更高。后端校验相对滞后，出错后用户需要自行定位错误项。
无论采用哪种方式都要告知用户错误原因，帮助用户快速解决问题。
写在最后
表单设计是设计师绕不开的内容，无论用什么方法论也无法穷尽其中的可能性，也没有一套覆盖所有场景的设计模板。设计师需要根据实际的业务场景，去完成合适的设计方案，并在不断的实践中积累经验，总结得失。
作者：子牧先生
转载请注明：学UI网》设计基础(8): 表单设计中的认知与交互
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
饿了么的订单页详情页使用了这种大大大标题，但是标题赋予了订单状态的意义，比起单纯的“订单详情”，这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。
使用这样的Tab栏，能够迅速帮助用户辨识自己所在的位置，就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换，与二级Tab做出区分。
这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征)，模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。
