B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的精确性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。

一、表单的定义

表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。

针对互联网表单设计，我倡导的原则如下：

1. 尽量减少痛苦；
2. 说明填写完成路径；
3. 考虑情境；
4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构，表单主要由5部分组成：

1. 标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。
2. 标签：告诉用户相对应的输入字段的含义。
3. 输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
4. 提示信息：包含帮助信息、占位符和反馈信息提示。
5. 操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。

1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

• 优点：有最快的浏览和处理速度，同时标签长度弹性大。
• 缺点：非常占纵向空间。

2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。

浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。

左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。

此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。
• 缺点：填写速度慢，标签长度和输入框弹性小。

3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。

对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。

与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：时间较短，节约纵向空间。
• 缺点：整体可读性低，标签长度和输入框弹性小。

4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。

内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。

另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。

• 优点：空间占比小。
• 缺点：在增加错误的可能性。

5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。

此外，输入项一多，还得记忆那个图标所对应的意思。

• 优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。
• 缺点：可能造成用户的认知负担，增加用户记忆成本。

6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。

但相比其他几种标签样式来说，需要一定的开发成本。

• 优点：空间占比小，无需用户对标签进行记忆
• 缺点：需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。

选择适合的控件样式，能在一定程度上提高表单填写的效率。

在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。

1）文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议：

a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。

b. 采用字段掩码，自动匹配特定数字的输入格式。

例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。

d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。

例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。

f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。

知识扩展：什么是7加减二法则？

早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。

针对多行文本框的设计建议：

使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。

2）选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议：

a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。

为什么？

因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。

例如：根据定位数据预先选择用户所在的国家/地区。

不过，请谨慎使用。

b. 当选项很多时，提供检索功能。

c. 提示信息要明确，要让用户明确自己选择的是什么。

3）单选框与复选框

a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解，容易区分。

c. 尽可能提供默认选项。

4）关于控件的选择

a. 选择框优于输入框。

任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。

• 一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；
• 另一方面：减轻用户的认知、记忆负担。

相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。

另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。

因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。

下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。

若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。

5）关于必填项

大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。

但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？

它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。

为了避免这种误解，可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。

这里主要想讲讲错误提示的设计：

1）关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。

因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子，如下图：

当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢？

答案是：右边。理由如下：

a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。

但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示，有着更高的认知负荷。

当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。

当然，如果开发时间有限，都选择放置下边也可以，方便适配。

2）帮助信息

有时候需要帮助性信息，来辅助用户完成表单填写。

当文本简短的时候，可以直接放在改输入框的附近。

当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。

也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。

如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：

• 客户1：“单列右侧空白区域过大，留白多，表单太长啦。”
• 客户2：“单列纵向占比大，表单太长，我看不到全部内容。”
• 客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：

方案一：采用4列布局，标签顶对齐。

那为什么标签不采用右对齐呢？

四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。

总体上来看，缩减的长图并不理想。

方案二：三列布局，标签右对齐的方式。

由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。

但字段若出现换行，则页面信息模块是混乱的。

根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。

同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。

综上，最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决？

我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样，用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理：

• a. 采用卡片式布局，区分内容；
• b. 增加引导式的定位锚点；
• c. 在锚处加入微动效反馈，给予用户确定感。

感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。

如果你还有什么好的想法和建议，可以在评论里留言讨论。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

表单设计好，可以差多少？旅游网站Expedia曾经分享过一段经验：在他们的订单页面中，部分使用者填写了旅游地点、旅馆、付款资讯，并按下「立即购买」后，却并未成功完成交易。经过调查后发现，原来是在姓名栏位后面，还有一个非必填的栏「公司」，而部分使用者却误以为这是要写「银行」的「公司」名称；更糟的是，使用者会在紧接着的地址栏填写银行的地址。

