手机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地址。
如若转载，请注明出处：https://www.daxuejiayuan.com/22078.html
相关推荐
-
学生成绩查询系统小程序（临沂学生成绩查询系统）
本项目涉及的内容过多，将分为三篇文章进行展示，第一篇文章整体介绍这个项目的情况，包括项目事项的功能和相关技术，还提供了项目中使用到的数据类型和路由信息等；第二篇文章重点介绍学生路由…
-
代理ip工具（免费国外ip代理工具）
人们在进行互联网访问或使用网络时，时常会借助许多工具来帮助我们高效率进行网络办公、网络游戏以及解决一些网络问题，这里面使用率最多也最为频繁的工具非IP海IP代理莫属，它是换IP软件…
-
手机远程控制电脑的软件（远程控制电脑的软件有哪些）
关注职场办公，分享实用干货，洞察科技资讯，这里是「职场科技范」。 有多少朋友跟我一样，被居家隔离了，在这种毫无准备的情况下要求居家办公，最头痛的事情就是，重要的文件还在公司电脑上。…
-
传奇手游发布站（发布站点）
大家好，我是郑老师。 关注孩子学习的家长，最近一定会看到这样的视频：视频中采访了两个名校的学生，请教高分的学习方法，并询问了初高中补课情况，学习方法简单，而且没有补课，这或许和很多…
-
取名网（名网 有名网）
近期，国内一枚三字母.cn域名以88万元成交，根据多方消息证实该域名为KIA.cn。域名持有人在朋友圈激动表示“KIA.cn的出售，解决了自己的困境，还感谢了当初让自己拿下此米的老…
-
冰兔食品（冰兔子的耳朵掉了怎么办）
“畲”，“畲”诗词：是否与畲族有关？ 畲，拼音:shē，yú，其含义有: ①播种前，焚烧田地里的草木，用草木灰做肥料下种;刀耕火种。 ②刀耕火种的田地:"长刀短笠去烧~。 …
-
图片下载工具app（网商图片下载工具）
免费的东西总是令人兴奋的，如果免费又牛逼呢？你会喜欢这样的免费工具和资源吗？ 1. 表格图标 免费和开源的图标设计注重细节，让您的设计脱颖而出。 链接：HTTPS ://table…
-
源码吧 wordpress（游戏源码吧）
很多客户过来找我说，自己买了一套源码，让帮忙部署。但当我听完报价后基本上就急了，说自己买个源码才几十块钱，让帮忙部署一下收费几千块，这不是坑人吗。对于这种需求的客户，我想说两句。 …
-
代销货源怎么找（代销货源批发网）
养孩子是笔不小的开销，为了省钱我也找了很多方法。下面我们分析一下值不值。 首先母婴代理：入了代理，会给你一些货源群，群里询价，下单直接找群主，下单不通过上家，没有一层一层的加价。目…
-
十大黄金软件免费下载（软件免费下载安装）
Hello 大家好 这里是繁星过客！ 昨天给大家推荐了小说网站：吾爱阅读 大家用着怎么样，是不是非常好用 今天我给大家找推荐的资源的时候 突然发现了吾爱阅读的手机版安装包，用了一下…