1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

实操案例!B端信息逻辑「超级整理术」 (下)

时间:2020-09-16   分类:交互设计    作者:网络   来源:网络整理   点击:83

实操案例!B端信息逻辑「超级整理术」 (上)

B端产品信息具有:信息量大、关联关系复杂,最终达到目的是用户高效率的理解信息并完成任务: 这是什么?

www.9fen.net

阅读文章 >> copyright 9fen.net

九分网络

九分网络

组装、排序

承载画布:对于pc端,组装设计原则是避免有横向滚动条,笔记本、台式。所有信息最小宽度适配在 1366px 内;响应适配考虑到 1920px 尺寸。考虑到浏览器右侧滚动条10px 留足安全距离。

copyright 9fen.net

首屏信息高度考虑768-110=658px内

本文来自九分网络

移动端一般使用750*1334 px,其中H5页面要减去考虑到浏览器的高度。

copyright 9fen.net

将信息作为一个单元进行组装。信息组装的形式一方面要符合用户的认知习惯。常见有列表、矩阵式卡片、线性卡片、时间轴、树形组件等,亦可参考Ant Design、element UI等规范 九分网络

小技巧:注重视觉秩序性、信息整体性、保持对齐、简洁、克制

本文来自九分网络

1. 列表:对比、高效

应用场景和特点

九分网络

雏形为excel表格。适用大量信息,一个对象为一行,多个对象同类数据为列。分割明确,信息间易于对比,阅览效率高。常和搜索、排序、筛选、操作、分页等元素协同。

copyright 9fen.net

实操案例!B端信息逻辑「超级整理术」 (下) 本文来自九分网络

本文来自九分网络

用户浏览习惯 九分网络

首先通过纵向浏览快速对比列获知关键信息 九分网络

然后横向对单条目了解并执行相关操作 copyright 9fen.net

展示处理技巧

本文来自九分网络

垂直方向对齐:

九分网络

一般数字类右对齐,如金额、数量,

本文来自九分网络

信息左对齐,如商品名、编号、时间、状态、操作等

www.9fen.net

标题与对象垂直对齐 本文来自九分网络

水平方向-顶部对齐。前端使用组件默认是水平居中对齐,对于复杂信息展示会错乱,需要调整

copyright 9fen.net

不能跨列超出。当字段过长可定义换行,信息对于用户不必要完整展示,超出2行或1行省略,鼠标悬浮气泡展示全部,如商品标题 内容采集来自9fen.net

字段过多。一行展示不下,需将信息分类每类分列。将动态信息,如状态、操作单独列出,一般置于列表右侧。右侧主要适用右利人群,使用鼠标和手机右手居多,用户距离近方便操作 九分网络

2. 线性卡片:「十」形浏览、

应用场景和特点

www.9fen.net

兼具卡片和表格的特性。既有利于展示各个对象的特性,又可高效纵向阅读或对比。 九分网络

实操案例!B端信息逻辑「超级整理术」 (下) copyright 9fen.net

copyright 9fen.net

用户浏览习惯

copyright 9fen.net

首选会纵向浏览关键信息进行对比

九分网络

人后锁定目标对象后查看详情 本文来自九分网络

行与行展示小技巧

copyright 9fen.net

单卡片内一般无纵向分割线

内容采集来自9fen.net

行之间间距分割需明显,线或卡片间距 九分网络

垂直对齐,对齐方式与表格一致

copyright 9fen.net

需对比的信息可突出,且对齐

copyright 9fen.net

行高度克制,过高阅读效率会降低 copyright 9fen.net

3. 矩阵式卡片:「F」形浏览

应用场景和特点

内容采集来自9fen.net

适用于富文本信息,网格布局,一行超过2个。用于突出各个对象的服务和特点,对比其次或不需要对比。

本文来自九分网络

实操案例!B端信息逻辑「超级整理术」 (下) copyright 9fen.net

九分网络

用户浏览习惯

copyright 9fen.net

首段距离小范围内横向浏览

九分网络

在内容区的左侧做快速的纵向浏览

内容采集来自9fen.net

用户并不会浏览页面上所有内容 www.9fen.net

营销场景中,头图使用户聚焦于某卡片 内容采集来自9fen.net

展示小技巧 本文来自九分网络

建议一行不要超过5个

九分网络

若有将重要的信息放在头两行 内容采集来自9fen.net

每个卡片内容布局模式保持一致,居左

www.9fen.net

卡片内将关键词和信息放在段首

九分网络

4. 时间轴「十」形浏览、

应用场景

九分网络

垂直展示时间流信息,以时间为主轴,内容可有主题、用户名、图片、类型、详细内容等等。比如用户操作日志、物流轨迹、待办事项等 本文来自九分网络

用户阅读习惯 www.9fen.net

从上到下纵向阅览,一般第一条用户重点关注 www.9fen.net

展示小技巧

本文来自九分网络

已发生的事情为时间倒序展示

九分网络

将要发生的时间正序,如待办事项 九分网络

第一条重点展示 www.9fen.net

时间纵向对齐 九分网络

5. 树形组件「十」形浏览、

应用场景

copyright 9fen.net

通过逐级大纲的来展现信息的层级关系,高效、整体框架一目了然。适用于任何需要通过层级组织的信息场景,如文件夹、组织架构、生物分类、国家地区、功能权限等等。 copyright 9fen.net

用户阅览习惯

九分网络

用户可同时浏览与处理多个树状层级的内容。 www.9fen.net

6。 更多创意展示提高信息获取效率

根据信息的特性,从信息展示阅读高效性出发,充分发挥设计师的创意。 本文来自九分网络

多学习数据图表展示形式,如antv;

九分网络

各类网站搜索「数据可视化」拓展思维库

copyright 9fen.net

如亨利设计的伦敦地铁路线图,一直沿用至今。

www.9fen.net

实操案例!B端信息逻辑「超级整理术」 (下)

内容采集来自9fen.net

九分网络

△ 地理模式的地铁路线图 copyright 9fen.net

实操案例!B端信息逻辑「超级整理术」 (下)

九分网络

copyright 9fen.net

△ 电路板抽象模式的地铁路线图

copyright 9fen.net

信息有主次

标签: 产品设计 优设 优设网 优秀 B端设计 超级整理术 信息梳理

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----