干货|超实用表单设计原则思维导图

南归

2023-03-02

浏览量: 6

周推荐,

表单设计

表单的作用对于商业网站，支付信息表单是不可回避的问题。对于生产力网站，表单有利于内容的创建和管理。表单是什么？是用户和网站之间的对话。

树图思维导图提供《干货|超实用表单设计原则》在线思维导图免费制作，点击“编辑”按钮，可对《干货|超实用表单设计原则》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：19308f9164e1b3ab8a8357e3d85418b9

思维导图大纲

表单的作用

表单是什么？是用户和网站之间的对话。设计表单如同设计一个产品，取决于你的理念是从产品目标还是用户目标出发。从产品目标出发，网站要尽可能多地获取用户信息（恨不得生辰八字扒出来算个星盘根据走势推荐产品）；然而用户和你又不熟，就像你去水果店老板说不告诉我你电话就不卖你水果，我肯定翻个白眼就走了。

因此在设计表单的时候，首先要反思产品核心价值，删减你的表单；其次，如果确实需要这个信息，用友好的方式告诉用户为什么并说服他。比如上面那个水果店老板，可以和用户说我们这边逢年过节有优惠活动，如果你留下电话，有活动的时候我会第一时间通知您。我们还提供送货上门服务，如果您留下地址，当然更方便了。如果您告诉我们生日，我们在您生日的时候会送出惊喜小礼物哦。加一句，这些信息我们不会透露给别人的。

最后再补一句，先卖完水果再说这些，即提交主任务流程表单后再兜售你的其他增值服务，让用户专注完成一件任务。

设计原则

如前所述，让用户专注于一件任务。表单填写是一件负担很重的事，因此在填写表单的时候尽可能去除不必要的干扰。要推广告，比如淘宝的相关购买推荐也是在付款结束的完成页面出现的。

为了截个图下单我也是蛮拼的

当表单所需信息较多或者所填信息有前后依赖性时，合理地拆分步骤重新组织内容会减轻用户填写的心理压力并专注于当下表单，与之相对应的是需要设计清晰的引导线让用户明白自己目前所处的步骤。（下图中“Next”和”Previous”按钮分别是一级动作和二级动作，设计者在设计时做了明显的区分引导，下文中会提及。）

步骤化表单

Uber也利用了步骤化原则，在填写信用卡信息流程中，先填写完卡号，将卡片状态切换到填写过期时间和CVV码，不仅拆分了步骤，并且在一个输入框下就完成了整体的输入。

Uber一个输入框填写信用卡信息.gif

清晰的浏览线

凌乱的浏览线

情感化是增加用户体验，形成口碑传播的好方法。表单设计中比较容易植入情感化设计的，一个是标签命名的口语化（比如“姓名”，可以换成口语化的，“你可以称呼我”；另外，也有表单设计成填空式的，我叫__，来自__，一张表单就是一道填充题），另一个是输入时的交互反馈。

Readme.io的猫头鹰会在输入密码的时候遮住眼睛，是不是超萌！

Readme.io蒙眼猫头鹰

表单元素

标签

根据马泰奥·彭佐的2006年的标签对齐眼动实验，顶对齐标签移动到输入框需要50毫秒，右对齐标签需要240毫秒，而左对齐标签则需要500毫秒。顶对齐标签的效率是左对齐标签的10倍之多（当然，英文单词长短相差太多对左对齐标签造成了重伤，中文方块字标签字数差异不大情况下，左对齐约等于右对齐，兼顾两者之优点）。理论效率上，顶对齐>右对齐>左对齐，选择使用哪一种标签视情况而定。

优点：和输入框联系最紧密，效率最高

缺点：增加了垂直空间

顶对齐标签

优点：和输入框联系紧密，减少垂直空间占用

缺点：标签可读性不强

右对齐标签

优点：标签可读性强，减少垂直空间占用

缺点：和输入框联系不紧密

左对齐标签

优点：与输入框联系紧密，同时减少空间占用

缺点：填写完毕标签就消失了，复核表单信息较困难

用途：输入较少量信息时可使用（可以辅助图标提示标签信息，如下图）