上一个设计任务，设计的步骤中几乎每一个步骤都需要填表单。因此我也一直在想如何让表单填起来不那么增加用户的工作量。再加上昨天网申补办驾照，一个表单居然足足填了我40分钟。完全气到了。
这是昨天填的那张表——
1.0
……这还不是所有的项。看到这张我22寸显示器装不下的表单之后，我深吸一口气。好吧……这是个大工程。
告诉我我需要哪些材料
这张表我填的无比久的原因，很大一部分是因为我途中去找了三次材料。每次找完回来，都在想，诶？我填到哪里了来着？好不容易找了档案编号和驾驶证，填到最后发现还需要一张照片，格式还有要求。……于是去翻箱倒柜找照片，存到本地，再开画图软件调比例。如果我再手欠一点没提醒自己不要关掉浏览器，这可好，我还需要重新登录再重新把我之前填的信息填一次。
呵呵，政府网站就是拽……虐我千百遍我还得乖乖按你说的做。请收下我的膝盖。
因此你需要告诉用户，填写这张表你需要哪些东西。好让他们不要填到途中大吼：尼玛有完没完到底还要什么！
为了做到这一点，我们可以在表单的首部加一些说明性的文字。将需要的材料列成列表让用户有个心理准备，当然也方便他们一次把材料准备齐全。用不同底色和字体将提示区分出来，这样可以鼓励用户快速阅读。比如这样（1.1）：
1.1
让它看起来不那么长
1.首先精简信息项。系统可以算出来的，或有默认值的，都由系统显示并实时更新。例如表中的出生日期和申报人年龄段，后者完全可以根据出生日期由系统算出来。
2.将信息重新组合，需要使用某个材料进行填写的信息全部整合到一起。例如将驾照信息整合起来变成这样：
1.2
3.再进一步。分步骤，使用wizard向导的方式。分步骤的关键有二。
一、在一开始建立清晰的预期，即告诉用户这个表单大概会有几步，要花多少时间。显然那种界面上只有下一步（next）的向导是非常糟糕的。因为用户完全不知道要next到什么时候。
我们可能先想到的是，可以提示用户当前已经完成了1/4或者2/3。这是个提升。
还能不能更进一步呢。除了让用户知道已经完成了几步，还可以让用户知道每一步是什么。那么参考进度条的设计，可以把导航修改如下（1.3）：
1.3
已经完成的或者当前正在进行的步骤填上颜色，将每一步在做什么告诉用户。
二、告诉用户每一步大概要花多少时间。这点可以简单地通过限制每一步的界面宽度来实现。短的界面总是意味着更短的时间不是吗？
结果就变成这样（1.4）：
1.4
嗯，好多了。
不过这种布局会有问题的是，当步骤太多的时候，横向的步骤扩展会看起来很长。这个时候我们就可以利用折叠面板把整个表单变成纵向的了。这一段不累述。
集中列表项的排布方式
列表项目前用的比较多的有三种：左对齐（1.41），居中对齐（1.42），上下分布（1.43）。
1.41
左对齐的优点：美观
左对齐的缺点：每一项的名称和输入区距离太远，对应起来不方便
1.42
居中对齐的优点：每一项的名称和输入区距离很近，阅读方便
居中对齐的缺点：左边长短不一形成的锯齿形边缘不够美观
1.43
上下分布的优点：美观，项名与输入区很近便于阅读
上下布局的缺点：如果这个表单很复杂，会让用户觉得这个表单很长。
告诉我我填的对不对
填政府表格我总是非常小心翼翼。因为它们的校验机制做的很……神奇。我记得有回我填个表格，某个数据不对，它提示我出错后，居然自动刷新浏览器并把我之前填的所有信息都清空了……当时阻止我没有砸掉电脑的唯一原因是显示器很贵。
用户总是需要被提示该怎么填，填的对不对。不过现在的网站们做的都很不错了。
1.4
上图（1.4）是Dcooker网站的注册信息填写。提示很详尽。问题可能是空格里面和外面提示的重复性，还有分成左右两列需要用户左右移动视线一一进行对应。
有人解决了这个问题：
1.5
上图（1.4）是淘宝的新增收货地址。提示得非常详细，几乎每个空格都有说明。用户在填之前就能看到，噢，这块要写什么，要怎么写。提示所在的位置也是用户需要填写的位置。但这么多蚊子看得还是有点头晕吧？而且我直到点击“保存”之前，都不知道我填的对不对呀。
于是有了更好的。
1.6
上图（1.6）是QQ邮箱的注册表单。所在地是自动补充的。每个空格填写完毕后正确的显示绿色的标志，错误显示红色感叹号并且显示错误原因。每一步骤的提示在鼠标聚焦在输入框时才显示。
很精致了。
确保用户看得懂按钮
前段时间去用户调研的时候，用户反馈给我一个问题。我设计的表单中，他们不明白“保存”是什么意思。
这点我在之前没有考虑到。
因为我设计的那个系统，每个模块的按钮名称设置有差别。在其他模块中，“保存”指的是保存起来，存在类似草稿箱的地方。等到他们修改并确认完毕后，还有一个“提交”按钮。点击这个按钮，才会提交。而这个模块中，保存，就是“保存并提交”。
于是他们很迷惑，并由此发生了一系列的误操作。
所以我们在设计中，需要考虑到“保存”“提交”“确定”“OK”这些用词，在整个系统中是否是一致的。每个用词，用户是否能看得懂。
很显然，“立即注册”就比“确定”让人明白得多。你总不希望好不容易用户填完了表，结果在几个按钮前面犹豫半天。
首选&第二处理方式的区别
首选处理方式指的是用户大部分情况下会进行并且也是你希望用户进行的选择。第二处理方式就是那些备选。
如果两个按钮设计的外观差不多，那么用户在点击前就需要阅读两个按钮的名称然后进行判断。比如这个（1.7）：
1.7
费茨法则指出，点击某个目标所花的时间，与鼠标与目标按钮的距离成反比，与目标按钮的大小成正比。即目标按钮越大越近，越容易点中。目标按钮越小越远，点击花费的时间越长。我们修改按钮变成这样（1.8）：
1.8
后记。
看完瞬间之美后，出于将内容整理并运用的目的于是有了本文。
好的设计的确需要考虑到每一个细节哪怕是一个按钮。
网友评论