modile-form

导语

表单是所有移动端产品交互的关键，是人们和产品之间的枢纽。

每天，我们都可能需要使用到表单。

回想一下，你上次买票、预定酒店房间或者在网上购物的场景——很可能你与这些产品之间的每一个互动场景都包含了填写表单这一过程。

表单是我们实现目的的一种方式。用户应该能够快速地填写完表单，用户在填写表单时，尽可能地不要给用户增添困惑。

可用性

复杂性的感知

用户在看到新表单时，首先感知到要做的第一件事情是预估一下完成这个表单填写大概需要多长时间。

用户通常通过整体扫描表单的方式来预估有多少表单要填写，大概需要花费自己多长时间。

这种感知在用户评估填写表单的时间时起到了至关重要的作用，如果表单看起来越复杂，那么，用户就越有可能会选择放弃填写当前的表单。

交互成本

交互成本指的是用户为了达到其目标而与界面发生交互行为所付出努力的成本总和。

交互成本直接关系到表单的可用性。用户为了完成表单所付出的努力越多，表单的可用性就越低，高交互成本可能由于表单填写困难、无法理解某些字段的意思或者是由错误信息提示的混淆而造成的。

表单的组成部分

一个典型的表单由以下五个部分组成：

输入字段
输入辅助信息
表单布局结构
操作按钮
反馈

输入字段

输入字段包括文本字段、密码字段、复选框、单选按钮、滑块和任何为用户输入而设计的其他字段。

输入字段的基本原则：简单且直接

减少字段的数量

你要求用户填写的每个字段都需要用户为此付出成本。填写表单的工作量越大，用户完成表单的可能性就越小。

在创建表单时，只包含您需要的最关键的信息，不要添加任何不必要的字段和问题。

其实，很多设计师都知道“少即是多”的设计原则，但是，他们还是会增加额外的字段，试图收集更多关于用户的信息。

在用户刚开始注册的过程中，就收集用户更多的信息可能会有一定的诱惑力，但是你从新用户填写的注册表单中多获取的信息，真的值得失去一位新用户吗？

请记住：只要你已经收集了用户的联系信息，你就可以跟跟进请求获得更多关于用户的信息。

可选字段

在优化可选字段之前，确认表单中是否真的需要这些字段。仔细思考你真正需要的信息是什么，而不是你自己想要的信息。

在理想情况下，表单中可选字段的数量应该为零，表单中理应留下必填的重要字段。

如果你仍然想在你的表单中添加一些可选的问题字段，那你需要让用户清楚地知道这些字段是可选填的，而不是必填。

标记选填字段，而不是必填字段

如果你要获取用户的信息比较少，那么你的表单中大多数的字段将会是必填的。因此，只标记少数的那些字段。

例如，如果 6 个字段中有 5 个必填的，那么只将一个字段标记为可选字段是非常有用的。使用“可选填”标签表示可选填字段。

避免使用星号（*）表示“可选填”。并不是所有用户都会将星号（*）与可选信息相关联，有一些用户会对星号的含义感到困惑（星号通常用于表示强制字段）。

避免必填和选填字段同时标记或者都没有任何标记。

是否有必要获取电话号码

除非获取访问者的电话号码对您的业务至关重要（比如报价请求或产品演示），否则不要在表单中要求它。

ClickTale 运行了一个测试，发现当用户需要一个电话号码时，他们丢失了 39% 的用户注册。除非他们要求访客提供你的电话号码。

如果可能的话，请求一封电子邮件，并通过这种方式与访问者联系（获得许可）。或者将表单中的电话号码字段设为可选，供访问者填写。

清楚地向用户解释你为什么要问一些隐私的信息

人们越来越关注隐私和信息的安全。当用户看到应用程序要求获取他们个人隐私信息的请求时，他们很可能会想“嗯？为什么需要获取我的这些个人信息？”。

如果你设计的表单有要求用户提供个人隐私信息，一定要向用户解释你为什么需要获取用户这些隐私信息；同时，还要向用户保证不会泄露用户的隐私信息，保证用户个人隐私信心的安全性。

你可以通过在相关字段下面添加一行文本来向用户解释要求填写个人隐私信息的的具体原因。通常解释性文本不应该超过 100 个字符。

输入辅助

聚焦

光标自动聚焦到表单中的第一个输入字段。

