实战讲解:数据产品界面设计

数据产品越来越火热,这也是数据分析发展到一定程度不可避免的一种工业化的趋势,数据产品除了具备实用性、适用性,它的美观性同样不容忽略,毕竟我们生活在一个“审美”不断向上的时代,如果“审美”定位于颜色上就有点浅层了,个人理解它讲究的是一种视觉的舒适性与和谐性,这样去看产品的界面设计就有了更宽的广度。

实战讲解:数据产品界面设计

那首先我们先来了解下企业为什么要搭建业务型数据分析工具?

1)时效性,实时排查产品是否健康运行,如果发生了异常可以自助地在线排摸原因,通过渠道、转化率、接口请求成功率等细项指标尽可能将问题原锁定至最小单元。(IT侧会有运维对性能层数据进行监控);

2)可查询,单纯地了解某个数值的情况,比如某个页面的PVUV,普遍用于材料汇报;

3)探索新需求,对用户的标签、行为、转化率等指标进行分析后确立新的方向,这是平台运营、产品运营特别依赖数据分析工具的原因。

既然分析师特别依赖这个数据分析工具,那工具就必须具备以下几个特点:

1)准确,准确性则是数据分析平台的核心,就像朱镕基总理经常说的“质量是城市/企业的生命”;

2)数据源满足要求,要做出好的数据报告揭露用户的真实动机就必须有充沛的数据源,即便定位为监控平台也需要将业务交易前后的数据源容纳进来;

3)实时,任何业务发展到一定规模后分析师资源和分析意识都会达到较高的水平,对实时分析的要求也会越发迫切;

4)容易,学习成本低操作便捷,不需要敲代码、不需要做很多步操作实现某一个统计。

在以上四个特点中,其1、其2和其3都是数据产品和IT人员需要重点解决的问题,不过这些都是偏技术和后台的,不在本次探讨范围内(其实我也不会),今天我们主要谈的是“容易”二字对数据产品界面的影响。

数据产品设计本质上是两块内容的集成,上文中提及的Excel集合其实顶多只完成了当中的一块内容:分析组件。

实战讲解:数据产品界面设计

数据产品界面设计构成

当然如果拼凑出一份界面原型后也可以委托设计师包装成出一个卓越的数据产品,但是我们数据分析师出生的人往往都是具备较高的可视化技能和美品的,加之有些企业可能人手有限并不一定会拨出设计师资源配合优化或者设计师认为没有太多必要(也可能没有经验)对一个内部系统界面进行高标准设计。所以最佳的出路是我们需要身兼多职:分析师(需求方)、产品方、设计方。

首先,我们得有一张常规的分析组件架构图以及功能要求:

实战讲解:数据产品界面设计

分析组件初步布局及要求

那假设你是一家线下零售店的分析师,掌控着几个城市下所有门店的销售、退款数据,企业运作的命脉就掌控在你的手里。

ok,那我们根据业务背景在上面框架图基础上用Excel勾勒一些内容:

用文本框伪造头像、筛选器、搜索按钮、指标区小模块、图示区图形、表格区的表格,于是就有了下图。这张图对熟练Excel的朋友而言只要花费大概半小时左右就能输出。从灰色背景、部分加粗字体、大量浅色字体、红色标注的负值、具备升降序的表格来看基本算是一个够设计师和开发解读的原型图,这里为了能揭示可完善空间就把报表也纳入同一页的底部,当然也可以另起一页。所以这么一操作好像数据产品的工作还算蛮容易的嘛,用一些Excel操作就能有点模样地绘制一个数据看板原型。

实战讲解:数据产品界面设计

Excel绘制产品界面原型

按照我丰富的失败经验可以告诉你,零零整整像这样把琐碎业务数据面板拼凑起来的集成品——数据产品一般不太会有人会看。为什么呢,因为这种数据往往比较简单,而且数据本身就会有一些无法解释的波动,指标或高或低都不见得需要特意去关注他,只有在明确要做活动的前提下需要特别留意数据的走势,快速结合成本支出和交易增量就能算出活动的大致回报率;其次没人愿意时时刻刻守在屏幕前重复看相同的内容,即便这个面板包含了SKU库存、发货效率、品类销量、活动效果等数据,只要明确了分析思路(如指标拆解)那么界面内的数据、图表都是基本被固化的,所以一旦数据出现异常应该是机人互动,即机器向人发起通知而非人机互动这种守株待兔模式。

