表单设计：五类表单构成要素设计
表单在产品中举足轻重。为什么？
用户与产品交互，是人与机器的沟通过程，机器以界面向用户传词达意，而人则是通过表单向机器传送信息。
由此可见，表单设计是用户信息到产品的入口的设计。
使用表单时，用户操作成本较高，稍有不慎，就有用户离开产品，拒绝交互的可能。因此，对于表单设计来说，表单目标最低限度在于留住用户，不被表单赶跑；最好效果是用户顺利完成表单交互。
在进行一份表单设计时，有五项主要表单构成内容：
表单界面布局
1.表单项
2.占位符
3.帮助
4.操作
5.验证
01
表单界面布局
表单中的内容主要是表单项。如何排列表单项，让整体界面布局更加合理，要注意以下几点：
有序排列
先问什么，后问什么，前后表单项应遵循相关、前后逻辑关系放置。
如：在表单中需要用户填写：是否有孩子、孩子年龄两项内容时，应把“是否有孩子”放在前面，因为在用户填写“无”时，就不在需要填写“孩子年龄”的字段。
从易到难
把用户相对无抵触的信息排在前面，最后再逐渐引入涉及隐私的信息，避免一开始就让用户萌生退意。
分组表单项
当表单项过多时，对表单项进行分组以提升内容可读性。
例：将包含15个字段表格分成3组。同样数量的内容，但用户感观不同。
单列&多列界面布局
单列
眼睛沿着自然方向从上至下，更适应用户操作。
多列
N字形排列-两列布局，前列内容填写优于后列内容，设计时要注意界面长度，适合一屏界面。
之字形排列-按排放置表单项，上排内容优先填写。用户视线浏览路径复杂。
02
表单项
表单项包括两部分内容：标签、输入框
标签告诉用户需要输入什么内容；输入框让用户操作，输入数据。即标签告诉用户这个列表项是什么；输入框供用户输入。
标签
表签不是越多越好，恰恰相反要简化表单。简化方法之一就是只填写相关项，必须项。可选项减少填写。
常见的标签位置有：
左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。其中，右对齐标签最为常见。
界面位置足够情况下，应减少内联标签的使用。这是因为用户鼠标在输入状态时，内联标签消失，用户对输入内容是否符合难做判断。
因此，内联标签常用在用户熟悉、简单的表单中，如登录表单。
右对齐标签
右对齐标签是最常见的一种标签样式，但不是可以无所顾虑去使用。
如app设计中，屏幕尺寸有限，右对齐标签占据屏幕较大空间，右边输入框有可能无法展示完整信息。
邮箱地址过长造成信息展示不完全，对用户体验来说是扣分的。容易造成操作流程的中断。所以我们在使用右对齐标签的时候需要考虑输入内容的长短。
顶部标签
顶部标签位于输入框上方，输入框可以横跨整个页面，信息得到完全展示。与右对齐标签相比顶部标签给输入框腾出足够空间。
但这种标签方式会拉长界面长度，容易出现长表单滚动查看的操作。
行内标签
行内标签适合移动端表单设计，它极大节省页面空间。但一旦用户点击切换到输入状态，用户无法看到标签。
用户填写过程中出现忘记填写内容场景下，容易为用户带来困扰。列表项过多时，用户填写出现串行无法进行错误检查。
解决行内标签问题，可以在行内标签前加一个图标标识列表项，图标占据空间不会太大，也会增加页面美观性。
输入框
输入框设计时，要注意几点：
字段约束
为有要求的字段设置限制。
如，最大字符数，电话中数字、字母符号等要求，从而有效的避免脏数据。
输入格式提示
提供输入格式，帮助用户理解所填内容且减少错误发生。
常用于手机号码、日期、银行卡和邮编等。
匹配键盘（移动端）
触发合适键盘，用以帮助用户快速完成。
区分可填与选填项
表单项尽量避免选填字段。如果实在无法避免，则要做明确区分。对必填项做标记说明。
03
占位符
占位符常出现在输入框中或后面，是对标签的补充说明，让用户了解可输入的数据类型和格式提示：
1. 以不同的颜色说明占位符，并对内容加以区分
2. 占位符对输入内容要求进行提示、提醒，是对标签补充说明，但不是所有的输入框都需要占位符。
3. 在鼠标键入后占位符通常并未消失，而是在输入内容后消失，在用户还未输入内容时保持帮助用户。
04
帮助提示
帮助有三种方式：常驻、按需出现、偶尔出现。
常驻：指帮助提示一直显示在输入框边
按需出现：指鼠标悬停在帮助图标上才显示说明的帮助，一般用于低需要的提示
偶尔出现：当用户输入行为出现某种结果时，才出现。如报错提示。
05
操作
用户输入数据中的提交等动作，在进行操作设计时，操作按钮是主要界面元素。操作按钮的设计要注意：
1. 区分主次
主操作，是产品期望用户操作的按钮，设计中突显号召用户点击。
2. 放置位置符合操作习惯
操作位置要参考表单排列方式合理摆放。
如：表单采用顶部对齐，可以将操作与输入按钮左对齐，让用户的视线直接看到操作按钮。
3. 按钮文本表达明确
按钮要执行的操作，由按钮文字表达，因此应清晰。最好可预测，让用户清楚点击按钮后会发生什么。
禁用操作
用户未完成必填字段，可将操作按钮设置为禁用，视觉上告诉用户是否完成了表单的填写，并在必要时激活按钮吸引用户视线。
06
验证
用户输入数据的验证包括两类验证方式：前端验证、服务器验证
前端验证不需要向服务器上传验证数据，就可以判断数据是否合规。前端验证常用于数据格式验证，如：手机格式等；
服务器验证，如：：手机注册时手机输入效验码，通过后才可以注册成功。这一验证需要由服务器判断，确定用户输入是否正确。
验证信息通常为错误信息，在界面设计时，应错误在哪里则显示在哪里。就近原则能够方便用户发现并修改操作。
验证错误的信息不要清除，留给用户在此基础上修改的机会，这样用户才更加确认再次填写是否正确。
下节预告：如何让表单录入更加快捷？
敬请期待！！
表单设计：五类表单构成要素设计相关推荐
- C++学习 对象模型之虚基类，虚基类表，虚基类表指针
1.虚基类 什么是虚基类,虚基类的作用是什么? 首先虚基类是为了解决多继承产生的二义性问题,范例代码如下: #include "stdafx.h" #include <std ...
- 设计资源类网站|日常必逛设计导航
一流导航|16map 内容就比较丰富了,左侧有可以快速移动的菜单栏,分类很详细,包括灵感.教程.工具等等. 比如配色类网站就列举了这么多,而且有对应的简单介绍,这点很人性化.
- MySQL - 高效的设计MySQL库表
文章目录 生猛干货 范式与反范式 范式 第一范式 第二范式 第三范式 第二范式 VS 第三范式 设计符合 2NF 的表 范式优缺点 反范式 范式 VS 反范式 MySQL 使用原则和设计规范 基本设置 ...
- 河北外国语学院单招计算机类专业,【单招专业代码】报考河北外国语学院，2019年单招专业代码全集...
2019年河北省单招填报志愿4月11日9时至14日17时进行,请考生千万不要错过这次轻松上大学的机会,特别是报河北外国语学院的小伙伴们,一定要第一志愿填报,因为河北外国语学院,值得你拥有-- 河北外国 ...
- C++中虚继承产生的虚基类指针和虚基类表，虚函数产生的虚函数指针和虚函数表
本博客主要通过查看类的内容的变化,深入探讨有关虚指针和虚表的问题. 一.虚继承产生的虚基类表指针和虚基类表 如下代码:写一个棱形继承,父类Base,子类Son1和Son2虚继承Base,又来一个类Gr ...
- 河北单招考试题计算机,河北单招考题
『壹』 河北2016.2017.2018单招第五大类综合练习题 2017学校单招的考试形式一般为"文化联考+综合素养测试"相结合的考试模式.文回化联考包括语数答英三门科目:综合素质 ...
- 补单平台淘宝补单计划
现在很多人对于淘宝补单增加淘宝权重和流量有着很多疑问,到底淘宝补单怎么操作? 据了解,"爆权补单法"能够避免平台稽查和短时间内完善店铺的权重,针对数据不好的新店铺玩法. 接下来我给 ...
- 学习通--3.1-互评-OO设计-有理数类的设计
一. 论述题(共1题,5分) 1. (论述题, 5分) 仿照BigDecimal类以面向对象的方式设计有理数类. 给出你的完整的有理数类的代码: //有理数类Rational package test ...
- 物理机存放mysql实例原则_MySQL优化笔记（四）--表的设计与优化（单表、多表）...
前面讲了SQL优化以及索引的使用.设计优化了,那么接下来就到表的设计与优化啦!!!真实地去设计优化单表结构以及讲述多表设计基本原则(结合真实的生产环境的取舍来讲述). 文章结构:(1)单表设计与优化: ...
- 万字干货 | 认真教新手设计一个顶级表单定制后台PRD
本文由作者 黄联樵 于社区发布 在我面试几百个产品经理的经历中,我发现很多产品新人都在学习一些质量不高的网课.这些网课通常用前大半截的篇幅来介绍一些形而上的理论,真的到了实操阶段却草草收尾,只教你一些 ...
最新文章
- mysql第三章关系模型_一个MySQL关系模型只有三个关系(二维表)组成。_学小易找答案...
- c语言把文件导入链表,【求解答】c关于把文件数据放进链表，并将链表遍历
- springmvc +bootstrap创建简单web项目
- angularjs ajax header,angularJs/ajax跨域请求携带cookies
- Taro+react开发（22）--模态框组件
- Go语言基础之结构体
- ASIHTTPRequest-断点续传需要原网站支持！
- RS232通信之C++实现---PC端
- python服务端语言_使用Python实现简单的服务器功能
- Redis实战(七)
- 截取年月日在hana中怎么写_2020高会评审进行中 工作业绩怎么写才能在评审时脱颖而出呢？...
- DE 31 Non-linear Autonomous Systems
- Apache PDFBox 1.8.1 发布
- 無題（後改為總有那麼一句話）
- SwiftyJSON用法详解
- Intel i5-7200U (3100MHZ)，1*8GB(DDR4 2666) 在 Aida64 V5.97.4600 的测试结果
- TIFF图像文件格式分析
- excel linux时间戳转换成日期,Excel将Unix时间戳转换为日期
- 基于javaweb酒店管理系统
- js：苹果手机页面返回，数据不刷新问题