数据可视化设计(3.流程)

一、数据可视化现状

当今市面上的数据可视化工具和开源组件库应接不暇,以阿里DataV、腾讯云图、百度sugar为代表的数据可视化大屏工具,致力于一站式搭建专业水准的可视化大屏应用,并且可以满足不同业务需求,极大地提高了数据可视化设计与实现的效率。

不管是利用数据可视化工具一站式设计开发,还是传统的定制化开发流程(分析数据→交互&视觉设计师编码可视化→实现算法和交互→测试、上线),从需求研究、分析数据到数据可视化设计的整个流程与方法是可以固化的。

优秀的数据可视化设计是一个创新的过程,将共创为核心的设计思维作为基础,结合数据可视化设计实践,可固化一套相对科学的设计流程。

下图是市面上数据可视化服务供应商、组件库、大屏工具、BI工具的汇总。


截屏2021-01-08 14.50.25.png

二、用设计思维的流程共创数据可视化设计

数据可视化的实质就是用数据讲故事。从利用数据讲故事的维度,结合设计思维固化形成一套可视化设计流程。此流程将数据可视化设计大致分为三大阶段:故事刻画阶段、可视化编码阶段、评估&优化阶段。


数据可视化与设计思维模型.png

三、可视化设计思维——流程1:Discover 发现

发现阶段是收集的过程,紧密联系用户,收集真实的需求,收集需要可视化的数据,从用户与数据中发现问题。

发现阶段.png

1. 发现用户

用户是数据可视化的受众,对于大多数的数据可视化大屏(尤其是政企单位),设计受众往往分为各种角色的领导和一线工作人员。因此,如何满足各种利益相关者的需求,成为发现用户阶段需解决的关键问题。遵循以人为本的理念,与利益相关者相处大量的时间,通过观察、实地调研、用户访谈等方式,了解用户日常工作流程、工作场景涉及到的数据,捕获利益相关者的真实痛点和诉求,为构建可视化故事做准备。

2. 发现数据

数据是可视化的对象,数据可视化并不是简单的数据图表的罗列,更是要发现数据所蕴含的规律、态势、问题、结论等。每个领域通常都有自己的词汇表来描述其数据和问题,不同的数据状况与数据组合的寓意不同,数据背后隐藏的问题也都不尽相同。

数据源本身也可能会存在问题,许多设计师跳过专业的分析手段,根据未经验证的数据或假设,立即进入可视编码阶段,可视化结果会产生偏差。发现数据的过程还可以验证数据是否可信,数据里是否存在业务概念性、逻辑性的问题。利用数据分析与数据挖掘的手段,分析数据,发现数据集的意义与数据背后隐藏的问题,验证之前的结论、假想,通过可视化的方式形象地展示。

3. 发现问题

洞悉用户,可以发现一些用户关注的核心问题和解决问题的方式。通过数据处理、分析与挖掘,可以验证之前的假设,发现数据集隐藏的特征与问题。将有价值的问题收集起来,准备进入Define阶段。

四、可视化设计思维——流程2:Define 定义

定义阶段侧重于找准问题,找准问题才能正确地构建可视化故事。根据发现用户阶段得到的用户关注的核心问题,结合发现数据阶段得到的数据背后隐藏的问题,选择合适的视角与视图,构建兼顾每个利益相关者的可视化故事脚本,阐述数据可视化故事。


定义阶段.png

1. 定义问题

发现用户阶段的问题往往是用户工作场景中的痛点产生的,发现数据阶段的问题往往是数据背后隐藏的问题。解决数据本身的问题会缓解用户痛点,数据分析中发现性或预测性的规律也会给解决用户问题提供方向。将发现阶段的问题收集起来,归纳分析,最终确定数据可视化需要反映或解决的核心问题。

2. 定义视角&视图

定义了可视化问题,也就意味着确定了探索数据的主线,即可视化视角。接下来定义视图,相当于构建可视化故事的每个章节及数据可视化的内容,通过不同的视图表现可视化故事的情节,让数据对故事的叙述层层递进。

3. 定义故事

最后,根据问题、视角、视图,确定数据可视化的全流程(即数据展示的顺序,数据内容,阐述的道理或规律,如何利用规律获得启示与帮助),形成可视化叙事的故事脚本。

六、可视化设计思维——流程4:Prototype 原型设计