当后续在验证信用卡时，如果核对了地址，就会因为填写的并非刷卡人的地址，而导致刷卡失败。他们在新版本中把这个栏删掉，猜猜看差了多少？根据他们所述，只是删掉这个栏位，就帮他们一年增加1200万美金的收入！就一个选填栏位…
相信大家也认同表单的重要性，然而以下几个问题却仍是十分常见：

1、要求使用者填写非必要的信息

我们有时会要求使用者多填写一些信息，通常是为了后续拿来统计、分析之用，然而这真的是必要的吗？与其干扰使用者完成目前最重要的任务，是否可以减少需填写的资料，让使用者专心填完？我们或许会认为，把一些栏位改成非必填就搞定了，使用者可以不必费心写嘛！然而看看前面Expedia 的例子，其实使用者所理解到的信息，有时会与我们想像的不同。

要试用IBM 的新产品，需要填写许多栏位，然而这些真的是必须的吗？

2、送出表单的主要按钮（Call To Action）不够明显

填完表单之后，除了提交表单、前往下一页的主要路径之外，通常还有像是取消、上一步之类的次要路径；常见的错误之一，便是让次要路径的按钮太过抢眼。次要路径的按钮或连结，只要找得到即可，不需要过分强调颜色；同时要让主要路径按钮的大小、颜色都能让它容易被找到。

取消按钮用红色的设计，过于抢眼而可能导致误点

把主要路径的按钮标示清楚，次要路径找得到即可

3、没有说明清楚提交表单可以得到什么价值、又会付出什么成本

有时候使用者放弃填写表单，并不是因为我们的产品不符需求，而是使用者花了时间，却仍然搞不清楚到底有哪些费用和风险，又会得到什么；应该要说清楚，或是提供一些选项，让使用者来决定。举例来说，使用者给了email 之后会不会收到广告信？大概是什么内容？多常会收到？把话讲清楚，使用者比较愿意放心把信息交给我们，使用者也不会因为之后收到了意料外的电子邮件，再愤而把我们加入垃圾信名单。

在订阅电子报时，告知会收到什么内容，以及寄送频率，也可勾选自己想要的内容。

而提交表单能得到什么价值？也可以考虑调整Call To Action按钮的文案来强调。把最重要、使用者最在意的价值直接写出来吧！这个部分也可以参考看看之前跟Call to Action有关的这篇文章。

4、缺乏清楚的导览，告诉使用者目前到哪个步骤

这个表单提交后就是完成订单了吗？就要付钱了吗？不清楚的资讯，会让使用者不敢继续下去。在过去访谈的经验中，有些使用者是这样说的：「对于陌生的服务，都不敢就这样一直点下去，很怕一不小心就付了钱。」可以考虑提供一个流程、进度图，明确告诉使用者现在在哪一步，下一步是什么，还有什么要完成，怎么样回到上一步等等。CTA 也可以用比较明确的文字，来告诉使用者现在将要完成什么事情；像是要下单前的按钮，最好不要只写「提交」，可以写「提交订单」会更明确一点。

5、没有适时提供协助

在过程中，使用者仍然会对一些细节有所疑问，像是在买东西时，大约什么时候可以收到？我的信用卡号会不会有风险？提供了Email，是否会收到我不想看到的广告信？可以考虑提供一些常见问答信息，让使用者可以即时解决疑惑。

Apple Store 的购物车页面，把此时可能会有的疑问用FAQ 的方式列在下方，以供参考

6、过长的下拉式选单

有些问题我们会使用下拉式选单来处理，像是币别、国籍…等等，然而如果塞了几十甚至上百个选项进去，其实一点都不好点选，简直在考验人们的耐心。或许可以考虑用提供搜寻功能的下拉式选单，当使用者输入一些内容时便即时进行筛选，快速又方便。

Google Analytics 的设定中，选择币别的下拉式选单，可以输入关键字进行搜寻

7、不明确的错误提示

