表单设计,表单设计心得

表单设计,表单设计心得详细介绍

本文目录一览： 提高用户体验的八种表单设计技巧？

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。今天天通苑北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。
1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。
A.左标签在一些网页表单当中，标签局左是常见的一种形式。左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。
B.顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。
C.行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。当然，部分网站pc端的表单设计中也会用到这种设计。
2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。全部大写的标签容易造成阅读和浏览上的困难。
3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。
4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。但是对于内容多的情况下，就建议采用竖排的排序方式。
5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

怎样设计网页表单？

一、表单概述
表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：
1.1 表单标签＜form＞＜/form＞

关于Web表单设计的经验分享

表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～

一、什么是表单？

表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。

二、表单的构成

表单通常由标签、输入域、操作按钮、这三部分构成。

标签

标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。

标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：

1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。

因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。

2.当标签与输入域左对齐时，建议把＊号放在标签右侧。

由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。

输入域

输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。

不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：

https://ant.design/components/overview-cn/

因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。

操作按钮

操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。

三、表单设计常见问题

1.标签采用哪种对齐方式更好？

在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。

左对齐

当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。

如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。

顶对齐

采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。

?顶对齐

右对齐

右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。

?右对齐

在这几种对齐方式中，用户浏览信息的速率顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。

2.操作按钮应该用哪种设计形式比较好？

对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。

主按钮

主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。

次按钮

次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。

对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。

图标按钮

图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。

在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。

文字按钮

文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。

图标＋文字 按钮

图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。

3.输入框应该设计几种状态？

考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。

为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。

?及时反馈错误信息

在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。

输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。

写在最后的话

表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。

往期解析

UI设计－首页解析

详情页设计技法解析

轻松get文字标签设计技法?? ?

Get点9切图方法（内附切图神器）

工作流自定义表单设计原理

工作流自定义表单设计原理包括以下几个方面：1、明确流程需求：在设计自定义表单之前，需要明确当前流程所需收集的信息以及流程参与者需要进行的操作。这些需求可以通过与业务人员的沟通和调研得到。2、设计表单结构：根据流程需求，设计表单的结构，包括表单的标题、表单字段、表单控件、表单布局等。表单字段可以根据不同的需求进行选择，例如单行文本、多行文本、下拉框、日期选择器等。3、设计表单样式：根据企业的品牌风格和用户体验的要求，设计表单的样式，包括表单的背景、字体、颜色、图标等。4、配置表单规则：根据表单的需求，配置表单的规则，包括表单字段的必填性、字段之间的关联性、表单提交的条件等。5、集成表单与工作流：将设计好的表单与工作流引擎进行集成，使表单能够与工作流引擎进行交互，包括表单数据的传递、表单提交后的处理等。

三张图片的表单如何设计

三张图片的表单如何设计？一、如果要设计三张图片，如何把三张图进行表单编辑首先设计上下层级的排列方式比如说上下层级的分割设计，就是根据三张图片的文件大小进行排列，然后通过不同宽度的点线面来对文件的文件进行分割，并且进行上下层级排列，这样会更加清晰。下层级的排列方式可以用点线面来进行分栏，将一张图片分成几个图层，通过点线面来对这几个图层进行排列，这样也能让这几张图片的文件的排版更加美观，并且还具有美感。而文件的点线面的排列方式是比较常用的，通过这些点和线就可以达到美观的效果。二、排版设计的图片， 图片的规则排版。排版设计的图片规则 面的形状。面的形状也能引导视线。好的排版会让整的海报更通透、更简洁、更包容。

表单设计2：表单的基本要素

