表单设计（html表单设计）

本文目录一览：

• 1、钉钉如何表单设计？

• 2、航天桥北大青鸟分享提高用户体验的八种表单设计技巧？

• 3、表单设计的基本原则-1

• 4、有哪些表单设计的注意事项?

• 5、提高用户体验的八种表单设计技巧

钉钉如何表单设计？

1/9 分步阅读

表单建立方法，来到了APP，点下【工作】，如图。

2/9

【工作】界面，我们接着来点击下【表单大师】，如图。

3/9

【表单大师】页面，我们接着可以点下【创建表单】，如图。

4/9

【创建表单】界面，输入表单标题，如图。

5/9

创建标题后，我们可以选择模板，也可以选择非模板，小编就选择模板了，接着点下【选好了】，如图。

6/9

这些模板有设置好了的，不好，可以删除，不够，点下【添加组件】，如图。

7/9

选择要添加的组件就好了，如图。

8/9

我们接着建立好了，点下【保存】，如图。

9/9

保存成功就可以使用了，如图。

航天桥北大青鸟分享提高用户体验的八种表单设计技巧？

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。

今天航天桥北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。

1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。

A.左标签在一些网页表单当中，标签局左是常见的一种形式。

左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。

左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

B.顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。

顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。

但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。

C.行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。

当然，部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。

全部大写的标签容易造成阅读和浏览上的困难。

3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。

毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。

4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。

比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。

但是对于内容多的情况下，就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

表单设计的基本原则-1

我们知道，表单至少有三个基本要素：标签、输入框和动作。每一个要素的设计好坏都会对表单产生影响。本文先来说说设计一个简单、易用、高效的表单的基本原则。

用户在填写表单时，无论操作后成功与否，都应当及时告知用户。

1. 成功反馈

常见的成功反馈有非模态弹框和落地页两种。

需要注意的是：成功反馈不要阻碍用户进程，而是鼓励用户采取更多行动。

可以采用非模态弹框形式给予用户轻量型的提示。如下图是喜马拉雅APP的登录表单，当用户输入正确的验证码后，toast提示正在登录，登录成功后toast提示登录成功并引导用户设置密码。

成功反馈最好能明确告知用户下一步操作是什么。这样能够帮助整个流程形成闭环，降低用户跳出率。下图是人人贷APP申请贷款额度表单：

由于完成申请需要经历5步操作，因此必须提供清晰的引导和积极的反馈才能帮助用户顺利完成，人人贷在这里做的比较好：通过“识别成功，快点击下一步吧“的反馈和引导激励用户完成表单。这也是另一种常见的成功反馈——落地页的好处之一。它将提示融入到流程中，能够更好的引导用户进行下一步操作。

综上，toast较适用于单一的表单给予轻量的提示，落地页较适用于多个表单分步骤展示时，引导和激励用户继续下一步操作。

2. 错误提示

用户在操作时出现错误是在所难免的，我们可以用更友好的方式帮助用户发现“错误”，改正“错误”：

（1）明确告知用户出现错误的位置及解决办法

如果用户在填写表单的过程中出现错误，则必须明确告知出现错误的位置，错误的原因及解决办法。试想，你花费好长时间填写完一个长表单，正当你觉得胜利在望准备提交时，忽然告诉你出错了无法提交，但是你不知道哪里出错了，你不得不从头到尾检查一遍，如果还没有找到错误的话，那简直要崩溃了。如果表单出现错误，则要明确告知用户错误的位置、原因及解决办法。下图网易云课堂的例子就比较好：

将错误消息放到相关元素旁，帮助用户快速定位错误的位置；同时告知用户错误原因，便于用户及时改正错误。这里需要注意，如果出现错误的输入框在一屏以外，则应跳到表单出现错误的位置。如下图：

还是刚才的表单，点击按钮后，页面定位到出现错误的位置，帮助用户在长表单中快速找到错误并改正。

