表单设计的一些感想

这段时间时不时地接触表单设计，因此决定写一些感想，跟小伙伴们分享一二。

表单设计在界面设计中最常见，淘宝购物、注册账号、问卷、填写账号信息等，均用到了表单设计。不同形式的表单承载着不同的功能，但最终还是引导用户完成操作，得到结果。功能完整，便于操作的表单，是每一个用户都喜爱的。

01、表单的构成

单一构成

基础表单组成是输入框，不同功能的输入框结合在一起，形成一个表单的基本功能。比如登录账号表单，它的组成是登录名输入框、登录密码输入框和验证码输入框。

多元构成

在某些特殊的场景下，表单的构成会更加复杂，功能也会更加丰富，以满足产品和用户的需要。以下表单是表格的一部分，内嵌表单由输入框、选择器、日期选择器等组成，既可以显示信息，也可以编辑信息，这类型的表单可以满足随时修改字段内容的需求。

02、表单的设计

框的意义

1、传统的常规性表单设计都是有完整的可见边框，明确告诉用户你的操作范围。

2、而随着现在大家对设计体验的提高，在表单设计上，也不断出新，颠覆传统的设计方式，追求风格和艺术化。下边左图表单输入框只有提示文字，但是没有输入边框，那用户就没办法直观的感受到设计者给我们的输入限制范围在哪里。右图虽没有运用常规设计，但至少还能知道输入从哪里开始，哪里结束。

标签的作用

1、表单的左侧标签说明输入框内用户需要输入的字段。可是下面的输入框没有左侧标签，只有输入内容提示。但是通常这么做，没有标签来的醒目，而通常输入框内部的提示内容文字对比度都比较低，对于视力不佳的用户来说，就体验不是那么好了。

2、表单标签通常有两种对齐方式，一种是标签与输入框垂直左对齐；另一种是标签与对应的输入框平行，标签之间右对齐。一般来说前者的优势在于，用户眼动范围由上而下，比较舒服；后者的优势在于如果表单过长，可以节省垂直空间。

03、结语

在我们设计表单的时候，首先要解决的不是表单的展现样式，而是表单的可操作性、易用性，表单是不是满足了产品和用户的需求。比如，在填写收货地址表单里，用户经常要填写邮编，但是每次手动输入就会体验很不好，那就要进行地址和邮编的关联匹配。仅仅一个简单的表单设计，也是不容忽视的，既要做到设计创新，又要用户体验好，是需要好好思考的。