上一篇文章我们讲到了表单设计的基本原则，这一篇我们来了解表单的基本要素。我们知道每个表单至少都有三个基本要素：标签、输入框和动作。标签用来提出问题，输入框用来填写答案，动作则用来提交答案。每一个要素的设计好坏都会对表单产生影响。下面我们详细说明：
标签应当采用简洁易懂的语言来提出问题，以便于回答。那在布局上标签是左对齐，右对齐，还是顶对齐？— —答案是根据需求而定。 这并不是一句废话，之前的文章中提过，脱离了业务需求和用户需求的设计是没有意义的，需求不同对表单的设计要求也不一样。比如：有的表单希望用户在最短时间内填完，而有的表单希望降低用户的填写速度，以此来让用户对每一个问题都能够深思熟虑的作答。 下面我们来看看标签的不同对齐方式都有哪些优缺点及其适用场景。
下图是网易云课堂申请开课的表单，其标签为左对齐标签
左对齐标签的优点： （1）容易浏览 标签左对齐更方便用户浏览，用户只需要上下阅读标签便可快速浏览表单，而不会被输入框打断； （2）占用的垂直空间较少 由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；
左对齐标签的缺点： 填写速度最慢 左对齐标签与输入框之间的间距由最长的标签决定，这就导致部分较短的标签和输入框之间的距离较大，用户将标签和对应输入框联系起来的时间也就稍微长一些。
左对齐标签的适用场景： 虽然左对齐标签是3种方式中填写速度最慢的，但完成时间长并不一定是坏事。如果你希望用户仔细考虑表单中每个问题和答案时，左对齐标签是个好办法。 而当你选择采用左对齐标签时，你可以让标签长度尽量保持一致，来避免浏览不方便这一问题。 另外，如果表单中既有必填项也有选填项，而你想让用户能够很方便的整体浏览表单问题时，也可以采用左对齐标签。
下图是腾讯课堂申请开课的表单，标签采用了右对齐的方式。
右对齐标签优点： （1）输入框与标签相邻 标签与输入框相邻，使用户能很好的将二者联系在一起，从而更快速的回答问题。采用标签右对齐方式设计的表单其完成速度是3种方式中居中的一个。 （2）占用的垂直空间较少 由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；
右对齐标签缺点： 表单的可读性降低 由于大部分人的浏览习惯是从左到右，所以左侧不齐的话，用户的视线需要来回移动，降低了整体表单的浏览效率。如果标签文字折行的话，效率会更低。 （这里需要注意，整体浏览效率与表单完成率不是一个概念，整体浏览效率可以理解为表单的可读性，表单完成率可以理解为完成表单所需的时间）。
右对齐标签的适用场景： 如果希望用户快速完成表单填写，且占用更少的垂直距离时，可以采用右对齐标签，但是要注意，不要让标签文字折行而影响表单可读性。
下图是蓝湖网站意见反馈页面，是一种顶对齐标签方式的表单。
顶对齐标签的优点： （1）完成表单所需时间最短 顶对齐标签与输入框之间的位置紧密相邻，使表单填写变得很快，而且用户的浏览顺序是一直向下的，使得表单有清晰的完成路径。 （2）横向空间可延伸 由于标签和输入框是垂直排列的，这样在横向上就有充足的空间，标签文字也可以有更大的扩展性。
顶对齐标签的缺点： 占用较大的垂直空间 相对于前2种方式，顶对齐标签会占用额外的垂直空间。 如果你选用了顶对齐标签的设计方式，那么要注意采用合适的垂直间距，最好使用输入框50%-75%的高度作为相邻输入框的间距。
顶对齐标签的适用场景： 如果希望用户最快速的完成表单，或者表单的标签很长（如英文标签），希望在横向上有更大的扩展性且垂直方向不受限制时，可以采用顶对齐标签。
标签的布局除上述三种外，还有输入框内标签和混合对齐标签。 输入框内标签适用于表单非常短，或屏幕空间极度有限的情况。如下图是新浪微博未登录时的首页，其中登录注册表单只占了很小的部分，所以采用了输入框内标签的方式。
如果你选择使用输入框内标签，需要注意以下几点： （1）当焦点定位在输入框时，标签不要立即消失，而要保证用户能够看到问题（标签内容）； （2）当用户输入时，标签应该消失，而不要成为答案的一部分； （3）输入框内标签更适合只有一个输入框（比如搜索）或者用户对几个输入框的问题非常熟悉的表单（比如登录注册）； （4）如果表单较长，不建议使用输入框内标签。因为用户会忘记要回答的是什么问题，而且填写完表单再检查时也会因为看不见问题而无法核对；
还有一种布局是混合对齐标签，我们是不建议使用的。因为混合对齐的方式浏览起来很不方便，也会破坏用户完成表单的明确路径。
常见的输入框类型有以下几种：
文本框： 允许用户输入任意数量（或限定数量）的字符；
单选框： 允许用户从2个或多个选项中选择一个，由于选项之间互斥，因此建议有默认选项。当选项不多或希望将选项全部展示出来时，建议使用单选框； 使用时应当保证点击单选框或者标签都能选中。
复选框： 允许用户选择一个或多个，或用于选择“是”或“否”的问题。 使用时应当保证点击复选框或者标签都能选中；
下拉菜单： 允许用户从2个或多个选项中选择一个。适用于选项较多时使用，但是要注意控制选项数量。
输入框不只被用来填写答案，其长度对用户填写答案还能起到暗示作用。 如下图所示：“手机号码”、“输入短信验证码”和“简介三个标签对应的输入框长度是不一样的，因为它们对答案的长度要求不同。
所以输入框的长度对人们填写答案时起到了有效的暗示，我们在设计时，如果答案有固定的规则（如邮编、电话号码、短信验证码、邮箱，备注、简介等），可通过长短不同的输入框来暗示用户。 如果答案没有规则无法暗示，则输入框应保持长度一致，足够填写答案即可，避免长度不一导致用户混乱。
动作是完成表单的关键一步，因为我们填写完表单之后要“提交”。我们可以把一些重要的行为视为“主动作”，如：提交、保存、下一步等。另一些与完成表单填写的目标相悖的行为可以视为“次动作”，如：取消、撤销、返回等。 还有一些在表单填写过程中的动作可以视为“进程中动作”，如：查询、上传附件等。
在动作设计时，需要注意以下几点：
表单中动作的数量不宜过多，不然会让用户无从选择。如果表单中既有主动作又有次动作，那么应该从视觉上区分。
表单设计应当为用户提供明确的完成路径，减少填表所花费的时间，上文的可用性测试实验也验证了主动作与输入框对齐是表单完成最快的方案。 这里需要说明，由于PC端屏幕可视区域较大，因此信息的展示方式是重要考虑的因素，应该便于用户浏览，方便用户在复杂的信息中快速找到需要的信息并完成操作。而在手机端，我们发现大部分主动作放在了右侧，是因为手机端屏幕有限，信息已经是极度精简后的内容，此时在有限的空间内方便操作则变得更加重要。
进程中的动作应该让进程可视化。当后台正在处理用户的某一“动作”时，用户是看不到的，所以我们最好能给予用户反馈，告知用户我们接到了指令并且动作正在进行，这样能够减少用户的焦虑，也可避免表单重复提交。 下图是邮箱上传附件的截图：
用户选择附件后能够看到当前上传的进程，这样既给了用户成功反馈，又能减少用户等待时的焦虑。
还有一种方式是把进程直接放在按钮上显示。如下图，正在登录和获取验证码按钮，用户点击按钮后有一个后台处理信息的过程可视化。将进程放在按钮上能够给予用户最轻量的提示，同时不会占用多余的空间。
关于动作按钮，还有一种常见的方式是禁用主动作，就是将主动作按钮置灰不可点击，只有当用户完成表单后才可点击。这时需要注意，后台要对每个问题的答案进行校验且要知道什么时候用户回答完所有问题。
关于表单的基本要素就写到这里。都是我在工作中的积累和总结。其实，表单设计还有很多细节，且不同的场景和目标对表单的要求也各不相同，我们要不断的积累，寻求更好的解决方案，做出更符合产品和用户需求的设计。

