制作表单交互网页总结（[交互设计]PC&移动端表单设计）

本文目录

• [交互设计]PC&移动端表单设计
• 如何让表单网页同时具备沟通交互和美化页面的功能
• 网页制作中常用的网页表单的应用
• 表单设计心得

[交互设计]PC&移动端表单设计

手机App为生活带来巨大便利，多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的地方，包括：用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。

一个优秀的表单设计有助于提升产品用户体验，提高转化率，达到更好的营销效果。

每个表单都有特定的目的，或吸引注册，或达成交易。考虑不周或错误设计会导致用户流失或交易失败。

学习表单设设计，需要先了解表单设计的基本原则，避免做表单时进入雷区。

表单设计基本原则

1. 逻辑清晰

表单是产品与用户沟通的语言，和对话一样，表单应当符合逻辑，帮助双方完成交流。

  2. 尽量使用单列设计

多列表单容易让用户漏填，无法集中精力完成填写。单列表单填写路径单一、直接、相比更为高效。 

3. 减少输入

表单越长越复杂，用户完成表单的意愿越低（尤其在移动端产品中）。最大限度减少输入字段，使表单完成更快速，尤其向用户索取大量信息时，更要注意表单简洁。

4. 提供合适的输入方式

输入“账号、密码，邮箱，昵称”时应提供不同键盘，减少输入错误，帮助用户快速完成填写。 

5. 避免把标签当占位符使用

有一种设计模式是让标签作为占位符置于输入框中，用户点击输入时自动消失。这种设计比较简约，但用户输入时容易忘记需要输入的字段是什么，从而产生问题。

优秀案例：移动端表单设计 

Dropbox by Sam Atmore

交互设计分析 ：

Sam的登陆/注册表单中，登陆、注册逻辑非常清晰。

1.使用单列二选一表单设计。用户使用App前，只需要二选一随标签提示进行下一步操作。就是误操作也可以用滑动回到另一选项。

2.登陆、注册页面的主按钮明确，有强引导作用。 

Location Switching - by Nimasha Perera

交互设计分析：关键词“智能自动填充选项”

表单设计融入更多自动化元素。如：自动定位功能，根据当前位置智能填充信息。省去用户地理位置选择操作，货币转化操作，省时省力

Form Validation - by Emmanuel Torres

交互设计分析 ：关键词“明显可见的提示信息”

用户登陆、注册过程，理想状态是完成信息填写并提交。

但实际操作中错误不可避免，表单设计要考虑有辨识度的信息提示，实时提醒用户填写错误。而不是全部完成后再告诉他。

拆解表单组件样式

表单的主要特点是引导用户填写信息，设计上应考虑主要信息内容如何引导用户浏览。表单中的信息内容包括：

1) 输入字段： 包括文本字段、密码字段、复选框、单选按钮、滑块和其他需要用户输入的字段；

2) 字段标签： 说明用户输入字段的含义，如文本框前的“你的姓名”；

3) 外观和结构： 包括字段顺序、表单在界面中的样式及不同字段间逻辑关系；

4) 动作按钮： 至少有一个操作按钮（如提交按钮）；

5) 反馈信息： 将操作结果通知用户。如：“谢谢，表单提交成功！”、“你提供的数字不正确”。

l主流表单样式

上标题下提示内容的表单

优点：标题、提示内容可以很长，预览速度快，可以加功能按钮（如附件和照片添加）。

缺点：占据垂直空间较大。

多用于信息内容填写和维修工单信息填写，可以减少页面跳转。

左标题右内容（左右对齐）

优点：常用组件，前端可以直接套用，节省垂直空间，引导用户视觉左右移动，增加用户思考时间，对关键信息填写更加安全。

缺点：相比上下结构表单，用户视觉移动距离增加,行数量多，视觉会很乱。

适用于通用表单填写场景。

左标题右内容（全部居左对齐）

优点：强暗示可输入，视觉浏览速度快。

缺点：标题字段数量不能太过长短不一，会导致视觉不均衡。

主要适用场景：适合金额数字类和身份信息填写。

归类标题表单（内容归属一类）

将同类表单项合成小组内容，帮助用户分类理解填写内容。符合格式塔原理的相似性和封闭性原理。

多用于详情信息展示。

仅提示内容表单

优点：信息少，不需要思考。

缺点：当内容一多很容易出现用户“不知道产品要做什么”的困惑（表单无标题）。

用于登录页或内容较少，如修改手机号/修改姓名/填写备注等。

拆解表单组件交互

表单交互主要有两个目标：引导操作和反馈。