错误提示要能让使用者明确知道哪个栏位填错了，应该怎么改善。常见的错误是，并未指出是哪个栏位有错，或者只说了这个栏位有错，却没讲是格式错误、数值太大太小、还是应该怎么修正。

错误讯息必须明确，如果期望资料是以http 开头，就应该直接说明，只写”输入正确的网址”太模糊

8、清楚提示期望使用者填写的格式和内容

在表单中，应该同时标明这个栏位的标题（label），以及使用输入提示（placeholder） 来提供填写提示。如果只有placeholder，当使用者开始填写内容时，placeholder 的内容消失，使用者可能无法发现正在写的内容有错误，或是忙别的事情回来后就忘了这是要填什么。

栏位标题和输入提示都是不可或缺的

9、没有妥善支援行动装置

在手机上填写表单一直都是不容易的事，手机上的表单设计也并不容易。必须注意字型和按钮大小、版面配置之外，必须提醒的是，测试时最好实际用手机来填写看看，而不能只用模拟器！因为模拟器虽然可以让我们确认视觉配置上是否正确，但实际用手机填写一遍，才更能感受到实际要花多久时间，容易填写与否…等等。

表单还有好多细节，这次先列出几个常见的问题跟大家分享。你也有觉得受不了的表单设计吗？欢迎提出来一起讨论。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

表单设计看上去很简单，组成它的每一个模块我们都很熟悉；表单设计其实也并不简单，除了基础的体验我们还需要结合其行业特性、自身业务才能设计一个好用的表单。

而这就是为什么我们要写一个表单设计系列的原因。

如果从功能角度来划分，表单一定是互联网产品中最为重要的能力之一，它也是用户与产品之间进行交互的一个重要渠道。如果没有表单产品的体验将变得非常的被动，用户只能消费平台所提供的内容。

作为用户我们在日常会遇到各式不同的表单，我们会发自内心的喜欢某个产品的设计，也会因为一些糟糕的设计而吐槽。每一个组件都没有问题，但合在一起就是不好用。如果仔细分析，你会发现其实它并不是一个简单的设计问题，除了表单基础体验它还和所处行业、业务特性有着较大的关联。

如果从 Design System 的角度来看，表单设计似乎又是一个很成熟的工作。输入框、单选、复选、日期、按钮…… 每一个组件都是用户所熟知的，它们是产品设计最底层、基础的元素，也完全有可以系统化的去沉淀。

为什么要写表单设计这个系列？

网络上有很多关于表单设计的资讯，但它们都有比较强的指向性。有一些更关注表单的交互，有一些则更关注表单的逻辑，但真正将它们融合在一起结合产品设计一起来讲述的并不太多（特别是针对移动端产品）。

回过头来看自己这十几年的工作经历，互联网产品的方向和载体不断的在发生变化，但表单依旧还在那里，基础的交互形式也依旧是那些。

从表现上来看表单似乎很简单，即使是新入行的设计师也能很快的掌握基础的元素来搭建一个表单界面。但结合上业务的复杂度再来看待一个表单，它就变得不那么简单了。

想要设计一个用户愿意填写且使用体验上还不赖的表单，除了设计本身，还需要我们结合产品、技术一起来思考。

此前 PinDesign 其实已经写过几篇与表单设计有关的文章，但出发点也是某个具象的角度，也不够系统化。在工作上近段时间里的一部分中心又开始回到到了表单设计上，但在要求上需要更加的全面和系统化，这也让自己需要去重新梳理对表单设计的思考。

借这个机会也正好强迫自己将对表单设计的思考系统的总结下来，也希望能在表单设计这个“课题”上带给大家实质性的帮助。

这个系列会包含哪些内容？

正如前面所言，表单复杂度在于除了设计自身，还与产品、技术有着较强的关联。所以这个系列会将这些因素整合在一起来进行讲解，大体上它会分成以下几大部分：

01、理解设计表单的意义