表单设计心得

表单是网页中的重要元素，一个优秀的表单会给用户带来不错的用户体验。经过近期长时间设计表单，我们需要从表单基本层面重新审视表单、理解表单。深刻认识到表单时用户和软件之间最具挑战的交互方式。

1、必填字段不需要标记

我们在设计表单时，大多数时候，或者说大多数做法都会给必填字段加上一个星号*标记，以让用户知道这是必填选项，但实际上必填选项没有太大意义。一份表单，最初始的出发点本来就是要填写完这份表单，标出必填字段并不是一个好的交互，无形之中给用户增添了学习成本，单纯使用（红色的*）星号标注必填字段有一定的学习成本，会让用户有学习负担。针对必填选项，表单选项基本上都是需要填写的，特意的使用某个符号标示此项必填，会显得有些许累赘，完全可以设置选填选项来弥补这一缺陷。

但是不需要标记必填也不是对所有表单都适用。如果大部分字段都必需输入，那么就将可选字段进行标注，如果大部分字段都是可选的，那么就标注必填字段。

关于必填选项这个处理方式，看了一下，腾讯系的很多产品都没有加必填选项标记，如腾讯微博、腾讯微视、QQ号注册等，百度系的百度账号注册也没有必填选项标记，Facebook注册没有必填标记。