自动对焦字段能够为用户提供指示作用，告知用户从哪一个字段开始填写，以帮助用户能够快速地开始填写表单——这样可以在一定程度上减少用户的交互操作成本和时间成本——节省用户一个不必要的点击操作（触发输入字段操作步骤）。

确保突出并聚焦处于点击状态的字段。

输入字段的焦点本身理应是非常清晰可见的——用户应该能一眼就知道焦点在哪里。强调处于点击活跃状态的字段可以是带有高亮展示的边框颜色，也可以是在文本框内添加淡淡发亮的颜色。

输入状态

编辑态

确保突出并聚焦处于点击状态的字段。

查看态

禁用态

标签、占位符、辅助文字提示

标签（Label）应该简明扼要地告知用户当前表单域是填什么的

占位符（Placeholder）可以提示用户信息的填写格式，例如员工身份信息输入提示：姓名／花名／工号

辅助文字提示（Tips）只在必要的时候出现，用来给予用户额外的帮助

字段标签

标签需清晰明了

lable 标签是告知用户每一个字段应该填写什么信息的文本。

编写清晰的标签可以使用户更清楚地明白要填写什么信息，标签命名应该能让用户一眼就知道需要填写什么信息。

避免用完整的句子来解释。

选择合理的对齐方式 @@@

标签和字段放在一起

把每个标签放在输入框附近，因为眼睛会从视觉上知道它们是被绑在一起的。

标签和字段顶部对齐

在表单中将字段标签放在字段上方更便用户快速扫视表单。谷歌使用眼球追踪技术，结果表明：用户在提交表单前需要更少的注视、更少的注视时间和更少的扫视。

此外，标签和字段顶部对齐还有另一个重要的好处，可以为标签留出更多的展示空间，特别适用于小型移动屏幕，能够展示长标签，可以让表单文本字段横向扩展至屏幕的宽度，由足够大的区域给用户输入输入更为完整的字符。

左右对齐

这是布局表单最自然的方式，因为绝大多数人都是通过从右向左移动来学习阅读内容的。

句子和标题的大小写比较

避免全部使用大写的标签文本

注意静态默认值

避免静态默认值，除非你认为很大一部分的用户（比如 95% 的用户）会选择这些数值——尤其是对于那些必填的字段。

这是因为在填写表单时，你可能会误导用户犯错误——通常人们会快速浏览表单，不会多花时间去思考所有的字段；相反，他们会跳过已经有了数值的那些字段。

在复杂表单中，对于如证件类型、手机区号、国籍等较为通用的选项，为用户提供默认选择的交互可以有效简化操作步骤，减轻用户填写表单的负担，更快地帮助用户完成表单内容的填写。

正确使用占位符和遮罩输入

不要使用占位符作为标签文本

虽然内联标签看起来不错，节省了移动端宝贵的屏幕空间，但是容易引起表单其他的可用性问题

其中，最为严重的问题是模糊了字段本身要求用户填写的是什么信息。当用户开始在字段中输入文本时，占位符文本会消失，会迫使用户去回忆文本字段中消失的信息，增加用户记忆成本，返回想一下字段要填写什么内容。

虽然，对于简单的两条字段的表单来说这可能不是什么问题，但是对于具有很多字段的表单 (比如 7 到 10 个字段) 来说，这可能是一个非常大的可用性问题。

用户填写表单输入字符后，用户很难记住所有字段的标签。由此可见，用户尝试不断显示表单字段中的占位符再继续输入新字符，用户通过反复撤销文本框内已输入的字符，来查看字段名称，其暴露出严重的可用性问题就不足为奇了，可用性问题远大于其提供的帮助。

对于消失的占位符问题，有一个简单的解决方案是使用浮动 (或自适应) 标签的方式。

顾名思义，当用户点击段后，标签占位符不会消失，它会移动到字段的顶部，为用户输入字符内容留出空间。

占位符文本

格式不确定是表单设计中最重要的问题之一。用户放弃填写表单与格式不确定有着直接关系——当用户不确定应该按照什么格式要求来填写表单时会很困惑纠结，很快就会放弃填写表单。

输入字段中的默认文本可以有效提示用户具体应该如何填写。对于“全名”之类的简单字段不需要占位符文本内容的提示，但是对于需要特定格式的数据字段，占位符的存在具有非常大的价值。

例如，如果你设计了跟踪包裹的搜索功能，那么最好在搜索文本框内提供一个搜索跟踪号的示例，作为跟踪包裹号的占位符，引导并告诉用户该如何快速高效地搜索。

