小白入局B端必看—web端表单原则和技巧.docx

单从效率角度看，顶对齐标签〉右对齐〉左对齐，但是根据应用场景，效率快并 不是我们选择标签对齐方式的唯一的指标，还是要根据用户需求和实际业务场景 提供不同的解决方案。
1）左对齐标签视线从标签移动到输入框的时间为500ms，花费时间很长说明用户经历了沉重 的认知压力，原因是违反了格式塔原理，标签和表单域之前存在负空间（格式塔 原理：距离更近的更容易被看成一个整体）离得远用户就要思索一段时间判断是 否是一个整体所以左对齐表单填写速度最慢。
•优点：视觉动线符合用户的阅读习惯，因此阅读效率高。
•缺点：标签与输入域负空间间距长短不一，操作效率低。
2）右对齐标签（冒号对齐标签）视线从标签移动到输入框的时间为240mso
因为右对齐有锯齿状的视觉动线，不利于快速扫视，所以用户阅读效率不高，但 是符合亲密性原则,快速填写的速度更快，右对齐表单完成时间比左对齐快2倍。
・ 优点：标签与输入域有明确的视觉关联，符合亲密性原则，操作效率高。
•缺点：有锯齿状的视觉动线，不利于快速扫视，所以用户阅读效率不高。
3）顶对齐标签视线从标签移动到输入框的时间为50ms。
Matteo Penzo从2006年7月进行眼动研究发现视线从标签移动到输入框的时 间为50ms，比左对齐标签方式快了 10倍，比右对齐标签方式快2倍，能迅速 填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上 下单向运动。
优点：节约横向空间,对齐视觉舒适，对齐方式符合视觉动线，阅读、操作效率高。
缺点：一定程度上占用大量的纵向空间，纵向空间利用率不高。
4）行内标签视线从标签移动到输入框的时间为ioms。

・ 优点：最节约空间，多用于登录注册。
・ 缺点：输入状态标签消失，用户会有迷失感。
高频问题一：表单标签应简洁明了，在哪个位置才是最高效的呢？标签到底是左 对齐、右对齐还是顶部对齐呢？
答案是根据用户需求和实际业务场景提供不同的解决方案。
如果是用于移动端或者国际化的产品（比如国际化的出海产品设计，可能会适配 多种语言，有些单词翻译过来就会很长）顶对齐标签是个不错的选择。
如果是详情的陈列（快速扫视的速度更快）或者涉及比较复杂和敏感需要用户放 慢速度，仔细思考的场景，可以选用左对齐标签。
右对齐标签虽然与表单域视觉关联强,用户录入效率高，不过要考虑好标签长短 不一的问题。
2 .输入域输入域是表单的主题与核心，用来收集用户操作的信息，每个输入域字段包含一 个类型信息，输入域不仅仅是文本输入框，从交互组件的角度来看，其包括文本 输入框、单选框、复选框、开关、选择器、步骤条、上传、Tab切换、滑块、步 口取基笺笺