（2）采用“双重视觉强调”帮助用户发现错误

我们的设计应该考虑到一些特殊用户比如色盲人士，如果只改变标签文字的颜色，可能不足以引起他们的注意，为了确保用户能够发现错误，建议采用双重视觉强调，即：输入框红色+红色文字提示；标签红色+输入框下方红色指导文字；图标+红色文字；背景色+指导文字。下图是错误提示采用不同类型的双重视觉强调：

这里需要说明，错误提示也可以用模态弹窗的形式，但不是好办法，也不适合表单。因为如果使用模态弹窗，错误消息无法与输入框联系在一起，且关闭弹窗后用户必须要记住弹窗内容才行。

（3）尽量避免用户犯错

除了帮用户尽快修正错误之外，我们还可以通过一些方式避免用户出现错误，让表单填写更顺畅。比如：把输入项改成选择项；减少输入项；带默认值的输入项……等，此处暂不具体介绍，详见下文第三条“减少多余输入”。

1. 当问题的 “ 答案 ” 不止一个时，应当为用户提供建议以帮助用户确认答案

我们在设计表单时，有些问题的答案是不唯一的，比如用户注册时需要设置昵称，虽然答案是不唯一的，但依然要遵守一定的规则。因此，用户在操作时对答案进行即时校验同时提供建议，能够帮助用户尽快确认答案，减少不必要操作。

下图是的注册页面，当用户输入一个已被占用的昵称时，给出了错误提示，虽然提示及时且明显，但忽略了一点——为用户提供建议。由于设置昵称这个问题的答案是开放性的，因此应当为用户提供建议以帮助其更快地确认答案，否则用户需要不断的尝试才有可能找对一个未被使用的昵称，无形中增加了用户的操作负担。

再看下图是百度贴吧的注册页面：

同样是设置昵称被占用，在提示错误的同时，基于用户已经输入的内容给出建议答案，用户可以选择重新输入，也可以直接使用建议答案，无需不断尝试就可以快速找到满意的昵称，提高了注册表单的填写效率。

2. 即时验证，时机是关键

前文说过，用户填写表单时给予及时验证和反馈是比较好的体验，但是验证和反馈的时机很关键。

下图是人人贷申请出借的表单，未输入金额时提示输入1000元的整数倍，当用户刚输入1时就给出错误提示，这样分散了注意力，容易使用户有挫败感。

正确的做法应该是选择合适的时机给予用户及时的反馈。如果是长表单则可以在焦点离开输入框后进行校验和提示；如果是短表单则可以通过按钮或技术来实现，比如：未输入正确金额，按钮不可点击，或者技术限制用户不允许输入小数点等方法。

3. 如果有输入限制，应当采用实时、动态更新的方法传递输入限制

表单设计中，有些问题没有明确的答案，但是有明确的限制规则，比如：限制用户输入内容的字符数，用户设置密码的长度和安全性提示等。此时采用即时验证，能够避免由于限制而产生的潜在错误。

如下图是美团提交意见反馈的表单，问题描述限定在200字以内，当用户输入内容后，右下角的计数器会实时更新显示当前已输入和限制字数。

另一个常见的限制就是注册表单的设置密码功能，下图是新浪微博的注册页面，在用户输入密码的过程中即时验证，提示用户密码的正确性及安全性。

1. 基于已有内容进行智能判断

根据用户已经输入的内容智能判断其他相关内容，从而减少用户输入，降低出错率。

下图是百度钱包和恒昌财富开通银行存管的表单对比：

百度钱包在用户输入银行卡号后直接识别出所属银行，而右侧产品输入卡号后需要用户手动选择开卡行，增加操作成本。类似的还有根据生日判断年龄，根据手机号码判断所属运营商等。

减少多余输入对用户来说固然是好的，但是我们在运用该方法时需要注意，如果不能准确的判断相关内容，或者相关内容很重要，那么请允许用户自行修改。如下图：