如果将表单比作一个工具，那么我们将它比作 sketch。 这个工具自身内置了很多基础元素的能力，每个人都可以用它做出不同的设计，但脱离业务场景单独去评价这个设计的好坏其实是没有意义的。

一个明确的设计目标（产品目标）才是从设计上可以去尝试的方向，也是衡量它的一个直接标准。

在这部分内容中我们将站在一个商业产品设计的角度去将表单进行剥离，去分析在每一个层级中设计需要关注的核心本质是什么。也只有先将这个部分搞清楚，才能确保我们设计的表单是在当前情景下真正有效、易于使用的。

02、表单基础设计规范

我们前面提到，表单是一个在产品设计中被大量使用的能力。正因为如此，它也非常有必要被“约束”起来。一套完整、有效的表单设计规范能够让我们在具体的界面设计中将关注点更多的放在业务诉求上，避免表单字段的规范带来对设计的干扰。

当然，表单设计的规范并不是只能一种。根据你的业务领域，它可以有更多不同的角度和形式去体现。

这部分的核心是基于一个整体性的框架，以一个具象的领域为代表做一次案例的示范。希望大家最后得到不是这套表单的规范，而是如何去创建一套属于自己业务的表单规范。

03、表单设计实例

虽然我们可以通过基础元素随意的“组装”不同的表单，但在互联网产品的发展中它们已经形成了很多特定的使用场景，这也是我们在很多站点上能看到的实际案例。

如果只是简答的从表现层面来看，我们可能并不能去评判它的优劣，也不知道我们该如何去借鉴他们的思路。所以在这部分我们将以这些常用的场景（如注册登录、发布评论、搜索筛选等…）为案例从设计思路上来进行逐个的分析。

这些可能也将是大家在日常工作中最为有用的部分，所以我们会用更多的篇幅来讲解这部分内容。

整个表单设计的系列，我将大约分十期来进行讲解。今天这一期先从最基础也最重要的部分 – 设计表单的意义开始。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

不管你是负责设计B端产品或者C端产品，都必然接触过表单设计。有长表单也有短表单，我们要知道表单的目的是收集用户的信息，综合这些信息以提供更好更准确的服务给到用户。本文将从表单类型和设计点出发进行分析，希望对你有帮助。

对于用户来说，填写长长的表单是需要花费时间成本的，如果表单是将所需要收集的问题简单的罗列出来，填写起来会非常困难，引起用户的反感情绪，直接导致的就是用户会直接关闭表单填写。

设计师需要通过设计手段降低用户对于表单的理解成本，充分的从用户的角度考虑，帮助其更快速高效的完成表单填写。

一、表单类型

在开始优化设计表单之前，需要先了解一下表单的类型有哪些。

二、设计点

1. 提升填写效率

设计某些有着特定填写格式的表单，添加上适当的提示样例可以更高效。下图这个是一个填写官网地址的表单，通常我们在浏览网站时不会特意去记住网址，这里提供了一个常规网址的样例格式，可以对于用户起到一定的提示作用，帮助其更快速准确的填写信息。

类似的还有，地址（如：***街**号）、日期（MM/DD/YY）、官网地址（http://www.***.com）、ICP备案号（京ICP证***号）、车牌号（川A·***）等，设计时遇到这种类型表单，可以添加相应的提示样例。

当可选项较少时，将选项全部排列出来会比下拉操作更好。我们在租房买房时，会有一个户型的指标，采用将几个选项统一排列出来的展示方式，用户可以一眼看到户型有几种选择，只需要一个操作就可以完成。

而使用下拉框需要先点击下拉图标，查看有哪些选项，再决定选择哪个，这就需要两步操作才可以完成。相比较之下，必然会选择第一种设计。有一种情况，当可选项超过5个时，可以考虑使用下拉样式。

地区选择时，将省份、城市、区信息合为一处，减少点击次数。下图两种形式相比较，鼠标点击次数上左边形式更少，操作交互更加流畅，比较符合用户的使用习惯，左边下拉框比右边视觉效果上会更简洁。