占位符文本和用户实际输入的内容在视觉上要有明显的区别，这一点十分重要。换句话说，占位符文本不应该看起来像是一个预设好的数值（译者：占位符的作用在于提示用户如何填写当前表单字段，绝不是默认的预设值，预设值是帮助用户选择或填写的初始值，用户可以修改也可以不修改）。

如果，这两者之间没有非常明显的视觉上的区分，用户可能会认为占位符的字段已经有了数值，不需要填写，极容易误导用户填写表单时犯错。

遮罩输入

字段遮罩是一种帮助用户格式化输入文本的一门技术。许多设计师将字段遮罩与占位符文本相混淆——它们两者是不同的。与占位符（基本上是静态文本）不同，遮罩输入会自动统一格式化用户输入的数据信息。在下面的示例中，当用户输入电话号码时，括号、空格和破折号将自动出现在界面上。

这种输入方式也使得用户更容易验证填写的数据信息。当电话号码以块的形式显示时，查找和纠正错别字变得容易了许多。

字段约束

输入域

如果可能的话，使用字段长度作为字段内容输入的提示。输入字段的长度应该与字段中预期要填写的信息量成正比例。字段的大小将作为一个视觉约束限制——用户仅通过查看字段长度就可以知道需要输入多少文本。一般来说，地区代码和住宅号码等字段应该要比街道地址字段短。

格式约束 @@@

通过合理的格式约束，能够方便用户更快的完成填写，而减少错误出现。自动对焦第一个输入字段可以引导用户开始进行输入。

为表单字段增加限制条件

最好为每一个表单字段增加约束条件和提供建议，以防止用户在第一次填写表单字段时犯错误。

例如，如果你设计了一个用户预定酒店的表单，你应该限制用户选择过去的入住日期。如下面的 Booking.com 网站所示，你可以使用日期选择器，它只允许用户选择今天的日期或者将来的日期。这样的日期选择器将迫使用户选择适合且有效的日期范围，避免出错。

设置恰当的键盘面板

键盘类型

移动端用户更喜欢那些能够为特定表单类型提供匹配键盘的应用程序和网站。这样的键盘特性设置可以有效规避用户执行其他操作。例如，当用户需要输入信用卡号码时，应用程序应该只显示拨号键盘。在整个应用程序中匹配相对应的键盘是非常重要的（应用程序中的所有表单都应该具备此功能）。

小程序提供了与表单设计相关的四种输入类型：

input type=”text” ，输入类型为“文本”时，显示移动设备的默认键盘模式
input type=”number”，输入类型为“number”时，显示带有数字和符号的键盘
input type=”digit”，输入类型为“digit”时，显示带小数点的数字键盘
input type=”idcard”，输入类型为“idcard”时，显示身份证输入键盘

还有一堆 html 的键盘类型

键盘确认键

send	键盘右下角按钮为“发送”
search	键盘右下角按钮为“搜索”
next	键盘右下角按钮为“下一个”
go	键盘右下角按钮为“前往”
done	键盘右下角按钮为“完成”

提供显示密码选项

重复输入密码字段是产品设计人员比较容易犯的另外一个错误。设计师采用这种方法是因为他们相信这样可以防止用户输入错误的密码。

然而实际上，重复输入密码字段不仅是增加了用户的交互成本，而且还不能够保证用户不会出错。因为用户看不到他们在密码字段中究竟输入了什么，所以他们很有可能会犯两次相同的错误（在两个相同的密码字段中），并且在尝试使用密码登录时会遇到问题。

当用户输入密码时，他们得到的唯一反馈就是一排黑色的实心圆点，可用性会受到很大的影响。

方案一

提供一个选项，允许用户查看他们自己设置的密码，而不是复制密码字段。可以提供一个图标或者复选框，当用户点击图标或复选框时，可以查看密码。显示密码可以让用户在提交表单之前检查他们输入的密码。

方案二

或者当输入时，输入位短暂显示为明文，保持 1 秒或者保持到下一位密码输入后再变成暗文，这样的交互改善可以确保用户在输入中明确内容，也满足了其隐私需求。

更直接的输入

单选

单选可根据用户最可能会选中或者数据统计选择最多的一个标签作为默认选项，如果此字段属于非必填，需要有一个“无”的标签选项，以方便用户在选择之后又不想做出选择时能够更改。

开关

只存在两个选项且选项具有判断性质，需要选择一个正确的信息，触发之后能够立即生效，使用波动开关，有开启、关闭两种样式。

