B端设计:表单页面中的信息层次

大家是不是时长困惑于,B端的表单设计体现不出高级感?设计发挥的空间特别的少?那是你没用对发力点~

B端设计:表单页面中的信息层次

B端:设计表单页面时,一方面须尊重用户的习惯,不要在不必要的地方体现差别。总结了4个思考问题:

案例:以创建公众号消息自动推送为例

  • 思考用户用产品做什么事?
    用户会用该产品创建公众号消息推送,根据用户触发事件,推送相关信息。
  • 用户用这类产品最关心的是什么?
    核对触发事件,检验消息发送状态
  • 用户有哪些思维定势?
    这里就不举例了(条件不变时,能迅速地感知现实环境中的事物并作出正确的反应)
  • 用户用过什么类似的产品等?
    ……

另一方面要考虑信息层次。

搞定了基本要素后,我们开始考虑如何表现信息层次。

  1. 封装度高、信息密度低
  2. 如何判断采用哪种布局方式

一、什么是封装度高且信息密度低?

在了解什么封装度和信息密度前,我先跟大家讨论一下。什么是表单之间的关系。

我所认为表单之间的关系分为3种

1、常规结构

优点:

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

缺点:

i/表单页中需要填写内容众多,容易造成信息密度过高

ii/操作需要的视觉元素越多,用户的认知负担越重

使用场景:

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

B端设计:表单页面中的信息层次

2、树状结构

优点:

i/用于复杂任务时,拆解任务进行编排,适当的任务分割,可以降低用户出错率

缺点:

i/无法在表单页中根据内容量进行合理地布局

ii/视觉噪点过多,无法兼顾页面展示和用户填写效率

使用场景:

i/适用于大型、复杂任务

B端设计:表单页面中的信息层次

3、显/隐结构

优点:

i/减少不必要(非重要)的输入项,能适当的减轻用户认知负担

缺点:

i/虽然减轻用户输入负担,但无法高效的判定任务分割的容错率

ii/用户确认信息有一定难度,无法兼顾页面展示

使用场景:

i/特殊场景下使用

B端设计:表单页面中的信息层次

那么用一条完整的链路来表达就是:

B端设计:表单页面中的信息层次

了解完表单的结构关系知晓利弊后,那么应用在我们实际的场景中表达就是如图所示:

封装密度高且信息密度低

B端设计:表单页面中的信息层次

(图中案例,仅做示例说明)

将一个复杂的任务表单,进行封装后,看起来任务量是不是也变少了?操作起来也不是很复杂了?

小结:分析了解表单的结构关系,判断表单,寻找共性的内容,将他们封装为一个卡片,也可以封装成一个组。主要的目的就是减少用户认知负担,提升操作/使用效率。

二、如何判断采用哪种布局方式?

关于使用何种布局方式的判断,应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。

1、信息的复杂度和相关性模型

B端设计:表单页面中的信息层次

(来源:Ant Design)

来源链接:https://ant.design/docs/spec/research-form-cn

2、区隔方式

根据各个信息之间的相关性,判断各个信息模块之间的亲密度,通常情况下,相关性强的内容尽量靠近,相关性弱的的内容尽量拉开层次。

  • 不通栏分割线:将相关内容分开;
  • 通栏分割线:将内容分成多个部分;
  • 卡片:放置一个主题;
  • 页签:对象描述信息最顶层组织方式,如按版本组织、按意图组织、按阶段组织;

B端设计:表单页面中的信息层次

(来源:Ant Design)来源链接:https://ant.design/docs/spec/detail-page-cn

3、注意事项

  • 表单内容数量 <7 项,不建议分组;
  • 表单内容数量 7~ 15 个建议分组;
  • 表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样式。
业界动态

2021年,中小企业如何抓住B站流量?

2021-2-20 15:33:02

业界动态

2021“端”内搜索的新战争

2021-2-20 17:06:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索