2、每一个表单只使用一种按钮类型，或者只提供一个按钮

我们在填写表单的时候都会发现，当选项项增加时，我们就需要增添世间去思考怎么做选择，下决定的时间就会无形之中变长。我们可以在设计表单的时候就避免这个问题，每个表单页面只有一个醒目的按钮，让所有的基本按钮都保持同一风格，主动作按钮突出让用户毫不费力地进行操作。

3、输入框的长度要保持适中

输入框的长度要满足输入的文本的长度，同样也不能让输入框的长度太长。如果有必要，可以增加一个计数器，实时显示用户还可输入的字符数。这种情况针对大段输入框不失为一个好方法。但是对于普通的一句话输入框，只要框的长度适中就好，输入框太长会给用户造成疑惑，我的内容是不是填少了。

4、校验要及时，且提示信息需要突出显示，要友善

对于输入框输入的内容，需要在光标离开的瞬间就进行校验，及时反馈校验结果，不能在填完一整张表单提交时告诉用户第一个输入框输入有错误，这种体验很不好。同时，当填写错误时，要及时在问题区域提示错误，提示信息的位置要醒目准确，让用户一眼看到出错区域，并且提示信息要友善，要告诉用户错误原因，或者给用户提供解决方案入口，不能只孤零零地提示错误，什么都没有，会让用户不知所措。

5、输入框如果有限制，需要给一个示例示范

如果一个输入框要输入手机号，限制为xxx-xxxx-xxxx格式才能被验证，那么就需要在旁边给一个示范。最好的处理方式就是在输入框内加上破折号，让用户直接在破折号之间的空格里输入数字，体验会更好。

6、把相关的部分放在一块

当下时代，信息本就复杂，在填写表单时，人们总会有一种畏惧感，对表单的一种陌生感畏惧感，把相关的内容放在一块，一是可以显得有条理性，二是可以把内容组织得更好，三是可以让用户在填写的过程中顺着一定的思维思考，可以产生更好的用户体验。

7、如果表单过长，可以选择拆分表单

如果表单过长，可以按照内容的相关性将其拆分成多个步骤，就像是把一个很大的任务分解成多个小任务一样，这样用户在填写时才不会有畏惧感，也不容易产生疲劳。同时长表单拆分后可管理性会更好，用户前面填写的表单可以先保存起来，如果用户在填写后面表单的时候遇到计算机故障，不至于所有填入的表单内容全部丢失。但是，如果将一个长表单进行拆分，就需要给用户一个提示，让用户知道当前所处的位置，如2/4页，这样用户就知道完成了多少内容，还剩多少内容未完成，填写起来心里会更有底。

8、如果一个输入框可以满足需求就不要用两个

一个问卷，给标题添加一个logo，这种形式的，完全可以通过标题输入框就能完成，没有必要再添加一个输入框再来添加logo。给表单添加一个描述，可引入图片、链接页面等，通过一个稍简易的编辑框就能搞定所有。

9、表单设计保持一致性

确保表单中的所有输入控件保持一致，用户体验才会保持一致。前面单选用下拉列表二选一，后面单选用单选按钮，表单风格不一样会给用户造成不好的体验。

10、使用恰当的动作顺序

当一个删除操作，确定是主动作操作时，需要强调确定弱化取消。当一个删除操作取消是主动作操作时，需要强调取消弱化确认。根据场景使用恰当的动作顺序。

11、表单提示文案要精简

没有人愿意查看一大段的提示文案，现在的用户浏览网页都是扫的，不再是认真的阅读每一段文字，提示文案一定要做到言简意赅，一目了然。十个字能搞定的绝对不要用十五个字来臃肿一番。

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