复选

使用分段选择器，避免下拉菜单

下拉列表应该是最后的选择。下拉菜单的交互体验对移动端设备来说十分糟糕，因为折叠后的元素会使在小屏幕上输入数据的过程变得更加困难：下拉菜单中里的选项需要用户点击两下并隐藏选项。如果你在表单设计中使用了下拉菜单作为选项，请考虑用单选按钮替代它。他们将使得所有选项都具有可浏览性，与此同时，也降低了用户的交互成本——用户可以直接点击选项并可立即选择。

存在 2~6 个选项时且选项信息是一个词语，文本一般不超过 4 个字，需要选择一个正确的选项，使用按钮样式——有选中、未选中、不可选状态；

选择方式的确定

不同的选择方式有各自的优势和劣势，选择不当可能会造成用户体验差而导致转化率低或用户流失。

弹窗：在完成表单需要选择的字段内容时，当选项超过 6 条或特定（低于 6 条但文本过长、调用系统功能…）情况，可使用动作栏弹窗的方式；
下拉（展示与隐藏）：有多种样式，正确使用下拉可以有效帮助用户缩小选择范围；
新页面：当选项信息较多且复杂时，使用新页面跳转更便于操作。如：选择用户地址则跳转至地址列表。

输入特定范围时，使用滑块

许多表单要求用户提供一系列数值（例如，价格范围、距离范围等）。因此，不要使用两个单独的字段“from”和“to”，而要使用滑块允许用户通过手指滑动的交互方式来指定范围。

精度问题

级联选择

在一些数量较多的却有着相互联系的选项中，基于用户的常规习惯认知将关联的选项合并到一个操作步骤中，级联选择组件就可以很好的承担这个功能。常见如：年／月／日，楼宇／楼层／单元... 这样做能让界面更加简洁，减少了重复的操作步骤，同时数据的级联逻辑能避免用户犯错。

步进器

步进器用来进行精确的数据类的选择，也可以使用滑块低精度，看布局空间

保护用户数据

Jef Raskin 曾经说过：

“系统应该将所有用户的输入行为视为是神圣的行为。对于表单而言，这无疑是绝对正确的。当你开始填写 web 表单时，然后不小心地刷新了页面，但是数据仍然保存在字段中，这是非常好的体验。”

像 Garlic.js 自动保存表单这样的工具可以帮助用户将填写的表单数据保存在本地，直到提交表单为止。

这样一来，如果用户真的是不小心关闭了浏览器窗口，用户也不会丢失任何宝贵的数据。

手动保存

手动保存即依赖用户做额外操作才可以达成的保存行为，此类保存，我们往往依赖保存按钮。

这种保存方式大多用于网页，如：个人信息、简历等。大多用于表单内容较多的页面，根据表单信息将内容属性相近或有关联性的放在一组，组的下方提供一个保存按钮。

自动保存

自动保存的目的是记住用户已经填写的内容，从而避免用户需要再次输入而放弃。

可以设定间隔时间或者用户未操作后的一段时间进行自动保存，比如：每隔 30 秒或者用户在 10 秒内未操作，系统进行自动保存一次，比较适合需要大量编辑功能的表单（这种保存方式属后台发送请求，视觉无任何变化）。

兜底保存

其实前面两种保存方式在移动端都有局限性，手动保存不利于用户体验，自动保存比较占资源和影响用户操作

类似信息较多的表单，系统检测到用户填写了部分内容但没有完成表单就要离开时，以弹窗的形式给用户一个温馨提示，让用户自行选择保存还是直接离开。

另外在用户使用网络问题或应用意外退出，都应自动保存用户已完成的信息，以便用户再次使用时不会因为重新填写嫌麻烦而放弃。

* 自动化处理

如果你希望用户在填写表单时尽可能地顺畅，只减少用户填写表单字段的数量是不够的——你还应该注意用户在填写表单时需要为此付出的成本。

填写表单本身有很高的交互成本——哪怕是用户使用物理键盘，也很容易出错，也需要花费用户不少的时间来填写表单内容。

所以，用户在移动端界面上填写表单时，用户填写表单的行为就变得更加重要了。要求用户输入的字段越多，就越会增加用户出错的几率。因此，一定要防止出现不必要的字段，这样方能提高用户满意度，降低出错率。

自动完成

