表单设计的三大场景

用户头像
杭州/设计爱好者/144天前/68浏览
表单设计的三大场景
用户头像
三悠
表单设计聚焦于提交一次表单的过程体验,按照任务的复杂度可划分为三大场景,分别对应三种解决问题的布局方式:
场景1
当需要完成一个简单快速的任务,例如输入少量信息即可完成创建。
基础表单
平铺所有需要填写的信息,适合内容项较少、无法按照相关性分组的表单。
表单设计的三大场景(图ZMTUzMDAxNTI=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
场景2
将用户需要填写和确认的信息按照线性流程组织,利用步骤条告知用户完整流程和进度,常常在最后提交前让用户再次确认信息,并在流程结束给予明确的结果反馈。适用于具有明确的线性逻辑的任务。
基础分步表单
将大型、复杂任务拆解为多个部分,并按照相关性分组,减轻用户输入负担。尽管每部分内容单独处理,但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割,可以降低用户出错率。
表单设计的三大场景(图ZMTUzMDAxNTY=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
场景3
单次任务的表单页中需要填写的内容众多,且不同内容之中存在一定可分类归纳性。
分组表单
将大型、复杂任务拆解为多个部分,并按照相关性分组,减轻用户输入负担。
表单设计的三大场景(图ZMTUzMDAxNjA=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
还可进一步细分出以下3种场景:
  • 折叠面板编辑:
    建议条目表单数在6~8项时使用。
表单设计的三大场景(图ZMTUzMDAxNjQ=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
  • 抽屉编辑:
    建议条目表单数>8项时使用。
表单设计的三大场景(图ZMTUzMDAxNjg=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
  • 规则树:
    应用于规则编辑场景。适用于页面中需要添加一个或多个对象,且每个对象都需要添加或编辑多组数据的情况。
表单设计的三大场景(图ZMTUzMDAxNzI=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
Collect
结语
表单占据B端产品的半壁江山,是非常重要的一类页面,熟悉表单设计的各种场景,对做好表单至关重要。
注:以上文中配图均来自于网络或应用截图,仅作学习分享使用。
1
Report
|
收藏
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in