• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 设计的套路:10个小技巧让长表单填写更省事

设计的套路:10个小技巧让长表单填写更省事

作者:kki的设计笔记 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,用户体验,经验分享,表单设计等相关知识,kki的设计笔记希望在学习及工作中可以帮助到您

表单设计是我们做产品设计时经常会做的一件事,特别是长表单,在设计时尤其要注意。

没有用户愿意对着一串很长且无聊的字段机械式的填写。

针对长表单设计,我结合自己的项目经验和使用其他APP时的一些好的体验,总结了下面10个小tips:

  • 提前告知所需材料,避免表单填写过程被打断 。
  • 用户激励,提前告知用户完成表单的奖励。
  • 清晰告知用户完成整个表单的步骤 。
  • 先易后难,将容易完成的表单放在前面 。
  • 自动填写。
  • 提供合适的输入方式。
  • 数据自动保存。
  • 识别代替输入。
  • 适时地鼓励与反馈。
  • 及时的帮助。

1. 提前告知所需材料,避免表单填写过程被打断

在用户正式开始填写表单前,提前告知用户完成表单所需的材料,比如身份证或工作证等,让用户可以提前准备好,避免途中因为准备材料被打断。 也可以防止用户在途中因为某些原因暂时不能提供相应的材料而中途放弃,这种情况对用户体验是一个很大的伤害。

△ 东兴198

△ 涨乐财富通

2. 用户激励,提前告知用户完成表单的奖励

在用户开始任务前,提前告知用户完成任务后可以获得哪些好处。比如可以获得特权、实物奖励等,增加用户对完成表单的期待感,可以有效地提升用户完成任务的动力。

△ 东方财富

△ 正和岛

3. 清晰告知用户完成整个表单的步骤

这个仅针对分步表单的设计。

在开始任务时,清晰的告知用户整个表单的填写有多少个步骤,每一步是什么,可以让用户形成一个清晰的预期,减少用户在填写表单过程中的不耐情绪。 未知的东西更容易让用户焦虑。

△ 51信用卡管家

△ 平安证券

或者可以用进度条告知用户表单完成的进度,如下图:

△ 涨乐财富通

4. 先易后难,将容易完成的表单放在前面

就像从小老师教导我们的一样,答题的时候一定要先易后难。进行流程设计的时候也可以遵循这个道理,将容易完成的表单放在前面,这样做有三个好处:

  • 简单的表单更容易激起用户的填写欲望,用户会迫不及待地去完成。相反,用户一开始就看到过于复杂的表单,很容易被吓到,从而放弃整个任务。
  • 用户通过完成简单的表单,可以增加自信心,即使后面的表单变复杂了,用户也更有耐心去完成。
  • 当用户将前面简单的表单完成后,放弃整个表单的机会成本就变高了,即使后面碰到较难的任务,用户放弃的几率也会降低。

5. 自动填写

和后台数据库进行匹配,自动填写已知信息。

比如用户在填写长表单前已经在平台填写了联系方式、名称或其他信息,而填写长表单时也需要这些信息要素,我们就可以将这些信息自动填入表单,减少用户的输入。 还比如,后面的表单需要的信息要素正好在前面的表单中有输入,我们也可以自动帮用户填入。

6. 提供合适的输入方式

用户填写表单的时候,能提供选项的尽量提供选项。

选择代替手动输入有两个好处:

  • 减少用户的操作成本。
  • 选项对于平台来说更可控,获得的信息更加标准化。

常见的有性别、地区、年龄等。

△ 微信

举一个例子,之前我们的产品需要用户的工作经验用于分类搜索,在用户填写信息时我们提供了统一的选项,这样我们就能得到标准化和规范化的用户数据。

但是在提供选项的时候要注意所提供选项的合理性,在上面用户工作经验的例子中,就要特别注意工作经验的区间划分。

如果表单不适合提供选项,必须由用户手动填写,则需要根据不同的场景提供正确的控件。

比如输入账号、密码,填写邮箱,输入昵称等,均需提供不同的键盘。

