[返回科技频道首页]·[所有跟贴]·[ 回复本贴 ]·[热门原创]·[繁體閱讀]·[版主管理]
表单设计:掌握表单设计方法(表单体验篇)
送交者: 婉君[★★★来全球焦点玩★★★] 于 2021-01-11 2:05 已读 912 次  

婉君的个人频道

原标题:表单设计:掌握表单设计方法(表单体验篇)


编辑导语:表单是我们比较常见的一个信息录入工具,糟糕的表单设计会带来令用户抓狂的交互体验。本文作者结合案例对表单的构成及注意事项进行了详细的说明,相信对表单设计不熟悉的同学看完后肯定会有不少的收获~ 6park.com

编辑导语:表单是我们比较常见的一个信息录入工具,糟糕的表单设计会带来令用户抓狂的交互体验。本文作者结合案例对表单的构成及注意事项进行了详细的说明,相信对表单设计不熟悉的同学看完后肯定会有不少的收获~ 6park.com


说到表单其实在生活中可以接触到各种各样的表单,主要目的就是让用户填写来【收集用户信息】 6park.com

如: 6park.com


初看这些表单,你可能觉得很简单,就是一些标签、基础的小组件,但是在实际业务中,想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节,常常会让设计师陷入无限的纠结中,比如: 6park.com

所以针对这些问题,我从【框架】>【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。 6park.com

01 表单拆分 6park.com

在UX Collective中有个作者名为“Taras Bakusevych” 进行了详细的阐述,对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓ 6park.com


(1)标签:标签文本主要是解释输入项的含义,一般不宜太长,需要简明扼要,快速让用户理解;还有一部分是告知用户哪些是必填项。 6park.com

(2)占位提示:直接展示在输入项中,采用弱提示文本对所需信息描述、示意,当用户输入信息时即消失。 6park.com

(3)校验:对输入项进行验证,并给出反馈提示,如:用户未填写,格式错误、内容错误等 6park.com


常见的校验类型 6park.com

(4)基础组件:可交互输入的区域,是构成表单的核心内容,主要有:输入框、单(复)选框、上传、时间选择器、开关…… 6park.com

(5)提示:描述该输入项需要的输入类型,如:上传的文件类型 6park.com

(6)按钮:用户完成输入后,点击按钮进行提交、进入下一步等,按钮一般是跟随的最后一个输入项后面,若输入项超出一屏显示,则按钮悬浮固定在底部;按钮“确定”放左、右统一即可,没必要过分纠结。 6park.com

02 表单类型 6park.com

看了很多文章,对表单类型的划分主要是:基础表单、分步表单、高级表单(分组表单)[1] 6park.com

(1)基础表单:常见于输入项较少的表单场景,如:登录、注册。 6park.com


如:登录 6park.com

(2)分步表单:常用于输入项较多,业务本身具有流程化特性(如:转账) 6park.com

为了提高用户填写效率,减少用户心理负担,将一个冗长或用户不熟悉的表单任务拆分成多个步骤,一步步指导用户完成。 6park.com

分步表单可以缓解用户需要填写较多内容时候的抵触情绪,并且通过拆分步骤,聚焦于每次填写的内容,提升用户在不同模块间的浏览效率。 6park.com


来源:Ant Design Pro 6park.com

(3)高级表单(分组表单):主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似,都是为了减轻用户填写压力,将填写内容进行分块。不同的点在于,分步表单的流程化明显,后一步填写的内容都是基于前一步来填写、是前一步反馈。 6park.com


如:站酷上传作品 6park.com

但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择,但是实际在设计时,往往还需要考虑的是:这些表单应该是以什么承载结构展示? 6park.com

是整页展示、弹窗展示、侧边栏展示?表单内部布局方式,一定是平铺的一栏么,是否可以增加侧边目录? 6park.com

这些都是设计师需要进行全盘考虑的问题,所以在设计表单的时候需要先确定这些框架,由外>内,层层深入,再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。 6park.com

03 表单页设计步骤 6park.com

在详细阐述如何设计表单页前,先明确下我对于表单页的划分: 6park.com


我将表单页大体划分成【页面框架】和【表单内容区】 6park.com