大多数用户在谷歌的搜索框内输入问题时都会自动关联信息，帮助用户自动完成内容输入。谷歌向用户提供了与用户在搜索文本框内输入内容关键词相关的建议，且以列表的形式展示。同理，这样的关键词智能联想机制也可以应用到表单设计中来。例如表单可以自动完成电子邮件地址的输入。

（译者；网易邮箱登录表单设计中使用了此方法，当用户水润邮箱前缀会关联相似度很高的邮箱，同时展示常用的邮箱后缀。此外，用户已经输入的邮箱账号会保存为历史记录，如果用户下回再次输入时，会优先展示用户之前已经输入过的内容。百度搜索也是同样的逻辑。所以，通过这些案例可以帮助我们了解其设计背后的目标和动因）。

首字母自动大写

使用户输入的第一个字母自动切换为大写字母。此特性非常适合应用在需要填写名称和街道地址等字段的使用场景，但是不可用在密码字段。

自动更正

自动更正和修改那些看上去拼写错误的词。这种特性不适合应用在名称、地址等唯一性字段的场景。

自动填充个人信息

对于用户而言，在任何在线注册页面的表单中，输入地址通常是最为麻烦的事情。通过技术手段让浏览器记住用户之前已输入过的信息，有助于用户更容易完成表单的填写。

据谷歌的研究表明：当用户填写表单时，通过自动填充个人信息的方式，用户填写表单的速度提升了 30%。

地理位置服务

可以根据用户的地理位置数据预先选择用户所在的国家（或可以精确到当前用户所在的城市）。

但是需要注意的是：移动设备的地理位置服务会存在定位不准确的情况，所以，移动设备预先选择的地址可能存在问题。

谷歌的 Place API 可以解决这个问题。它是使用地理定位，预先设置好用户默认的地址，根据用户的确切位置再提供精准的建议。

生物信息

相机

语音

表单布局

概述

表单结构包括字段的顺序、表单在页面上显示的位置，以及不同字段之间的逻辑关系。

现在你已经了解到用户是浏览网页，而不是阅读网页的行为习惯。同样，用户填写表单也是浏览而不是阅读。这就是为什么设计师应该设计一个易于浏览的表单的原因了。因此，更加易用且有助于用户更快扫视的表单才是设计的关键。

表单标题

给你的表格一个标题，帮助你的访问者准确地了解他们将收到什么，一旦他们提交。例如，一个简单的表单标题，例如“HubSpot 的营销博客注册表单”明确指出，一旦访问者提交了他们的信息，他们就已经注册了 HubSpot 的营销博客。

使用单列布局

当涉及到布局时，应保持所有字段的位置和顺序尽可能简单明了。这意味着您应该使用单列布局。通过以这种方式组织您的字段，您的访客将不会错过任何一个字段，他们将按照最有意义的顺序填写字段，并且与您使用多个表单相比，他们能够更快地提交表单 - 列形式。

一个例子

多列表单会打断用户的垂直浏览的顺序，用户浏览多列表单时，眼睛呈“之”字形状移动，大大增加了眼睛注视界面的移动次数，从而增加了完成表单填写的时间。此外，多列表单可能会给用户带来一些不必要的问题，比如“我应该从哪里开始?”、“右边的问题与左边的问题同等重要吗?”

在单列表单设计中，眼睛会沿着自然垂直的方向开始移动，从上到下，每次一行。用户的浏览路径非常清晰。单列表单非常适合在移动设备终端展示，因为垂直屏幕更长，垂直滚动是移动端用户浏览信息的默认方式。

当然，这个布局规则还有个例外，就是可以在同一行中放置与逻辑相关的简短字段 (如城市和区号，以及省、城市和地区)。

字段顺序

用户填写表单字段的先后顺序也很重要。你需要按照用户的思维逻辑去设计表单字段的先后顺序，而不是根据应用程序或者数据库的逻辑去设计——因为这样将有助于创建更好的人机互动体验感受。

例如，如果你现在正设计一个结账表单，需要用户填写详细的信息，如用户的全名、电话号码和信用卡，那么第一个问题应该是填写用户的全名才符合用户的正常思维逻辑，若改变字段的顺序，则会导致用户填写表单很不舒服。

试想一下：让你先填写电话号码而不是姓名，你会舒服吗？

我们可以想象一下：在现实生活中，你在询问别人名字之前先问对方要电话号码正常吗？

很显然，这样并不符合人的正常逻辑。

从简单到困难

