編輯導(dǎo)語_相信大家對數(shù)據(jù)可視化這個概念已經(jīng)很熟悉了_數(shù)據(jù)可視化能夠給人帶來直觀的感受_并且有利于我們更有效率地完成任務(wù)_同時起到交流與分享的作用。那么對于大屏數(shù)據(jù)可視化的具體流程你了解嗎？具體應(yīng)該怎么做？作者總結(jié)了一套流程_供你參考。
一、什么是大屏數(shù)據(jù)可視化？
談?wù)撈饠?shù)據(jù)可視化設(shè)計_許多人會產(chǎn)生一個疑問_什么是數(shù)據(jù)可視化？我們由此問題著手_來談?wù)撓聰?shù)據(jù)可視化設(shè)計。
經(jīng)研究表明_人類大腦對視覺信息的處理優(yōu)于對文本的處理。因此_數(shù)據(jù)可視化是使用圖表、圖形和設(shè)計元素把數(shù)據(jù)進(jìn)行可視化_把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段。
數(shù)據(jù)可視化可以使人們更有效率的完成某些任務(wù)_我們可以理解為三點(diǎn)優(yōu)勢_
美觀展示:_用數(shù)據(jù)展示企業(yè)特色_大會展臺_媒體現(xiàn)場展示等數(shù)據(jù)驅(qū)動_實(shí)時查看業(yè)務(wù)概況、監(jiān)控預(yù)警、驅(qū)動內(nèi)部快速響應(yīng)發(fā)掘價值_可視化數(shù)據(jù)呈現(xiàn)后_帶來的視覺感受會幫助人發(fā)現(xiàn)新的因素數(shù)據(jù)可視化除了“可視”_還有可交流、可互動的特點(diǎn)。
設(shè)計帶來的不僅是瞬息處理海量數(shù)據(jù)搭配酷炫的可視化樣式所引起的視覺震撼_更應(yīng)注重為業(yè)務(wù)需求服務(wù)_設(shè)計出符合不同行業(yè)需求的個性定制可視化_利于企業(yè)做出正確的商業(yè)決策_(dá)以有根據(jù)的數(shù)據(jù)呈現(xiàn)而幫助企業(yè)進(jìn)行更科學(xué)的判斷而避免決策的失誤。
二、設(shè)計流程介紹
1._從業(yè)務(wù)需求分定優(yōu)先級
關(guān)鍵指標(biāo)是一些概括性詞語_是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。通過規(guī)定主_次_輔_三個指標(biāo)的關(guān)鍵詞來概念性的清晰大屏的主要展示內(nèi)容_例如我們做的一個照明的監(jiān)測項目_我們可以歸類成這三種_
主_主要指標(biāo)位于屏幕中央_為地圖展現(xiàn)照明區(qū)域使用數(shù)據(jù)。次_次要指標(biāo)位于屏幕兩側(cè)以圖表的形式展現(xiàn)。輔_主要指標(biāo)的補(bǔ)充信息鼠標(biāo)點(diǎn)擊或懸停展示以及交互動效展示。這樣就可以方便在腦海中確定大屏的整體構(gòu)架_以便于我們接下來的細(xì)化。
2._通過指標(biāo)分析維度確立可視化圖表類型
同一個指標(biāo)的數(shù)據(jù)_從不同維度分析就有不同結(jié)果。如果分析的維度沒有找準(zhǔn)或定義的比較混亂_就會使可視化圖表無法清晰的看清楚含義_使人困惑。這里我們引用Stephen_Few_的文章_《Visual_Business_Intelligence》的四項維度-比較_聯(lián)系_分布_構(gòu)成_來分析數(shù)據(jù)的邏輯性。
在思考四項維度的時候我們要思考幾個問題_
- 數(shù)據(jù)之間的相關(guān)性？指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律？數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面？指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何？
以上的示例圖表的樣式比較傳統(tǒng)_但是思考問題的邏輯性是相通的_值得借鑒使用。
3._根據(jù)大屏尺寸_規(guī)劃頁面布局_確立交互稿
確立圖表類型后_下一步要進(jìn)入到布局具體的信息位置_確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。客戶的大屏尺寸不用會影響到整體的布局和效果_設(shè)計的時候也要考慮下是否有拼接大屏接縫的問題_盡量以拼接屏尺寸來確立柵格化布局。
尺寸確立后_接下來要對設(shè)計稿進(jìn)行布局和頁面的劃分。
布局這里我們就要參考第一項的業(yè)務(wù)需求優(yōu)先級來布局畫面分割面積。核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級依次在核心指標(biāo)周圍展開。
一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近_把圖表類型相近的指標(biāo)放一起_這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。視覺上要盡量規(guī)避文字羅列或圖表羅列_注意方圓圖表的面積比例問題等_也是布局期間需要注意的事項。
4._確定設(shè)計風(fēng)格與設(shè)計進(jìn)行
設(shè)計風(fēng)格的選擇切勿追求效果炫酷而不符合業(yè)務(wù)需求_選擇最合適的而不是選擇最絢爛的尤為重要。因?yàn)樵O(shè)計中涉及的范圍比較廣_下面展示一些不同行業(yè)對應(yīng)的不同構(gòu)圖布局與元素的應(yīng)用案例_
發(fā)動機(jī)的可視化以突出發(fā)電機(jī)產(chǎn)品為主_周圍_UI_以大圓角形式設(shè)計_使視覺由四周向中間包圍_集中于中心。
挖掘機(jī)的可視化采用了大地色進(jìn)行設(shè)計_采用了色彩共情的原理_結(jié)合簡潔的線性UI_使大屏在接地氣的同時不失高端雅致的效果。
醫(yī)院的可視化設(shè)計以冷白色為主_突出醫(yī)院給人的干凈_嚴(yán)肅的感覺_仿佛能聞到消毒水的氣味。以模型展示為主_按鈕樣式也采用了以面為主的設(shè)計配合大面積色塊分布為主的模型設(shè)計。
地鐵站的可視化以寫實(shí)風(fēng)格為主_再現(xiàn)了真實(shí)地鐵站的樣貌_以及身臨其境的動畫交互體驗(yàn)。
5._溝通與修改
在做設(shè)計中一個很重要的點(diǎn)就是溝通_無論是設(shè)計師內(nèi)部的溝通還是設(shè)計師與客戶的溝通都會對大屏最后的修改效果產(chǎn)生一個很大的影響。
設(shè)計師在內(nèi)部溝通時要從專業(yè)角度吸取知識與建議_并從客戶那里吸取業(yè)務(wù)需求與客戶心理訴求。這時對于意見的篩選取舍就很重要_設(shè)計師可能會被復(fù)雜的審核流程和不同外行人士的不同喜好而干擾_這時設(shè)計師需要綜合意見_與項目經(jīng)理一起把控設(shè)計的走向_在和客戶溝通中彼此商討相互學(xué)習(xí)與意見的妥協(xié)從而一步步優(yōu)化設(shè)計方案。
當(dāng)然設(shè)計沒有標(biāo)準(zhǔn)答案_也沒有完美的面面俱到的設(shè)計方案_最理想的標(biāo)準(zhǔn)就是達(dá)到客戶的理想訴求但對于自己做的設(shè)計一定要過了自己的這一關(guān)_能協(xié)調(diào)好自己的審美與客戶的需求兩贏的狀態(tài)才是一個好的設(shè)計。
同時在設(shè)計時因?yàn)槭褂玫脑O(shè)備不同_大屏有她自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境_這里的很多問題只有設(shè)計稿投到大屏上才能夠被發(fā)現(xiàn)_所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要_有時候需要開發(fā)出demo_反復(fù)測試多次來修改協(xié)調(diào)最終上屏效果。
在測試時從設(shè)計上可以重點(diǎn)注重以下幾點(diǎn)_
- 之前確立的布局在放入設(shè)計內(nèi)容后是否依然合適確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實(shí)現(xiàn)方面是否存在問題大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象
6._開發(fā)與測試
將設(shè)計稿交與前端進(jìn)行制作_與程序溝通交互切換效果_大屏動效等_一起實(shí)現(xiàn)把控大屏的最終效果。
三、總結(jié)
希望我們設(shè)計的每一張可視化大屏都可以回歸到行業(yè)里_體現(xiàn)出設(shè)計師所理解的數(shù)據(jù)做出的設(shè)計后為社會生活帶來的真實(shí)的價值。就算她可能不夠炫酷_不夠時尚_但是她的每一項數(shù)據(jù)的表現(xiàn)_每一個元素的繪制_都是經(jīng)過細(xì)節(jié)的設(shè)計雕琢_細(xì)節(jié)決定成敗。
本文由_@汪仔4285_原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可_禁止轉(zhuǎn)載。
題圖來自_Pexels_基于CC0協(xié)議
