表单设计的三大场景

杭州/设计爱好者/339天前/89浏览

版权

表单设计的三大场景

表单设计聚焦于提交一次表单的过程体验，按照任务的复杂度可划分为三大场景，分别对应三种解决问题的布局方式：

场景1

当需要完成一个简单快速的任务，例如输入少量信息即可完成创建。

基础表单

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

表单设计的三大场景（图ZMTUzMDAxNTI=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

场景2

将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束给予明确的结果反馈。适用于具有明确的线性逻辑的任务。

基础分步表单

将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。尽管每部分内容单独处理，但最终一起完成提交。适用于大型、复杂表单。通过适当的任务分割，可以降低用户出错率。

表单设计的三大场景（图ZMTUzMDAxNTY=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

场景3

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

分组表单

将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。

表单设计的三大场景（图ZMTUzMDAxNjA=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

还可进一步细分出以下3种场景：

折叠面板编辑：
建议条目表单数在6～8项时使用。

表单设计的三大场景（图ZMTUzMDAxNjQ=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

抽屉编辑：
建议条目表单数>8项时使用。

表单设计的三大场景（图ZMTUzMDAxNjg=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

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

表单设计的三大场景（图ZMTUzMDAxNzI=） - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL

收藏

结语

表单占据B端产品的半壁江山，是非常重要的一类页面，熟悉表单设计的各种场景，对做好表单至关重要。

注：以上文中配图均来自于网络或应用截图，仅作学习分享使用。

1

举报

|

声明

收藏

分享

原创文章 UI 网页

相关推荐

评论

评论你的想法~

表情

喜欢TA的作品吗？喜欢就快来夸夸TA吧！

相关收藏夹

大家都在看

登录注册

1

收藏

评论

分享