当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

7个帮你全面提升Web表单填写体验的方法(3)

来源:isux.tencent 作者:Jana 学习:3700人次

7个帮你全面提升Web表单填写体验的方法

当用户选择了所在地区后,自动填充邮政编码。

7个帮你全面提升Web表单填写体验的方法

当用户输入银行账号时,自动空格间断。

7个帮你全面提升Web表单填写体验的方法

当用户输入金额时,自动补充小数。

7个帮你全面提升Web表单填写体验的方法

帮助用户进行决策。当面临的选择越多时,用户就越难做出决定。这个时候可以适当的划分每个选项的优先级,高亮其中的一个,告诉用户你的推荐理由,让用户更容易比较并做出选择。

7个帮你全面提升Web表单填写体验的方法

支持常用的快捷操作,如Tab切换等,让用户在不使用鼠标的情况下也能完成整个表格的填写。

提供友好的引导

清理晦涩的专业术语(如数据库错误),试着使用更加亲切的语言来引导用户填写、告诉用户错误的原因。当问题出现时,清楚的说明问题出现的原因并提供有效的解决方案。必要时,除了指导文案以外,还可以添加更加生动的照片或可视化图形作为引导。

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

一条龙服务

表单的终点并不是提交,我们需要为用户提供一条龙服务,形成流程闭环,避免用户在中途跳出。

举个例子,用户在某网站选好商品点击付款时发现账户余额不足,此时用户只能先进行充值才能进行后续操作,但当用户充值完毕后,发现已经找不回原来选择的商品和付款页面了。这就是典型的流程不闭环的情况。类似的还有当用户需要在论坛下载资源时,系统提示回复才能下载,而用户没有注册,需要在此之前先提交注册表单,当用户填写完毕后,却直接跳转到了论坛首页。

一个好的表单设计,不仅需要考虑用户填写前的引导、填写时的及时校验与帮助、还需要考虑填写后的整个流程体验。思考用户填写表单的初衷是什么,让他在填写完表单后能够最快得到他最想要的东西。即便是他暂时无法得到的,也需要告诉他相应的原因和能够进行的替代操作。

7个帮你全面提升Web表单填写体验的方法

提供设计关怀

据统计,大约有12%的人口具有或轻或重的色觉障碍。如果将色彩作为区分不可点击文本和可点击链接的唯一元素,可能会让这部分的人使用时出现困难。我们可以通过给链接文字加下划虚线、使用按钮或其他形状做区分,让这类用户能更加清楚的知道哪些是可点击的区域。

7个帮你全面提升Web表单填写体验的方法

最后,再增加一点愉悦度吧

研究表明,更大的文字输入框、适度的留白空间会让人更有填写的欲望,优雅的动画效果也能增加填写的趣味。以下的案例可供参考:

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

 

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!