浅谈数据产品界面设计方案

说在正文之前的话:

有不少的朋友会和我有相似的经历,工作一开始可能做着与数据无关的工作,没多久后被命运垂青开始上手做数据工作,整天为日报、月报、专题报告愁眉苦脸,从vlookup熟练掌握到后来爱上了可视化,先从刘万祥的《图表之道》获取扎实的绘图基本功和理论,然后再看更系统的书《板式设计》、《写给大家看的设计书》、《设计中的设计》等。随着对数据认知、价值的不断理解加强,终于成为了一个业务分析能人。但突然之间发现数据源不足、数据采集质量堪忧、便捷的数据分析工具、高效分析自动化都达不到自己的要求,于是乎心中安耐不住一声咆哮:我要做数据产品,拯救身边的分析师。

来,今天我们聊聊数据产品前端界面设计的事情。虽然我是一个失败的数据产品,但这不影响我来探讨这个话题,人知耻而后勇亦是一种乐趣(当人进步快的时候,每次看同一本书感觉可能都会有细微差别)。我曾在自己的岗位上做过几次不太友善的数据监控产品,问题出在太一般了。常规的控件、常见的图表,仿佛就是把Excel中或PPT的报表整合一起就完事儿了。如果你也有隐隐认同感,那咱继续往下聊。

来自于百度(“数据分析产品”),真实性不重要,主要是看图表效果

企业为什么要搭建业务型数据分析工具?

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,输出大屏、邮件推送报告、对接中台就是水到渠成的事情。做好了数据产品的工作,大家工作都轻松、数据的价值的变现才有可能出现指数级的增长。所以说数据这活儿乐趣大得很!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容