(;■ •••

白it送♦泳。I人也
文本・
¥R・—
■入短
式■u玄*
・入牛I«ItAtfJK［文+■・
M.一雷调「■车S・X
gg・・布京孝・

H£ 4hS仙姿选■'•6
M • M • I .

文•送配
«•-| aw-/ -一 ★ 7接螃・合裨式
总■二 | JMI 二

3 .提示信息帮助用户有效正确填写信息的引导内容或反馈内容，以文字或者图标形式展现在 要说明的内容旁边，图标形式的情况鼠标hover时显示全部信息，从提示信息 所处的位置和提示出现的时机，提示可分为输入框内提示、输入框外提示、激活 输入框提示、图标悬停提示及单独区域提示等。
1）占位符/Placeholder说明：通常放置在表单字段之外或者字段内,对输入项或设置项的解释说明。 作用：提示用户要输入什么内容，帮助用户快速理解每一项字段的作用。
2 ）帮助信息/Help Information说明：文字形式的表单帮助信息很重要，需要让用户必须知晓的一般放在表单字 段右侧，图标形式则常用于信息内容非用户必须知晓的，以图标形式隐藏内容, 在需要时鼠标hover显示。
作用：帮助用户解释名词和引导用户完成任务。
■SR

3 ）校验信息/Check the information说明：当用户填写表单的信息无法被录入时给予反馈、实时提供建议参考或者对 录入内容的提示,在错误信息显示在对应表单项旁边,尽量减少用户记忆和认知 负荷。
作用：当用户填写的信息无法被录入时给予反馈。

提示一般可分为引导提示和反馈提示两类。
二、表单的构成
4）引导提示发生在用户输入前，引导用户正确输入信息或对输入信息规则的注释与说明，输 入框内提示、输入框外提示、激活输入框提示都可归为引导提示，引导提示可细 分为全局提示和定位提示。
①全局提示：一般位于表单顶部显示的注释与说明，告知用户填写表单的注意事 项、信息采集的用途以及信息安全性保证等，解除用户输入时的顾虑。

②定位提示：适用于表单很长，用户注意不到自己错哪儿了，在相应错误位置进 行提示，帮助用户快速定位到错误内容。
单项提示也可以选用不同的布局，分别有输入框内提示、在鼠标haver时气泡 提示、输入框下方文字提示、输入框后方文字提示。
错误提示一般停留2-3S后消失。
5）反馈提示发生在输入中或输入后，页面系统对用户的输入给与校验，并对校验结果予以展 示的提示形式，输入中作用：实时反馈，输入后作用：提醒和纠错。
tltHII I TEX n ■ ■ I\.

•缺点：影响一些性能，但是这个影响比较小，如果在输入一个错误率很高的内容， 频繁的给用户错误提示会影响用户体验。
•优点：该方式的校验条件多在本地，不需要实时向服务器发命令，以得到反馈，减 轻后台数据传送压力。
①失去焦点、即时报错当某项录入项已录入完成并失去焦点时，触发系统校验（校验内容存储在远端, 程序需要完整的输入信息到远端进行检验，并给出反馈）并且尽量采用非模态反 馈的方式，避免打断当前任务流。

・ 缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改，稍 微影响用户体验。
・ 优点：降低用户的问题查找和修改成本，避免出现很多错误需要改正的情况。
注意：要清晰地描述错误并提供相应的解决方案，报错文案应该尽可能简短，用 户看到一大段文字,很可能会失去了去阅读的耐心，文案还应清晰指出错误的原 因，对于用户可自己修复的问题，应告知问题如何修正。
如果弹窗空间足够，可以直接展示图片样式，降低折叠度，避免用户二次点击, 减少了一步用户操作。
-H M ・

②操作/保存/提交/下一步时全部报错用户全部输入完成以后，点击下一步操作的时候将所有错误提示都展示给用户。

・ 缺点：用户不能及时看到反馈，及时进行修改，如果表单过长的话，会增加用户的问题查找和修改成本。
•优点：减少后端服务器压力，提高页面性能。
4.操作按钮操作按钮：表单界面操作的最后一步，填写完表单各项内容后，所要进行的操作 动作（eg :保存、取消、提交、确定等）来结束当前操作流程或在流程之中或 之后开启新的功能操作,在视觉上暗示用户可点击，提示元素可以是文字或者图 形，例如保存、取消、下一步等。
标签一般为每个输入项的名称片安所要填写信息的必要性又可分为必填项和非必 填项。
・ 必填项：用户必须要输入有效的文本信息，否则，该表单就不能正常提交、保存等 操作。
.非必填项：该项信息用户可填可不填，根据用户的意愿和需求度来自愿选择填或者 不填。
高频问题二：如果大部分都是必填项，还有必要标记必填字段吗？必填项or非 必填项到底有无必要标注。
通常设计师们会觉页面上每个必填字段都有一个标记都有星号会让页面视觉噪 音太重，让用户产生视觉疲劳，原本清清爽爽的页面看起来low low的。所以 一般设计师逃避星号的三种措施是：
1）给全局提示

缺点：用户一般会直接忽视这类说明，当用户填写字段时，用户视线会更聚焦这 项字段本身都什么要求，不太可能阅读到表单最顶部的填写说明，用户会讨厌读 各种说明，比如我们去到景区里面，不喜欢读景区里面的景区说明，在公共场合 也很容易忽视禁止什么禁止什么的标识，用户很有可能不会注意到表单最顶部的 说明。
即使读了之后会忘记，特别是当表单很长或者填写表单被打断的时候。让用户记 得顶部说明，会占用用户的工作记忆，增加认知负荷，加大用户填写表单的阻力, 让本身就具有挑战性的表单更是难上加难。
2）只标记占比较少的可选字段

缺点：用户必须扫描表单以确定是否为必填字段或选填字段，用户会扫视表单找 到一个标记为可选的标识，即时找到了那些是非必填也会很容易忘记，看到没有 标星的字段可能会做出假设。
用户可能会想："嗯，工作单位——不需要我的工作单位吧？先空着吧"，即 使用户不留空，也不得不暂停来思考这个字段是否需要填写，增加了用户的思考 和理解负担。
3、什么都不标注
1）标签/Lable说明：通常放置在表单字段之外或者字段内，对输入项或设置项的解释说明，可 用文字或图标表示。
作用：提示用户要输入什么内容，帮助用户快速理解每一项字段的作用。
2 ）表单域/Formfield说明：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等等。
作用：用来收集用户输入的信息，每个字段包含着某一类型的信息，是形成表单 的核心内容。
3 ）提示信息/Promptinformation说明：包含占位符、帮助信息、校验信息，后面会详细讲到。
作用：帮助用户有效正确填写信息的引导内容或反馈内容。
4 ）操作按钮/operatingbutton说明：当用户完成信息录入时，暗示可点击性，必须让用户一眼看出这个是可点 击的交互区域，一般情况占据最高的层次关系出音示整个界面的唯一目的和操作。
作用：提交内容到服务器，对表单内容进行校验、提交或者进行下一步操作。
缺点：什么都不做，让用户去猜哪个是必填项哪个是非必填项，他们相信用户自 己可以判断，如果没有填写必填项，提交的时候报错，让用户完善填写信息，当 给出用户提示的时候，用户都很有可能不按照规则填写提交的时候出现报错，毋 庸置疑，什么都不提示更加会提高用户出错的概率。
用户会通过必填标记来评估工作量，了解输入信息的最低限度，因此标记必填字 段是很有必要的，尽量清晰明确的展示每一个必填字段，尽管界面出现大量星标 时会让界面看起来不清爽优雅，加重界面的视觉噪音甚至重复的星号*会带 来一些认知恐慌和紧张感。但这些负面影响相对于必填项不标星的后果是可以原 谅的。
三、交互模式表单页面的交互方式分为以下4种：就地编辑、气泡卡片、弹窗、抽屉、页面跳 转，根据具体的使用场景选择合适的页面交互。

A +\ I

1 .原位编辑原位编辑是比较轻量型信息采集表单形式，适用于表单内容较少，使用频率较低 的场景，同时属于主功能分支的场景，表单操作后页面随即发生反馈改变，保证 用户对主要功能的高效操作，通过双击或点击特定的操作按钮即变为激活编辑状 态。
优点：操作便捷，不会打断还可单击空白处随时退出。
B-®±
B~9±wnttMM
tMA n tMfi
+Dnfi XVA ■攵r\]l\ll

