当前位置: 首页 >文章 > 如何又快又好地设计B端表单?先学会这些表单设计样式
收藏
分享

如何又快又好地设计B端表单?先学会这些表单设计样式

举报Clip设计夹Clip设计夹发布于 2022-02-22947阅读0点赞
一起来学习并掌握这些表单样式的用法吧...

大家好,我是Clippp,今天为大家分享的是「B端表单系列②」。在「B端表单系列①」中,我们结合真实的设计案例拆解了B端表单,分析了表单构成、表单的4种交互方式以及表单内容排列方式

在「系列②」中,我们接着分析表单的设计样式:基础表单、分组表单、高级表单,来一起学习并掌握这些表单样式的用法吧



基础表单

平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单。



分组表单

单次任务的表单页中需要填写内容众多,且不同内容之中存在一定可分类归纳性。

1) 标题分组

表单项较多(超过了7个设置项)的情况下建议分组,分组标题能够引导用户完成表单填写。但分组内设置项要有强关联性,否则不能归为一组,不能因为字段多为了分组去分组。

2) 卡片分组

7-15个设置项,用标题分组不足以给信息做层级区分,为了让用户在操作时更聚焦,同时也需要给用户更明确的操作引导,即可使用卡片分组。

卡片分组之间关联性更弱,分类更明确,多个设置项,多个分类。

3) 基础分步表单

如果每个组之间有逻辑先后顺序,那么推荐使用分步表单,利用步骤条告知用户完整流程和进度。

通常在最后提交前让用户再次确认信息,并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务和用户在操作完成后就不再参与的复杂表单。

4) 标签分组式表单

如果每个组既没有逻辑先后顺序,也没有关联性时,推荐使用标签分组,适用于表单内容过多,为减少加载时间将表单分页展现的情况。



高级表单

1) 动态增减

建议条目表单数≤3项,并且每个输入框不需要单独的标题使用。


2) 可编辑表格

建议条目表单数2~5项时使用,以使得每行内容可被完整呈现。

3) 折叠面板编辑

建议条目表单数在6~8项时使用。

4) 规则树

应用于规则编辑场景。适用于页面中需要添加一个或多个对象,且每个对象都需要添加或编辑多组数据的情况。

5) 语句式表单

让用户在预设的结构来完成语句,常用于设置、编辑规则类表单,表单读起来更友好更人性化。



最后

希望通过前两部分表单内容的学习,能让大伙对B端表单有一个初步的认识和理解。

在表单设计的第③部分,将会为大伙分享实操性的方法来提升表单体验,并能够运用到实际工作中。

如果想学习更多关于「B端表单设计」的内容,记得及时关注接下来的文章推送



本文原创,未经作者允许不可转载!

更多内容,欢迎关注作者微信公众号: Clip设计夹!


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,746人)

【5月】零基础动态表情包创作训练营
距离开班仅剩2天55人已报名
【5月】7天轻松入门C4D小练习
距离开班仅剩6天28人已报名
【6月】7天轻松入门C4D小练习
距离开班仅剩27天0人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习90000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了41,401
并提交了160份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证