大星星大每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
党建产品数据可视化页面设计
什么是B端数据可视化设计？
- B端数据可视化设计的表现形式多为图表，是对原始数据的二次加工，为了可以帮助客户高效的理解数据、分析数据，了解数据背后的驱动力，让客户更快的对数据作出反应，高效办公或创造商业价值。在工作中我们常常需要数据支撑我们，但对于初入设计行业的设计师来说，对数据图表的应用不是很清晰，在网上的资料也十分零散，也有很多理论知识，很少有落地实操的项目经验分享。这次我结合具体的页面以及对数据可视化的理解，梳理了本篇文章，希望能对B 端的设计师提供一种思路。
- 数据可视化在展示方式上也分两种，一是数据大屏展示、二是可视化页面展示，他们的区别在于使用的场景不同，数据大屏一般用在展厅或监控场景下，以看为主操作为辅，展示的数据类型多且全面；可视化页面一般用在网页或App界面中，不仅可以查看还可以进行交互，但展示数据没有大屏全。本次内容经验分享为数据可视化页面设计。
1、页面构成
- 数据可视化页面一般由标题栏、数据统计、可视化图表、数据列表、排行榜五部分组成。
- 其中页面构成的主要模块为可视化图表，可视化图表的展示形式又多种多样，下面我们一起来认识一下可视化图表的构成
2、图表构成
- 图表是由很多小元素构成的，包括标题、坐标轴、图例、信息提示、切换选项、辅助线、图形主题、时间把个小元素组成，根据不同的使用场景会对这些小元素进行灵活运用，以达到视觉降噪的效果，为页面创造呼吸感，以提高客户阅读效率节省客户停留时长。
- 标题 - 描述图表的主题
- 图形主体 - 统计图表的视觉展示形式
- 切换选项 - 是对统一图表不同状态的切换
- 坐标轴 - 用来定义坐标系中数据在方向和值的映射关系
- 图例 - 对图形本身的概括
- 提示信息 - 当tap或者hover的时候，展示该点位的数据详情
- 时间 - 表示该图表的统计时间
- 辅助线 - 提高图表坐标轴的延伸，用来提高图表的阅读性
- 在图标设计中，有一些构成元素为图表中的必选项，没有这些构成会对图表的信息提取造成障碍，而有一些就是图表设计中常出现元素，在一些图表中经常使用在另一些图表中却用不到，最后还有第三类为了满足图表的使用效率而增加的补充项。
- 必选项 - 标题、时间、图形主体
- 常选项 - 辅助线、图例、坐标轴
- 补充项 - 切换选项、提示信息
- 这里面还一个比较特殊的构成 - 时间
- 时间可以有很多种表现形式，例如，标题“本月完成业绩”该图表述本月的业绩完成情况。
- 时间可以通过标题、图例、坐标轴、信息提示、切换选项的元素来传递信息。所以在很多图表中我们会忽略这个信息的存在，但这个信息的存在又是图表可读的前提，在工作中我们要加强这个意识，避免漏掉给客户带来麻烦。
- 了解完页面构成之后我们开始对原始页面进行拆解，以便于后面的深入体验改版。
- 针对页面现状进行分析，把页面数据信息按照类型进行概括，像画原型图一样盖在页面上，降低页面的视觉噪音，让我们更加关注数据信息本身。
- 对页面的数据信息进行进一步的归类，把相同类型/相同层级/或亲密性很强的模块区分颜色，然后开始你的深入思考，并提出问题。
- 为什么选择组织的操作层级更高却在当前组织信息的下面？
- 为什么工作台与其他导航选项要在不同的区域？
- 等等...
分析页面
- 1、整体页面交互层级混乱；页面装饰较多，影响数据读取；
- 2、选择组织与菜单页面面积较大，放置位置分散，不易操作；
- 3、数据展示区域较小，亲密性不强；
- 4、数据展示样式多样，读取信息不通用。
解决思路
- 1、调整页面层级，去掉多余装饰；
- 2、缩小选择组织占比，规范菜单栏；
- 3、扩大数据展示占比，按数据亲密性与层级重新调整模块；
- 4、按数据类型对进行可视化设计，尽量不用复杂的样式。
- 页面数据信息层级，这个层级一般是由产品经理根据业务调研得出的。
- P0 : 地图可视化三会一课完成情况、当前组织信息
- P1 : 当前组织三会一课完成情况、当前组织生活完成情况
- P2 : 当前组织构成
- 根据页面问题分析与页面层级，我们对模块层级进行了调整，将优先级高的放在页面考上的位置，优先级低的放在页面靠下的位置，逻辑层级高的放在上面反之放在下面。上述法则都是相对的并不绝对没根据具体的业务进行调整。
- 然后我们对调整后的模块进行删格布局，我这里的删格为24删格，删格的左右页边距与水槽宽度均为16.
选择组织模块拆解
- 选择组织在原来页面中的整个占比还是比较大的，但其实这主要的功能还是查找组织用的，并没有太多的数据展示与排行等，所以在改版中就采用数选择的方式来选择组织。把原来的组织类型提上tab栏，因为它的层级更高，更符合操作逻辑。
地图可视化三会一课完成情况模块+当前组织信息模块
- 把模块信息做了一个长条的显示框放在了地图的上面，根据数据的多少进行滚动播放。
- 地图的配色比较清亮，所以这里没有更改
当前三会一课完成情况拆解
- 这里把重要的数据进行提炼，对主要数据进行强调使客户一眼就能看到重点
- 下面使详细的拆解步骤
第一步：信息罗列，数据展示方式选择
- 1、总完成率为第一层级，分别完成率为第二层级所以选择上下排布。
- 2、分别完成率为比较类数据，数据数量较少，数据名称长，所以选择横向柱状图（这里不作为重点讲解，日后将进行此方面知识的重点讲解）。
第二步：数据展示排布、信息层级区分
- 1、三会一课完成数与完成数据较为重要卡片形状细长所以总完成数据也选择上下排布；
- 2、颜色从标准色选取，想尝试做一版偏蓝色科技感的页面。
第三步：视觉降噪与视觉展示
- 1、可视化图形展示更加轻量化；
- 2、距离完成还差320次会议用红色表示未完成，超过计划会议完成数量用绿色表示超额完成，用客户读取更轻松。
- 对三个拆解完成的模块拆解完成后，放在一起调整细节，准备重组。
- 按照页面删格的规划对三个模块进行重组。
支部党员大会拆解
具体拆解步骤如下：
第一步：信息罗列，数据展示方式选择
- 1、数据按时间推进发展，数据数量不多，所以选择则折线图；
- 2、为了数据精确化，悬浮鼠标展示精确的数据信息。
第二步：层级清晰与细节优化
- 1、折线线条较细，为了更易读取，增加渐变样式；
- 2、区分层级样式，标题，坐标轴，坐标数据。
支部委员会拆解
- 套用支部党员大会组件
支部委员会拆解
- 套用支部党员大会组件
党课拆解
- 详细操作步骤：
第一步：信息罗列、数据展示方式选择
- 1、完成率与完成数量展示，套用三会一课完成情况的部分样式，进行设计。
第二步：层级优化、视觉降噪
- 1、数据层级优化，环图更加轻量化。
党组织情况拆解
- 按照上面的拆解步骤先选择合适数据展示方式，进行信息罗列，再对罗列的信息进行层级优化与视觉降噪。
党员队伍情况拆解
- 这里要进行一个特别说明：在设计实践中这里由于图表数量大没有统一的对齐标准，于是引入了前端的小盒子进行帮助排列，排列规则盒子与盒子间与卡片边距均为16
- 最后一步是对所有的拆解模块进行整合，整合的过程中可能会发现有些细节上的小问题，进行逐一调整就好了，还可以对颜色的进行整体调整
- B端的设计除了好看，更重要的是让客户高效的完成操作，这将是检验设计的最重要的一条法则。
Powered by Froala Editor
全部评论：0条
更多作品
发表评论