美文网首页控件和规范
表单提示检查清单

表单提示检查清单

作者: Yuan_Liang | 来源:发表于2016-09-18 18:04 被阅读30次

已经数不清设计过多少个表单了,但最近和表单的接触尤为频繁。因为在设计几个工具型的APP,涉及到大量的数据需要用户提交,必然就会有不少的表单。在开发完成后的测试阶段,发现了一些问题。比如在设计过程中自认为已经是司空见惯的一些反馈提示开发同事并不清楚,以至于需要反复的核对。

而每一次在设计表单的时候,也会感觉很烦。毕竟大部分表单都很常见,也有成熟的模式。由此我想,应该可以把一些相对固定的设计过程也模式化,这样就不用每次设计的时候都需要重头开始,这样可以避免遗漏也可以节省大量时间。

首先我想到的就是表单提示。

表单中所需要用到的提示大致分为三个类型:

1. 帮助提示

2. 正确提示

3. 错误提示

帮助提示:在用户填写前,告诉人们如何回答问题。也就是说,帮助提示就是帮助用户顺利完成表单填写的信息。当然,帮助提示的表现多种多样,会根据实际情况而不同。

正确提示:确保用户知道填写了正确的数据,给用户信心和鼓励。

错误提示:这可能是最常见的提示。分为用户填写或操作错误,以及系统原因产生的错误。

上面三种提示出现的时机,显示方式以及文案都有很大不同,遗漏了哪一点都会对体验带来损失。一个表单涉及到输入项往往很多,如果每一次做设计文档的时候都要重头写一遍,我的体会就是要么设计师头痛,要么设计师偷懒。我是一个比较偷懒但还算敬业的设计师,所以在经历了好多次的折磨之后,产生了做一个检查清单的想法。这样在设计的时候,对于大部分常见的表单,完全可以复制粘贴,然后适当修改一下就大功告成。想一想我真是机智呢。

以常见的登录表单为例:

虽然只是简单的两个输入框加一个按钮,也有不少的提示逻辑需要处理。随着不断的填充,大部分常用的反馈提示都不需要重新设计,直接或者稍做修改就可复用。而且这样的清单交给程序员也清晰明了。

这其实也是设计模式的一种体现,代表了常规问题的最佳实践。除了表单反馈提示,还有很多设计问题都可运用这样的思路解决。

相关文章

  • 表单提示检查清单

    已经数不清设计过多少个表单了,但最近和表单的接触尤为频繁。因为在设计几个工具型的APP,涉及到大量的数据需要用户提...

  • 表单相关总结

    表单?表单作用:收集用户信息。表单组成:表单域、表单控件、提示信息。 表单域常用属性 常用属性: name=...

  • bootstrap 表单添加表单验证

    表单验证有提示语

  • jquery 最简单的表单验证

    后面显示提示语的表单验证

  • 4.HTML表单

    表单 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。表单目的是为了收...

  • CSS表格表单高级

    第一节 表单高级属性 表单的组成:表单域: 表单控件: 提示信息: 表单字段集 语法: 说明:相当于一个方框,...

  • ElementUI form 校验规则 number 一直无效

    使用Element UI表单,校验数字表单项的时候怎么都会提示 xxx is not a number,代码如下:...

  • 移动UI设计模式之表单设计

    表单一般用来使用户填写信息和提交信息,一般表单分由四部分组成:表单标签,表单域,提示信息,表单按钮。填写表单对于用...

  • 表单(注册登录信息页面)

    组成:表单域(提示文本、表单) 1、 2、label标签 例子: 输入账号: 作用:用于绑定一个表单元素,当点击...

  • 表单填写过程中的信息提示

    表单中常见的信息提示 占位符标签 与标签相关性弱,提示信息较少,概括回答方式。填写表单时占位符清空。 标签辅助文字...

网友评论

    本文标题:表单提示检查清单

    本文链接:https://www.haomeiwen.com/subject/lhrgettx.html