7. 数据自动保存

这点非常重要!特别是对于一些填写内容多的表单,一定要自动保存。

试想一下,你正在完成一个长表单的填写,前面已经填写了很多内容,可是到了提交前可能因为系统崩溃,网络状况,或者因为其他原因不能完成提交,而你又不得不退出。当你重新开始填写表单时,却不得不重新填写一遍所有的信息,这绝对是让人崩溃的。

举一个我近期经历过的正面的例子。

最近我在办理入深户的手续,预约公安局办理准迁证需要完成一个很复杂的表单填写。第一步需要填写大量的信息要素,第二步需要上传很多照片。当我完成了百分之九十的时候,我发现有一张照片我没有,需要家人拍给我,当时我又不得不退出整个预约流程,心里真的有十万只草泥马在奔腾。

后来照片齐全了,我重新开始预约,惊喜的发现所有的信息都已经自动保存了,并不需要重新输入,我只需要将最后一张照片上传就OK了。真是棒棒哒!没想到公安系统的网上服务体验也能做的这么棒。

8. 识别代替输入

善于利用技术的力量,技术上能解决的就不要让用户输入。

比如有时需要输入身份证号或银行卡号,现在有很多技术接口支持拍照扫描自动获取号码,不需要用户费劲的手动输入。 再比如输入位置,通过系统自动定位,既准确又省事。

△ 微信

上图是在微信中添加银行卡时,可通过拍照自动识别卡号。

9. 适时地鼓励与反馈

把用户当成普通人,而大部分普通人都是需要鼓励与肯定的。

适时地给予用户反馈,「你很棒,快完成了哦!」「你已经完成了大半了,再加把劲就能完成全部了哦!」一句有温度的文案,在关键节点上能有效安抚用户的情绪。

10. 及时的帮助

不打扰用户,但是在用户需要的时候及时出现。

在设计表单时,对于一些专业词汇或者较难理解的概念,要给予明确的解释,避免用户填写表单时云里雾里、不知所措。对于一些有较高要求的表单信息也要给予明确的示例供用户参考。而对于一些较复杂的流程,如果有必要的话,还可以提供在线咨询帮助,协助用户完成整个表单的填写。

△ 东方财富

上图是东方财富的开户流程,上传身份证。是一个很好的示例,大家可以体会一下。

欢迎关注作者的微信公众号:

「表单设计经验总结还有这些!」

  • 《别人的UI表单为什么设计这么漂亮?》
  • 《设计表单的时候,为什么悬浮式标签体验更好?》
  • 《抠细节!设计高效好用表单的10个技巧》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06页面出现滚动条的时候如何让滚动条不影响页面宽度
  • 2018-08-23入门手册!帮你快速掌握15个常见的产品设计术语
  • 2018-08-23APP授权设计:如何让用户不反感并同意授权
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:冯·雷斯托夫效应
  • 2018-08-232018年高手总结了21条最值得掌握的移动App 设计基本原则
  • 2018-08-23专业科班方法!写给视觉设计师的印刷基本知识和技巧
  • 2017-08-06各种网络图片格式详解 PNG的好处
  • 2018-08-23互联网「秃顶大会」,思聪都不敢这么玩!
  • 2018-08-23UCAN 2017回顾!8分钟看完设计大咖们的尖端干货
  • 2018-08-23不会自学,你永远只能是个三流设计师

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用好这5个技巧,帮你快速挑选出最合适的字体
    • 你知道吗?腾讯换了Logo,还有了一套新字体
    • 高手的平面课堂!聊聊图文叠加的四种常用技法
    • AI+AE教程!制作骑电动车的小熊!
    • 不仅要搞定视觉,UI设计师还得写得一手好微文案
    • 为了让LOGO 更有个性,高级设计师都学会了这招!
    • 浅谈前端网络、JavaScript优化以及开发小技巧
    • 如何简化操作流程?来看这篇超全面的总结!
    • 超实用!通用设计法则解析之「无障碍使用」
    • 私货分享!设计师如何全面提升自己的工作效率?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有