交互操作时，表单有3个交互阶段：输入前、输入中、输入后

输入前

引导用户输入内容，如：密码设置场景

输入框在默认状态提示文案引导用户输入相应的内容；或输入框外有提示，仅支持字母、数字、某某符号输入

输入中

点击输入框弹出键盘，光标闪烁，定位用户当前位置。

表单内容一般有字符数量限制，输入过程中超过字符限制实时报错提示。

如下图：聚焦请输入原密码时,线段颜色明显加重，做为输入中提示。

输入后

web端

输入框失焦即判断输入信息是否符合规则，不合规则报错提示。例如：

玩家用户名重复提醒，密码首字母没有大写，密码长度不符合要求；

输入成功则成功反馈，例如：

输入框右侧图标点亮

移动端

输入所有内容，不即刻做规则判断，先激活按钮。例如：

发布、完成、下一步按钮激活

用户点击操作按钮再进行输入信息合规判断。

案例：提升用户体验和客户转化的最佳表单设计

填写表单对于用户来说是一道槛，下面就来看一看提升用户体验和客户转化的注册、登录表单中最佳设计模式时应注意哪些设计、交互细节：

1.说明注册价值

用户最不想做的事就是注册。用明确的价值说明能激发注册行为。表达的价值主张：在这里，连接世界。

2.设置醒目登陆输入框

直接显示输入框，而不是设置“登录”链接给用户增加一次点击。

3.允许使用第三方账号注册、登录

允许用户使用现有的第三方帐户登录产品能给用户带来便利，记很多密码是令人头痛的问题。

4.用户名采用邮箱或手机号码

使用电子邮件、手机号码作为用户名比起一个新名字让用户轻松很多，因为新起的用户名往往已被占用。

5.登录、注册功能区分明显

登录（Sign in/Login）、注册（Register/Sign up）链接放在一起，很容易使用户混淆，尽可能将两者区别表达

6.高亮显示输入框，允许记住用户登录信息

用户在输入框输入内容时，文本框高亮显示提示正在该框内工作。允许该表单记住本人登录信息。

7.允许用户查看密码

密码总是以圆点显示，不能确认输入的密码是否正确，允许密码明文显示是充满人性的设计。

8.必要的信息提示

输入错误的信息提示，还包括一些重要的注意事项提示，例如以下三个表单：

9.显示密码强壮程度

10.少使用下拉选项

表单中某项目里只有3-4个参数要选择，不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。

如何让表单网页同时具备沟通交互和美化页面的功能

要让表单网页同时具备沟通交互和美化页面的功能，可以采取以下措施：

• 使用 CSS 美化页面：通过使用 Cascading Style Sheets (CSS) 样式表，可以美化 web 页面的外观和布局，例如为输入框添加阴影、边框、圆角、背景颜色等效果。这样能使表单页面更加吸引人，也能让用户更容易理解它们应该填什么信息。

• 添加 JavaScript 交互：JavaScript 可以用来增加表单页面的交互性，比如实现自动完成补全、校验输入数据、增加或删除表单字段、提交表单后的反馈等功能。这些交互操作可以用来优化用户的使用体验，并且有效防止表单被滥用。

• 采用子任务的方式呈现表单内容：如果一个表单很长，建议采用分段形式，将表单拆分为多个子任务，每个子任务有一个标题和提示内容，以便用户更好地组织和完成每个部分。

• 遵循 Web 标准和设计原则：在表单设计时，应该遵循 Web 标准和设计原则，保证表单结构清晰，流程合理，能够有效传达主题信息。

• 测试与优化：测试是保障表单质量的重要环节，需要测试表单各种使用情况是否符合需求。针对测试结果进行调整和优化，适时地做出修正和改进。

网页制作中常用的网页表单的应用

