树形组件 移动端_B端产品【信息展示模式整理术】

35fba4d7adcdadca5c85671714470814.gif

众所周知,B 端产品面向企业用户,产品量级惊人、迭代快、逻辑复杂、用户同理心比较难建立。而需求的不断堆叠、产品信息爆炸式增长都会给用户带来消化负担。作为信息消费者,用户接受处理信息的能力是有限的,所以,在信息过载的情况下,怎样合理规划和展示信息,是我们需要掌握的重要技能之一。


133b6dac38684bdd56a5d3676c7b967e.png

//   合理展示信息的重要性   //

高效:优化信息结构,帮助用户聚焦内容

信息是连接产品和用户的桥梁,规避信息冗余和结构含糊不清,明确信息展示形式,不仅能缓解用户的阅读焦虑,还能助力用户迅速定位到所需的有效信息,提升效率。

严谨:提升页面一致性,增强用户信任感

一致的信息展示模式、严谨的内容布局、高品质的视觉表现能提高用户对信息的理解程度和操作的精准性,帮助用户建立安全感和信任感。


6364a8ef5bee26a6f9ca9b97fcf4763e.png

//   字段信息展示模式   //

1.平铺模式

对于内容主导型的B端产品,通常需要通过跳转新页面或新开弹窗来查看详情内容,用户会在这些页面停留较长时间。针对杂乱无章的信息入侵,信息平铺便是最直观的展现形式。

使用场景:

信息体量大(比如详情页):B端详情页主要由字段名称和字段值组成,根据需求也会包含图片、跳转链接、附件等元素,但整体结构相对简单,只要明确大类信息,对信息进行有目的的编排和组织、分块组合、统一展示格式,最终也能把零散的信息有效的呈现给用户。

平铺模式的优点:

  • 信息展示全

  • 分块原则,页面结构清晰

863104d0ac0217439ecb7c7abb64a97d.png

2.表格模式

表格是用来收集、整理、组织、类比数据的二维矩阵,也是B端产品最常用的信息展示模式。展示的主体配合一些按钮就可以实现数据的增删改查,从而实现功能闭环。

使用场景:

  • 数据量庞大:表格的设计集中体现在易扫性和易操作两个方面,在处理密集的数据时,用户通过浏览表格可以一目十行,并协同表格的筛选、排序等功能进行多维度、快速精准的信息过滤,完成目标任务。

  • 信息对比:表格的横向纵向关系一目了然,这种数据排列方式,易于用户感知及分辨其中的关联与区别,有效进行对比分析。

表格模式的优点:

  • 结构简单,提升操作效率

  • 分隔明确,让用户方便阅览、对比和分析。

  • 节省空间,页面利用率高

7bbd29a7909f901980f5834205bd1346.png

3、卡片模式

卡片设计风靡自Material Design,是传统页面转向个性化体验的过程。B端产品的卡片作为容器可承载的内容包含文本、图片、可视化图表,并作为详情页或者功能模块的入口存在。

使用场景:

结构模块化(比如工作台、BI仪表盘):需要用户对包含的内容框架一览无余,每一个容器分别代表不同的功能模块,归纳一个类别的信息。卡片设计因为会跟其他内容有天然的断层,更容易形成独立的视觉焦点,帮助用户快速寻找功能集合。

927b43fcba35997f8e8e8e395fe9b0b9.png

  • 工作流:在协同办公的场景下实现工作过程管理的自动化、智能化和整合化。卡片是将某个时间范围或事件进行归纳收集的有效手段,在工作流中有明确的顺序、状态,工作板拆解成卡片信息展示方式更方便进行任务管理。

cbad3d13f6fffb4bd8b0205fb0f92980.png

  • 快速捕捉关键信息:效率往往是B端产品的决胜点,而在对信息的取舍中,卡片言简意赅,信息层级对比突出,摘要性的格式让用户更愿意参与到操作和浏览中来。