在向访问者询问更耗时的问题（如帐单和发货信息）之前，先从最简单的字段问题（如姓名和电子邮件）开始填写表单。一旦你的访问者开始填写你的表格，并认为，“好吧，我可以快速添加我的姓名和电子邮件”，他们就不太可能离开页面，因为他们已经承诺了。

如果第一个表单域对他们来说是个麻烦（“哎呀，我的信用卡不在附近……”），他们可能更愿意放弃表单，因为他们还没有在表单上投入时间。

信息分组

如果表单字段之间的相关性越密切，那么它们就越应该分组在一起

设计师在设计具体的表单时，需要仔细分析表单字段之间的逻辑关系和相关性，按照表单字段的相关性，将大表单拆分成几个部分。如果你的表单字段超过 6 个字段，就可以把相关的字段按照其逻辑关系分成多个部分。

不要忘记在每个部分之间多留一些空白，以便用户可以通过视觉直观地区分它们。

减少页面跳转

在表单填写中我们期望用户保持专注，尽量避免产生引导用户离开当前页面的填写交互，这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。

长表单使用渐进式布局

如何设计一个长表单呢？

当然了，你可以把所有的表单字段都放在一个屏幕里，但是，这样无疑会降低你的表单完成率。如果，用户没有足够的动力填写表单，首先表单的复杂性就会吓跑你的用户。

因此，表单给用户留下的第一印象很重要。一般来说，表单越长或者是越复杂，用户就越不愿意填写。

所以，一次只给用户呈现最少的表单字段。这样一来，就会给用户产生一种感觉，即表单看上去要比其实际的表单字段要少许多。

有两种方法可以做到这一点。

渐进式展示

渐进式展示指的是在用户需要的时候再给用户展示对应的信息。我们的目标是在合适的时候为用户展示所需的信息。

刚开始时，只向用户显示一些最重要的选项或表单字段。

长表单使用单页布局

创建长表单时，应该使用单页布局，这样每个页面上只有一个表单。如果你有一个简短的表单，所有的东西都应该很容易地放在一个页面上，这使得这是一个易于实现的布局。

如果有很多表单字段，应该将它们分解成多步骤表单。当你这样做的时候，会有多个网页包含表单的不同部分，这使得访问者需要完成的工作量看起来更易于管理。（如果你有一个多步骤的表单，你也可以在页面顶部添加一个进度条，这样你的访问者就可以知道他们还需要花多长时间来浏览它。）

分块需要将一个长表单拆分成几个步骤。通常是将表单拆分成几个步骤，可以提高表单的完成率。分组还可以帮助用户处理、理解和记住信息。在设计多步骤的表单时，一定要知用户当前填写表单字段的进度。

提供预览功能

对于已分页展示的长表单，在用户填写完信息想要检查之前填写的内容时，就要一步步返回之前的页面进行查看，还要担心返回之前的页面时当前已填写的信息会不会丢失。因此在用户输入完成后提供一个预览页面让用户对已填写的信息进行确认和检查，能够降低用户的操作成本和出错率。

操作按钮

表单至少会有一个动作按钮（用于提交表单数据的按钮），按钮是指示用户采取行动的交互式元素；按钮使用具有描述性的动作文案

按钮文案应该能够说明按钮的功能作用是什么；用户只要看一下按钮的文案，就能立刻明白点击之后会发生什么（译者：按钮文案不可过长，需简洁明了，不可有歧义）。

避免使用“提交”和“发送”这样的通用按钮文案，这会让用户认为，这个表单是可以多次复用的，而要使用具有描述性的动作文案。

按钮位置

右上角：以纯文字的形式固定在导航栏的右侧（屏幕右上角）；
表单底部：置于表单的最下方，根据表单内容纵向空间的大小而上下移动。表单内容较多时，容易下沉过多而导致按钮不可见；
设备底部悬浮：悬浮在设备底部，随时可见，会占用一定的纵向空间；
跟随键盘：固定在键盘的某个位置，跟随键盘展示或隐藏，常用于单个字段内容的表单。如：登录页面，填写完手机号码，点击键盘上的确定，会跳转至验证码页面，输入验证码后确定，直接登录成功。

综合实例，Bee Express 项目为了适配中文/英文/泰文状态，综合了每个位置的利弊得出：当表单内容 + 按钮少于一屏内容时，操作按钮置于表单底部；超过一屏则在设备底部悬浮。

不要使用清除或重置按钮