说实话，无论是asp,php还是jsp进行网络编程的时候，都离不开和用户的交互。
而人机对话的平台，基本上是靠相应的文本、列表框进行输入，然后通过按钮提交送至数据库的。
所以学习网络编程就一定要了解这些输入平台相关的东西：表单（form）其基本格式如下：
form name="form1" action="xxx.asp" method="post"
input type="text" name="yourname"
select name="selectwhat"
optionaaa/option
optionaaa/option
/select
textarea name="textinit" rows=5 cols=10/textarea
/form
可以总结出：表单即包括form.../form之内的相关内容。
其中内部可以分三大类：input，select，textarea
一，首先看form内部参数
参数name：用来表示该表单的唯一名称，方便一个页面建立多个表单而不混淆，当然更是为了接受页面的确认关系。
参数action：显而易见，是表示当前的表单中所有内容将送交某个页面去处理。处理包括接受信息，数据库比较，添加，修改等。
参数method：即表单的提交方法，含两种方法：post和get。post是传输信息内容，get是传输url值，具体用法将会在下一节“内置对象request”中介绍到
二，再来看Input相关
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。
1，type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值
特殊参数readonly：表示该框中只能显示，不能添加修改。
form
your name:
input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"br
input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"
/form
2，type=password
不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和“type=text”相类似。
form
your password:
input type="password" name="yourpwd" size="20" maxlength="15" value="123456"密码长度小于15
/form
3，type=file
当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）
提供了一个文件目录输入的平台，参数有name，size。
form
your file:
input type="file" name="yourfile" size="30"
/form
4，type=hidden
非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。
form name="form1"
your hidden info here:
input type="hidden" name="yourhiddeninfo" value=""
/form
script
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
/script
5，type=button
标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码
form name="form1"
your button:
input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open(’
/form
6，type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）
其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）
form name="form1"
a:input type="checkbox" name="checkit" value="a" checkedbr
b:input type="checkbox" name="checkit" value="b"br
c:input type="checkbox" name="checkit" value="c"br
/form
name值可以不一样，但不推荐br
form name="form1"
a:input type="checkbox" name="checkit1" value="a" checkedbr
b:input type="checkbox" name="checkit2" value="b"br
c:input type="checkbox" name="checkit3" value="c"br
/form
7，type=radio
即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。
form name="form1"
a:input type="radio" name="checkit" value="a" checkedbr
b:input type="radio" name="checkit" value="b"br
c:input type="radio" name="checkit" value="c"br
/form
下面是name值不同的一个例子，就不能实现多选一的效果了br
form name="form1"
a:input type="radio" name="checkit1" value="a" checkedbr
b:input type="radio" name="checkit2" value="b"br
c:input type="radio" name="checkit3" value="c"br
/form
8，type=image
比较另类的一个，自己看看效果吧，可以作为提交式图片
form name="form1" action="xxx.asp"
your Imgsubmit:
input type="image" src="../blog/images/face4.gif"
/form
9，type=submit and type=reset
分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。
form name="form1" action="xxx.asp"
input type="text" name="yourname"
input type="submit" value="提交"
input type="reset" value="重置"
/form
Input的Type总结下来有10个，还是不少的，呵呵
三，接着再来看Select相关
Select主要要来做下拉菜单，跳转菜单，（下拉）列表。
其本身有内嵌代码option.../option，option参数value值为传递被处理的值，option还有参数selected，表示默认被选中的。
1，下拉菜单
只是菜单式显示。
form name="form1"
select name="selectwhat"
option value="a"aaa/option
option value="b"bbb/option
option value="c" selectedccc/option
/select
/form
script
alert("菜单的默认选取值是 "+document.form1.selectwhat.value)
/script
2，跳转菜单
在下拉菜单基础上添加JavaScript成为跳转菜单。
select onChange="if(this.selectedIndex
this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;"
option selected网站连接/option
option value="Webjx.Com
option value="Sina.com.cn
option value="163.com
/seclect
3，下拉列表
和下拉菜单最大的区别就是select多了一个size值，该值并非长度大小，而是列表的上下高度。
当然还有更主要的是：菜单只能选一个，而列表可以选多个，该特殊参数为multiple size=1简直就是一个下拉菜单
form name="form1"
select name="selectwhat" size=1
option value="a"aaa/option
option value="b"bbb/option
option value="c"ccc/option
/select
/formbr
size1你会发现了大不同
form name="form1"
select name="selectwhat" size=3
option value="a"aaa/option
option value="b"bbb/option
option value="c"ccc/option
/select
/formbr
加入了multiple发现可以多个选择了，包括Shift进行快速全选及Ctrl进行点选
form name="form1"
select name="selectwhat" size=3 multiple
option value="a"aaa/option
option value="b"bbb/option
option value="c"ccc/option
/select
/formbr
四，最后关注的Textarea
可以将Textarea文本区域理解为扩大化了的文本输入框。
其参数没有value，默认值设定在textarea.../textarea之间。
其它参数还有rows,表示文本区域的行数；参数cols，表示文本区域的列数。
还有参数warp，当warp=off表示该文本区域中的不自动换行，当然不写默认是自动换行的。
form name="form1"
textarea name="textinit" rows="5" cols="20" wrap="off"5行20列，不自动换行/textarea
/form

表单设计心得

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9、表单设计保持一致性

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

10、使用恰当的动作顺序

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

11、表单提示文案要精简

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