面对一个几页长的表单，需要填写的信息太多，用户第一反应肯定会烦躁。

早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到的，有一个神奇的7±2效应，意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。运用在设计交互上，在设计这样的长表单时，可以将表单按照类别分为分类，一次只展示部分信息，降低用户的心理压力，填写效率会更高。

自动填充默认信息，在填写表单时，会有一些标签信息是相互关联的。

下图中地址与邮政编码是相互匹配的信息，用户填写完地址，系统可以自动将邮政编码填充。这样设计的原因是产品充分考虑实际场景，用户通常是不会去特意记住编码，必然需要查找才可以，这必然会打断用户当前填写表单的操作。

类似的表单类型还有如手机号码的区号、国家、具有行业属性的表单（如填写汽车行业相关的性别，默认填充为男）、针对某一年龄段的产品的关于年龄的相关表单信息，总的来说就是适用于大多数用户的标签信息都可以使用自动填充默认信息的设计。

智能联想，这种交互设计形式很常见，互联网产品很多场景都有使用到。用户输入某个信息内容，会自动出现有可能相关的内容，用户可以在这些内容中选择自己需要的，不要一个一个输入，节省操作成本。

2. 好的交互体验

多行文本框，使用可拉伸的文本框比固定框（内容框内滚动，页面中又加了内滚动）更好。

几乎所有的表单中都会出现多行文本框，当你作为一名用户看到下图两种文本框时，你更喜欢哪一种？

左边文本框时可以根据输入内容的多少变化高度；右边文本框则采用的固定大小的文本框，当超过一定字数时，会以框内滚动的形式展示。

根据使用体验来说，可变化的文本框会更好，页面整体效果更统一。右边文本框还有一点很不好的设计点是，在滚动的大页面上又加上了一个滚动文本框，这时一个页面上就出现了两个滚动条，给用户操作上造成一定混乱。

错误提示时，提示文案需要明确指出出错的地方。经常在登录某个APP时提示用户名或者密码错误，这种情况最好的处理方式是明确说明是用户名还是密码错误。

下图的场景就出现在注册的流程中，一些网站对于用户名的格式是有相应的要求的，当你在用户名中输入了包含颜文字的字眼就会报错，报错的提示文案应该像左边的一样讲明要求与禁止，试想如果用户看到右边的错误文案，仍然会一头雾水。当我们在设计错误提示时，可以朝着这个方向设计。

文本框在PC端及移动端的使用区别，PC端通常使用左标签右输入框，移动端页面受限于显示面积小，使用上标签下文本框或者标签置于输入框内。下图中显示的标签置于输入框内，当点击输入框时，标签移动到上面，这种设计形式也很好，缺点是开发成本较高。

对于特殊格式的信息自动帮用户设定好展示格式。设计这类型表单时，不能简单的按照正常思路去思考，需要考虑到特定场景的设计形式。

像手机号、银行卡号、软件序列号等这些表单，通常的形式是每四位数字与四位数字都会使用空格隔开，方便用户对照是否有误。涉及到金额时，每四位数字都会使用逗号隔开，以便用户快速了解到金额数。在设计手机填写验证码时，样式上是独立的6个圆角矩形框，输入时当你输入一位数字时会自动跳转到下一个矩形框。

限制文本框的输入信息属性限制。比如输入密码、手机号、身份证号码、车牌号时，移动端的键盘应该切换成数字英文键盘，这是通过键盘来限制用户输入的信息属性。也可以在文本框输入时利用一些弱提示形式，提醒用户此处应该是哪种属性的信息。

表单在完成填写提交时，告知用户提交结果，这一步是很有必要的。从用户角度来说希望填写的表单是否提交成功，下一步该干什么；从产品自身角度来说，可以在结果页面运用情感化设计提升用户的心情愉悦度，同时提供一些功能入口，为其他页面*流。

好了，这次没有总结，想看再往上看一遍。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！