清除或重置按钮允许用户删除已经填写好的表单数据。这些按钮几乎从来没有真正地帮助过用户，反而经常在伤害用户。如果用户填写表单时不小心按错了按钮，它们很可能不会或非常不愿意重新开始填写表单。

按钮层级

主操作按钮：一个表单页面只能存在一个主操作，也是最醒目、最突出、最重要的按钮；
次操作按钮：存在多个等级，可以通过弱化主操作按钮、图标或突出文字来表现次操作按钮，次级按钮可以多个同时存在。

如果可能的话，请避免同时出现两个或两个以上的操作按钮。但是，如果你的表单同时有两个操作按钮（例如，电子商务表单中有“使用折扣”和“提交订单”按钮），请确保主要操作和辅助操作之间在视觉上有非常明显的区分。在视觉上优先突出主要操作的那个按钮，这将有效防止用户点错按钮。

操作一致

表单填写过程中我们应当避免在流程中出现按钮样式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动时的困惑和犹豫，确保用户在表单填写过程中的流畅体验，从而实现最终商业上的交易成就。

交互状态

待激活状态：需要完成表单中的部分条件方可激活，变成正常可交互状态；
正常状态：已完成表单必填的内容，按钮是可交互的，并且可用的状态；
激活状态：用户已点击按钮后的状态（且还未结束按按钮的动作）；
加载状态：送出表单后，正在加载中，但操作还未完成，没有立即实现的状态；
禁用状态：非交互状态，目前不可交互，但以后可以使用。

设计便于移动端用户手指触摸的目标对象

对移动端用户而言，界面中的可触摸对象点击区域非常小，这种是一种非常糟糕的体验，如此一来，用户很难能用手指精准地点击对象。因此，设计出便于移动端用户手指触摸的目标对象非常重要：提供更大的文本字段和按钮。

下图显示的是成人手指的平均宽度为 11 毫米。

根据 material design 的设计指南，移动端触摸对象的大小至少为 48×48dp。这种尺寸的触摸对象目标的物理尺寸大约是 9 毫米，且与屏幕的尺寸没有关系。为移动端用户提供更大的触摸对象可能是最合适的。

触摸对象的大小尺寸不仅很重要，触摸对象之间的间距同样重要。保持触摸对象之间安全距离的主要原因是防止用户触摸到错误的按钮或者是误操作。当诸如“同意”和“不同意”这样的二选一按钮同时展示在一起时，按钮之间的间距就变得非常重要。

material design 的设计指南将触摸对象之间的间距设定为 8dp 或者留下更多的空白以分开，展示出了更加清晰的信息，提升了按钮操作的可用性。

点击按钮后禁用按钮

提交表单通常需要一定的时间来处理。例如，提交表单可能需要进行数据计算，不仅需要在操作时提供反馈，还要禁用提交按钮，以防止用户在不确定系统是否在响应自己提交数据信息的情况下反复点击此按钮。这对于电子商务网站和应用程序尤其重要。

通过禁用按钮，不仅可以防止用户重复点击，还可以向用户提供系统正在响应用户提交表单的请求（用户将知道系统已经在接收它们提交的数据信息）。

反馈

错误消息处理

在此表单中，错误消息以内联方式显示，意味着无效字段以红色突出显示。表单在字段旁边包含一个错误符号，以进一步突出显示存在问题的事实以及问题所在的位置。最后，该消息解释了错误存在的原因以及如何修复它。

永远不要责怪用户

当你设计表单错误信息文案时，重点是要尽量减少用户在填写表单遇到问题时的挫败感。

一定要听起来积极。你不应该责怪用户，而应该使用简洁明了的语言，包括引导访问者发现错误的信息，这样他们就可以准确地知道错误的位置以及应该如何纠正错误。

向用户发送错误提示信息时，会对用户的心理造成一定的影响。像“您输入一个错误的号码”这样的错误信息会把所有的责任都推给用户；因此，用户会感到更加沮丧和挫败，会放弃当前表单填写任务甚至以后再也不用这个软件产品了。

一句中立的信息提示像这样：“那个数字是不正确的。”（译者：向用户展示错误提示信息时，尽量不要使用第二人称，可以直接不用人称，防止使用第二人称，带给用户更多负面的挫败感）

用户会犯错。这是不可避免的。设计一个支持用户在填写表单出错的情景下的用户界面非常重要。虽然，关于错误和表单验证的主体可以用单独的一篇文章来阐释，但是仍然有必要提到一些应该做的事情来改善移动表单的用户体验。

错误提示信息要具有可读性