用户申请贷款额度时需要进行身份认证，利用OCR技术扫描身份证减少用户输入，但是由于身份认证的信息很重要，需要用户反复核对，且无法保证技术0差错，所以在扫描身份证后自动带出扫描的信息同时提示用户可手动修改。这样既减少了用户输入又避免了错误。

再来看一个例子，下图是百度钱包提现页面：

提现时可以选择手动输入金额也可以点击“全部提现”，点击“全部提现”后，账户内所有可提现余额自动填写到输入框内。这也是减少用户输入的一个贴心的设计细节。

再看一个长表单，是金融类产品坤元资产的信息认证表单：

我们看到，需要填写的项有出生地和居住地，那如何尽可能的减少用户输入呢？考虑到目标用户中大部分人的出生地与居住地是相同的，所以在设计时提供给用户一个“同出生地”的按钮，用户不必重复填写相同内容，只需要点击“同出生地”，就会把出生地的内容全部带入到居住地输入框，极大的方便了用户，提高了表单的完成效率。

2. 提供默认选项

若问题为选择项，则为用户提供默认选项也是一个好方法。如下图某OA系统，根据公司人事提供的信息，公司内请假申请类型最多的是调休假，因此在设计时将休假类型的默认选项设置为调休假，减少大部分用户的不必要输入。

这里需要说明的是，由于大部分用户会保持默认选项，所以要注意，默认的选项要复合大部分用户的目标。另外，如果你不能确定初始默认选项是什么，是否符合大多数填写表单者的需求，那么最好不要提供默认选项，不然反而会弄巧成拙。

3. 根据用户之前的操作设置个性化默认项

若表单为可重复使用的表单，当用户再次使用时，默认记住用户之前填写的内容，也是减少用户输入的另一种形式。

如下图，百度地图搜索路线的表单，起点默认为当前定位的位置，输入终点时（右图）在输入框下方有一个“家”，点击“家”之后直接将家的位置带入终点输入框，这就是根据用户之前的操作设置了个性化默认，值得我们借鉴。

帮助文字不是组成表单的必要元素，但有些情况需要提供帮助文字才能顺利完成表单填写：

1. 用户不熟悉标签含义时

如图，是微信公众平台的注册表单：

我们看邮箱验证码标签，如果不做解释说明的话可能会引起用户歧义：什么是邮箱验证码？如何获取邮箱验证码……等一系列问题。因此设计师在输入框下方给出了帮助文字，详细说明了如何回答邮箱验证码这一问题。

2. 需要向用户说明为什么要问这个问题时

如上图，还是刚才的微信公众平台，再看下“邮箱”这个标签，下方的帮助文字说明了为什么要填写邮箱——作为登录账号。向用户解释说明了为什么要问这个问题，能够减少用户的担忧，促成表单的填写。

3. 涉及到安全或隐私问题时

下图是百度云平台创建工单页面，可以看到“机密信息”标签在输入框内给出了帮助文字，告知用户填写的内容会在后台做加密处理，确保信息安全。当表单涉及到用户的安全或隐私信息时，或者隐私信息可能会引起用户担忧时，应当提供帮助文字排除用户的担忧。

4. 建议回答问题的方式

这种情况一般是问题有特定的格式或特殊的要求，此时提供帮助文字能够使用户尽快确认正确答案。如下图的设置密码、填写工单标题、上传附件要求等例子，都有明确的帮助文字说明回答问题的方式和要求。

通过上面的例子，我们了解了帮助文字出现的时机，下一步我们该如何展现帮助文字呢？一般地，我们可以把帮助文字分成2种：自动即时帮助和用户激活的即时帮助。

1. 自动即时帮助

指帮助文字是自动出现的，直接在页面中展示出来，不需要用户主动获取。通常如果人们知道表单问题答案，但不确定如何回答或为什么回答时，可以考虑使用自动即时帮助。