一、表单设计的注意事项——保持秩序
1. 单柱浏览
表单的主要功能是向用户清楚地传达信息。保持单列表单的顺序更有利于用户的浏览。它帮助用户识别和填写内容。但是，多列表单会破坏用户填写规则，影响效率。
2. 垂直布局
当表单中有多个选项供用户选择时，将每个选项垂直放置在每个选项下会使用户更容易阅读和浏览。
3.一致的操作
填写表单时，避免在填写过程中更改按钮的样式和颜色。一致的操作行为需要用户的确认，可以有效减少用户在操作时的困惑和犹豫，保证用户在填写表单过程中的顺畅体验，从而实现最终的业务交易结果。
二、表单设计的注意事项——描述很清楚
1. 标题不可替换
虽然使用占位符而不是标题扩展了表格的填充空间并减少了视觉干扰，但这种方法不利于用户的短期记忆。一旦用户触发输入并且占位符消失，用户可能会对这里要填写的内容感到困惑。您必须删除所有输入，然后才能再次显示标题。显然，这是违反人性的。
2. 输入字段符合预期
输入字段的长度与预期的输入内容成比例，以保证输入字段的长度符合用户的心理期望，并能在形式上得到充分的体现。
3.不要隐藏基本的帮助信息
用户在购买过程中有明确的需求确认和信息收集。因此，在设计过程中，应强调或显示用户填写表单的基本帮助信息，避免因隐藏帮助信息而引起客户投诉。
以上便是关于表单设计的注意事项介绍了，希望它能帮助我们开拓，并确定属于我们自己的设计风格，这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等，也可以点击本站的其他文章进行学习。

表单设计的基本原则-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表单设计：创建高可用性的网页表单》

Web网页设计时注册表单怎么设计更好

对网页进行设计，是建立网站时一定要做好的，网页设计的成功与否，直接影响到用户的体验度，影响到给企业带来的各种收益。那么，web网页设计的时候注册表单怎么设计更好呢？
一、醒目简洁
如果你的网站想要增加更多的注册用户数量，那么就应该考虑注册表单的设计，注册表单的设计一定要简洁，便于用户填写，而且在设计过程中，对于那些需要重点强调的板块以及信息都要用醒目的方式标注出来，这样才会给用户更好的体验。
二、合理组织
如果你的网站中需要填写的表单内容很多，而且相对复杂，这个时候要对表单进行合理的设计和组织，否则会出现杂乱无章的感觉，让用户看到这样的页面就会产生抵触心理，甚至会直接放弃。在组织信息的时候，可以利用框线或者是空间间隔，或者是不同的颜色来进行有效的区分，清晰的浏览线合理的标签以及有效的提示文字，这些都会给用户好的体验。
三、超大的输入框
统计表单设计中，如果有一个超大的输入框，那么会让用户产生填写的欲望，尤其是页面中那些优雅的动画，效果也会给用户产生填写的趣味。设计师在设计表单中可以将不同的元素巧妙的输入其中，最好用加粗的文字来提示用户哪个区域还没有填写，哪个区域已填写完成。
四、节省用户时间
每一个用户都有惰性，而且都比较繁忙，他们不愿意填写大量的表单信息，所以在设计师将那些不必要填写的项目删除，减少用户填写信息量。否则用户在填写的时候会产生厌倦感，甚至有的会因为填写信息量太大，会直接放弃。
五、提供设计关怀
很多文本设计中，有的只是用色彩进行区分，什么色彩代表是不可点击文本，什么色彩代表可点击文本，这种只用色彩作为区分，在一定程度上不能满足客户的需求，因为有部分客户具有或轻或重的色觉障碍，所以在设计表单时可以通过给链接文字加粗，或者是加下划线，或者是将使用按钮用不同的形状进行区分，这样用户就可以更清楚地知道哪些区域是可以点击的，哪些区域是不可以点击的，会大大的提升用户的体验效果。
以上就是web网页设计注册表单的注意事项，希望对大家有一点帮助，在进行设计时最好是遵循以上原则，才会达到最佳的设计效果。
Web网页设计