流程表单设计(简述设计表单的基本步骤)

编辑导语：在这个互联网时代，表单是每个APP必不可少的一部分。有时候，我们经常会接触到一些必须要填写的表格。整体设计比较简洁，视觉比较好，但是其他真的很恐怖，体验极差。那么如何更好的打造用户体验形式呢？本文就为你说说。
在大家的记忆中，填写一张既复杂又难操作的表格是什么感觉？是结构多变费时费力，还是内容量巨大，一项错就要从头再来？很多时候，当我们遇到一个超级烂的表单设计，却又不得不用它来完成任务的时候，只能机械地勉强填写这些字段。
表单是UI设计中非常常见的元素。无论是PC还是移动，表单几乎是不可避免的UI控件。用户可以通过表单完成网上购物、信息交流、文章订阅等任务，表单应用广泛，涉及方方面面。
作为表单信息收集的重要组成部分，它对用户和产品都至关重要。看似简单，其实很容易忽略用户体验。作为设计人员，需要根据触发条件和使用场景灵活调整文本信息、输入框、按钮等元素，保证用户能够顺利完成表单任务。因此，设计一个可用性非常好的表单是提高用户完成效率的关键。
本文将总结最常见的表单设计标准和用户体验，希望对表单设计有一个更全面的了解。
了解UI中的表单。1.什么是表格？表单主要用于收集或呈现数据、信息或特定字段。它们本身并没有属性，只是一个数据采集工具，需要灵活应用于不同的场景模块才能发挥其真正的作用，比如常见的登录注册、问卷调查、个人信息页面等。如何判断当前页面是否为表单页面，主要看页面的数据采集是否触发了用户的输入、选择、编辑等操作，从而控制部分内容。
2.表单构成(视角)除了系统隐藏的交互和程序规则，常用且可见的表单元素包括标签、输入区、占位符、图标和按钮。
标签：指定应该为此项目输入/选择什么内容。有些表单没有标签，比如登录页面，直接用图标和占位符提示输入的内容；输入区：用户交互的区域，通常由输入框、分隔符、选项框、开关等常用元素提示。占位符：用于描述详细描述、录入规则、注意事项等。当插入光标或输入内容时，占位符消失；图标：有图标的表单页面通常有复杂的次级任务，伴随下拉框、弹出框或页面跳转来完成前置条件；按钮：表单中的任务按钮(非保存/提交)与单选功能相同，用于选项较少的表单内容。
3.表单的各种状态表单基本上要经历三个阶段，即交互前、交互中和交互后的三个状态。
预交互：表单是用户不做任何事情时的默认初始化状态；中：当光标被插入时，它将成为焦点，占位符将消失。输入内容时，输入框后面会显示一个一键式清除图标。交互后：输入完成后，光标离开。验证内容如有误解，前端会立即反馈。如果没有错误，将返回正常输入状态。
二。模板元件的拆卸和设计细节1。结构/框架首先从视觉上看，无论输入的字段有多少，都不要在同一行中添加多个表单。最好的格式是单列显示，方便用户浏览和理解。尽量避免多栏显示，除非有强相关的前提条件，比如：输入手机号码前要选择国际电话区号，可以将区号和手机号码汇总到同一个表单项中。
其次，表格的内容要先易后难，避免一开始就有逃避的想法。需要引导用户根据内容的相关性逐步完成。比如添加地址，常见的顺序是姓名、电话、地区、详细地址。一开始就要求用户填写详细地址是不合理的(不是不可能的)，这无异于颠覆了用户的认知。即使完成了表格内容，也会有些“上纲上线”。
最后，当同一个页面上的表单过多时，需要根据类型、相似度或上下文进行分组，以保持页面的节奏，让用户在最短的时间内对整个页面内容有一个大概的了解，从而更加轻松地完成表单。另外，要填写的内容尽量低。如果其重要性较低，不如直接删除。如果没有必要，就不要添加实体。
2.标签用来告诉用户在当前表单中输入什么。清晰简洁的表格可以让用户更快的理解。标签的长度决定其对齐方式。通常标签中的字数在可控的情况下可以左对齐。字数不可控但不太多的情况下使用右对齐；在字数不可控，标签长短不一，差异较大的情况下(比如在英语中，大部分是不可控的，不均匀的)，使用顶部对齐。
3.占位符占位符主要描述标签或者提示内容格式。它不是内容，而是帮助用户解决输入内容前的常见问题和误解，从而提高表单的完成效率。
并非所有表单都需要占位符。有些设计师喜欢让占位符和标签保持一致，真的没必要。如果只是为了视觉上的统一，用“请输入/请选择”这样的通用提示也不错，或者在后面加上推荐的措辞，否则留空。光标插入时，尽量保留占位符，输入内容后再消失，这样用户在输入内容前仍然可以通过占位符获得帮助。
这里需要解释一个误区，避免直接用占位符做标签。如果只是针对登录页面，用户可以理解，因为它的内容比较通俗，容易理解账号密码和一个额外的验证码。但是，其他类型的表单页面很容易混淆用户。在输入内容时，随着占位符的消失，很容易忘记表单的内容属性，增加了用户的理解成本和难度。
4.输入光标开始插入，如果能让用户选择就不要让码字输入。比如输入手机号码，提供通讯录条目供用户自行选择。尽量减少要输入的内容，通过已知信息预测内容，帮助用户自动输入。例如，国际区号应该在手机号码之前输入。如果产品主要服务于国内用户，系统会自动输入“86”，可以节省大部分用户的操作成本，降低填表难度。
内容在表单中存在后，需要在后面提供一个一键清除图标” “，因为系统提供的删除功能只能通过单个文本来清除。
要输入的内容设计一个标准格式，如地址“广东省深圳市龙华区”和手机号码“138 888 8888”，每隔一段时间区分一组长号码，更方便浏览和记忆。
5.键盘键盘是内容输入的重要组成部分。很多情况下，产品会允许用户在系统输入法和第三方输入法之间自由切换。基于常规操作似乎没有问题，但从用户体验的角度来看，需要根据不同的使用场景开发内置键盘。
有些认证或密码操作只需要输入纯数字，所以调出内置的纯数字键盘可以减少无关元素(字母/符号)的干扰；出于安全考虑，与财产相关的密码需要在键盘数字/字母顺序上打乱顺序。虽然会增加用户的理解成本，但相对于财产的安全性，显然是在可以接受的范围内。
6.当系统设置了多个表单内容时，它将以选项的形式供用户选择。选项应该以不同的方式显示，如按钮，弹出窗口，第j页
按钮：当选项不超过6个，单个选项在4个字左右时，可以设计成按钮样式供用户选择；弹出窗口：当选项较多时，使用操作栏的弹出窗口进行显示；跳转页面：如果选项太多且不可控，使用跳转页面的方式体验会更好。
7.提示提示是用户在操作前对内容输入可能产生的混淆或误解。当占位符不足以表达清楚时，可以在标签后面添加一个图标。用户点击后，可以通过弹出窗口或新页面查看详细解释。
8.数据验证分为前端验证和后端验证。前端验证不需要服务器传输数据。程序写了验证规则，可以在光标离开时进行验证(就像玩单机游戏一样)，比如内容格式、长度、文本类型验证等。后端验证需要将表单内容发送到后端数据库进行匹配。如果与数据不符，验证就会失败，比如账号不存在，密码错误等。
反馈要遵循就近原则，错误提示要显示在对应的表单项附近，以便用户及时修改。另外，可以不用直接清除错误信息，而是用颜色(标为红色)来区分对应的信息或输入框，这样用户在原有基础上进行更改效率更高。想象一下，当你一口气输了30个数字，又因为输错一个而不得不重复之前的操作次数，是什么感觉。记住，决定权永远是留给用户的。
三。临时储存和交付规则1。临时存储意味着用户需要离开当前页面而不发送输入内容(提交给系统)。系统提供的防止用户再次输入已填写内容的预防措施，可以防止用户因为重复输入而放弃。我们需要根据用户的实际使用场景来确定是否需要添加临时存储功能以及不同的存储方式。
我曾经遇到过这样的问题。当我在微信上的一个微信官方账号完成了一大半的超长表格，需要在微信里获取一些信息，不得不回到对话列表(当时还没有浮动窗口功能)，无奈只能回去查看，祈祷输入的内容能保留下来。结果……不出意外就被清空了。换了个姿势又回来了，于是下载了相应的APP，完成了刚才的重复操作。当我在微信里得到信息，回到一个APP，发现进程已经结束，% # @ …，卸载。再见。
出现这些问题的原因有很多，可能是设备问题，也可能是自己的不良习惯。但作为设计师，在设计过程中，虽然问题无法回避，但确实需要提供解决措施。可能有人会说，这些小问题不属于设计范畴，是程序控制的，用户有各种习惯。即使提供预防措施也未必能增加用户的忠诚度。我想说明的是“解决问题不一定能留住用户，但不解决问题一定能留住用户”。
在特定的表单页面中添加临时存储功能，可以在一定程度上改善体验。基于不同的场景，从手动存储、自动存储和查询后存储三种方式进行分析，以保证临时存储的合理使用。
1)手动存储
手动存储不是信息提交，是指用户在填写表格中途需要退出时提供的临时存储方案。最常见的是在页面右上角或页面末尾提供的“草稿箱”功能。存储后，下次可以从草稿框中输入，然后进行编辑。用于多B端或工具型应用，比如我们需要发布民调、问卷、活动等。可以按照预先设置的条件和规则临时保存到草稿箱中，需要时可以从草稿箱中编辑或发布。
2)自动存储
需要自动存储用于填写内容过多的表单页面的数据。当遇到系统崩溃、网络故障、应用闪退等突发事件时。没有手动存储的机会。也许花了很长时间才完成的内容又要重复一遍，真的让人崩溃。例如，复杂的表格，如在线申请信用卡和贷款，需要填写各种信息
当用户没有发送内容就返回/离开时，会触发系统的弹窗提示“是否要保留内容？”，相当于手动存储的强提醒。我们在微信朋友圈编辑内容，不发布的时候都有这个提示。
2.发送方式在表单页面，可以设置各种操作按钮，如上一步、下一步、草稿箱、提交等。除非有特定情况，一般不提供前一个操作，即使提供也会被弱化，因为前一个操作意味着用户可能会跳出，左上角的返回可以代替前一个操作，满足用户的基本需求。如前所述，草稿箱属于临时存储功能。
这里的发送是指调用下一步、保存、提交或确认等按钮向系统提交表单内容，并根据不同内容的重要性，赋予按钮不同的位置，起到不同的作用。最常见的方法是固定页面的右上角、固定设备的底部和固定表单的底部。
1)固定页面的右上角
这是一种常见的文本按钮形式，多用于表单内容较少的页面。当表单比较复杂重要，需要通过身份验证来填写时，为了不影响用户的注意力，也可能会放在右上角来削弱发送按钮的视觉吸引力。
2)固定设备底部。
方便用户随时点击。它通常用于内容不太重要的表单页面。通常，可选项目是多余的。这种设计方法具有很强的视觉感染力，可以降低用户的跳出率，促使他们快速发出表单内容。
3)表单的底部
表格内容长，重要性高，大部分必填项都需要填写。只有下拉到最后一个表单项才能看到发送按钮，可以起到引导作用。对于内容较少的表单，按钮离内容最近，用户可以连贯操作，没有太多的视觉跳跃。
通话按钮的文案一定要清晰简洁，让用户快速明确按钮的功能和意图，不要让用户胡思乱想。
四。提高表格完成率的小技巧。1.识别比输入快。技术的发展依赖于人的不断利用和优化，善用技术的力量更快。凡是能给用户提供便利的，绝对不会让用户频繁操作，把所谓的麻烦留给技术。回报不仅仅是用户完成了这个任务，更是一个良性循环。
技术能解决的问题，绝不会留给用户。在许多情况下，使用识别代替输入可以提高用户填写表单的效率和体验。比如身份证扫描可以自动识别输入个人信息，银行卡照片识别卡号，系统自动定位等。可以帮助用户省去很多不必要的操作。
2.微互动可以让操作过程更有趣。我相信没有人喜欢在无聊的时候填一些资料提交给别人(除非让TA收钱)。用户为了完成某个任务而被迫填写表单，所以过程会有些枯燥。在表单中适当加入微交互，可以让整个交互过程更加有趣，引导用户。比如用户第一次进入一些应用设置个人喜好时，系统会让用户以单题的形式回答，丝滑跳跃的交互效果会给人非常流畅的感觉；当哔哩哔哩登录并输入密码时，顶部的卡通人物会用双手遮住眼睛，给用户一种安全的心理暗示。
3.提前告知必要的材料，让用户做好心理准备完成表单的主观意图在于，用户基本上对结果有一定的心理预期，所以在用户正式填表之前就应该告知必要的材料。如果需要身份证，毕业证，银行卡等。完成一个表单，如果用户频繁被打断寻找这些资料，会逐渐失去耐心，半途而废。提前告知用户，可以让用户有一定的心理准备，从而接受度会更高。
4.提前告知奖励，让用户完成表格的主观意图是产品预期的时候(与上面相反)。为了打赌
比如在获取网上理财产品额度的时候，没有人会提前告诉你必须用身份证进行实名认证。即使是必要的，产品也会先要求用户提供一些不那么重要的证明材料，然后逐渐导向重要单据的信息录入。当用户即将完成表单时，对后续必要需求的接受度会逐渐增加。毕竟没有人喜欢在最后一步放弃。比如申请信用卡，没有一家银行会用非常醒目的提醒你需要查询征信。即使有微弱的提醒，大部分也会被忽略。
虽然不能太清楚用户的贡献，但是可以告知用户可能会获得特权、奖励等。在填写表单之前，让用户有所期待。基于人性和人心的弱点，产品可以通过利益和奖品来报价，吸引用户满足产品导向的形式需求。
(PS:不要杠，如果用户来反驳我接受；如果你是设计师，用产品现有的好处做诱饵已经屡试不爽了。这就是为什么推荐信用卡会带几个行李箱，问卷会附赠周边礼品，无论成功与否)
动词（verb的缩写）常见误区和避坑指南1。减少不必要的表单项PM永远认为每个表单项都是必不可少的。不知道每增加一个选项都会增加用户的时间成本和操作难度，可能会导致用户的流失。仔细分析后会发现，并不是所有的表单项都是必须的。虽然有时候由于特殊情况，我们需要尽量减少表格项。
如下图，需要身份证，使用技术完全可以从身份证号中提取出生日期；它的手机号、邮箱、微信、QQ都不是用户填写的目的，获取联系方式才是主要的。手机号(必填)和微信(主流)完全可以满足用户联系方式的信息采集，不需要设计复杂冗长的表格让用户填写。
2.将相关的表单项组合起来，将相关信息组合成一个表单项，不仅使用户输入的一致性更强，有效节省界面空间资源的占用，而且使表单更有条理，减轻用户的认知负荷。例如，时间/日期、区号/电话号码、省/市/地区等。
3.隐藏无关信息。如果用户打开一个表单的第一感觉是内容太多，可能会望而却步。他们要隐藏不相关的信息，剪去无用的字段(如果信息太多，分组分页，后面会讲到)。合理控制表达的复杂度，可以减轻用户的心理负担，必要的信息会在用户需要的时候出现，有效减少用户完成其他表单项的干扰。
4.分页和分组的合理使用。当我们隐藏和删除大量内容时，表单仍然是巨大的。请记住，不要一次向用户显示所有内容。过长的表单需要更多的时间来完成，这可能会导致用户不知所措，心烦意乱，放弃填写。此时，所有的表单项都需要分组，并在必要时分页。
将超长的表单任务按照特定的逻辑和属性划分为若干个小任务，并逐页显示，同时显示操作进度，这样会让用户感觉更容易填写，使操作过程更加连贯流畅，对整个表单形成明确的预期，有助于用户专注于当前的选项。
细心的设计者会发现，目前一些应用对登录页面的手机号/验证码输入进行分页。主要原因是点击获取验证码后需要等待接收短信，等待的空档期会让用户感觉效率慢。分页后可以掩盖跳转页面时的少量等待时间。从某种意义上来说，分页操作的流畅度会比在同一页面上等待更多信息完成的流畅度“更高”(这个说法不同但未证实)。
对超长表单的内容进行分组分页固然可以提升体验，但也不能过于细致，刻意增加操作步骤，否则可能会惹恼用户，留下一个全新的问题。
5.标签与输入框视觉关联原理告诉我们，元素之间的相对距离会影响用户对其关系的感知。彼此靠近的对象被认为比彼此远离的对象更相关。
根据原则，同一组表单元素应该靠得更近，以反映内容的相关性，并确保界面层次清晰，用户不会混淆。
6.字数限制要实时提示。对于可能输入内容较多的单个表单项，需要实时提醒用户可以输入的剩余字数，避免用户在输入完成后发现内容翻倍而勉强重组语言。这种情况经常出现在长格式的条目中，如备注和介绍。另外，在自定义注册账户和密码设置的简表项中也会遇到。
7.内容长度应该与输入区域的高度一致。无论内容多长，重要的表单内容都要完整显示，比如个人简介、详细地址等表单项。可以说，仅仅因为内容太长就把后面的部分隐藏起来是非常不友好的。用户甚至无法完整预览输入的信息，确认信息的对错。记住，如果你不想让用户一开始就输入太多信息，那就编程控制，给出相应的提示。
虽然表单输入区域的宽度是固定的，但是高度可以自适应调整，以保证信息内容的完整性，保持良好的体验。
六。总结以上是笔者对表单设计的体会和总结。希望对大家有帮助。在设计表单的时候，我们需要用结构化的思维去思考和分析。视觉只是整个体验的一小部分。如果只关注表面，很容易复制出优秀的形式风格，却无法理解其背后的设计价值。毕竟我们在开始设计之前，总会思考为什么。
很多时候，有些人可能会觉得一些小的表单细节无足轻重，即使能起到作用，对于1%、1、甚至1%的用户来说，也可能只是杯水车薪。但是你有没有想过在一个应用程序中可能有100或1000个可优化的点…有时候不是很好，但是只要比上一次好，就不要犹豫，换掉。
#专栏作家#沙漠之鹰；微信官方账号：能量眼，人人都是产品经理专栏作家。致力于产品需求的驱动，产品体验的挖掘，用设计的手段给受众带来更好的体验，就是好看，好用。
本文由人人作为产品经理原创发布，未经允许禁止转载。
来自Unsplash的图像，基于CC0协议。