以上都不是我们轻视数据产品的理由,作为数据产品我们的工作才走了一小步,下面我们要对产品进行系统性的全局设计,就要从布局、标题、字体和颜色下手,指标内容业务主导,页面的简洁、便捷、美观我们来把控。

对分析组件改造过程如下:

1)筛选器,将标题“城市”和筛选器空间内提示词“全部”合并,不仅节省了高度(如果标题位于控件左侧,则节省宽度),对控件添加阴影效果;同时考虑到筛选器过多时可能会占用多行空间,所以采用“+”对部分非常用筛选器进行隐藏,点击“+”展开剩余筛选器;当筛选条件过多时,可通过鼠标悬浮“搜索”按钮,会展示“清空”按钮,点击后可重置筛选条件。

实战讲解:数据产品界面设计

筛选区体验优化方案

2)指标区,隐去了不必要的标题“指标”,节省了空间;采用了bahnschrift light condensed字体,这种瘦高的字体具有优雅、视线阅读空间极宅从而避免眼球运动捕捉数字所谓一览无遗,这些优点将有助于提高强读者对数值的印象;摒弃了模块单元的概念,将所有指标融入与一个完整的区域内,用浅色竖线隔开(原先采用四边框方式区隔)增加了视线的连贯性从而提高了数据阅读的流畅性;当指标过多不得不展示多行时,可点击最后一个指标右上角的设置调整指标顺序或新增指标(需要配套对应的标准化API后台),设置内可同时具备展示多行/仅展示第一行的开关;环比数据由日文本形式环比调整为月环、周环、日环的结果,鼠标悬停时展示对应数据。

实战讲解:数据产品界面设计

指标区体验优化方案

3)图示区,将标题融入到了图示内,通过提高统一性增强标题与内容的相关性,避免阅读标题时出现内容归属的奇异从而发生不必要的卡顿;在标题下方添加统计值;将筛选对比控件调整为单选控件,且提供参考数据;将今日数据由折现调整为柱形,其他日期数据在折线基础上添加标记点,增加美感和识别度;虚化历史日期折线中在当前时段之后的部分,表示被对比的历史累计数据是和今日同时段对比(是今天0点-17点和昨天0点-17点对比,而非昨天0-24点)。

实战讲解:数据产品界面设计

图示区体验优化方案

4)表格,移除筛选控件,直接将标题兼容筛选功能,激活筛选功能的标题蓝色高亮;弱化了标题的背景色和字体颜色;加大了行与行之间的距离,采用浅灰色西线做行之间的分割物。

实战讲解:数据产品界面设计

表格体验优化方案

经过体验优化后初显使用乐趣的界面就出现了,第一套方案:

实战讲解:数据产品界面设计

灰色背景,标题都纳入白底色模块区域内,模块间无明显分割物。

关于清空还有另一个设想,就是双击“搜索”就会触发清空功能(功能触发后界面跳出“清空成功”气泡)。只要在“搜索”按钮上添加提示即可,如i方式或在按钮上方添加中文说明。毕竟双击比悬停鼠标+点击来的快速和容错。

改造方案二:

实战讲解:数据产品界面设计

白色背景,模块间用灰色中等粗线分割(表格行分割线弱化,避免和模块分割线混淆)。

围绕以上数据产品还需要很多配套工作,目前来看最难的地方在于自定义指标,需要有一个后台页面可以编写轻量级SQL生成指标,然后配置或动态生成相关报警阈值及话术,最后通过移动端发送报警信息。只要有了API,输出大屏、邮件推送报告、对接中台就是水到渠成的事情。做好了数据产品的工作,大家工作都轻松、数据的价值的变现才有可能出现指数级的增长。

业界动态

用户界面设计的9个套路

2021-3-14 16:45:11

业界动态

失焦的“她营销”,品牌营销困于女性议题

2021-3-14 17:31:58

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