數(shù)據(jù)可視化設(shè)計(jì)(3): 設(shè)計(jì)思維下的可視化設(shè)計(jì)流程
在上一篇文章《數(shù)據(jù)可視化設(shè)計(jì)(2): 可視化設(shè)計(jì)原則》中,提出了八大設(shè)計(jì)原則指導(dǎo)數(shù)據(jù)可視化設(shè)計(jì)。這篇文章,我將與大家分享如何用設(shè)計(jì)思維的流程共創(chuàng)數(shù)據(jù)可視化設(shè)計(jì)。(PS:此文討論的數(shù)據(jù)可視化設(shè)計(jì)主要以大屏為展示載體,不考慮其他特殊載體)
一、數(shù)據(jù)可視化現(xiàn)狀
當(dāng)今市面上的數(shù)據(jù)可視化工具和開源組件庫應(yīng)接不暇,以阿里DataV、騰訊云圖、百度sugar為代表的數(shù)據(jù)可視化大屏工具,致力于一站式搭建專業(yè)水準(zhǔn)的可視化大屏應(yīng)用,并且可以滿足不同業(yè)務(wù)需求,極大地提高了數(shù)據(jù)可視化設(shè)計(jì)與實(shí)現(xiàn)的效率。
不管是利用數(shù)據(jù)可視化工具一站式設(shè)計(jì)開發(fā),還是傳統(tǒng)的定制化開發(fā)流程(分析數(shù)據(jù)→交互&視覺設(shè)計(jì)師編碼可視化→實(shí)現(xiàn)算法和交互→測試、上線),從需求研究、分析數(shù)據(jù)到數(shù)據(jù)可視化設(shè)計(jì)的整個流程與方法是可以固化的。
優(yōu)秀的數(shù)據(jù)可視化設(shè)計(jì)是一個創(chuàng)新的過程,將共創(chuàng)為核心的設(shè)計(jì)思維作為基礎(chǔ),結(jié)合數(shù)據(jù)可視化設(shè)計(jì)實(shí)踐,可固化一套相對科學(xué)的設(shè)計(jì)流程。
下圖是市面上數(shù)據(jù)可視化服務(wù)供應(yīng)商、組件庫、大屏工具、BI工具的匯總。
二、用設(shè)計(jì)思維的流程共創(chuàng)數(shù)據(jù)可視化設(shè)計(jì)
在系列文章開篇《數(shù)據(jù)可視化設(shè)計(jì)(1) :情感化設(shè)計(jì)指導(dǎo)可視化設(shè)計(jì)理念》中筆者就曾寫道:數(shù)據(jù)可視化的實(shí)質(zhì)就是用數(shù)據(jù)講故事。從利用數(shù)據(jù)講故事的維度,結(jié)合設(shè)計(jì)思維固化形成一套可視化設(shè)計(jì)流程。此流程將數(shù)據(jù)可視化設(shè)計(jì)大致分為三大階段:故事刻畫階段、可視化編碼階段、評估&優(yōu)化階段。
數(shù)據(jù)可視化與設(shè)計(jì)思維模型
三、可視化設(shè)計(jì)思維——流程1:Discover 發(fā)現(xiàn)
發(fā)現(xiàn)階段是收集的過程,緊密聯(lián)系用戶,收集真實(shí)的需求,收集需要可視化的數(shù)據(jù),從用戶與數(shù)據(jù)中發(fā)現(xiàn)問題。
1. 發(fā)現(xiàn)用戶
用戶是數(shù)據(jù)可視化的受眾,對于大多數(shù)的數(shù)據(jù)可視化大屏(尤其是政企單位),設(shè)計(jì)受眾往往分為各種角色的領(lǐng)導(dǎo)和一線工作人員。因此,如何滿足各種利益相關(guān)者的需求,成為發(fā)現(xiàn)用戶階段需解決的關(guān)鍵問題。遵循以人為本的理念,與利益相關(guān)者相處大量的時間,通過觀察、實(shí)地調(diào)研、用戶訪談等方式,了解用戶日常工作流程、工作場景涉及到的數(shù)據(jù),捕獲利益相關(guān)者的真實(shí)痛點(diǎn)和訴求,為構(gòu)建可視化故事做準(zhǔn)備。
2. 發(fā)現(xiàn)數(shù)據(jù)
數(shù)據(jù)是可視化的對象,數(shù)據(jù)可視化并不是簡單的數(shù)據(jù)圖表的羅列,更是要發(fā)現(xiàn)數(shù)據(jù)所蘊(yùn)含的規(guī)律、態(tài)勢、問題、結(jié)論等。每個領(lǐng)域通常都有自己的詞匯表來描述其數(shù)據(jù)和問題,不同的數(shù)據(jù)狀況與數(shù)據(jù)組合的寓意不同,數(shù)據(jù)背后隱藏的問題也都不盡相同。
數(shù)據(jù)源本身也可能會存在問題,許多設(shè)計(jì)師跳過專業(yè)的分析手段,根據(jù)未經(jīng)驗(yàn)證的數(shù)據(jù)或假設(shè),立即進(jìn)入可視編碼階段,可視化結(jié)果會產(chǎn)生偏差。發(fā)現(xiàn)數(shù)據(jù)的過程還可以驗(yàn)證數(shù)據(jù)是否可信,數(shù)據(jù)里是否存在業(yè)務(wù)概念性、邏輯性的問題。利用數(shù)據(jù)分析與數(shù)據(jù)挖掘的手段,分析數(shù)據(jù),發(fā)現(xiàn)數(shù)據(jù)集的意義與數(shù)據(jù)背后隱藏的問題,驗(yàn)證之前的結(jié)論、假想,通過可視化的方式形象地展示。
3. 發(fā)現(xiàn)問題
洞悉用戶,可以發(fā)現(xiàn)一些用戶關(guān)注的核心問題和解決問題的方式。通過數(shù)據(jù)處理、分析與挖掘,可以驗(yàn)證之前的假設(shè),發(fā)現(xiàn)數(shù)據(jù)集隱藏的特征與問題。將有價(jià)值的問題收集起來,準(zhǔn)備進(jìn)入Define階段。
四、可視化設(shè)計(jì)思維——流程2:Define 定義
定義階段側(cè)重于找準(zhǔn)問題,找準(zhǔn)問題才能正確地構(gòu)建可視化故事。根據(jù)發(fā)現(xiàn)用戶階段得到的用戶關(guān)注的核心問題,結(jié)合發(fā)現(xiàn)數(shù)據(jù)階段得到的數(shù)據(jù)背后隱藏的問題,選擇合適的視角與視圖,構(gòu)建兼顧每個利益相關(guān)者的可視化故事腳本,闡述數(shù)據(jù)可視化故事。
1. 定義問題
發(fā)現(xiàn)用戶階段的問題往往是用戶工作場景中的痛點(diǎn)產(chǎn)生的,發(fā)現(xiàn)數(shù)據(jù)階段的問題往往是數(shù)據(jù)背后隱藏的問題。解決數(shù)據(jù)本身的問題會緩解用戶痛點(diǎn),數(shù)據(jù)分析中發(fā)現(xiàn)性或預(yù)測性的規(guī)律也會給解決用戶問題提供方向。將發(fā)現(xiàn)階段的問題收集起來,歸納分析,最終確定數(shù)據(jù)可視化需要反映或解決的核心問題。
2. 定義視角&視圖
定義了可視化問題,也就意味著確定了探索數(shù)據(jù)的主線,即可視化視角。接下來定義視圖,相當(dāng)于構(gòu)建可視化故事的每個章節(jié)及數(shù)據(jù)可視化的內(nèi)容,通過不同的視圖表現(xiàn)可視化故事的情節(jié),讓數(shù)據(jù)對故事的敘述層層遞進(jìn)。
3. 定義故事
最后,根據(jù)問題、視角、視圖,確定數(shù)據(jù)可視化的全流程(即數(shù)據(jù)展示的順序,數(shù)據(jù)內(nèi)容,闡述的道理或規(guī)律,如何利用規(guī)律獲得啟示與幫助),形成可視化敘事的故事腳本。
五、可視化設(shè)計(jì)思維——流程3:Concept Design 概念設(shè)計(jì)
概念設(shè)計(jì)的過程是一個思維共創(chuàng)的過程,優(yōu)秀的可視化設(shè)計(jì)是創(chuàng)造性的產(chǎn)物。因此,共創(chuàng)的概念設(shè)計(jì)是可視化設(shè)計(jì)思維的核心。通過頭腦風(fēng)暴、卡片分類、Workshop的形式,將不同領(lǐng)域、不同專業(yè)的人聚合起來,發(fā)散思維、集思廣益,共創(chuàng)數(shù)據(jù)可視化解決方案。
1. 共創(chuàng)設(shè)計(jì)風(fēng)格
為了讓可視化產(chǎn)品在眾多競品中脫穎而出,可以從可視化產(chǎn)品功能、用戶、愿景三個維度發(fā)散,通過腦暴窮舉、分類去重、提煉聚類的流程,提煉出設(shè)計(jì)風(fēng)格的關(guān)鍵詞,共創(chuàng)得出可視化設(shè)計(jì)風(fēng)格。
下面以一款數(shù)據(jù)治理產(chǎn)品在業(yè)務(wù)實(shí)踐中應(yīng)用的可視化大屏為例,提煉出的可視化設(shè)計(jì)風(fēng)格的關(guān)鍵詞為:高效、直觀、智能,塑造符合用戶心理預(yù)期和可視化定位的設(shè)計(jì)風(fēng)格。
提煉數(shù)據(jù)&用戶需求,匯聚共創(chuàng)可視化設(shè)計(jì)風(fēng)格
2. 共創(chuàng)解決方案
共創(chuàng)確定了可視化設(shè)計(jì)風(fēng)格后,根據(jù)設(shè)計(jì)關(guān)鍵詞共創(chuàng)可視化設(shè)計(jì)解決方案。在構(gòu)思解決方案時,團(tuán)隊(duì)共同發(fā)散思維,盡可能多的獲得創(chuàng)新想法或解決方案。在此階段,可以將技術(shù)實(shí)現(xiàn)等限制性因素置于一旁,專注于創(chuàng)造合理的、符合設(shè)計(jì)風(fēng)格的解決方案。
通過Workshop的形式探討各種想法,借助便利貼或者粗略的草圖幫助自己快速記錄創(chuàng)意方案,多維度評判和分析解決方案,篩選相關(guān)方案并做調(diào)整與重組,最終共創(chuàng)出最佳可視化解決方案。
?草圖快速記錄創(chuàng)意/多維度評判和分析/調(diào)整與重組方案
六、可視化設(shè)計(jì)思維——流程4:Prototype 原型設(shè)計(jì)
原型設(shè)計(jì)過程是執(zhí)行階段,將此前發(fā)現(xiàn)、定義、概念設(shè)計(jì)階段形成的抽象的概念具象化。原型設(shè)計(jì)是可視化編碼層最重要的一環(huán),如何用最適宜的視覺通道編碼數(shù)據(jù)是原型設(shè)計(jì)需要重點(diǎn)關(guān)注的問題。原型設(shè)計(jì)的輸出直接面向設(shè)計(jì)受眾,可視化編碼階段需要考慮如何更好地提升用戶與數(shù)據(jù)可視化之間的互動體驗(yàn)。從人的感官入手,立足于眼見,耳聞,心感三個層次開展原型設(shè)計(jì),讓數(shù)據(jù)可視化富有感官沖擊力。
1. 眼見:視覺是獲取信息最重要的通道
(1)信息展示與交互
信息展示與交互方面的設(shè)計(jì)需要做如下操作:
(a)根據(jù)不同可視化視圖所需要傳達(dá)的信息主次關(guān)系,確定可視化設(shè)計(jì)布局和信息密度;
(b)根據(jù)數(shù)據(jù)的展示目的,確定合適的可視化圖表和視覺通道;
(c)根據(jù)設(shè)計(jì)受眾的心智模型,選擇合適的可視化隱喻,降低認(rèn)知門檻。
(d)根據(jù)信息主次與可視化故事的敘述,選用合適的人機(jī)互動方式。
(2)精致的視覺編碼
針對概念設(shè)計(jì)階段共創(chuàng)的設(shè)計(jì)風(fēng)格,編碼視覺信息,包括布局、元素的大小、樣式、色彩等。在此基礎(chǔ)上,合理增加微交互動效,使可視化信息更加吸引眼球。
2. 耳聞:聽覺作為視覺獲取信息通道的補(bǔ)充
在數(shù)據(jù)可視化設(shè)計(jì)中,增加聲音元素作為串聯(lián)可視化故事的機(jī)制,可以降低觀賞者的認(rèn)知門檻。交互過程中符合可視化故事主題的聲音反饋,對調(diào)動觀眾情緒起重要的輔助作用。
3. 心感:感知與認(rèn)知相互作用
在感知層面,眼見與耳聞層面的設(shè)計(jì)讓觀賞者獲取可視化信息。通過數(shù)據(jù)可視化講故事的能力來調(diào)動觀賞者的情緒,通過可視化隱喻、精致的視覺編碼與微動效,讓觀賞者產(chǎn)生情感上的共鳴。在認(rèn)知層面,可視化故事的內(nèi)涵需要緊扣觀賞者的關(guān)注點(diǎn),并能夠引導(dǎo)用戶獲得因果分析、規(guī)律總結(jié)等方面的知識。
七、可視化設(shè)計(jì)思維——流程5:Evaluate 評估優(yōu)化
評估過程是測試&優(yōu)化階段,綜合評估方案的合理性,與利益相關(guān)者(Stakeholder)接觸收集反饋,根據(jù)評估結(jié)果不斷優(yōu)化可視化解決方案。
1. Review-綜合評估
需求&故事:設(shè)計(jì)方案能否反映或者解決Define階段定義的核心問題,達(dá)到用數(shù)據(jù)敘述可視化故事的效果;可視化故事是否流暢、有內(nèi)涵,使觀賞者獲得啟發(fā)性知識。
數(shù)據(jù):數(shù)據(jù)可視化后是否可以反應(yīng)某些狀態(tài),解決問題的方法與對策。雖然提倡真實(shí)地反應(yīng)數(shù)據(jù),但是在必要時,也可以使用一些“數(shù)據(jù)說謊”的形式增強(qiáng)可視化故事的說服力。
2. 可行性測試-利益相關(guān)者評估
演示者:設(shè)計(jì)師當(dāng)講解員,給設(shè)計(jì)受眾講解可視化解決方案。演示者能否簡潔、生動地描述可視化故事是衡量方案好壞的指標(biāo),期間觀察設(shè)計(jì)受眾的狀態(tài)并記錄相關(guān)問題。
觀賞者:簡單講解后,觀察設(shè)計(jì)受眾(觀賞者)能否立馬投入其中,指點(diǎn)江山。讓觀賞者自己看可視化解決方案,能否立馬進(jìn)入可視化故事,產(chǎn)生情感共鳴,期間觀察并記錄觀賞者的疑惑與建議。
3. 方案優(yōu)化
評估過程可以貫穿設(shè)計(jì)、開發(fā)、測試整個流程,形式不限。在原型設(shè)計(jì)階段開始與利益相關(guān)者溝通,可以極大地節(jié)約開發(fā)成本。每個階段性評估后,根據(jù)評估結(jié)果不斷優(yōu)化可視化解決方案。
PS:此專題相關(guān)文章僅是筆者作為一名設(shè)計(jì)師的見解,如有不足之處還望前輩/大神指正,筆者會繼續(xù)修正與完善后續(xù)內(nèi)容,充實(shí)個人知識體系。
相關(guān)閱讀
數(shù)據(jù)可視化設(shè)計(jì)(1)情感化設(shè)計(jì)指導(dǎo)可視化設(shè)計(jì)理念
數(shù)據(jù)可視化設(shè)計(jì)(2): 可視化設(shè)計(jì)原則
作者:Nemo,一名在一線奮戰(zhàn)4年的交互設(shè)計(jì)師,執(zhí)著于搭建個人知識體系
本文由 @Nemo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
- 目前還沒評論,等你發(fā)揮!