网站设计系列｜UI/UX：表单设计的6大必学技巧
网页表单是我们常常会用到的功能，如何设计一个表单，提供更好的网站客户体验，增加转换率？这一篇，我们帮大家整理了网页UI/UX设计中，表单要注意的事项。
1. 填写的资讯越少越好
在设计表单的时候，我们可能会希望客户将资讯填写的越完整越好。但是，这会大大降低客户填写表单的意愿，所以表单上填写的资讯应该要是与品牌最相关，对品牌最重要的。
比如说，如果我们是要寄送电子报，那么「手机」、「地址」在这一步骤就不是必要的来为，所以表单中可以直接删去这两栏位，保持表单的简洁性。
在制作表单时，我们应该抱怀著「少即是多」的概念。
2. 动态显示表单进度
在设计表单时，很多人都会在客户按下「提交」时，才审查填写的内容。我们可以动态逐栏审查客户的资讯，减少客户重新填写表单的时间与精力，虽然这看似是一个极简单不过的步骤，但却可以大大增加用户的网站体验。
3. 错误讯息直接显示于该行下方
前面有提到与其让系统在用户点按「提交」时才做栏位的审查，我们可以在用户填写该栏位时，就直接审查。记得，跳出错误资讯，应该直接显示于该栏位下方，而不是统一集结在整个表单的上方或是下方。
如果我们填写的是如下方左图的表单，我们就会需要去对照每一个错误资讯与表单上的栏位，但如果是右下方的表单，我们可以清楚的知道每一个栏位是否正确，如果是错误的话，该如何修正。如此一来，就可以大大降低表单的复杂程度，提升用户填写的意愿与完成率。
4. 将同一类别资讯放在同一组
如果你的表单资讯很多，那么尽量将同一类的资讯放在一起，否则用户可能会觉得表单过于复杂而有「我还是改天再填吧！」的想法。
比如说最常见的作法就是有「个人资讯」以及「联络资讯」两个栏位，我们可以在两个栏位上方加上标题，用一些空白或是颜色来区隔。
5. 尽量不要将不同资讯混在同一行
用户的眼睛在看一个网站时的轨迹是「从上而下」的，所以在设计表单时，我们应该符合用户的习惯，尽量在一行只有一个栏位。
在下面例子中，左边的设计会大大增加用户完成表单的时间，并且让用户产生不必要的疑惑「uuh..我应该从哪里开始填才好呢？」「左右两边的问题有关联吗…」
当然，在有些时候，我们的确可以看到资讯被归在同一行的情形，但必须要是左右两边资讯有一定关联。比如说
- 「姓」、「名」
- 「日期」、「时间」
- 「城市」、「地区」
6. 栏位标签放置于输入格上方
我们刚刚提过，通常用户的眼球在网站上移动的轨迹是「从上而下」的，所以除了栏位应该从上到下排列以外，栏位的标签也应该放置于栏位的上方，而非左方，如此才能减少用户眼球的运动，提供更好的UI/UX体验。
表单设计是网站或是手机程式设计中重要的一环，如果对于UI/UX有兴趣的朋友，可以看看我们之前整理的「网页按钮设计」。
推荐文章：