编辑导语：表单是我们比力常见的一个信息录入工具，糟糕的表单计划会带来令用户抓狂的交互体验。本文作者联合案例对表单的构成及留意事项举行了具体的阐明，信赖对表单计划不认识的同砚看完后肯定会有不少的劳绩~
01 表单拆分
在UX Collective中有个作者名为“Taras Bakusevych” 举行了具体的论述，对表单的构成部门举行了具体的拆解与阐明 ↓ ↓ ↓
（1）标签：标签文本重要是表明输入项的寄义，一样平常不宜太长，必要简明扼要，快速让用户明白；另有一部门是告知用户哪些是必填项。
（2）占位提示：直接展示在输入项中，接纳弱提示文本对所需信息形貌、表示，当用户输入信息时即消散。
（3）校验：对输入项举行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
常见的校验范例
（4）底子组件：可交互输入的地区，是构成表单的焦点内容，重要有：输入框、单（复）选框、上传、时间选择器、开关……
（5）提示：形貌该输入项必要的输入范例，如：上传的文件范例
（6）按钮：用户完成输入后，点击按钮举行提交、进入下一步等，按钮一样平常是跟随的末了一个输入项背面，若输入项超出一屏表现，则按钮悬浮固定在底部；按钮“确定”放左、右同一即可，没须要太过纠结。
02 表单范例
看了许多文章，对表单范例的分别重要是：底子表单、分步表单、高级表单（分组表单）[1]
（1）底子表单：常见于输入项较少的表单场景，如：登录、注册。
如：登录
（2）分步表单：常用于输入项较多，业务自己具有流程化特性（如：转账）
为了进步用户填写服从，淘汰用户生理负担，将一个冗长或用户不认识的表单使命拆分成多个步调，一步步引导用户完成。
分步表单可以缓解用户必要填写较多内容时间的抵触感情，而且通过拆分步调，聚焦于每次填写的内容，提拔用户在差别模块间的欣赏服从。
泉源：Ant Design Pro
（3）高级表单（分组表单）：重要用于必要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点雷同，都是为了减轻用户填写压力，将填写内容举行分块。差别的点在于，分步表单的流程化显着，后一步填写的内容都是基于前一步来填写、是前一步反馈。
如：站酷上传作品
但是以上说的底子表单、分步表单、高级表单都是基于业务必要而举行选择，但是现实在计划时，每每还必要思量的是：这些表单应该是以什么承载布局展示？
是整页展示、弹窗展示、侧边栏展示？表单内部结构方式，肯定是平铺的一栏么，是否可以增长侧边目次？
这些都是计划师必要举行通盘思量的题目，以是在计划表单的时间必要先确定这些框架，由外>内，层层深入，再对细节举行处置惩罚。以是接下来我会针对怎样由外>内计划表单举行具体的报告。
03 表单页计划步调
在具体论述怎样计划表单页前，先明白下我对于表单页的分别：
我将表单页大要分别成【页面框架】和【表单内容区】
如许分别是出于我对 AJAX之父Jesse James Garrett在2007年出书了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建立用户体验，即：战略层、范围层、布局层、框架层、体现层，这种逐层的思索逻辑对于计划表单是非常须要的，由于在计划表单的时间，经常必要思量这个表单页所需承载的业务诉求（战略上）底子上去做背面的优化体验。
以是在计划表单的时间应：
- 明白该表单的业务范例，由于差别的业务诉求的表单在计划中的显现情势会有差别，即“页面框架”会有差别（这也是我上面为何将表单页分成页面框架和表单内容区的缘故原由）
- 在确定页面框架后，就必要对表单需展示的内容举行明白的分别，如：表单的内容是否要展示流程进度？表单内容是否有差别层级的导航？确定了这些后，我们表单内容的大抵结构框架就可以确定下来，我们才气进入下一步（内容区详细的陈列方式）的计划；
- 表单内容区重要是对输入项的陈列方式，对齐方式，举行体验优化；
- 末了对全部输入项举行同一整理，查抄是否与用户预期同等？与其他输入项的关系是否清楚等。
团体而言可以分为以下四步：
1. 确定【页面框架】
这里得页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。由于其页面面积巨细不一样，以是利用情境有所差别。[2]
- 整页式：最常用方式，实用于绝大部门的表单，可以支持构建复杂的表单。
- 弹窗式：通过小面积的弹窗举行轻量化的编辑，方便快速举行增、删、改、查；输入项较少，一样平常不会有滚动条。
- 侧边栏式：与弹窗式相似，通过小面积的侧边栏举行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。
以上这些就是常见的表单页面框架，我们在思量接纳何种样式时必要综合以下几个因素思量：
- 内容多少 —— 内容较多不得当利用弹窗式
- 与原页面关系强度 —— 需与原页面保存强关联发起利用弹窗式、侧边栏式
- 表单内容区复杂水平 —— 一样平常高级表单、分组表单、分步调表单、有表格聚合的表单、联动表单等都发起接纳整页式的框架来显现。
如上图所示，一个正常的表单内容区重要有：标题区、二级导航区、主内容区
1）此中标题区是必须要有的，标题区可以让用户快速明确该表单是必要网络什么内容
2）二级导航可以根据业务必要举行设置
3）主内容区则是表单填写的主地区，通常我们直接将这个地区称之为“表单内容区”，该地区结构样式可以分为三种：
以上三种样式就是常见的表单内容区的结构，接纳哪种结构，可以综合以下几个因素思量：
- 内容多少——假如内容许多导致页面很长，则可以思量将内容分类，作为左侧导航栏，接纳左右式结构。
- 内容范例——导航作用内容必须放置左侧（有些分步调的表单也会将步调条放置左侧），而辅助信息的内容发起放在右侧（由于人眼欣赏风俗都是从 左 > 右，以是信息紧张度发起按照该视线路径放置）
在该步调中，重要确定表单内容区控件颗粒的分列方式：单列结构 or 多列结构
- 在输入项不多的环境下，发起接纳单列结构，由于单列结构，用户填写的路径就是从上>下的一条直线，非常符适用户的视觉动线，可以或许进步用户欣赏与填写的服从。
- 多列结构的表单会导致用户的视觉路径变长，用户需以 Z 字形的视觉动线扫描表单，会进步欣赏与填写的服从，而且多列表单轻易造成用户填写时的杂乱，易填错，体验差。
- 但是偶然部门业务诉求和某些特性的场景要求，会必要在有限的空间上放入更多的控件颗粒来网络用户的信息，这时就不得不利用多列结构的样式，由于多列可以或许省纵向空间。
so 根据单列结构、多列结构的优劣势，联合现实业务必要来选择：
【单列结构】
- 优：视觉路径清楚，填写服从高，体验好；
- 劣：占用纵向空间。
【多列结构】
- 优：省空间，可以或许放置更多的控件颗粒；
- 劣：视觉路径含糊，填写本钱高，填写易堕落。
在这个环节中，除了必要思量单列式结构照旧多列式结构，另有一个也是必要通盘思量的——【标签的对齐方式】
在计划时，到底是接纳左对齐、右对齐照旧顶部对齐呢？
Matteo Penzo《Label Placement in Forms》文章中，有对标签差别的方式方式优劣势举行了阐明。[3][4]
后续在这块纠结的时间，则可以对照上面表格举行评估了，此中具体原理你也可以点击下方链接举行检察：UX Collectiveuxdesign.cc
4. 确定【表单内容颗粒】
末了一步只必要按照网络信息范例的必要，选择精确的控件颗粒，如：假如是要网络用户购买数目，则可以直接利用“数字步进器”、“输入框”。
在选用控件颗粒时，必要留意的是：
- 选用的控件颗粒应是用户可以最快输入的，能点击完成绩别输入完成
- 表单中同个信息范例的控件颗粒应同一
- 指意不明白的表单应搭配占位提示，占位提示应是完备的报告句
- 紧张信息的输入项应该有错误提示校验，这种一样平常用于错误率较高的环境，制止用户反复填写。如：在登录注册时，我们填写手机号假如不满11位数，就会报错。
- 特定的输入型颗粒控件，必要根据输入信息的特别性给与格式的提示与限定，如：邮箱 @http://qq.com，如许有助于资助用户提前感知，淘汰表单填写错误。
- 表单颗粒的宽度应该 暗示填写内容的长度，与输入预期成正比，在Ant Design 4.0 系列分享的文章[5]分析结论是：犬牙交错的排版比整洁划一更舒服，由于在视觉上我们更轻易将下方有图的空间和内容视为一个调和的团体，但左图过分的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。
04 写在末了
本篇文章从表单地点的页面情势 > 表单框架 > 表单内容区 逐层对表单举行剥离拆解，资助各人更加全面的认知表单，并总结了一样平常工作中计划师经常会碰到的表单范例和结构，计划师可联合文章中给出的发起参考并机动应用。
盼望可以或许通过这边文章给到各人更多的开导。文章中假如有不严谨、错误的地方盼望各人给与指正。末了，作为一名刚刚将本身工作内容举行沉淀并分享给各人的计划师，盼望各人可以多多点赞批评鼓励下（狗头保命）
参考：
本文由 @小发鸽 原创发布于大家都是产物司理，未经作者允许，克制转载。
题图来自Unsplash，基于CC0协议。返回搜狐，检察更多
|申请友链|小黑屋|手机版|Hlshell Inc.
( 豫ICP备16002110号-5 )
窥视卡
雷达卡
发表于 2020-12-24 03:18:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