避免含糊不清或一般性的错误提示信息

比如“出问题了，请稍后再试”的消息提示，不要对用户说这些没用的。用户会想知道到底是出了什么问题。用户总是会试图思考问题的本质。所以，请确保当用户遇到这样的问题时，要让用户知道究竟该如何操作，要给出具体可行的解决方案，而不是提供一些没用的信息。

向用户提供类似“用户输入错误:0x100999”之类的错误消息太糟糕了。错误提示信息要用人能够听看懂的描述，而不是展示这些代码数字的错误提示信息，大多数的普通用户时无法理解的。所以，请使用人类语言，解释用户或系统到底做错了什么，用户应该怎么做才能解决当前的问题，不要使用用户看不懂的机器语言。

动态验证

选择显示错误提示信息的时间非常关键。在用户按下提交按钮后看到错误消息可能会让用户感到非常沮丧。

所以，在用户输入字段内容时就即时提供反馈，在用户输入完成后立马告诉用户输入的信息是否符合表单填写的要求。

html 的 input 验证机制就可以做到，在输入完后再验证

避免在表单字段处于焦点状态时显示内联验证提示信息

在这种场景下，用户点击字段后，它们会看到一条错误信息提示。即使字段完全为空，也会出现错误提示。当表单字段焦点上显示错误消息时，看起来就像是用户在还没有填写之前就已经出错，这种体验很显然并不友好。

不要在输入每个字符后验证

这种方法不仅增加了不必要的验证消息提示数量，而且还会让用户感到十分沮丧（因为用户可能会在完成字段之前看到错误消息）。理想的情况应该是，内联验证消息应该在用户停止输入当前字段内容或移动到下一个字段后 500 到 1000 毫秒出现。

成功消息

使用此通知用户他们已达到表单中有意义的里程碑。如果表格很长，则会显示一条成功消息，鼓励用户继续填写。像错误消息一样，成功消息应突出显示。但是它们不应阻止用户继续。

在用户提交表单后，，给用户积极性的反馈非常重要。可以在现有的表单上下文提供即时反馈信息（例如，在表单上方显示绿色的成功标记），也可以将用户引导至新页面，此页面主要高速用户提交表单已经成功。

通过提示框解决用户可能的疑虑

通常很容易猜测哪些问题最有可能阻止潜在客户填写您的表格。例如，如果一个访问者实际上没有订购任何东西，那么要求他们提供他们的邮政编码可能会令人不安。您可以通过摘要框来说明您对某些信息的需求，或者使用语句来说明表单字段是否是可选的。

引导提示

部分完成难度较大的表单，以图表或按钮引导用户点击，用弹窗或跳转新的页面详细解答。如：需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的

不要让数据验证规则太严苛

虽然在某一些场景下使用严苛的验证规则是必要的，但是，大多数情况下，过于严苛的验证规则会导致系统响应很慢（译者：可以理解为程序需要解析验证逻辑，逻辑过多或过于复杂），当用户以稍微不同于预期的格式填写表单时，表单界面则会显示错误会造成不必要的麻烦。这样会影响表单的转化率。

一个问题会有很多个不同的答案是很常见的；例如，当表单要求用户提供有关其所在州的信息时，用户会输入州的缩写而不是全称（例如，CA 而不是 California）。表单应该支持这两种格式，而将用户输入的这两种不同的格式转换为一致的格式，这是开发人员的工作。

可访问性@UE 同学

https://www.shujike.com/zixun/115820.html

文章搜索：可访问性

代码层面

总结

表单的设计会影响网站的整体用户体验，进而直接影响您满意的访问者和转换的次数。精心设计的表单可以向用户显示您的品牌很有帮助，周到，专业，精通技术并且与他人合作愉快。

有了成功的表单，您将为您的访问者创建一个良好的用户体验，并给他们留下积极、持久的印象。您应该为访问者简化表单填写和提交过程，这样就不会对表单本身产生任何混乱或不确定性。现在就开始改进表单的体验吧，考虑一下这些实践，以及如何将它们合并到您自己的表单中，以增强用户体验并提高转换率。

用户在填写表单时可能会犹豫不决。所以，作为设计师，我们的设计目标就是要帮助用户填写表单尽可能地简单。在设计表单时，尽可能创建可以帮助用户快速填写表单又不会或很少填写出错的交互方式。有的时候，一个小小的改变就可以有效提高表单的可用性，比如，正确地描述一条错误提示信息。