hover下给到一个输入框来显示可以原位编辑。
加一个小铅笔的图标，可以是hover的时候高亮,也可以默认放一个小铅笔， 主要看业务上编辑的频次高频不高频，编辑和浏览那个需求更重要。
2 .气泡卡片点击或者鼠标移入弹出气泡式的卡片浮层。气泡卡片交互方式也是比较轻量化的 形式，气泡提示共有12种箭头方向，其对齐方式根据实际显示内容选择合适的 样式，所产生的表单页与当前的页面亲密性紧密相关。

i+ffljm

3-弹窗弹窗样式的输入表单是主要流程步骤中的分支流程，输入弹窗样式的表单，输入 内容的多少处于页面跳转和就地编辑两种样式之间，用户在不离开当前页的情况 下继续操作，是流程步骤中的分支行为，可由用户选择是否进行，不不覆盖用户 已阅读内容。
注意点：
在直播列表页点击新增直播或者在工作台点击新增直播，弹出的弹窗保持一致, 比如做直播的添加商品弹窗，不管他的入口在任何一个页面，交互出来的容器要 保持一致，如果新增一条规则，和新增直播这个无关，规则里面的内容比较多, 弹窗容纳不下的情况下，是可以用抽屉来承载内容的。
4.抽屉抽屉交互的表单样式是比较常见的交互样式，它的拓展性很强，承载的信息很多, 当前页面的分支操作，体现两页面之间的层级关系，信息承载量和页面比肩，又 兼具弹窗的优点，同时又有连续操作的优点。
1.标签指明用户需在此表单上要填写什么类型的信息，通常放置在表单文本框之外居左 或上方的位置，极少数情况下也会放置于文本输入框内，可用文字或图标展示, 标签的对齐方式一般分为左标签、顶标签、行内标签。
・ 内容比较多时，可以把弹窗换成抽屉
・ 强调详情可以连续查看可以快速切换列表，主要操作流程在一个页面中展示，保证主要功能的操作的流畅 度
5.页面跳转若输入内容特别多，超出了弹窗/抽屉的承载量时，建议使用页面跳转，页面跳 转的信息承载能力强，对反馈的及时性要求不高也没有那么强的关联性，常用于 岗位发布、创建直播、初始化入住等复杂信息的发布。
网删

