设计师必不可少的表单设计（上） .docVIP

设计师必不可少的表单设计（上） 本文将我自己踩过的坑整理出来，目的是为了帮助那些刚迈入职场的设计师，对表单能有一个更好的了解，从而避免在工作中进入误区。 目录： 一、前言 每个人生活中，都在和表单打交道，各种表格，表单需要填写，而表单在产品中主要负责数据采集功能。作用和现在一样——信息录入。表单也是最常用的信息录入的工具，随着互联网兴起，很多表单被放到了电子屏上填写，特别是最近几年，随着B端的兴起，和表单打交道的人越来越多。那么作为设计师，我们如果设计出一个糟糕的表单，会极大影响 用户信息的录入的效率。 我们先看看表单的结构，一个表单有三个组成部分： 表单标签（标题）。 表单域（输入框），包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。 本文主要针对表单域——输入框部分的设计，进行讲解，会涉及一点代码知识，建议查资料阅读。 二、初识输入框 常见的表单类别：文本输入框、密码输入框、其中文本输入框又包含中文输入框、英文输入框、数字输入框等。其中我们接触最多的就是需要录入信息的输入框。 在内容开始之前，先来了解一下输入框在前端开发中的的模样。 如图所示，输入框分为标签，文本输入框，和占位符三个最基本结构。根据特殊场景，会加上帮助信息，提示信息，反馈信息等等。 三、输入框如何设计 在文章开篇我们说到，表单结构为：表单标签（标题）、表单域（输入框）、表单按钮。三部分组成，但我们作为设计师在设计时，考虑的远远多于这三部分，我们更多是去做交互上的思考。 从交互层面上思考，表单在设计上的结构有： 表单标签 输入限制 占位符 input输入框大小 输入框焦点 多行文字规则 报错提醒 唤起键盘样式（移动端专属） 帮助性信息 表单属性（是否必填） 结果反馈 微文案 3.1 标签 此处所讲的标签，更多的是讲表单的布局结构，合理的表单结构，能提高用户阅读效率，同时还能降低信息填写时的错误率。 我们常见的布局结构：左右、上下、内部。 左右和上下结构，左右结构常用在pc端，左右结构在用户体验上，视觉路径相对较长，特别是在多行信息录入时，尤其明显。 但在网页端我们大多看到的都是左右结构，这是因为有空间占比的元素，在pc端，横向空间很大，需要考虑到协调的关系，如果采用上下结构，在内容过多的情况下，就会出现重心偏左的视觉效果。而且，在pc端，视线距离屏幕较远，视觉聚焦面积更大，因此视觉路径较长的这一点就被中和掉了。 因此在pc端，如果展示内容较多，可以选择选择左右结构。 而内容较少，在五个或以内，就可以选择上下结构。 而我们在移动端很少见到左右结构，这是因为移动端的限制——屏幕太小，一个横屏展示不开，特别是在标签名字很长的时候，弊端更加明显，因此在移动端更多的是使用上下结构。当然缺点除了识别度会降低，视觉路径增长之外，纵向空间占比也会增加，本身一屏就能 展示完，现在需要两屏甚至更多。 而我们在pc端，如果标签名字太长，也是可以选择上下结构。根据不同的使用场景，选择相对最合适的方案。 除了常见的左右，和上下结构，还有内部结构——将标签放在输入框内部，这种也常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。 内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会 消失，这时候，用户会失去它是否输入准确的唯一判别标准。 而用户如果需要判别自己 是否输入准确，需要删掉自己刚刚输入的文字，看一眼提示信息，再次输入。如果碰巧遇到有怀疑心的用户，这种设计，会让用户抓狂。 如图下所示，当字段大于三个的时候，用户再看到这个表单，会对自己填写表单进行思考，思考自己填的是什么，甚至会对自己填写信息的正确性进行怀疑，这种 现象从心理学角度来看，是因为人的瞬间记忆局限所造成的。 人在短时间内只能记住5～9个单位，即“7加减2”法则，这是大部分用户的极限，但设计不是要去挑战极限，而是要思考，还有一部分用户是远远达不到“7加减2”这个范畴。因此，在设计的时候，就需要降低用户的记忆门槛，采用更加适用的“2加减1”原则，当用户需要输入的字段多余三个的时候，就必须给表单留下标签，用来提示用户。 当内容过多，你根本不知道自己填写的是什么。 尼尔森·诺曼集团的凯蒂·舍温（Katie Sherwin）在她上传的文章中提到将标签替换为占位符的七个不好的原因。 消失的占位符文本会使用户的短期记忆紧张 没有标签，用户无法在提交表单之前检查所填写的内容 出现错误消息时，人们不知道如何解决问题 当将光标放在表单字段中，占位符文本消失时，使用键盘导航的用户来说很不友好。 其中包含的字段不