原型设计过程是执行阶段,将此前发现、定义、概念设计阶段形成的抽象的概念具象化。原型设计是可视化编码层最重要的一环,如何用最适宜的视觉通道编码数据是原型设计需要重点关注的问题。原型设计的输出直接面向设计受众,可视化编码阶段需要考虑如何更好地提升用户与数据可视化之间的互动体验。从人的感官入手,立足于眼见,耳闻,心感三个层次开展原型设计,让数据可视化富有感官冲击力。


截屏2021-01-08 15.07.47.png

1. 眼见:视觉是获取信息最重要的通道
信息展示与交互
(a)根据不同可视化视图所需要传达的信息主次关系,确定可视化设计布局和信息密度;
(b)根据数据的展示目的,确定合适的可视化图表和视觉通道;
(c)根据设计受众的心智模型,选择合适的可视化隐喻,降低认知门槛。
(d)根据信息主次与可视化故事的叙述,选用合适的人机互动方式。

精致的视觉编码
针对概念设计阶段共创的设计风格,编码视觉信息,包括布局、元素的大小、样式、色彩等。在此基础上,合理增加微交互动效,使可视化信息更加吸引眼球。

2. 耳闻:听觉作为视觉获取信息通道的补充

在数据可视化设计中,增加声音元素作为串联可视化故事的机制,可以降低观赏者的认知门槛。交互过程中符合可视化故事主题的声音反馈,对调动观众情绪起重要的辅助作用。

3. 心感:感知与认知相互作用

在感知层面,眼见与耳闻层面的设计让观赏者获取可视化信息。通过数据可视化讲故事的能力来调动观赏者的情绪,通过可视化隐喻、精致的视觉编码与微动效,让观赏者产生情感上的共鸣。在认知层面,可视化故事的内涵需要紧扣观赏者的关注点,并能够引导用户获得因果分析、规律总结等方面的知识。

七、可视化设计思维——流程5:Evaluate 评估优化

评估过程是测试&优化阶段,综合评估方案的合理性,与利益相关者(Stakeholder)接触收集反馈,根据评估结果不断优化可视化解决方案。

1. Review-综合评估

需求&故事:设计方案能否反映或者解决Define阶段定义的核心问题,达到用数据叙述可视化故事的效果;可视化故事是否流畅、有内涵,使观赏者获得启发性知识。

数据:数据可视化后是否可以反应某些状态,解决问题的方法与对策。虽然提倡真实地反应数据,但是在必要时,也可以使用一些“数据说谎”的形式增强可视化故事的说服力。

2. 可行性测试-利益相关者评估

演示者:设计师当讲解员,给设计受众讲解可视化解决方案。演示者能否简洁、生动地描述可视化故事是衡量方案好坏的指标,期间观察设计受众的状态并记录相关问题。

观赏者:简单讲解后,观察设计受众(观赏者)能否立马投入其中,指点江山。让观赏者自己看可视化解决方案,能否立马进入可视化故事,产生情感共鸣,期间观察并记录观赏者的疑惑与建议。

3. 方案优化

评估过程可以贯穿设计、开发、测试整个流程,形式不限。在原型设计阶段开始与利益相关者沟通,可以极大地节约开发成本。每个阶段性评估后,根据评估结果不断优化可视化解决方案。

转载自:数据可视化设计 作者:Nemo

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

推荐阅读更多精彩内容

  • 情感化设计指导数据可视化设计 本能水平设计理念:清晰&炫酷 在情感化设计本能水平阶段,基本物理特性(视觉、触觉、听...
    Vulpes阅读 411评论 0 2
  • 渐变的面目拼图要我怎么拼? 我是疲乏了还是投降了? 不是不允许自己坠落, 我没有滴水不进的保护膜。 就是害怕变得面...
    闷热当乘凉阅读 4,241评论 0 13
  • 夜莺2517阅读 127,718评论 1 9
  • 版本:ios 1.2.1 亮点: 1.app角标可以实时更新天气温度或选择空气质量,建议处女座就不要选了,不然老想...
    我就是沉沉阅读 6,887评论 1 6
  • 我是一名过去式的高三狗,很可悲,在这三年里我没有恋爱,看着同龄的小伙伴们一对儿一对儿的,我的心不好受。怎么说呢,高...
    小娘纸阅读 3,387评论 4 7