这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书,提出了从5个要素自下而上的建设用户体验,即:战略层、范围层、结构层、框架层、表现层,这种逐层的思考逻辑对于设计表单是十分必要的,因为在设计表单的时候,常常需要考虑这个表单页所需承载的业务诉求(战略上)基础上去做后面的优化体验。 6park.com

所以在设计表单的时候应: 6park.com

整体而言可以分为以下四步: 6park.com


1. 确定【页面框架】 6park.com

这里得页面框架指的是承载着整个表单页的页面框架,即:整页式(新页面)、弹窗式、侧边栏式。因为其页面面积大小不一样,所以使用情境有所不同。[2] 6park.com


以上这些就是常见的表单页面框架,我们在考虑采用何种样式时需要综合以下几个因素考虑: 6park.com


如上图所示,一个正常的表单内容区主要有:标题区、二级导航区、主内容区 6park.com

1)其中标题区是必须要有的,标题区可以让用户快速明白该表单是需要收集什么内容 6park.com

2)二级导航可以根据业务需要进行配置 6park.com

3)主内容区则是表单填写的主区域,通常我们直接将这个区域称之为“表单内容区”,该区域布局样式可以分为三种: 6park.com


以上三种样式就是常见的表单内容区的布局,采用哪种布局,可以综合以下几个因素考虑: 6park.com

在该步骤中,主要确定表单内容区控件颗粒的排列方式:单列布局 or 多列布局 6park.com

so 根据单列布局、多列布局的优劣势,结合实际业务需要来选择: 6park.com

【单列布局】 6park.com

【多列布局】 6park.com

在这个环节中,除了需要考虑单列式布局还是多列式布局,还有一个也是需要全盘考虑的——【标签的对齐方式】 6park.com

在设计时,到底是采用左对齐、右对齐还是顶部对齐呢? 6park.com


Matteo Penzo《Label Placement in Forms》文章中,有对标签不同的方式方式优劣势进行了说明。[3][4] 6park.com


后续在这块纠结的时候,则可以对照上面表格进行评估了,其中详细原理你也可以点击下方链接进行查看:UX Collectiveuxdesign.cc 6park.com

4. 确定【表单内容颗粒】 6park.com

最后一步只需要按照收集信息类型的需要,选择正确的控件颗粒,如:如果是要收集用户购买数量,则可以直接使用“数字步进器”、“输入框”。 6park.com

在选用控件颗粒时,需要注意的是: 6park.com




04 写在最后 6park.com

本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区 逐层对表单进行剥离拆解,帮助大家更加全面的认知表单,并总结了日常工作中设计师常常会遇到的表单类型和布局,设计师可结合文章中给出的建议参考并灵活应用。 6park.com

希望能够通过这边文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给与指正。最后,作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师,希望大家可以多多点赞评论鼓励下(狗头保命) 6park.com

参考: 6park.com

本文由 @小发鸽 原创发布于人人都是产品经理,未经作者许可,禁止转载。 6park.com

题图来自Unsplash,基于CC0协议。

喜欢婉君朋友的这个贴子的话, 请点这里投票,“赞”助支持!
[举报反馈]·[ 婉君的个人频道 ]·[-->>参与评论回复]·[用户前期主贴]·[手机扫描浏览分享]·[返回科技频道首页]
贴子内容是网友自行贴上分享,如果您认为其中内容违规或者侵犯了您的权益,请与我们联系,我们核实后会第一时间删除。

所有跟贴:        ( 主贴楼主有权删除不文明回复,拉黑不受欢迎的用户 )


    用户名:密码:[--注册ID--]

    标 题:

    粗体 斜体 下划线 居中 插入图片插入图片 插入Flash插入Flash动画


         图片上传  Youtube代码器  预览辅助

    打开微信,扫一扫[Scan QR Code]
    进入内容页点击屏幕右上分享按钮

    楼主本栏目热贴推荐:

    >>>>查看更多楼主社区动态...






    [ 留园条例 ] [ 广告服务 ] [ 联系我们 ] [ 个人帐户 ] [ 版主申请 ] [ Contact us ]