2024-5-15 资深UI设计者
走进一家商店，我往购物篮里塞满了东西，却找不到收银台。我可能会一分不花的离开。犹如在支付过程中遇到糟糕的表单设计一样。
想象一下，你走进一家商店，往购物篮里塞满了东西却找不到收银台的感觉。最后你可能会放下所有东西一分钱没花极其失望地离开了。同样，这种情况也会在网络支付体验或者在表单设计中遇到。
哈哈，糟糕的表单会替我们省去好几百美元。冗长、繁琐的表单可能会吓跑你的顾客，你的公司也因此流失几千美元。
表单看起来确实是最简单的UI组件，然而却处理产品中最重要的交互体验。它们引导你的用户去注册和支付。
我不需要告诉你这些步骤在精细化运作的企业中扮演的多么重要的角色。我想告诉你一个好消息：做好表单设计不是那么艰难。
在这篇指南里，我收集了33个我们可以立即应用的最佳实践方法。找到对你有用的且适合的方法，在测试方案作为非常棒的出发点。
我会介绍以下几个方面的内容：
提示词
移动端
输入方式
使用技术
合理布局
细节之处
让机器像人一样对话，提示词是非常重要的。只要增加或者调整表单设计周围的微文案，就能大大的提高转化率。
UX Microcopy（交互微文案）：专业术语，应用程序和产品上发现的微小复制品。这些简短的句子告诉用户该怎么做，解决用户的疑虑，提供有关情况的上下文信息，并帮助讲述有关您的品牌，产品和经营方式的更多故事。
“在业余时间，我喜欢填写不同的线上表单。我就是喜欢填！”从来没人这样说。用户需要明确的知道把他们的时间投入到这样一个不合理的活动里有什么好处。
在结账过程中，好处非常明显，但是注册呢？在表单的顶部突出显示他们一旦注册完能做什么。他们可以访问独家内容，社区或者免费试用。不要回避这些，让他们为此兴奋。
Marvel 显示他们的大客户和用户数来展示他们的社会认同
我们每个人都希望归属于某个地方。需要知道一个产品是否值得我们投入时间、金钱和精力。并证明其他人和我们加入了这个俱乐部一样喜欢这里，这对你的项目是巨大的帮助的。
你的产品上有大牌吗？在注册表单的旁边就展示这些品牌。你已经拥有了多少用户？它会让原本犹豫的访客对注册感到安心。
“发生了错误”。好吧，谢谢，我发现了...但是，我已经看了很多遍了？这让我非常受挫，没有提示我哪里出错了。是有人占用了我的用户名吗？还是密码强度设置的不够？给你的用户错误的指示尽可能的明确。
细节详情是什么呀？
发生出错。哪里错了，就显示在哪里。假设用户提交了表单，有三处错误，然后全都显示在顶部。这种情况下，用户需要重新浏览整张表单，找出需要注意的地方。
在上下文显示错误提示，不要忘记考虑色盲的用户。不仅只使用红色文字强调错误字段。图标是万无一失的选择。推荐读者阅读更多关于易访问性的文章。
用户应该对他们的接下来的操作所会产生的结果一清二楚。弃用那些常规的行动按钮文案吧，比如“提交”、“确定”、“继续”。描述用户将采取的操作指示，可以考虑比如“注册”、“立即付款”、“创建账户”。
你可能认为当用户按下“下单”后，整个表单的设计工作此就结束了。并没有！用户还需要清楚已操作成功的明确反馈。并且还要让他们知道接下来的还有步骤和引导。
例如，有用户在你的网店里下了单，显示支付成功和订单页面。其实还可以提供预期下一步的时间提示，比如产品什么时候发货等。
优化移动端表单有两个方面：
1、我们需要额外的注意某些事情
2、手机有很多功能，会让填写表单变得简单些
在你的设计上多花点心思。这个章节提供一些的实用案例，专门用于改进移动设备的表单设计。
周日晚上，我很喜欢在电视上看NFL比赛。球员的运动能力总是能让我惊讶，就像他们的接球技术一样。他们需要一双大手去接球。这些橄榄球运动员可能是你下一个客户。
这些家伙看起来很强壮，所以你不希望你表单上的小小点击框让他们生气。谷歌建议最小区域为48x48px，这是一个很好的标准。
在用手机填写表格的时候，大约99%的用户都有可以正常的使用相机。你有没有考虑过利用它？
只需点击一下按钮，他们就可以扫描身份证或信用卡上的信息，否则填写这些信息是需要花费更长的时间。更进一步，再进一步，可以考虑一下使用GPS或人物特征识别。
如果你希望用户填写邮箱地址，激活输入文本的时候，打开文本模式的键盘状态，如果他们需要输入电话号码，应该显示数字键盘。
这只需要花一点心思，就能节省用户宝贵的时间，不需要他们自己来回切换键盘。这还有助于他们了解您期望的输入类型。
谷歌和苹果在设计UI界面控件方面投入了大量的研究。多数用户养成了习惯，因此除非你有充分的理由反对他们不这样做，否则请坚持使用本机控件。
看上去这个不值一提，但实际上最好并那么容易。不要让用户从200多个下拉列表中选择一个国家，或者从下拉列表中选择“是/否”，这会让你的用户陷入困境。
复选框、单选按钮、下拉菜单、短文本和长文本输入——在表单世界里都有自己的位置。要确保在适当的时候使用它们。
节假日即将要结束，你很有可能网上订购了一些礼物送给好友。你要选择发货到某个国家和地区。这个时候，却需要从滚动条里200多个国家里找到你所需要的那个，这个真的很恼火。
再设计表单的时候，最好让用户从预设列表里输入并选中国家。这需要研发多做一些额外的工作，但是你的用户会为此感谢你。
为什么不让提示更进一步呢？花点时间思考用户可能遇到的场景。
一个居住在英国的用户可能下意识的输入“苏格兰”，然而理想中也应该可以看到“英国”作为一个建议条目出现。
考虑这些场景并花些时间开发这种逻辑，这样用户就不用去猜测准确的措辞了。
Liligo符合用户期望，即使查询标签是“Scotland”，也会显示“United Kingdom”的结果
下拉菜单对于长表单还是短表单都不是最佳的解决方案。为什么要让用户每次填写是或否的时候，需要点开一个下拉框呢？
少于6个条目的时候，使用经典的单选按钮就好了。一个好的用户体验，用户扫描一次排列会感到更轻松。过多的下拉框可能变得更糟糕。
很多表单还在使用错误的日期输入方式（最常被请求的信息之一），有多少次选择年龄的时候，预设初始状态在1900年？
这些网站要么认为他们的大多数用户是100岁以上，要么他们根本就是不在乎。我倾向于后者。在移动端设备上，使用默认的时间选择器或者使用格式输入。
请注意预期日期的格式，根据国家/地区而异。在数字键盘上（甚至移动设备上）输入8个数字都能比3个下拉框滚动要快得多。如果坚持使用原生iOS或Android日期选择器，请确保有一个实际的默认日期，而不是1900年或当前年份。除非你在为百岁老人协会的年度晚会设计申请表。
你可能想牺牲输入框的长度，但请记住，短的输入框对于邮编或CVV代码来说更好用。
当你希望用户键入更长的答案时，请使用更大的文本框。有时把这些长短不一的输入框放在一起，要设计的很漂亮是个挑战。但是，嘿，我们喜欢挑战！我们成为了设计师，不是吗?
在手机上输入密码尤其烦人，所以不要让用户重复输入。为什么要让他们确认密码呢？想要确保他们的密码没有打错吗？
在输入框旁边放一个小眼睛图标(或“显示密码”文本)，这样他们就可以看到自己输入的信息。越来越多的网站使用这样的解决方案。
设计表单的时候，第一个要注意就是：不要偷懒！仔细考虑开发表单可以节省很多时间。
想一想当让用户无需输入信息，从已有的信息中能获取什么。有些解决方案肯定会占用更多的开发资源，但是你的用户会因此更满意。
如果用户试图使用已获取的邮箱地址注册，这可能意味着他们以前已经注册过。为什么不给他们提供一个快速登录的方法呢？预填好邮箱地址，这样他们只需要输入密码。
这个有些笼统，其实这个实际要取决于你什么时候使用智能默认值。你可以根据IP地址、设备语言甚至某些情况下的设备位置进行猜测。每次设计表单时，都花几分钟仔细考虑所有这些项目。
当在开发我们的产品UXfol.io时，我们的开发人员代替我们的用户来做繁重的工作
有时验证码让人感到很厌烦，但我们仍然需要用它来避免数据库中沉积数千个虚假账户。然而，一些更好的、不那么烦人的解决方案也可以做到这一点。当考虑使用验证码时，在实行最懒的开箱即用的想法之前，考虑一些替代方案。（总结了9个不会破坏用体验的验证码替代品方案）
电商店主需要获取用户收获地址。可能需要让用户输入所有内容，然后在末尾输入邮政编码。或者，先从国家开始(因为邮政编码在全球并不是唯一的)，然后自动填充州、城市，在某些情况下甚至街道信息。所以，你可能需要一个第三方插件。
电话号码填写就是一个很好的示例：我们必须确保以正确的格式储存数据。从用户那里接受多种格式的电话号码（包括其他信息），然后自行标准化。如果做不到，至少提供一个你期望的清晰的格式示例。
这听起来很简单，但仍有很多表单忽略了这一点。如果用户输入了错误的邮箱地址，请在提交表单之前显示错误。
注意了，不要验证得太快——当你还在打字，但是表单“大喊”你输入了一个无效的邮箱地址时，验证会变得非常烦人。“嗯，好的，你能等我打完字可以吗？谢谢！”
以下技巧会更为通用，在收集用户数据时，基本上可以在任何情况下使用它们。与上面的一些技巧不同，它们不需要太多研发的能力，只需要好的设计。精心设计的表单总是从精心选择的布局开始。
近年来，使用表单标签作为占位符文本变得非常流行。在许多情况下，它很好用，因为它确实使设计更干净。但是想象一下，一旦您的用户填写了这些输入框，他们就不知道每个输入框应该包含什么信息了。
在某些情况下，比如电子邮件地址，可能看起来很明显，但是容易把姓和名搞混。所以即使你决定使用标签作为占位符，也要在字段被填充时让它们还是依稀可见，就像谷歌建议的那样。
谷歌展示标签的建议(Material设计规范)
“市场部让我这么做的！” 是的，我知道我们可能会被施加很大的压力，甚至要求用户提供鞋码。我们拥有的信息越多，我们就能更好地细分我们不同的信息等等。
但是，填写一张满是不必要的信息的巨大表单不仅让人感到沮丧和恐惧，还会让用户产生不信任。想象一下，你刚刚在酒吧里遇到一个人，简单聊了30秒，他们开始问你一些私人的问题。
不要询问一些你不需要的东西，或者至少让它成为可选的。如果您真的需要这些信息，请与用户沟通你的理由，并告诉他们这会如何改进他们的体验。
渐进式分析提供了另一种选择，当您在用户更加关注您的产品之后，再收集额外的数据。
无需使用星号来标记必填项，而是明确的标识可选项。
长表单设计确实面临更多挑战。不管你怎么努力，有些情况下你不得不要处理很长的表格。在这种情况下，有两件事可以帮助获得更好的完成率。
首先，可以按照相关字段分组。一组是个人信息，另一组是地址。
还可以考虑将表单拆分为多个步骤，这样就不会在开始时有大量输入框吓到用户。如果这样操作，请确保使用进度条来显示剩余的进度。
研究表明，标签在输入框左侧，用户在填写表单会变慢。想象一下，当你填写表格的时候，你的视线会关注整个地表单（视错觉了）。垂直地堆叠所有的标签会增加表单的高度，所以使用标签作为占位符，只有在填充字段时移到顶部。就像谷歌建议的那样。
表单的总体布局也是如此。如果输入的字段是多列的，用户的视觉也会受到干扰。只有输入单列的字段就会快得多。当然也会有例外，当一行中需要多个字段的时候（比如姓和名），通常输入时单列会增加高度，让它也能更好的体验。
除了吓到用户的表单之外，可能还包含不同类型的数据，其中的某些数据更敏感复杂。从用户觉得容易的常见的开始填写，让他们放松下来，然后去做那些需要更多参与的事情。
做到这一步，可以表明你有心致力于改进表单的用户体验。其实并不是每个人都会做这些，这些可以锦上添花，它可以让用户尖叫。如果你的目标是打造最好的表单设计，请继续阅读。让我们继续，好吗?
这可能是我最喜欢的一条，也是我的一个项目，执行起来并不复杂。许多网站对于密码应该包含的不同字符有严格的规则。一些网站在提示框里显示了这些规则。这不是最好的做法。
用户只有在输完常用密码之后，才会知道密码的强弱。更好的是，在用户输入时，实时更新它们。这样就更容易发现用户缺少什么的字符。
Mailchimp在用户键入时主动更新列表，帮助用户输入足够强度的密码
当你试图提交一个表单时却发现没有填写所有必需的字段，这非常令人沮丧。如果你正确地标记了必填和选填框，你可能可以避免这种情况。
禁用“提交”按钮（你不会给它标记成“提交”，对吗？），直到他们填完所有内容，这是另一种方法将焦点转移到剩下部分。
如果你的业务中包含在线表单，那你的客户很可能非常多样化。你不想让他们中的任何一个感到被排斥？我们可以就此主题写一篇完整的文章，所以让我快速地给你一些提示。
首先，不要验证名称 —— 系统读取一个无效的名称，你会有什么感觉?
性别是另一个敏感话题。在你的公司里，至少有一个人可能会说，要准确定位客户这些信息是绝对必要的。但这是真的吗？
越来越多的APP和产品已经停止询问了。所以，建议一：不要问。如果你这样做了，让它成为可选的。对于后者，为那些既不是男性也不是女性的人提供一种选择。你可以很容易地使用“其他”选项（尽管这个标签也可能冒犯）。
更进一步，可以像Facebook那样添加一个自定义输入框。最后但并非最不重要的是，不要忘记可访问性。确保用户可以使用键盘浏览表单，并找到足够大且具有足够对比度的标签。
我非常喜欢MacOS的这个功能。为什么不把它也用在你的表格上呢?当输入密码时，我们有时会不小心按下大写键。我们都会遇到，为什么不提前提示用户，为用户节省几秒钟呢?
最后，如果你阅读到了这一点，那么你已经迈出了第一步：承诺在产品中设计体验好的表格。
其中一些技巧可以提高表格的完成率，或者只是减少用户填写表格的时间。有的是一些细微的调整，这些细微的调整显示了你的关心和共情。除了让他们看到你珍惜他们的时间之外，还有什么能使用户更爱你呢？
我已经介绍了33个技巧-让我知道最让你兴奋的一个尝试是哪个！在下面发表评论。我们总是喜欢听听这些小指南如何帮助你改善产品的体验。
翻译作者：大蛤蜊
编辑审核：TCC翻译情报局
链接：https://www.zcool.com.cn/article/ZMTE0NTU5Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发