上文的微信公众平台填写邮箱和密码都是使用自动即时帮助的例子。

2. 用户激活的即时帮助

指不直接将文字展示出来，当用户需要帮助时可自己主动获取。如果表单所含问题复杂，或者表单会被相同的人重复使用时适合用该方法。

下图是宜人贷的申请表单，在出借人适当性管理告知后面有一个问号样式的图标，鼠标悬停时会出现相关的解释说明文字。由于适当性管理告知是一个专业词汇，除专家用户外的其他用户很难理解。因此提供用户激活的即时帮助显得很有必要，无论何种用户，无论什么时候，只要用户需要帮助就可以主动获取。

另外，必要时为用户提供帮助文字还有两点需要注意：

1.如果你选择了使用帮助文字，请一定要让它真的能够“帮助”用户

上图是恒易贷的登录表单改版前后对比，我们发现改版后的帮助文字清晰的告诉用户：账号是手机号码，登录密码的规则。布局、视觉都没有变化，仅仅是文案的变化就能减轻用户负担，提升用户体验。因为每个用户都在使用很多不同的app，账户和密码的格式也各不相同，这样的提示就能很好的“帮助”用户快速正确的完成登录并使用产品。

2.用户激活的即时帮助，注意出现的时机

如果是鼠标悬停时显示帮助文字，则要扩大悬浮激活区域，方便用户操作；且要悬停5s以上再显示，来确认用户是真的需要帮助，而不是因为鼠标偶然通过触发区。

通过以上的总结能够发现很多都是细节的设计，细节能够打动人心，细节能够决定成败。一个优秀的体验设计师，一定是在意细节又不拘泥于细节的人。

本篇文章就到这里吧，下一篇我将从表单的基本要素说起，谈谈各要素的设计要注意哪些问题。更多精彩，敬请期待！

推荐阅读书籍：《Web表单设计：点石成金的艺术》、《Web表单设计：创建高可用性的网页表单》

有哪些表单设计的注意事项?

一、表单设计的注意事项——保持秩序

1. 单柱浏览

表单的主要功能是向用户清楚地传达信息。保持单列表单的顺序更有利于用户的浏览。它帮助用户识别和填写内容。但是，多列表单会破坏用户填写规则，影响效率。

2. 垂直布局

当表单中有多个选项供用户选择时，将每个选项垂直放置在每个选项下会使用户更容易阅读和浏览。

3.一致的操作

填写表单时，避免在填写过程中更改按钮的样式和颜色。一致的操作行为需要用户的确认，可以有效减少用户在操作时的困惑和犹豫，保证用户在填写表单过程中的顺畅体验，从而实现最终的业务交易结果。

二、表单设计的注意事项——描述很清楚

1. 标题不可替换

虽然使用占位符而不是标题扩展了表格的填充空间并减少了视觉干扰，但这种方法不利于用户的短期记忆。一旦用户触发输入并且占位符消失，用户可能会对这里要填写的内容感到困惑。您必须删除所有输入，然后才能再次显示标题。显然，这是违反人性的。

2. 输入字段符合预期

输入字段的长度与预期的输入内容成比例，以保证输入字段的长度符合用户的心理期望，并能在形式上得到充分的体现。

3.不要隐藏基本的帮助信息

用户在购买过程中有明确的需求确认和信息收集。因此，在设计过程中，应强调或显示用户填写表单的基本帮助信息，避免因隐藏帮助信息而引起客户投诉。

以上便是关于表单设计的注意事项介绍了，希望它能帮助我们开拓，并确定属于我们自己的设计风格，这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等，也可以点击本站的其他文章进行学习。

提高用户体验的八种表单设计技巧

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。今天昆明北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。

1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。

A. 左标签在一些网页表单当中，标签局左是常见的一种形式。左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

B. 顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。

C. 行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。当然，部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。全部大写的标签容易造成阅读和浏览上的困难。

3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。

4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。但是对于内容多的情况下，就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。