33b1cec40e4207e3a3e0219db62ff66d.png

  • 响应布局:是指网页根据屏幕宽度做出相应调整,力求能够在不同尺寸的终端设备中合理的展示内容

卡片模式的优点:

  • 良好的内容组织,独立、聚焦

  • 界面轻量美观,层级清晰

  • 可用于流式响应布局,灵活适配多终端

9792e073b610b802fdfe90b1676b92b2.gif

4、树形模式

树形结构是一种典型的概括层级嵌套、表达附属关系的快捷模型。一个树结构包含一系列存在上下级关系的节点。

使用场景:

组织架构:树形结构适用于表现数据的所属关系,例如组织架构图、分类图谱。

树形模式的优点:

  • 基础树:信息紧凑,层级清晰,应用场景广,常与其他控件组合使用

  • 树形图:(1)全貌展示,利于把控数据的全局关系;(2)可快速识别整个信息结构中的重点信息和异常信息

a2638b181c8dbcfceff01cb3c2c7e1fc.png

5、网关模式

网关(Gateway)一词较早出现在网络设备里。面向B端产品,网关将庞大的业务系统拆分成颗粒度更小的系统进行独立部署,从而提高系统的稳定性、降低重复建设率。

使用场景:

流程编排:组件是网关的核心,大部分功能特性都可以基于组件的形式提供,组件化可以有效提高网关的扩展性。业务流程错综复杂,网关图能帮助产品分解业务知识难点,把控全局的同时又能对细节查漏补缺,诊断并优化流程步骤,提升产品使用体验。

网关模式的优点:

  • 支持组件化及自定义功能

  • 展示顺序直观,引导指向性强

9ab7f45dc835828abaacfcd2b4015154.png

fedb83cd11fe294abce798d5c1f97300.png

6、自然语言模式

通过对关键数据的分析整合,用通俗易懂的方式传递信息。自然语言在C端产品中广泛普及,而B端产品例如假单、考勤、薪酬也会有自然语言提炼主要信息的场景,但对于核心人事、财务核算、基础平台等专业性强、信息量大的数据呈现就不建议采纳这种形式。总而言之,将自然语言融入B端系统能提升产品温度,让产品更生动。

483fe529c8f1e403eece13d538d9fa63.png

使用场景:

  • 关键信息整合展示,适用于信息量少且易于理解的场景。

cd37e57395f02f09be22098d0193eff5.png

  • 运营场景

b531ccaba16f01de2e36d21c1bb2076d.png

  • 智能对话:通过对话的方式引导用户完成任务,常用于向导、帮助、反馈体系。

95d9438c2a8a636791cbe81c36bccf41.png

26648f5da7afc7a396af1dd6b92a750e.png

自然语言模式的优点:

  • 让产品鲜活,拉近与用户的情感共鸣

  • 信息归纳提炼,主要数据清晰直观


0bfc91839d10176e743cecf9e7f3829f.png

信息展示模式结合应用

为了满足B端产品信息量大、逻辑复杂的场景需求,不同的信息展示模式常常搭配使用,从而提高信息传递的有效性,实现产品价值最大化。

1、树+表格

提供数据层级结构的枚举,同时对应到每个层级的具体信息。

31afa57e074b8be71ad2742c81c10998.png

2、卡片+列表

用卡片分装同个维度下不同状态的内容,卡片里面的列表支持详情的展开收起以便节省空间,收纳更多信息。

21db4cd777eee1c9e93d48694dd21be9.png

3、树+卡片

树+卡片的形式能兼顾可视性和易通性,卡片可以根据内容信息的多少灵活的调整尺寸。

2d646920dd6c059def438141d6652977.png


结束语

B端产品多为专业性强的用户服务,秉承功能大于形式,效率至上的准则,模式化对于B端产来说至关重要。本篇文章为大家总结出了B端产品常用的几种信息展示模式,并结合不同的业务场景展开细分,在逐步升温的B端市场中,相信有更多样化的信息展示模式能被深究与挖掘,经过市场的检验,为产品增值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值