页面跳转包含两种：新页面打开和当前页面跳转。
・ 新页面打开：主要流程步骤中的分支流程，页面功能具有独立性，不影响用户对主 流程的继续操作。
・ 当前页面跳转：流程步骤中的关键步骤，提示用户已进入下一步，关键流程建议在 当前页面打开，让产品主流程更加清晰，建立新页面会分散用户注意力增加用户的 迷失感，当前页面跳转则让用户更聚焦于当前页面的信息中。
尽量避免页面跳转，页面的跳转势必造成重新加载和刷新，这本身就会耗费一定 的时间，此外，跳转还会造成用户行为的中断，以及浏览的不顺畅。
四.内容布局在web页面中,由于页面的关系，导致跳转页面与弹窗的横向空间较大，纵向 空间不足，若出现较多的输入内容时，且不能采用分模块、分步骤、高级等交互 布局时，有的小伙伴会采用双列或多列表单，以提高横向空间的利用，这也是可 以的，要注意列与列间距的合理性以及遵守用户的视觉流畅，可以参照菲兹定律。
但是作为表单，单列表单的浏览及填写效率是最高的，用户的视觉流较为顺畅, 可以提升填写效率，同时能够减少用户的疲劳度，因此建议表单多采用单列布局。
1.标题分组
用户的认知成本会少很多，用户知道自己每填一步在干嘛，而不是密密麻麻一大 片，让用户完成表单时会有阶段感，降低用户自主归纳的成本，同时用户可以在 填写好一段内容后进行心理上停顿休息，减少视觉疲劳和心理压力。

・ 以必填项划分：若表单内有必填项和非必填项，且各项之前关联度不高，可采用将 必填项划分为一组进行优先呈现，该种方式有助于让用户快速发现自己需要录入的 内容。
・ 以相关性划分：若录入项较多，且各项内容之间存在明显的关联度区分，可考虑以 内容相关性进行信息分组，该种方式有助于让用户理解各项内容间的逻辑关系。
2 .标题+卡片分组如果表单里面已经完全区分不同性质和类别的时候，可以考虑直接用卡片，输入 组件、分类、分模块的排版方式让用户感觉更好，在视觉样式上进一步做归类和 区分，上一个是天然的间距区分，该种方式有助于让用户理解各项内容间的逻辑
3 .标签页卡片分组和标题分组都用到了，但是表单太多了，三个相对独立的，那么就用标 签页。
IllIIIIII■III III III { III
〔IIIIIWIII 1IIIIIII i
■删I!
Iillmillill(1 llllll M I 1(
4 .锚点定位
5 .步骤对于内容过多的表单输入组件，又有着明确的操作先后关系，可以选用分步骤, 一般不超过三步,每屏仅展示该步骤下的表单输入组件有些场景下，系统只需要 用户录入简单的信息，分步表单常用于输入项较多，业务本身具有流程化特性。
为了提高用户填写效率，减少用户心理负担，将一个冗长或用户不熟悉的表单任 务拆分成多个步骤，一步步指导用户完成，分步表单的流程化明显，后一步填写 的内容都是基于前一步来填写、是前一步反馈，分步表单可以缓解用户需要填写 较多内容时候的抵触情绪，并且通过拆分步骤，聚焦于每次填写的内容，提升用 户在不同模块间的浏览效率。
高频问题三：这么多不同的组合，那么不同内容布局之间的区别？如何排列组合 更合理呢？
1）标签页和锚点定位的区别
1 .标签页是切换不在一个页面，锚点定位在当前页面
2 .标签页可以独立提交数据，各提交各的，互不影响2）标签页和步骤条的区别
步骤条更强调顺序，先填什么后填写什么。
3）锚点定位和步骤条的区别锚点定位可以先填第4个再填第2个，锚点定位本质上是一个快速的目标传送 门，只是告诉你这个表单很长，有一个传送门可以让你看到后面的表单节点，有 点像鼠标的快速滚轮，让页面滚动的的快一点，而步骤条流程化明显，后一步填 写的内容都是基于前一步来填写、是前一步反馈。
五、结语春卷对B端表单设计的归纳与总结，把自己学到的经验分享出来，让大家有一 个更清晰的认知，希望对从事B端工作或者对B端知识感兴趣的同学有些帮助。 感谢阅读，欢迎交流~
本文由郝小七指导 http:〃
美芳 Mia《体验设计手册》：httpsM/ https://mp.weixin.qq.eom/s/eKLrUCsm2W12RORNdjqwUA
在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，他分别对标签左对齐、右对齐以及顶部对齐做了用户眼动追踪实 验，下图是此测试的眼动数据。
Matteo Penzo-根据表单标签对齐方式研究出来的时间表：