首頁

數(shù)據(jù)可視化在移動(dòng)端的應(yīng)用

seo達(dá)人

1.應(yīng)用場景

數(shù)據(jù)可視化在移動(dòng)端的主要體現(xiàn)是“數(shù)據(jù)圖表”,我們最常用的數(shù)據(jù)設(shè)計(jì)組件就是:柱狀圖、折線圖、環(huán)形圖等,它們簡單易懂,容易被用戶接受。它們常常出現(xiàn)在與我們生活息息相關(guān)的產(chǎn)品當(dāng)中,例如健身 app 中使用圖表記錄我們體重的變化;效率工具型的 app 記錄分析你在某一件事情的花費(fèi)的時(shí)間;金融理財(cái)展示股市中某一支股票的價(jià)格走勢等等。

 

2.數(shù)據(jù)可視化的特點(diǎn)

數(shù)據(jù)可視化屬于一種理性思維,產(chǎn)品通過圖表可以向用戶清晰的反應(yīng)用戶在每一個(gè)項(xiàng)目中所花費(fèi)的時(shí)間和精力,用戶可以通過數(shù)據(jù)可視化的圖表形式快速了解到其中的信息?,F(xiàn)在iOS 和 Android 平臺(tái)暫時(shí)沒有推出在數(shù)據(jù)可視化的設(shè)計(jì)規(guī)范,但是大家只要按照平臺(tái)的基本規(guī)范設(shè)計(jì),相信都能設(shè)計(jì)出美觀、大方數(shù)據(jù)圖表。如果大家對(duì)數(shù)據(jù)可視化有興趣,這里向大家推薦 ANtv(https://antv.alipay.com/zh-cn/index.html)螞蟻數(shù)據(jù)可視化團(tuán)隊(duì),ANtv 是國內(nèi)在數(shù)據(jù)可視化發(fā)展最完善的團(tuán)隊(duì)之一。 

 

3.使用原則

在數(shù)據(jù)可視化設(shè)計(jì)的時(shí)候我們首先要注意的是盡量避免使用“復(fù)雜”的數(shù)據(jù)表現(xiàn)形式,針對(duì)于普通用戶我們要始終堅(jiān)持 – 簡單易懂的原則。其次在選擇數(shù)據(jù)表現(xiàn)形式的時(shí)候一定要考慮到是否適用于目標(biāo)數(shù)據(jù),如果不能清晰的向用戶清晰的傳遞出數(shù)據(jù)背后的信息,那么建議你重新進(jìn)行分析,更換數(shù)據(jù)表現(xiàn)形式。在我們經(jīng)常使用的數(shù)據(jù)圖表中,柱狀圖擅長數(shù)值比較;折線圖擅長做數(shù)據(jù)趨勢展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。這里我們需要注意的是折線適用于具有連貫關(guān)系數(shù)據(jù)緯度進(jìn)行比較,而柱狀圖則不需要。我們以不同蔬菜的價(jià)格比較和單個(gè)蔬菜價(jià)格趨勢為例,例如當(dāng)我們?cè)诒容^各種蔬菜的價(jià)格的時(shí)候,由于各品類蔬菜沒有任何連貫性的邏輯關(guān)系,所以折線圖不合適,而柱狀圖則能清晰的表達(dá)蔬菜之間價(jià)格比對(duì)。
蔬菜品種之間沒有任何連續(xù)性,所以不適合用折線圖來表示;而單個(gè)蔬菜的價(jià)格走勢是通過具有連續(xù)性的“時(shí)間”緯度進(jìn)行比較的,所以趨勢圖選擇折線圖更加合適。
餅圖不適用于分類過多的數(shù)據(jù)展示,隨著數(shù)據(jù)種類的增加切片的數(shù)量也隨之增加,每個(gè)切片的大小過于相似,無法達(dá)到數(shù)據(jù)對(duì)比的目的。
相對(duì)PC,手機(jī)屏幕展示的區(qū)域有限,不適宜展現(xiàn)數(shù)據(jù)緯度過多的數(shù)據(jù)。假設(shè)我們遇到數(shù)據(jù)緯度眾多的數(shù)據(jù),我們可以通過橫軸交互來增加數(shù)據(jù)展示區(qū)域。
我們還可以對(duì)數(shù)據(jù)進(jìn)行梳理清洗,通過增加交互步驟減少用戶的記憶負(fù)擔(dān),分段查看數(shù)據(jù)。例如燈塔專業(yè)版中的行業(yè)數(shù)據(jù)將電影行業(yè)中涵蓋的信息分成票房、影片數(shù)、影院數(shù)、銀幕數(shù)等維度進(jìn)行分析。

 

4.場景分析

柱狀圖

柱狀圖擅長對(duì)不同類型的數(shù)據(jù)進(jìn)行數(shù)值比較,柱狀圖之間的條目相對(duì)獨(dú)立,數(shù)據(jù)之間不需要有邏輯的關(guān)聯(lián)性。我們常用的柱狀圖分為橫向柱狀圖和縱向柱狀圖,如下圖:
兩者的區(qū)別在于縱向柱狀圖帶有一定的邏輯關(guān)系,可用于 TOP 排名,數(shù)值越大的位置越靠上。例如 iOS 系統(tǒng)中會(huì)記錄你最常使用的 App 形成縱向柱狀圖,并按照使用 App 的時(shí)長大小進(jìn)行一次排列。

 

橫向柱狀圖

橫向柱狀圖只需在以 X 軸為基線通過對(duì)比柱形圖的長短就可以進(jìn)行數(shù)據(jù)比較,因其簡潔、直白的設(shè)計(jì)形式深受用戶們的喜愛,應(yīng)用領(lǐng)域極廣,是我們最常見到的圖表形式之一。例如在支付寶中會(huì)顯示用戶每月的消費(fèi),并能通過橫軸交互查看更多數(shù)據(jù)。

 

縱向柱狀圖

縱向柱狀圖以 Y 軸為基線通過對(duì)比柱形圖的長短就可以進(jìn)行數(shù)據(jù)比較,縱向柱狀圖區(qū)別于橫向柱狀圖的地方在于:在具有一定關(guān)聯(lián)性的數(shù)據(jù)種類進(jìn)行比較的時(shí)候,可以通過數(shù)值的大小依次排列顯示明確數(shù)據(jù)等級(jí)關(guān)系。例如網(wǎng)易有錢中會(huì)按照你消費(fèi)的品類數(shù)值的大小進(jìn)行排布,讓用戶明確知道自己在那一方面消費(fèi)最多,并且依靠 Y 軸交互我們可以向下滑動(dòng)查看更多數(shù)據(jù)信息。

 

折線圖

折線圖通過線鏈接橫向相鄰數(shù)據(jù)的數(shù)據(jù)表現(xiàn)形式,通常相鄰數(shù)據(jù)之間都有一定的邏輯關(guān)系,一般以時(shí)間屬性為主,表達(dá)一定周期之內(nèi)的趨勢走向。
折線圖在金融領(lǐng)域的產(chǎn)品應(yīng)用極其廣泛,“折線圖+漲幅數(shù)據(jù)”無疑是吸引用戶理財(cái)?shù)睦鳌_@時(shí)折線圖不單單代表數(shù)據(jù),在用戶心中已經(jīng)成為一種標(biāo)志。
當(dāng)然折線圖最重要還是記錄段時(shí)間之內(nèi)的趨勢變化,例如微信運(yùn)動(dòng)中記錄用戶每天的運(yùn)動(dòng)量,用戶可以根據(jù)折線圖反饋的信息來調(diào)整自己的運(yùn)動(dòng)計(jì)劃。

 

餅狀圖

餅狀圖是通過將一個(gè)圓餅按照分類的占比劃分成多個(gè)區(qū)塊,整個(gè)圓餅代表數(shù)據(jù)的總量,每個(gè)區(qū)塊(圓弧)表示該分類占總體的比例大小,所有區(qū)塊(圓?。┑募雍偷扔?100%。
現(xiàn)在 App 較少用到餅狀圖而更多的采用環(huán)形圖,因?yàn)轱灎顖D和環(huán)形圖兩者有異曲同工之妙,都是應(yīng)用于表示不同分類的占比情況,通過弧度(角度)大小來對(duì)比各種分類。但相對(duì)于餅狀圖,環(huán)形圖的空間利用率更高。

 

環(huán)形圖

由兩個(gè)及兩個(gè)以上大小不一的餅圖疊在一起,挖去中間的部分所構(gòu)成的圖形。通過弧長來比較各類數(shù)據(jù)的占比大小。
在燈塔專業(yè)版中通過環(huán)形圖能夠準(zhǔn)確的表達(dá)出各個(gè)電影所占總場次的比例。

 

5.畫重點(diǎn)

1.在數(shù)據(jù)可視化的設(shè)計(jì)當(dāng)中我們要是始終堅(jiān)持“簡單易懂”的原則,選擇最合適的數(shù)據(jù)表達(dá)形式
2.柱狀圖擅長數(shù)值比較;折線圖擅長做數(shù)據(jù)趨勢展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。
3.在有限的移動(dòng)端的顯示區(qū)域,我們可以借助于 XY 軸交互手段和對(duì)數(shù)據(jù)進(jìn)行梳理增加交互步驟分段查看更多數(shù)據(jù)。 

 


作者:姜正

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化在移動(dòng)端的應(yīng)用

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司





數(shù)據(jù)可視化大屏設(shè)計(jì)經(jīng)驗(yàn)分享【高級(jí)篇】

seo達(dá)人

案例解析

下圖是我們優(yōu)秀的技術(shù)人員利用模版直接布局出來的頁面,也可以理解為需求頁面,接下里就需要我根據(jù)頁面的內(nèi)容重新定義風(fēng)格設(shè)計(jì)。

原圖

 

當(dāng)我看到這個(gè)頁面,首先要知道他是干什么的?功能是什么?是純數(shù)據(jù)展示還是監(jiān)測預(yù)警?通過這些了解基本就能知道有沒有交互行為,有交互和沒交互在數(shù)據(jù)可視化的設(shè)計(jì)思路上會(huì)有很多不同,還有功能不一樣設(shè)計(jì)方向也會(huì)不一樣。

其次要分析出主次數(shù)據(jù)總分?jǐn)?shù)據(jù),還要剖析目前圖表運(yùn)用的合理性和大屏的設(shè)計(jì)比例尺寸等等,最終可以通過分析對(duì)頁面有個(gè)合理的布局展示。

通過分析對(duì)頁面重新布局,如下圖:

重新布局圖

 

最終設(shè)計(jì)稿

 

數(shù)據(jù)可視化頁面設(shè)計(jì),如果頁面中有一個(gè)非常搶眼的主視覺圖,那么一般對(duì)其他的元素不會(huì)過度的設(shè)計(jì),如果都是搶視覺的元素整個(gè)頁面太“花枝招展”了。

上圖左右兩邊的圖表只是簡單的呈現(xiàn)出來,這樣整體視覺上更有呼吸感,有張力,如果每個(gè)圖表都加上邊框,頁面就會(huì)顯得局促,常見的3D地理城市,主視覺為3D模型,輔助元素一般都不過度修飾。

 

1、關(guān)于板式風(fēng)格元素

主題風(fēng)格構(gòu)思階段:

既然是“首都國際機(jī)場”那么用3D地球來展示最佳不過了,3D地球無疑是一個(gè)重磅視覺元素,飛機(jī)圍繞地球往返飛行形成光線,這樣看上去頁面會(huì)有很多線條。

設(shè)計(jì)講究“你中有我,我中有你”所以這個(gè)頁面可以設(shè)定為以“線條”主題,盡可能的用纖細(xì)的效果設(shè)計(jì)其他元素,例如頁面中纖細(xì)的條形圖、柱狀圖、環(huán)形圖這樣的設(shè)計(jì)就能體現(xiàn)出元素間的關(guān)聯(lián)性,整體能達(dá)到一種視覺平衡和諧

在思考用3D地球來設(shè)計(jì)時(shí),我是提前跟開發(fā)溝通過,知道可以落地實(shí)現(xiàn),然后才著手開始設(shè)計(jì),所以工作中有拿不準(zhǔn)的設(shè)計(jì),要即時(shí)跟開發(fā)溝通。

 

元素設(shè)計(jì)階段:

標(biāo)題設(shè)計(jì)

 

左邊的標(biāo)題中規(guī)中矩看起來比較死板,不太符合這個(gè)產(chǎn)品頁面整體調(diào)性,右邊的標(biāo)題用了斜體和輕微的漸變色,能夠渲染頁面飛機(jī)動(dòng)感的氛圍,所以右邊的設(shè)計(jì)形式更合適。

但不是說所有產(chǎn)品標(biāo)題都應(yīng)該用斜體漸變色,要根據(jù)產(chǎn)品而定,例如政府類產(chǎn)品更多是要體現(xiàn)莊嚴(yán)的氛圍,中規(guī)中矩的形式就更為合適。

天氣、空氣質(zhì)量、時(shí)間元素

 

天氣溫度、空氣質(zhì)量、時(shí)間是一定要加上的,原因是飛機(jī)在戶外飛行肯定會(huì)關(guān)注天氣,而對(duì)于北京機(jī)場來說關(guān)注空氣質(zhì)量也尤為重要,再說說時(shí)間,既然是機(jī)場實(shí)時(shí)數(shù)據(jù),那么當(dāng)下的時(shí)間對(duì)比實(shí)時(shí)數(shù)據(jù)就非常有意義,所以時(shí)間要體現(xiàn)出來。

 

2、關(guān)于圖表設(shè)計(jì)

圖表一改版:

總航班量圖表截圖

 

上面圖表雖然可以表達(dá)清楚全部數(shù)據(jù),但圖表包含航班總數(shù)量,這樣的展現(xiàn)方式視覺上表現(xiàn)弱,同時(shí)不能夠直觀表達(dá)總量里面包含延誤航班和取消航班。

改版后

 

改版后從“出港量”“進(jìn)港量”兩個(gè)維度出發(fā),合并同類項(xiàng):

出港量包含:出港延誤航班、出港取消航班

進(jìn)港量包含:進(jìn)港延誤航班、進(jìn)港取消航班

用大字號(hào)重點(diǎn)突出進(jìn)出總航班量,然后在下面分別羅列延誤航班數(shù)量、取消航班數(shù)量,這樣數(shù)據(jù)之間的關(guān)系表達(dá)就很清晰,一看就明白,同時(shí)兩個(gè)維度各個(gè)數(shù)據(jù)也可以互相比較。

 

用色說明:

延誤航班用黃色,黃色情緒映射為等待,延誤即等待;

取消航班用紅色,紅色情緒映射為停止,取消即停止。

 

圖表二改版:

問題圖表

 

上圖環(huán)形圖其實(shí)用的并不恰當(dāng),環(huán)形圖更適合總量的各個(gè)百分比呈現(xiàn),標(biāo)題“今日前五延誤進(jìn)港機(jī)場”其實(shí)想表現(xiàn)前五名城市的延誤進(jìn)港排名,排名用條形圖最為直觀。

但從頁面的整體看一下,已經(jīng)有兩處用到了條形圖,柱狀圖,如果這里還是條形圖,那么頁面看起來會(huì)很單調(diào),圖表也沒有表現(xiàn)的多樣性,所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。

改版后圖表

 

修改后依舊采用環(huán)形圖,把排名由高到低用注釋的形式呈現(xiàn),倆者都能兼顧,這樣的設(shè)計(jì)思考方式就是設(shè)計(jì)思維,設(shè)計(jì)師既要考慮視覺,也要考慮功能目的,善于在兩者之間找到平衡。

 

3、標(biāo)題和文案優(yōu)化

第一處修改:

問題標(biāo)題

上圖左右兩個(gè)標(biāo)題唯一的區(qū)別就是一個(gè)是“進(jìn)”字,一個(gè)是“出”字,這兩個(gè)字如果不仔細(xì)看很難一眼出左右的區(qū)別,所以我們?cè)谠O(shè)計(jì)標(biāo)題的時(shí)候,一定要提煉關(guān)鍵詞,把可以作為明顯區(qū)別的關(guān)鍵詞置前。

調(diào)整后標(biāo)題

 

調(diào)整后的標(biāo)題把重點(diǎn)區(qū)別的關(guān)鍵詞置前,觀者能夠快速識(shí)別。

 

第二處修改:

問題標(biāo)題和數(shù)據(jù)格式問題

 

此圖表數(shù)據(jù)體現(xiàn)是延誤航班數(shù)據(jù),所以標(biāo)題的關(guān)鍵詞應(yīng)該是“延誤”,延誤放在標(biāo)題中間沒能起到快速識(shí)別數(shù)據(jù)類型作用。

再者就是圖表上的數(shù)據(jù)格式錯(cuò)誤,航班數(shù)量不該有小數(shù)點(diǎn),因?yàn)楹桨鄶?shù)都是整數(shù)呈現(xiàn)。

調(diào)整后

 

調(diào)整后關(guān)鍵詞置前“延誤進(jìn)出港機(jī)場-今日前五”用橫杠隔開“今日前五”能夠過度信息,更直觀。

 

4、3D效果技法

3D地球效果:

原圖上進(jìn)出港途中詳情是上下分開的:

開始想用進(jìn)出港切換的方式呈現(xiàn),就是一個(gè)大地球,一個(gè)小的縮略圖,可以點(diǎn)擊切換,也可以自動(dòng)輪播大小切。

初稿

 

后考慮到此產(chǎn)品是沒有任何交互操作的,這里設(shè)計(jì)交互行為是不合理的,所以要換一種形式。

定稿(數(shù)據(jù)15分鐘刷新一次)

 

調(diào)整后讓兩個(gè)數(shù)據(jù)都呈現(xiàn)在地球上,用兩種不同光線顏色表示進(jìn)出港班次。

青色:北京擴(kuò)散的方向代表出港

藍(lán)色:聚焦北京的方向代表進(jìn)港

如果細(xì)心查看頁面會(huì)發(fā)現(xiàn),所有關(guān)于進(jìn)港的都是青色,例如進(jìn)港總航班量、進(jìn)港人數(shù)、即將進(jìn)港航班;同樣關(guān)于出港的都是藍(lán)色,目的就是要建立觀者顏色對(duì)數(shù)據(jù)類型的認(rèn)知。

 

3D地球技法教程:

3D地球動(dòng)畫效果,純用C4D軟件完成:

  • 1、地球用一個(gè)世界地圖貼圖
  • 2、地球的凹凸效果用了材質(zhì)的置換和凹凸
  • 3、小飛機(jī)動(dòng)畫用的是對(duì)齊曲線動(dòng)畫
  • 4、國家之間樣條生成用的是插件 LON—LAT Connection
  • 5、光線粒子用的是插件 X-Particles

下面我們一一介紹:

首先找一張世界地圖,這里稱為“球皮”,ps調(diào)整色調(diào),滿意為止。

調(diào)色球皮

 

把球皮放入材質(zhì),表面的凹凸效果用置換和凹凸。

材質(zhì)設(shè)置

 

小飛機(jī)動(dòng)畫用的是對(duì)齊曲線動(dòng)畫,打關(guān)鍵幀轉(zhuǎn)一圈,記得勾選切線,不然飛機(jī)會(huì)橫的飛。

飛機(jī)繞地球動(dòng)畫

 

國家之間樣條生成用的是插件 LON—LAT Connection,這一步很關(guān)鍵,插件使用很簡單就是選擇:洲-國家-城市~洲-國家-城市,tab切換有設(shè)置可以設(shè)置樣條曲線的高度弧度等。

城市鏈接樣條設(shè)置

 

最后就是用插件 X-Particles 渲染光線粒子效果,光線效果利用毛發(fā)渲染,第一條光線走完凍結(jié),后面小光線依次循環(huán)發(fā)射。
光線渲染

 

上面教程說的很籠統(tǒng),有基礎(chǔ)的同學(xué)肯定會(huì)明白,接下來我們來看如何開發(fā)落地。

 

3D地球效果開發(fā)落地:

首先我們要知道一個(gè)網(wǎng)站Echartsj 里面有個(gè)3D路徑圖,看下圖:

Echartsj網(wǎng)站截圖

 

上圖兩個(gè)地球路徑圖組件,都可以實(shí)現(xiàn)我們的效果,只需要我們把色調(diào)調(diào)整好的“球皮”給到開發(fā)人員,替換組件里面的圖片即可,組件生成的地球原理是一樣的,也是由一張圖包裹成球,地球數(shù)據(jù)光線顏色可更改,把色值給開發(fā)人員即可。

 

案例總結(jié):

1、數(shù)據(jù)可視化設(shè)計(jì),首先了解功能,分析數(shù)據(jù)之間的關(guān)系

2、構(gòu)思主題,圍繞主題設(shè)計(jì)其他元素,特殊效果跟開發(fā)溝通

3、分析數(shù)據(jù),合理選用圖表,對(duì)圖表能靈活運(yùn)用

4、不要忽視文案的設(shè)計(jì),提取關(guān)鍵詞

5、加強(qiáng)技法,了解數(shù)據(jù)可視化設(shè)計(jì)網(wǎng)站

 

最后

數(shù)據(jù)可視化大屏設(shè)計(jì),對(duì)視覺表現(xiàn)、數(shù)據(jù)的合理呈現(xiàn)有一定的要求,這兩點(diǎn)都是由設(shè)計(jì)師為主導(dǎo),所以設(shè)計(jì)前根據(jù)產(chǎn)品定義風(fēng)格,了解數(shù)據(jù)之間的關(guān)系非常重要,切記不要太依賴原型圖。


作者:吳星辰

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化大屏設(shè)計(jì)經(jīng)驗(yàn)分享【高級(jí)篇】

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



后臺(tái)數(shù)據(jù)可視化界面設(shè)計(jì)的10條經(jīng)驗(yàn)法則

seo達(dá)人

寫在前面:本文的英文原標(biāo)題是“10 Rules of Dashboard Design”,其中Dashboard如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設(shè)計(jì),相信大家會(huì)經(jīng)常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學(xué)習(xí)吧!

 

為什么數(shù)據(jù)可視化設(shè)計(jì)非常重要?

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。
一個(gè)優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個(gè)關(guān)鍵要素:
清晰: 一個(gè)好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當(dāng)用戶看到界面內(nèi)容時(shí),應(yīng)該能在5秒內(nèi)了解到它的用途,而不是花費(fèi)至少幾分鐘才能理解各個(gè)數(shù)據(jù)的含義。
有意義: 一個(gè)有用的數(shù)據(jù)可視化界面上的每一條信息都應(yīng)該是有意義的。這些有意義的信息能準(zhǔn)確傳達(dá)設(shè)計(jì)師想要表達(dá)的內(nèi)容。每一條數(shù)據(jù)的背后,用戶應(yīng)該都是可以讀懂的。
一致性:優(yōu)秀的數(shù)據(jù)可視化界面,會(huì)有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局,結(jié)構(gòu)和內(nèi)容。
簡單: 復(fù)雜的界面違背了數(shù)據(jù)可視化設(shè)計(jì)的初衷。如果一個(gè)信息呈現(xiàn)不夠簡單直接,那么肯定是在設(shè)計(jì)上出現(xiàn)了問題。

 

如何設(shè)計(jì)一個(gè)數(shù)據(jù)可視化界面?

數(shù)據(jù)可視化界面設(shè)計(jì)最重要的步驟是需要了解目標(biāo)用戶是誰,能為他們提供什么價(jià)值。了解目標(biāo)受眾的知識(shí)背景和理解水平能幫助你做出對(duì)他們有價(jià)值的設(shè)計(jì)。
在了解目標(biāo)用戶時(shí),有必要了解受眾感興趣的數(shù)據(jù)類型。
“專注于用戶的需求,更容易產(chǎn)生他們喜歡使用的結(jié)果?!?/section>
目標(biāo)用戶級(jí)別可能會(huì)在一級(jí)和另一級(jí)之間變化,這是一個(gè)挑戰(zhàn)性的點(diǎn)。與其他任何設(shè)計(jì)項(xiàng)目一樣,可以細(xì)分受眾并將信息相應(yīng)地分為基本內(nèi)容和高級(jí)內(nèi)容。
在界面中表示一組信息有多種方法,選擇正確的數(shù)據(jù)指標(biāo)是設(shè)計(jì)數(shù)據(jù)可視化的另一個(gè)關(guān)鍵元素。這也與目標(biāo)用戶的偏好有關(guān),即他們希望看到什么樣的信息。
“根據(jù)需要設(shè)計(jì)數(shù)據(jù)可視化界面,為不同的業(yè)務(wù)使用不同類型的展示方式。”
下面是為目標(biāo)用戶設(shè)計(jì)數(shù)據(jù)可視化界面時(shí)需要考慮的一些重要規(guī)則。

 

1. 區(qū)分層級(jí)

一個(gè)非常常見的錯(cuò)誤就是設(shè)計(jì)師沒有對(duì)信息區(qū)分層級(jí),所有的內(nèi)容看起來都一樣重要。
可以嘗試使用組件的大小和位置來區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。
  • 通過定義信息層級(jí),讓用戶清楚什么是最重要的
  • 在左上角顯示更重要的信息,沿著對(duì)角線方向,信息的重要程度應(yīng)該依次減弱,右下角的信息重要性最弱
  • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們

 

2.簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解,更簡單的形式來傳達(dá)復(fù)雜信息。
  • 不要放一些大多數(shù)用戶都難以理解的信息
  • 使用更少的列來顯示信息
  • 刪除冗余內(nèi)容來減少混亂

 

3. 一致性

使用一致性布局設(shè)計(jì)的數(shù)據(jù)可視化界面看起來更好。
  • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
  • 把相關(guān)的信息放的更近一些
  • 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

 

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。
  • 把相關(guān)的信息放的更近一些
  • 不要將相關(guān)信息分散在界面上
  • 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

 

5. 對(duì)齊

可視化組件元素需要在視覺上對(duì)齊,并保持視覺平衡。
  • 將可視化組件元素在視覺上進(jìn)行對(duì)齊,可以將界面組織的更好
  • 嘗試將組件元素進(jìn)行網(wǎng)格布局設(shè)計(jì)
  • 不對(duì)齊的界面會(huì)給用戶帶來糟糕的體驗(yàn)

 

6. 留白

留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時(shí)能夠有出喘息的空間。
  • 當(dāng)用戶查看需要的信息時(shí),界面中的留白能夠吸引用戶的目光,提升用戶體驗(yàn)。
  • 減少留白會(huì)使用戶的界面變得混亂
  • 使用留白能對(duì)信息進(jìn)行可視化分組
留白太少簡直就是在鼓勵(lì)你的用戶盡快離開

 

7. 顏色

使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。
  • 仔細(xì)選擇顏色,目標(biāo)是使內(nèi)容易于閱讀。
  • 使用大對(duì)比度來顯示背景上的視覺元素。
避免使用低對(duì)比度和低效的漸變

 

8. 字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。
  • 使用標(biāo)準(zhǔn)字體,因?yàn)樗鼈兏菀组喿x和掃描。
  • 特別和美術(shù)字體可能看起來不錯(cuò),但很難理解
  • 避免所有的大寫字母文字,因?yàn)樗茈y閱讀,人類的大腦需要時(shí)間來消化它。
  • 使用合適的字體大小和風(fēng)格,有效地傳達(dá)信息。
不要使用影響可讀性的字體

 

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。
  • 必要時(shí)使用整數(shù),因?yàn)殚L數(shù)字會(huì)使用戶混淆
  • 省去不必要的信息
  • 讓用戶能夠容易地比較簡單的差異細(xì)節(jié)

 

10. 標(biāo)簽

使用能夠快速有效地向用戶傳達(dá)所需信息的標(biāo)簽。
  • 避免使用帶旋轉(zhuǎn)的標(biāo)簽,因?yàn)楹茈y閱讀
  • 盡可能的使用標(biāo)準(zhǔn)的縮寫
避免旋轉(zhuǎn)標(biāo)簽

 

總結(jié)

數(shù)據(jù)可視化旨在節(jié)省時(shí)間和精力,將復(fù)雜和抽象的數(shù)據(jù)以更簡單的形式表示,目的是以用戶能夠理解的方式將關(guān)鍵信息傳達(dá)給他們,確保自己理解用戶所需,并給他們需要的信息。

 


作者:Saadia Minhas

譯者:彩云sky

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》后臺(tái)數(shù)據(jù)可視化界面設(shè)計(jì)的10條經(jīng)驗(yàn)法則

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




數(shù)據(jù)可視化設(shè)計(jì) – 3D粒子模型科技感動(dòng)效【進(jìn)階教程】

seo達(dá)人


調(diào)研給大家看的效果圖
上圖是調(diào)研給大家看的效果圖,這種效果常常在科幻大片中看到,是FUI風(fēng)格較常見的設(shè)計(jì)元素,實(shí)際上可視化設(shè)計(jì)也常用真實(shí)的形象和三維場景,助力數(shù)據(jù)解釋。
如下圖,之前設(shè)計(jì)的產(chǎn)品“軍人心理指標(biāo)采集系統(tǒng)”,功能上是呈現(xiàn)人的生理指標(biāo)數(shù)據(jù),界面中人的形象,就能直觀的把人體,如腦電、心率等各部位對(duì)應(yīng)的數(shù)據(jù)展示清楚。
3D動(dòng)畫使用場景
不多說了開干!
接下來我們用兩種方式實(shí)現(xiàn)這種效果

 

方法一: 

用到的軟件為:C4D+AE
首先得有模型,C4D自帶了一些模型,網(wǎng)上也可以找到很多模型,我常在“CG模型網(wǎng)”找模型,模型最好找C4D格式或者通用obj格式,其他軟件格式需要轉(zhuǎn)格式,當(dāng)然如果有建模能力可以自己建模,下面用一個(gè)帥氣的跑車為例講解。
第一步:找到需要的模型在C4D軟件中打開;

 

第二步:使用晶格,把模型置入晶格下面,調(diào)整晶格對(duì)象屬性中的數(shù)值,使模型看起來是線框展示,調(diào)整的半徑尺寸需要呈現(xiàn)細(xì)絲狀,太粗略顯笨重;

 

 

第三步:打關(guān)鍵幀制作動(dòng)畫讓跑車原地打轉(zhuǎn)一圈360度,需要注意的是坐標(biāo)點(diǎn)位置的調(diào)整,例如模型旋轉(zhuǎn)一圈,坐標(biāo)最好在模型中心位置;

 

第四步:設(shè)置緩動(dòng)曲線,我們要實(shí)現(xiàn)的效果勻速運(yùn)動(dòng)循環(huán)播放更為貫通,默認(rèn)會(huì)有緩入緩出,所以需要調(diào)整,右擊指定的關(guān)鍵幀區(qū)域,找到顯示函數(shù)曲線,彈窗里點(diǎn)擊“線性”直角圖標(biāo);

 

 

第五步:設(shè)置輸出參數(shù)尺寸、幀頻、幀范圍,幀頻設(shè)置需要在不影響流暢度的情況下,可以稍小一些,這樣后面落地的文件也就不會(huì)太大,然后設(shè)置保存參數(shù),選擇PNG勾選Alpha通道,抗鋸齒選項(xiàng)中可以為“最佳”;

 

 

第六步:渲染序列幀;

 

 

最后一步:把序列幀倒入AE,在AE中設(shè)置顏色、時(shí)間、加特效等;

 

 
 

方法二: 

用到的軟件為:AE粒子插件 Trapcode-Form
 
新建合成-新建純色圖層-找到Form拖給純色圖層,選擇模型-開啟3D圖層-打關(guān)鍵幀;

 

 

 

AE通過改變粒子屬性(頂點(diǎn)、邊、面、體積)可以變化不同樣式,下圖切換為“頂點(diǎn)”后呈現(xiàn)的跑車樣式。

 

 

如果覺得這樣旋轉(zhuǎn)很單調(diào),還找一些HUD添加效果,如下圖所示:

 

兩種方法的優(yōu)缺點(diǎn)總結(jié):
C4D導(dǎo)出序列幀方式雖然步驟多,但在模型的特殊要求上更為靈活,可隨時(shí)修改模型,可局部晶格化。
AE的優(yōu)勢是有不同的樣式可挑選,步驟簡單,但如果設(shè)備不給力稍大的模型會(huì)很消耗設(shè)備資源,導(dǎo)致卡頓。
下面再分享幾個(gè)其他模型效果,槍的效果是Form模型設(shè)置中“面”的效果。

 

 

如何落地?在之前的《B端新零售產(chǎn)品》文章詳細(xì)講解過,文末有文章鏈接,文章中出現(xiàn)的模型送給大家,供大家練習(xí),公號(hào)后臺(tái)回復(fù)“模型”即可獲取。
 
 

最后  

數(shù)據(jù)可視化設(shè)計(jì)的核心還是數(shù)據(jù)的有效呈現(xiàn),視覺上的美觀炫酷要與數(shù)據(jù)呈現(xiàn)契合,做到美觀性與實(shí)用性相輔相成,3D效果固然炫酷,但不能為了加而加,影響數(shù)據(jù)呈現(xiàn),有的產(chǎn)品并非適合,讓炫酷的視覺效果助力數(shù)據(jù)可視化,才是設(shè)計(jì)師應(yīng)該追求的。


作者:吳星辰

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì) – 3D粒子模型科技感動(dòng)效【進(jìn)階教程】

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



電商大屏 – 數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享!

seo達(dá)人

案例解析-業(yè)務(wù)指標(biāo)分析

本期的大屏案例為“北京市電商消費(fèi)大數(shù)據(jù)”,主要呈現(xiàn)某電商平臺(tái)618購物節(jié)的信息數(shù)據(jù)。

如銷售總金額、區(qū)域銷售排行、男女比例、年齡分布、品牌銷售排行、歷史銷售趨勢等等。

先看圖,下圖為最終的設(shè)計(jì)稿:

設(shè)計(jì)任何產(chǎn)品首先要做的就是了解業(yè)務(wù)和需求分析,本次的案例需求非常簡單明了,只需做各指標(biāo)數(shù)據(jù)的展示。

從需求上可以分析得出,大屏是純數(shù)據(jù)展示類,所以不需要有交互行為。

 

無交互的圖表設(shè)計(jì)要點(diǎn)

無交互的大屏展示,在圖表設(shè)計(jì)上,需要按沒有交互的形式設(shè)計(jì)。

例如不能因?yàn)閿?shù)據(jù)過多,而隱藏一些通過交互才能看到的數(shù)據(jù)。

對(duì)于一組無法展示全的數(shù)據(jù),可以只提煉最重要的指標(biāo)數(shù)據(jù)進(jìn)行展示,也可以通過動(dòng)畫形式,播放展示等等。

 

實(shí)時(shí)數(shù)據(jù)和事后數(shù)據(jù)的區(qū)別

本案例提供的是618購物節(jié)事后的數(shù)據(jù),所以在大屏的設(shè)計(jì)上可以根據(jù)真實(shí)的數(shù)據(jù)來設(shè)計(jì)呈現(xiàn)。

事后數(shù)據(jù)呈現(xiàn),在設(shè)計(jì)上可以根據(jù)真實(shí)的數(shù)據(jù)來定義圖表,例如可以根據(jù)數(shù)據(jù)大小長度,精準(zhǔn)的定義設(shè)計(jì)空間。

實(shí)時(shí)數(shù)據(jù)顧名思義指的就是數(shù)據(jù)在實(shí)時(shí)傳輸,產(chǎn)生了數(shù)據(jù)就要立即展示出來,從業(yè)務(wù)角度上可能要做其他的設(shè)計(jì)預(yù)案。

例如異常數(shù)據(jù)的處理,有突破性的數(shù)據(jù)是否設(shè)計(jì)動(dòng)畫營造一種儀式感,就像天貓雙11的千億彩蛋。

 

案例解析-風(fēng)格與用色

定義視覺風(fēng)格

定義大屏設(shè)計(jì)風(fēng)格,首先要分析行業(yè)的屬性特征,然后通過情緒板等方法定義視覺調(diào)性。

例如公安系統(tǒng)通常運(yùn)用嚴(yán)謹(jǐn)冷靜的藍(lán)色調(diào);能源、教育、醫(yī)療行業(yè)的主色調(diào),一般使用能代表環(huán)保、未來、健康的綠色調(diào)。

 

電商、新零售行業(yè)需要烘托購物熱鬧的場景,所以靚麗的暖色調(diào)更為合適。

過于冰冷理性的色調(diào),并不是電商產(chǎn)品所追求的調(diào)性,更不符合觀者對(duì)購物場景的心理認(rèn)知。

但是由于可視化大屏的面積過大,主色調(diào)不論什么顏色,背景色通常要用暗色系,以減少對(duì)觀者視覺上的沖擊。

深色背景能夠有效烘托暖色調(diào)的可視化元素,起到對(duì)比、聚焦視覺的作用。

暖色調(diào)元素可以烘托購物特征的氛圍,如紅色、橙色、紫色、都是有效的色調(diào),但如果都是暖色元素較容易視覺疲勞。

所以暖色中搭配一定比例的冷色,能夠緩解視覺上的不適感。

冷暖色在大屏設(shè)計(jì)中的搭配有很多技法,下面我們來解析色彩搭配。

 

色彩解析

首先分析色環(huán)圖,了解一下色彩知識(shí),30度為同類色、60度為鄰近色、120度對(duì)比色、180度互補(bǔ)色。

電商大屏冷色元素通常選用藍(lán)色系色調(diào),通過上圖對(duì)色環(huán)的認(rèn)識(shí),來看下藍(lán)色與色環(huán)圖上的暖色都呈現(xiàn)什么關(guān)系。

  • 同類色:在色環(huán)上成30度,特點(diǎn)是色相比較接近,如紅色類的朱紅、大紅、玫瑰紅都屬同類色關(guān)系。
  • 鄰近色:在色環(huán)上成60度,鄰近色的搭配會(huì)使畫面和諧統(tǒng)一,呈現(xiàn)一種你中有我,我中有你的感覺。
  • 對(duì)比色:在色環(huán)上成120度,是構(gòu)成明顯色彩效果的色組,視覺上會(huì)有一種藍(lán)的更藍(lán),紅的更紅。
  • 互補(bǔ)色:在色環(huán)上成180度,是對(duì)比最強(qiáng)的色組,兩個(gè)顏色放在一起會(huì)引起強(qiáng)烈的對(duì)比,會(huì)給人強(qiáng)烈的排斥感。

 

大面積用色技法

從以上的色彩分析來看,電商大屏若呈現(xiàn)大面積的暖色調(diào),再搭配大面積藍(lán)色調(diào)會(huì)呈現(xiàn)對(duì)比色或互補(bǔ)色,形成強(qiáng)烈對(duì)比。

所以本期案例選擇藍(lán)色的鄰近色,紫紅色進(jìn)行搭配,這樣不僅能夠烘托電商的屬性特征。

還能在大面積使用紫紅色的同時(shí)保持畫面和諧統(tǒng)一,因?yàn)樽霞t色同時(shí)包含藍(lán)色和紅色兩種色調(diào)。

藍(lán)色搭配紫紅色其實(shí)就是,實(shí)現(xiàn)了你中有我,我中有你的感覺。

下面我們對(duì)比一下,如果把本期分享的大屏案例,換成正紅色體會(huì)一下感覺。

不難發(fā)現(xiàn)強(qiáng)烈對(duì)比效果會(huì)有一種不適感,所以大面積的暖色,一定要使用跟其他元素能夠融入的鄰近色。

 

小面積使用對(duì)比色的技法

如果是小面積的使用,就會(huì)有很多的可能性,例如下圖阿里DataV電商類數(shù)據(jù)可視化產(chǎn)品的模版。

都只是在標(biāo)題處使用紅色烘托電商大屏的調(diào)性, 內(nèi)容區(qū)并沒有過多的使用紅色,所以各種元素間,并沒有形成強(qiáng)烈的對(duì)比。

但從兩張圖的對(duì)比來看,第二張?zhí)幚淼谋鹊谝粡堃呒?jí)一些,仔細(xì)看會(huì)發(fā)現(xiàn),第二張背景色偏紫色。

紅紫為鄰近色,這樣標(biāo)題的紅色和背景就形成了較為和諧的過渡,而第一張暗藍(lán)色的背景跟標(biāo)題對(duì)比強(qiáng)烈,略顯生硬。

 

反面案例解析

舉個(gè)反面案例,看下圖最大的問題就是過度烘托了主題主題氛圍,導(dǎo)致整個(gè)畫面太過艷麗,沒有細(xì)節(jié)。

更不用說數(shù)據(jù)的清晰展示了,這已經(jīng)違背了大屏可視化設(shè)計(jì),以數(shù)據(jù)信息展示為核心的設(shè)計(jì)理念。

圖片來源網(wǎng)絡(luò)(反面案例)

想象一下大屏的使用場景,這樣一個(gè)艷麗的大屏掛在墻上,看多了心情會(huì)變得焦躁,同樣的道理,沒有人會(huì)把家里的墻大面積刷成紅色一樣。

大屏設(shè)計(jì)用色調(diào)烘托主題本身很好,但對(duì)于艷麗的暖色調(diào),要適當(dāng)搭配一定比例的鄰近色和對(duì)比色。

這樣能大大緩解觀者的視覺疲勞,展示出細(xì)節(jié),大屏看起來色彩也會(huì)更豐富有觀賞性。

 

案例中標(biāo)題和總數(shù)據(jù)為什么使用黃色?

因?yàn)辄S色和藍(lán)色、紫紅色對(duì)比性更強(qiáng)烈,黃色跟藍(lán)色在色環(huán)上成180度是互補(bǔ)色,有最強(qiáng)烈的對(duì)比性。

黃色與紫紅色在色環(huán)上成120度是對(duì)比色,同樣有強(qiáng)烈的對(duì)比性,同時(shí)黃色也跟暗色調(diào)的背景形成了鮮明的對(duì)比。

所以對(duì)于關(guān)鍵指標(biāo)數(shù)據(jù)和標(biāo)題,需要重點(diǎn)突出的元素,可以用對(duì)比強(qiáng)烈的色調(diào)做突出效果。

 

案例解析-設(shè)計(jì)要點(diǎn) 

打造儀式感

設(shè)計(jì)要點(diǎn)要從需求出發(fā),例如需求中有一項(xiàng)關(guān)鍵的業(yè)務(wù)指標(biāo)要突出,朝陽區(qū)消費(fèi)占全市75%。

所有區(qū)中朝陽的消費(fèi)是No1,所以從這點(diǎn)考慮可以使用全區(qū)地圖來展示,并且打造朝陽區(qū)第一名的儀式感。

 

打造驚喜感

產(chǎn)品設(shè)計(jì)中給觀者驚喜感,無疑是好的體驗(yàn),本次案例通過增加了兩道光線動(dòng)畫,打造微妙的驚喜感。

這樣的設(shè)計(jì)給大屏增添了動(dòng)感,看起來更富有生機(jī),兩道光線滑向總數(shù)據(jù)指標(biāo),會(huì)有一種數(shù)據(jù)傳輸?shù)母杏X。

同時(shí)也像滿天繁星的夜空中,劃過的流星一樣,給人帶來一種悸動(dòng)的體驗(yàn)。

 

3D圖表的設(shè)計(jì)要點(diǎn)

3D圖表有很強(qiáng)的視覺表現(xiàn)力,是突出重要指標(biāo)的重要手段之一,但3D圖表在數(shù)據(jù)可視化設(shè)計(jì)中,一直是有爭議的存在。

有人認(rèn)為由于3D的透視關(guān)系,會(huì)導(dǎo)致數(shù)據(jù)呈現(xiàn)的不客觀。

其實(shí)從設(shè)計(jì)角度可以解決不客觀問題,比如我們案例中的3D柱狀圖,由于柱形的厚度。

導(dǎo)致出現(xiàn)兩條頂端線,視覺上很難分清頂端在哪里,對(duì)指向Y軸刻度數(shù)值的體現(xiàn)的就不明確。

這種情況就需要在柱狀圖上標(biāo)記出數(shù)據(jù)值,這樣畫面不僅有了3D圖表的視覺表現(xiàn),同時(shí)也不影響數(shù)據(jù)的展示。

 

增強(qiáng)觀者認(rèn)知

增強(qiáng)觀者對(duì)元素的認(rèn)知,可以大大提高閱讀效率,比如圖文形式通常比文字視覺上更突出。

案例中“最受歡迎品牌”就可以加上品牌logo增強(qiáng)對(duì)類別的認(rèn)知。

條形圖通常按序排列,從大到小,或從小到大,但如果有“其他”這項(xiàng)分類一般都要放到最后。

因?yàn)椤捌渌蓖ǔJ撬蟹诸愔凶畈魂P(guān)注的數(shù)據(jù),關(guān)注的數(shù)據(jù)都會(huì)直接展示出來。

如果“其他”分類也按有序排列,就會(huì)有格格不入的感覺。

 

后語 

電商大屏通常要烘托一種熱鬧的場景,對(duì)配色的準(zhǔn)確把握,大面積色調(diào)的使用需要和諧過渡,同時(shí)要善于運(yùn)用對(duì)比色,突出元素。

多思考設(shè)計(jì)與業(yè)務(wù)的表現(xiàn)關(guān)系,善于從設(shè)計(jì)思維出發(fā)打造儀式感、驚喜感,增加產(chǎn)品價(jià)值。

 

作者:吳星辰

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》電商大屏 – 數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



數(shù)據(jù)之美:地理空間數(shù)據(jù)可視化

seo達(dá)人

本文利用C4D軟件和three.js開發(fā)方式制作地理空間數(shù)據(jù)可視化項(xiàng)目。地理空間數(shù)據(jù)可視化是基于我們實(shí)際生存的空間,對(duì)信息的載體、對(duì)象映射到載體的方式進(jìn)行可視化展示,從而將地理空間中的數(shù)據(jù)以一種直觀、容易理解和曹總的方式呈現(xiàn)給用戶。

使用軟件:c4d
飛線制作原理:樣條約束功能
地球上的起伏:置換材質(zhì)
中國地圖上的飛線:在ae中做好的視頻材質(zhì)
地圖模型:高德那邊拿到的,但只針對(duì)阿里內(nèi)部
開發(fā)方式:three.js

地理空間數(shù)據(jù)可視化 (Geo Spatial Data Visualization) 是近年來興起的一個(gè)熱門領(lǐng)域,越來越多的政府、企業(yè)青睞于通過這種強(qiáng)視覺的形式來展示政績與實(shí)力。市場需求的增長也吸引了越來越多的設(shè)計(jì)師投身于這個(gè)領(lǐng)域。而在這樣一個(gè)細(xì)分領(lǐng)域,也對(duì)設(shè)計(jì)師的能力提出了全新的要求。在該領(lǐng)域,我們團(tuán)隊(duì)沉淀出一套固定且可復(fù)用的設(shè)計(jì)模式。在這篇文章中,我將會(huì)詳細(xì)講述一套完整的地理空間數(shù)據(jù)可視化設(shè)計(jì)流程。希望你能通過它形成一套屬于自己的可視化設(shè)計(jì)方法。

文章分為兩部分,上半部分展示視覺,下半部分聊聊視覺背后的理論與流程。

請(qǐng)點(diǎn)擊——》》視頻1
請(qǐng)點(diǎn)擊——》》視頻2

 


作者:三魚先生

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)之美:地理空間數(shù)據(jù)可視化

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司





數(shù)據(jù)可視化大屏該這樣設(shè)計(jì)

seo達(dá)人

什么是數(shù)據(jù)可視化大屏

每年的雙十一,天貓都會(huì)在剁手狂歡節(jié)中直播戰(zhàn)績。除了可怕的數(shù)字之外,不知道大家有沒有留意到這些同樣可怕的數(shù)據(jù)可視化大屏;

所謂大屏,顧名思義就是一個(gè)

很大的屏 !!!

可視化應(yīng)用非常廣如ToC、ToB、ToG等都會(huì)存在。一般應(yīng)用在交易大廳,展覽中心,管控中心,老板辦公室等等場景,把一些關(guān)鍵數(shù)據(jù)集中展示在一塊巨大的LED屏幕上,其實(shí)就是巨大化的Dashboard,是當(dāng)今數(shù)一數(shù)二的裝逼方式。

數(shù)據(jù)可視化的本質(zhì)是視覺對(duì)話,數(shù)據(jù)可視化將數(shù)據(jù)分析技術(shù)與圖形技術(shù)結(jié)合,清晰有效地將分析結(jié)果信息進(jìn)行解讀和傳達(dá)。

 

設(shè)計(jì)前的準(zhǔn)備

基礎(chǔ)大屏制作準(zhǔn)備:

1、確認(rèn)需求:確認(rèn)展示的主題,具體展示的內(nèi)容,各部分內(nèi)容數(shù)據(jù)用到的圖表類型。

2、使用場景:確認(rèn)大屏的使用場,設(shè)計(jì)尺寸與大屏的拼接方式(拼接屏像素超大可等比例縮放)

3、開發(fā)實(shí)現(xiàn):具體設(shè)計(jì)要根據(jù)項(xiàng)目確定實(shí)現(xiàn)的工具,現(xiàn)在應(yīng)用比較多的:web、u3d、ue4等 不同工具實(shí)現(xiàn)出來的效果也是大有不同,根據(jù)項(xiàng)目實(shí)際需求以及開發(fā)成本,這塊設(shè)計(jì)前需要跟開發(fā)充分溝通。

4、設(shè)計(jì)素材:設(shè)計(jì)整體的背景圖、包括布局、配色等,以及大屏中用到的小圖標(biāo)元素。

大屏制作一般只需四步:

1、整體:設(shè)置背景色、插入背景圖、頁面設(shè)置等。

2、部分:主標(biāo)題、各圖形標(biāo)題、動(dòng)態(tài)KPI指標(biāo)、圖表制作等。

3、細(xì)節(jié):對(duì)標(biāo)題、圖表細(xì)節(jié)的調(diào)整。

4、動(dòng)態(tài):添加動(dòng)態(tài)效果,提升大屏展示效果。

(以上只是寫的一個(gè)大概的思路,具體操作流程肯定是根據(jù)實(shí)際情況做調(diào)整,要復(fù)雜的多,最重要的是多溝通、多思考)

 

設(shè)計(jì)思路案例實(shí)操

需求分析

設(shè)計(jì)要求:

分辨率1920*1080,在世界地圖上顯示一個(gè)黑客組織攻擊多個(gè)目標(biāo),頁面要顯示黑客組織的信息和被攻擊目標(biāo)的信息

黑客組織信息舉例:

名稱;摩訶草  位置:巴基斯坦 活躍度:80

攻擊目標(biāo):韓國 中國 朝鮮 德國

展示信息僅作為參考,可以自由發(fā)揮

風(fēng)格要求:科技感 FUI

拿到需求,確定好展示場景、設(shè)計(jì)尺寸以及跟開發(fā)溝通好實(shí)現(xiàn)方法,大致的設(shè)計(jì)思路就有了,直接開擼。

 

布局

個(gè)人習(xí)慣,根據(jù)需求以及數(shù)據(jù)大概整理一個(gè)布局,可以在紙上大概畫一下,然后在軟件里具體細(xì)化布局。

根據(jù)梳理的需求:就是要在世界地圖上展示黑客攻擊各個(gè)國家的形態(tài)的大屏,要求很寬泛,可自我發(fā)揮的空間挺大。

直接附上最終效果圖。這里布局上考慮到地圖上有許多浮層的情況,把數(shù)據(jù)整體放左側(cè)和地圖下方進(jìn)行展示,避免圖表的面積過大,喧賓奪主,影響整體地圖的視覺效果

 

風(fēng)格

根據(jù)需求定義幾個(gè)設(shè)計(jì)關(guān)鍵詞,方便自己找參考直接打開花瓣站酷一陣搜(在這里個(gè)人推薦去Pinterest、behance 里面有很多炫酷的fui效果可以參考)。

風(fēng)格上,地圖參考了下圖的展示形式,采用多層疊加陰影加描邊的形式使地圖整體有立體感、厚重感,不會(huì)顯得那么單薄。

圖片來自網(wǎng)絡(luò),如侵權(quán)刪

 

顏色

相比較網(wǎng)頁版設(shè)計(jì)展示,大屏更傾向于選用深色調(diào)背景,不僅為了讓視覺更好聚焦,而且長時(shí)間觀看之后眼睛也不會(huì)出現(xiàn)視覺刺痛感。內(nèi)容部分采用亮色系,保證內(nèi)容與背景有一定的對(duì)比關(guān)系,便于業(yè)務(wù)信息傳達(dá)。同時(shí)背景深色系內(nèi)容亮色系遠(yuǎn)距離觀看也會(huì)比較直觀清晰。

 

字體

字體上采用瀏覽器默認(rèn)微軟雅黑,數(shù)字采用特殊字體DS-Digital

 

數(shù)據(jù)圖表

圖表是表達(dá)數(shù)據(jù)的常用方式,因?yàn)閳D表可以描述了不同的數(shù)據(jù)種類,同時(shí)讓數(shù)據(jù)之間可以比較。主要就是要考慮最終用戶,圖表結(jié)果應(yīng)該是一看就懂,不需要思考和過度理解,因而選定圖表時(shí)要理性,避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形及元素。

常用的圖表有以下幾大類別:

1、一個(gè)或者多個(gè)類別不同時(shí)間的的對(duì)比比較。

典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區(qū)域圖、時(shí)間線等。

2、不同類別數(shù)據(jù)的對(duì)比

典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標(biāo)圖、多折線圖、子彈圖等。

3、排名 主要展示項(xiàng)目數(shù)據(jù)的一個(gè)排名情況。

典型的圖表有有序條形圖、有序柱狀圖、平行坐標(biāo)圖等。

4、不同數(shù)據(jù)對(duì)于整體的占比情況

典型的圖表有堆疊條形圖、餅狀圖、環(huán)形圖、堆疊區(qū)域圖、樹形圖、玫瑰圖等。

以上是一些比較常見的一些分類當(dāng)然還有許多不常用的圖表沒做統(tǒng)計(jì)區(qū)分,比如散點(diǎn)圖、氣泡圖、熱力圖、網(wǎng)絡(luò)圖等等這里就不一一列舉了(推薦大家可以看下網(wǎng)上的開源組件庫Echarts、Antv等等 好多)這塊也有螞蟻金服官方的分類非常詳細(xì)

https://antv.vision/zh 附上地址,需要的自取。

圖片來自網(wǎng)絡(luò),如侵權(quán)刪

這里推薦一快速生成圖表的ps插件-ps拉框助手如圖所示,該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達(dá)圖、地圖(該功能太贊了)還有系統(tǒng)UI等等。非常方便,用選區(qū)工具拉取選區(qū)框點(diǎn)擊參數(shù)一鍵生成。

實(shí)操下如何快速一鍵生成地圖的效果,省去了做可視化來回地圖的煩惱,下面開始實(shí)操:

1.新建畫布,打開拉框助手選中地圖如圖:

選中之后會(huì)有好多參數(shù)標(biāo)簽寫的很清楚,第一塊是區(qū)塊、邊線寬度顏色和文字的顏色可以在這里設(shè)置,第二塊內(nèi)容就是地圖這里插件里有全國各個(gè)省市的還有全球和美國的地圖 基本夠用了,根據(jù)需求大家可以自定義選擇,選擇完成之后點(diǎn)擊去下載對(duì)應(yīng)數(shù)據(jù),會(huì)彈出網(wǎng)頁出來一個(gè)新的頁面,如下圖:

這里是我選擇一個(gè)全國的地圖,大家可以根據(jù)截圖上紅框內(nèi)的說明進(jìn)行操作,非常簡單。往下滑,直接點(diǎn)擊復(fù)制json數(shù)據(jù)到剪切板。點(diǎn)擊后網(wǎng)頁會(huì)有一個(gè)復(fù)制成功的提示,證明你已經(jīng)復(fù)制成功了,接下來我們就回到ps里面去粘貼就好了。

粘貼到這里,這里切記不要粘貼多次會(huì)很卡導(dǎo)致數(shù)據(jù)錯(cuò)誤,插件里也有提示。粘貼完之后,記得用選區(qū)工具畫一個(gè)選區(qū)之后再點(diǎn)擊自動(dòng)繪制如圖:

點(diǎn)擊自動(dòng)繪制之后,可能會(huì)等待一會(huì),插件需要花時(shí)間去運(yùn)算生成地圖,等待一會(huì)之后就到了見證奇跡的時(shí)刻,如圖:

一份中國地圖就生成啦,就問你它香不香,而且生成的文件都是分層的矢量形狀層,可以繼續(xù)編輯。是不是功能非常強(qiáng)大,其他模塊的功能就不一一展示了,插件官方生怕童鞋們不會(huì)用,在插件的最后一個(gè)模塊貼心的準(zhǔn)備了學(xué)習(xí)手冊(cè),點(diǎn)擊可以查看相關(guān)的視頻教程,非常的詳細(xì),感興趣的童鞋可以去試試哦。

插件源文件小六也給大家備好了,公眾號(hào)回復(fù)“ps插件”有需要的童鞋自行領(lǐng)取喲。

 

總結(jié)

1、設(shè)計(jì)前:一定要對(duì)用戶需求有著充分分析和理解,然后要知道大屏的展示場景及設(shè)計(jì)分辨率,大屏的拼接方法都要有一定的了解,最后是跟開發(fā)溝通下實(shí)現(xiàn)的工具與方法

2、設(shè)計(jì)中構(gòu)思布局,可以在紙上簡單畫一下。根據(jù)需求定義設(shè)計(jì)關(guān)鍵詞進(jìn)行設(shè)計(jì)的提煉與分析,方便自己找參考。顏色上背景深色為主,為了更好的聚焦,數(shù)據(jù)可以采用亮色,有一定的對(duì)比關(guān)系,便于業(yè)務(wù)信息傳達(dá)。字體上可以采用系統(tǒng)默認(rèn)字體 數(shù)字采用特殊字體包的形式(這塊根據(jù)實(shí)際需求,切記不要照搬)。圖表分析好數(shù)據(jù),選擇恰當(dāng)?shù)恼故拘问?,同時(shí)保證視覺上的統(tǒng)一(分清頁面的主次關(guān)系,圖表的展示切莫設(shè)計(jì)過度,容易造成搶主體)

3、設(shè)計(jì)后:再次校驗(yàn)信息層級(jí)、文字大小、圖表等各層級(jí)間的對(duì)比關(guān)系是否傳達(dá)準(zhǔn)確,與技術(shù)同步溝通下技術(shù)的實(shí)現(xiàn)性。最后開發(fā)完成后,要拿演示demo去現(xiàn)場測試,看下整體展示效果,測試輸出是否有問題,有無拉伸問題,拼接縫與內(nèi)容有無穿插,及時(shí)與開發(fā)進(jìn)行頁面的校驗(yàn)工作,最終才算是設(shè)計(jì)完成。


作者:小六

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化大屏該這樣設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



初學(xué)者如何快速上手?jǐn)?shù)據(jù)可視化設(shè)計(jì)

seo達(dá)人

01.什么是數(shù)據(jù)可視化

數(shù)據(jù)可視化是數(shù)據(jù)內(nèi)在價(jià)值的最終呈現(xiàn)手段,它利用各類圖表及圖形化的設(shè)計(jì)手段將復(fù)雜不直觀的數(shù)據(jù)有邏輯的展現(xiàn)出來,使用戶找到內(nèi)在規(guī)律,發(fā)現(xiàn)問題,從而指導(dǎo)經(jīng)營決策,挖掘數(shù)據(jù)背后的商業(yè)價(jià)值。

  

02.數(shù)據(jù)可視化的使用場景

首先介紹下使用場景:

可視化應(yīng)用非常廣如ToC、ToB、ToG等都會(huì)存在,之前所看到的各種圖表僅以為是單純的數(shù)據(jù)統(tǒng)計(jì),其不然它也是一種可視化的展示方式?,F(xiàn)階段更多的理解數(shù)據(jù)可視化是大屏展示。多屏幕拼接,展示諸多數(shù)據(jù)和圖表,效果一定是酷炫各種特效視覺于一身的才稱之為數(shù)據(jù)可視化,其實(shí)這只是其中一種可視化的表現(xiàn)方式。下面基于應(yīng)用場景的不同,對(duì)可視化區(qū)分介紹。

第一類使用場景:

此類以使用為主,主要在電腦上操作的pc端可視化,用戶對(duì)它需長時(shí)間使用,例如企業(yè)數(shù)據(jù)報(bào)表分析,各類BI等。在此類場景下,簡潔簡單高效的傳達(dá)數(shù)據(jù)內(nèi)容是非常必要的,更多的是數(shù)據(jù)分析師及業(yè)務(wù)部門在使用,他們需要長時(shí)間停留在屏幕及數(shù)據(jù)上做分析統(tǒng)計(jì)比對(duì)等工作,精準(zhǔn)的傳達(dá)數(shù)據(jù)的同時(shí)也減少對(duì)眼睛的過度疲勞,利于用戶長時(shí)間舒適閱讀,所以這類場景下以簡潔為主。

(圖片來源于網(wǎng)絡(luò))

 

第二類使用場景:

這類是以觀看為主,并以快速傳達(dá)核心數(shù)據(jù)信息的應(yīng)用場景。此類場景多應(yīng)用于指揮大廳、科技展館、數(shù)字展廳等,他的特點(diǎn)是多屏幕拼接,展示面積大、數(shù)據(jù)類型多,展現(xiàn)形式多元化,業(yè)內(nèi)也稱之為數(shù)據(jù)可視化大屏??傊渲饕褪呛诵臄?shù)據(jù)通過視覺及動(dòng)畫的表現(xiàn)手法直觀的輸出給用戶,增加用戶的記憶達(dá)到過目不忘的效果,同時(shí)這對(duì)于數(shù)據(jù)信息的視覺傳達(dá)要求比較高。此應(yīng)用場景也是問題疑問比較多的,會(huì)關(guān)系到效果定位、數(shù)據(jù)信息傳達(dá)、表現(xiàn)方式、軟硬件結(jié)合等諸多情況。針對(duì)此應(yīng)用場景展開分析,其他可視化設(shè)計(jì)也是相通的。

(圖片來源于網(wǎng)絡(luò))

 

  03.大屏數(shù)據(jù)可視化該這樣設(shè)計(jì)

1、精準(zhǔn)把握業(yè)務(wù)需求

設(shè)計(jì)終歸是助力業(yè)務(wù)的,準(zhǔn)確的理解業(yè)務(wù)需求是至關(guān)重要的,它將貫穿整個(gè)設(shè)計(jì)的始終,也是可視化設(shè)計(jì)開始的必要前提。如何解決用戶的問題,完成既定目標(biāo),都需要設(shè)計(jì)師對(duì)需求有一個(gè)比較準(zhǔn)確的理解。直接有效的方法就是“不懂就問”。

2、數(shù)據(jù)圖形化的選擇方法

需求及數(shù)據(jù)確立后,接下來是數(shù)據(jù)圖形化的選擇,不同的目標(biāo)不同的數(shù)據(jù)對(duì)于圖表展示的選擇也是有講究的,如:部分占總體的比例(占比)更適合選用餅圖、用來反映時(shí)間變化趨勢的圖形化更適合曲線圖等等,總之不同的數(shù)據(jù)展示維度,選擇的圖表是有差異的。同樣一組數(shù)據(jù),存在多個(gè)圖表同可展示,怎樣選擇最恰當(dāng)?shù)膱D表是至關(guān)重要的,合適有效的圖表有助于信息有效的傳達(dá)。遇到具體的數(shù)據(jù)要根據(jù)數(shù)據(jù)的維度,和要表達(dá)的業(yè)務(wù)目標(biāo),選擇一種最佳的圖表呈現(xiàn)。

(圖片來源于網(wǎng)絡(luò))

 

這是可視化圖表選擇比較確切的一個(gè)方法,可以作為數(shù)據(jù)可視化圖表的選擇依據(jù),有助于準(zhǔn)確快速的把數(shù)據(jù)圖形化。

首先根據(jù)業(yè)務(wù)目標(biāo)結(jié)合數(shù)據(jù)維度確定大的關(guān)系(比較、分部、構(gòu)成、聯(lián)系),隨后選擇合適的圖表,填充數(shù)據(jù)設(shè)計(jì)排版即可。到這一步圖表基本成型,但是比較基礎(chǔ),為了視覺效果和數(shù)據(jù)的傳達(dá),也會(huì)在此基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計(jì)。

 

優(yōu)化設(shè)計(jì)之前要注意幾點(diǎn):

  1. 切忌設(shè)計(jì)時(shí)不要過度裝飾圖表,喧賓奪主造成數(shù)據(jù)不直觀,對(duì)觀者獲取數(shù)據(jù)產(chǎn)生障礙。
  2. 圖形化要友好,不能一味的追求視覺效果,造成圖形識(shí)別度降低、友好度下降。
  3. 圖形化后一定要利于理解。所有的設(shè)計(jì)一定是為業(yè)務(wù)服務(wù)的,數(shù)據(jù)圖形化后更不利于業(yè)務(wù)信息傳達(dá),那就失去了圖形化設(shè)計(jì)的意義
  4. 開發(fā)可實(shí)現(xiàn),設(shè)計(jì)師常遇到,酷炸炫的效果讓開發(fā)落地非常困難,務(wù)必要多溝通,懂取舍。設(shè)計(jì)之初就要考慮全面。

 

 04.設(shè)計(jì)尺寸與大屏的拼接方式

可視化大屏一般都是多屏拼接或者LED\LCD等材質(zhì)屏幕。不同的屏幕像素是不相同的,顯示像素、物理像素都不同,包括硬件設(shè)備的不同導(dǎo)致輸出像素也不相同,例如同樣是3X2的拼接屏,輸出像素可以是X1*Y1也可以是X2*Y2,這就造成了很多潛在問題,設(shè)計(jì)之初屏幕硬件及拼接方式需要提前確定。基本有兩個(gè)方法,簡單的說,方法一、拼接屏可以按照拼接后的橫縱像素總和設(shè)計(jì)(拼接屏像素超大可等比例縮放)。LED/LCD屏幕設(shè)計(jì)也是同樣的原理。方法二、按照硬件輸出像素設(shè)計(jì),硬件設(shè)備的輸出像素一定是和整個(gè)拼接屏成比例或者是吻合的。所以按照輸出像素設(shè)計(jì)是可以的。

(圖片來源于網(wǎng)絡(luò))

 

 05.頁面設(shè)計(jì)及布局思路

屏幕的拼接方式及屏幕材質(zhì)確定后,就可以進(jìn)行頁面的設(shè)計(jì)及數(shù)據(jù)的布局,頁面的布局主要是依據(jù)業(yè)務(wù)及數(shù)據(jù)的重要程度來布局,可視化中會(huì)把核心的數(shù)據(jù)或業(yè)務(wù)的要點(diǎn)放中間,一方面中間是視覺的中心,二來也是數(shù)據(jù)和業(yè)務(wù)最容易傳達(dá)給觀眾的核心位置。其他的數(shù)據(jù)放兩側(cè)排列,排列數(shù)據(jù)一定要考慮數(shù)據(jù)的關(guān)聯(lián)性及聯(lián)動(dòng)性,應(yīng)該有意識(shí)的把他們放一起或就近,讓他們有關(guān)聯(lián)系,當(dāng)一組數(shù)據(jù)變化時(shí)聯(lián)動(dòng)效果更凸顯,容易傳達(dá)數(shù)據(jù)的價(jià)值。

最后插播一句,如果是拼接屏記得把數(shù)據(jù)避開拼接縫,頁面布局時(shí)就要考慮屏幕拼接方式,盡量把數(shù)據(jù)有序的展示在屏幕內(nèi),合理避開拼接縫減少對(duì)用戶觀感的影響。

具體設(shè)計(jì)要根據(jù)項(xiàng)目確定使用的工具做調(diào)整,如web、u3d、ue4等等。項(xiàng)目用什么開發(fā)工具很大程度決定了設(shè)計(jì)方法方式,各種工具自有不同的優(yōu)劣勢,像web輕量化圖表控件多,效果相比u3d會(huì)弱很多。u3d對(duì)三維支持好,粒子等效果有優(yōu)勢。了解這些大致可知道設(shè)計(jì)思路。

 

字體:

選擇識(shí)別性高的,字體不要太細(xì),同時(shí)要注意版權(quán),不要選擇太圓潤的字體。

顏色:

顏色明度飽和度要高些,遠(yuǎn)距離觀更利于信息清晰傳達(dá)。顏色不要過于相近,大屏顏色相近更不易于數(shù)據(jù)間的區(qū)分,降低閱讀舒適感。大屏背景選擇深色系,內(nèi)容選擇亮色系。保持內(nèi)容與背景有一定的對(duì)比關(guān)系,便于業(yè)務(wù)信息傳達(dá)。(同時(shí)深色系也省電)

布局示例(以1920*1080尺寸,布局示例)

 

 

 06.設(shè)計(jì)風(fēng)格的確定

風(fēng)格的確定也是至關(guān)重要的,首先要確定應(yīng)用場景是怎樣的(室內(nèi)、室外、光照如何、燈光照射如何、硬件如何等等),要充分考慮,以及目標(biāo)用戶是誰,給誰用等等。都會(huì)對(duì)風(fēng)格有不小的影響,設(shè)計(jì)是相通的,可用UI的方式來定義可視化設(shè)計(jì)風(fēng)格,AB測試、情緒版等等。差異比較大的一點(diǎn)是應(yīng)用場景的環(huán)境。

通過對(duì)數(shù)據(jù)圖表的選擇,屏幕布局及風(fēng)格設(shè)計(jì),一張初步作品已經(jīng)完成。

此時(shí)最好結(jié)合業(yè)務(wù)目標(biāo)及數(shù)據(jù),設(shè)計(jì)內(nèi)部先自檢:

1、現(xiàn)在的設(shè)計(jì)布局是否合理

2、配色是否合理并能通過色彩傳達(dá)數(shù)據(jù)的意義

3、整體設(shè)計(jì)是否符合之初的業(yè)務(wù)目標(biāo)

4、是否存在其他問題等等

接下來就是各個(gè)相關(guān)人員及領(lǐng)導(dǎo)確認(rèn)階段。

 

  07.現(xiàn)場硬件設(shè)備校對(duì)

當(dāng)風(fēng)格頁確定后先別急于后面的頁面設(shè)計(jì),如果有可能的話,此時(shí)最好拿設(shè)計(jì)圖去現(xiàn)場實(shí)地測試(補(bǔ)充一句,設(shè)計(jì)開始前最好是能到現(xiàn)場測試硬件顯示,顏色等,應(yīng)最大程度的減少隱藏問題)。確定現(xiàn)場硬件是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現(xiàn)場燈光光照等是否對(duì)設(shè)計(jì)有影響、拼接縫和數(shù)據(jù)是否有穿插、硬件設(shè)備輸出是否和設(shè)計(jì)匹配等等。確認(rèn)無誤后在開展后面的頁面設(shè)計(jì)工作。

(圖片來源于網(wǎng)絡(luò))

 

 08.開發(fā)落地及再次現(xiàn)場校對(duì)(含性能)

開發(fā)工具不同(如web、u3d、ue4等等),對(duì)接方式也會(huì)有差異。相同相似之處有如標(biāo)注規(guī)范,顏色,字體字號(hào)等等。對(duì)于一些三維場景需要提供三維文件,如obj、FBX等。

主要提供:設(shè)計(jì)規(guī)范(標(biāo)注)、切圖、三維文件(示項(xiàng)目需求并不一定設(shè)計(jì)提供),特殊動(dòng)效可提供范例。

補(bǔ)充一點(diǎn),拼接屏到8K左右甚至更高,輸出像素不必達(dá)到8K,稍微加點(diǎn)效果,會(huì)卡到懷疑人生。一般會(huì)降低到4k左右,對(duì)硬件要求下降的同時(shí)也能保證整體效果和流暢度。

開發(fā)結(jié)束后,要拿到演示文件去現(xiàn)場測試,測試輸出是否有問題,有無拉伸問題,測試有無卡頓現(xiàn)象,拼接縫與內(nèi)容有無穿插,如有控制端(控制屏)需聯(lián)調(diào)測試。確定整體無誤后,才是設(shè)計(jì)的最后交接棒。


作者:聶永真

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》初學(xué)者如何快速上手?jǐn)?shù)據(jù)可視化設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



Material Design Data Visualization 數(shù)據(jù)可視化

seo達(dá)人

原則

數(shù)據(jù)可視化是一種用圖形形式來描述密集和復(fù)雜信息的通訊方式。由此產(chǎn)生的視覺視覺效果使得數(shù)據(jù)比較和用數(shù)據(jù)講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

數(shù)據(jù)可視化可以表示不同類型和大小的數(shù)據(jù):從少量數(shù)據(jù)點(diǎn)到大型多元數(shù)據(jù)集都可以表示。

 

類型

數(shù)據(jù)可視化可以用不同的形式來傳達(dá)。圖表是一種常用的數(shù)據(jù)傳達(dá)方法,因?yàn)樗鼈儾粌H描述了不同的數(shù)據(jù)類型,還能進(jìn)行數(shù)據(jù)比較。

圖表類型的使用主要取決于兩個(gè)方面:想要傳達(dá)的數(shù)據(jù),以及想要傳達(dá)的數(shù)據(jù)有關(guān)的內(nèi)容。以下指南提供并描述了各種不同類型的圖表及其用例。

 

圖表類型

隨時(shí)間變化

隨時(shí)間變化的圖表顯示一段時(shí)間內(nèi)的數(shù)據(jù),如多個(gè)類別的變化趨勢及其對(duì)比。

使用情況包括:

  1. 股票價(jià)格表現(xiàn)
  2. 健康統(tǒng)計(jì)
  3. 年度報(bào)表

 

隨時(shí)間變化的圖表包括

  1. 折線圖
  2. 柱狀圖
  3. 堆積柱狀圖
  4. 燭臺(tái)圖
  5. 面積圖
  6. 時(shí)間軸
  7. 地平線圖
  8. 瀑布流圖

 

類別比較

類別比較圖比較多個(gè)不同類別之間的數(shù)據(jù)。

使用情況包括:

  1. 不同國家間的收入對(duì)比
  2. 熱門場次對(duì)比
  3. 團(tuán)隊(duì)分配

 

類別比較圖包括:

  1. 柱狀圖
  2. 分組柱狀圖
  3. 氣泡圖
  4. 平行線圖
  5. 多條折線圖
  6. 子彈圖

 

排序

排序圖表示一個(gè)項(xiàng)目在有序列表中的位置。

使用情況包括:

  1. 選舉結(jié)果
  2. 表現(xiàn)統(tǒng)計(jì)

 

排序圖包括:

  1. 排序條形圖
  2. 排序柱狀圖
  3. 平行線圖

 

部分-整體

部分-整體圖表示部分元素是如何加總為整體的。

使用情況包括:

  1. 產(chǎn)品類別綜合收益
  2. 預(yù)算

 

部分-整體圖包括:

  1. 堆積柱狀圖
  2. 餅狀圖
  3. 堆積面積圖
  4. 矩陣樹圖
  5. 太陽輻射圖

 

相關(guān)

相關(guān)圖展示兩個(gè)或多個(gè)變量之間的相關(guān)性。

使用情況包括:

  1. 收入和預(yù)期壽命

 

相關(guān)圖包括:

  1. 散點(diǎn)圖
  2. 氣泡圖
  3. 柱狀和折線圖
  4. 熱力圖

 

分布

分布圖展示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率。

使用情況有:

  1. 人口分布
  2. 收入分布

 

分布圖包括:

  1. 直方圖
  2. 線箱圖
  3. 小提琴圖
  4. 密度圖

 

流圖顯示數(shù)據(jù)在多種狀態(tài)之間的流動(dòng)。

使用情況包括:

  1. 資金轉(zhuǎn)移
  2. 投票統(tǒng)計(jì)和選舉結(jié)果

 

流圖包括:

  1. 桑基圖
  2. 甘特圖
  3. 和弦圖
  4. 網(wǎng)狀圖

 

關(guān)系

關(guān)系圖顯示多個(gè)項(xiàng)目之間是如何彼此關(guān)聯(lián)的。

使用情況有:

  1. 社交網(wǎng)絡(luò)
  2. 文字圖

 

關(guān)系圖包括:

  1. 網(wǎng)狀圖
  2. 維恩圖(或譯Venn圖、文氏圖、韋恩圖、范氏圖)
  3. 和弦圖
  4. 太陽輻射圖

 

選擇圖表

許多類型的圖表都可以用于描述數(shù)據(jù)。下面的指導(dǎo)方針提供了如何選擇圖表的見解。

 

顯示隨時(shí)間產(chǎn)生的變化

隨時(shí)間產(chǎn)生的變化可以用時(shí)間序列圖來表示,這是一種按照時(shí)間順序來表示數(shù)據(jù)點(diǎn)的圖表。

可以表示隨時(shí)間變化的圖表包括:折線圖、條形圖和面積圖。

圖表類型 用法 基線值 時(shí)間系列的數(shù)量 數(shù)據(jù)類型
線性圖 傳達(dá)數(shù)據(jù)中的細(xì)微變化 任何值 任何時(shí)間序列(適用于8個(gè)及以上的時(shí)間列) 連續(xù)型
條形圖 傳達(dá)數(shù)據(jù)中較大的差異,單個(gè)數(shù)據(jù)點(diǎn)如何與整體數(shù)據(jù)關(guān)聯(lián)、比較和排序 0 4個(gè)或以下 離散型或類別數(shù)據(jù)
面積圖 總結(jié)數(shù)據(jù)集之間的關(guān)系,單個(gè)數(shù)據(jù)點(diǎn)是如何與整體數(shù)據(jù)關(guān)聯(lián)的 0(當(dāng)有多個(gè)時(shí)間列時(shí)) 8個(gè)或更少 連續(xù)型

*基線值是指y軸上的起始值。

 

條形圖和餅狀圖

條形圖和餅狀圖都可以用于顯示比例,表示部分值與整體值之間的比較。

  1. 條形圖使用一條共同的基線,通過條柱的長度表達(dá)數(shù)量
  2. 餅狀圖使用圓內(nèi)的圓弧或圓角表示整體的一部分

條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達(dá)隨時(shí)間產(chǎn)生的變化。因?yàn)檫@三種類型的圖表中,可能的值共享同一條基線,所以比基于條柱長度的條形圖更容易比較值之間的差異。

 

面積圖

面積圖有多種類型,包括堆積面積圖和重疊面積圖:

  1. 堆積面積圖表示(在同一時(shí)間段內(nèi))多個(gè)時(shí)間序列堆積在一起
  2. 重疊面積圖表示(在同一時(shí)間段內(nèi))多個(gè)時(shí)間序列重疊在一起

重疊面積圖中不建議包含兩個(gè)以上的時(shí)間序列,以免模糊數(shù)據(jù)。相反,可以使用堆積面積圖在一個(gè)時(shí)間間隔內(nèi)比較多個(gè)值(橫軸表示時(shí)間)。

 

樣式

數(shù)據(jù)可視化使用自定義的樣式和形狀,以適應(yīng)用戶需求和上下文的方式使得數(shù)據(jù)一目了然。

下列有益于圖表自定義:

  1. 圖形元素
  2. 排版
  3. 圖標(biāo)
  4. 軸和標(biāo)簽
  5. 說明和注釋

 

設(shè)置不同類型數(shù)據(jù)的樣式

視覺編碼是將數(shù)據(jù)轉(zhuǎn)換成視覺形式的過程。獨(dú)特的圖形屬性可以應(yīng)用于定量數(shù)據(jù)(如溫度,價(jià)格或速度)和定性數(shù)據(jù)(如類別,風(fēng)味和表達(dá)式)。

這些圖形屬性包括:

  1. 形狀
  2. 顏色
  3. 尺寸
  4. 面積
  5. 體積(容積/量)
  6. 長度
  7. 角度
  8. 位置
  9. 方向
  10. 密度

 

表達(dá)不同屬性

多種視覺處理方式可以應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面。例如,條柱的色彩可以表示一個(gè)類別,與此同時(shí)條柱的長度可以表示一個(gè)值(如人口大?。?。

形狀可以用來表示定性數(shù)據(jù)。在該圖表中,每個(gè)類別由一種特定形狀代替(圓形,方形和三角形),這使得比較特定范圍內(nèi)的數(shù)據(jù)或與其他類別數(shù)據(jù)進(jìn)行比較都很容易。

 

形狀

圖表可以通過形狀來以多種不同的方式表達(dá)數(shù)據(jù)。形狀可以被設(shè)計(jì)為一條有趣的曲線,或一個(gè)精確的高保真圖形,以及介于二者之間的其他方式。

 

形狀的精確程度

圖表可以以不同的精度來表示數(shù)據(jù)。用于深入研究的數(shù)據(jù)應(yīng)該(根據(jù)觸摸目標(biāo)的尺寸和相關(guān)可視化要求)使用適合交互的形狀來表示。而用于表達(dá)大致想法或趨勢的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

 

顏色

顏色有四種主要的區(qū)分?jǐn)?shù)據(jù)的方式:

  1. 區(qū)分不同的類別
  2. 表示數(shù)量
  3. 突出特定數(shù)據(jù)
  4. 表達(dá)意義

 

顏色區(qū)分類別

在環(huán)形圖中顏色被用于定義類別。

 

顏色表示數(shù)量

在地圖中顏色被用于表示數(shù)據(jù)值。

 

顏色突出數(shù)據(jù)

在散點(diǎn)圖中顏色被用于突出特殊數(shù)據(jù)。

 

焦點(diǎn)區(qū)域

當(dāng)顏色被少量使用時(shí),它可以突出焦點(diǎn)區(qū)域。不建議使用大量的高光顏色,因?yàn)樗鼈儠?huì)分散用戶的注意力。

 

顏色表示意義

 

無障礙

為了適應(yīng)無法區(qū)別色彩差異的用戶,可以使用其他的方法來強(qiáng)調(diào)數(shù)據(jù),例如高對(duì)比度著色、形狀或紋理。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)也有助于澄清其含義,同時(shí)消除了對(duì)說明的需要。

 

線條

圖表中的線條可以傳達(dá)數(shù)據(jù)的質(zhì)量,例如層次結(jié)構(gòu)、突出強(qiáng)調(diào)和對(duì)比。線條的樣式可以采用不同方式,如使用虛線或不同的不透明度。

 

線條可以應(yīng)用于特定的元素中,包括:

  1. 注釋
  2. 預(yù)測元素
  3. 比較工具
  4. 置信區(qū)間
  5. 異常

 

排版

文本可以用于標(biāo)記不同的圖表元素,包括:

  1. 圖表標(biāo)題
  2. 數(shù)據(jù)標(biāo)簽
  3. 軸標(biāo)簽
  4. 說明

層次結(jié)構(gòu)中級(jí)別最高的文本通常是圖表標(biāo)題,最低的是軸標(biāo)簽和說明。

范圍類型 字體 字型 大小
1.圖表標(biāo)題 Roboto 常規(guī) 18pt
圖表副標(biāo)題 Roboto 常規(guī) 14pt
2.數(shù)據(jù)標(biāo)簽 Roboto 常規(guī) 22pt
子標(biāo)簽 Roboto 常規(guī) 14pt
3.軸標(biāo)簽 Roboto 常規(guī) 12pt
4.說明標(biāo)簽 Roboto 常規(guī) 12pt

 

文本粗細(xì)

標(biāo)題和不同的字體粗細(xì)在層次結(jié)構(gòu)中可以傳達(dá)哪些內(nèi)容比另一些更重要(或更不重要)。然而這種處理方式應(yīng)該有節(jié)制地使用,即采用數(shù)量有限的字體樣式。

圖標(biāo)

圖標(biāo)可以表示圖表中不同類型的數(shù)據(jù),以提高圖表的整體可用性。

 

圖標(biāo)可以被用于:

  1. 分類數(shù)據(jù),以區(qū)分組或類別
  2. UI控件及操作,如篩選,縮放,保存和下載
  3. 狀態(tài),例如錯(cuò)誤狀態(tài),無數(shù)據(jù)狀態(tài),完成狀態(tài)和危險(xiǎn)狀態(tài)

當(dāng)在圖表中使用圖標(biāo)時(shí),建議使用普遍可識(shí)別的圖標(biāo),尤其是在表示操作或狀態(tài)時(shí),例如:保存,下載,完成,錯(cuò)誤和危險(xiǎn)。

 

在傳達(dá)意義時(shí)圖標(biāo)補(bǔ)充了顏色的意義。

 

有標(biāo)記的軸

有標(biāo)記的軸或多個(gè)軸能夠指示數(shù)據(jù)所展示的規(guī)?;蚍秶?。例如,折線圖展示的是沿水平和豎直方向標(biāo)記的軸的范圍內(nèi)的值。

 

條形圖基線

條形圖應(yīng)該從基線(y軸上的起始值)上的0開始。從不為0的基線開始可能會(huì)導(dǎo)致數(shù)據(jù)被錯(cuò)誤地感知。

 

軸標(biāo)簽

標(biāo)簽的使用應(yīng)該反映圖表中最重要的數(shù)據(jù)細(xì)節(jié)。軸的標(biāo)簽應(yīng)該根據(jù)需要,并在用戶界面中以一致的方式使用。它們的存在不應(yīng)該妨礙圖表的閱讀。

 

文本方向

在圖表中文本標(biāo)簽應(yīng)該按水平方向放置,以保證其易于閱讀。

文本標(biāo)簽不應(yīng)該:

  1. 被旋轉(zhuǎn)
  2. 垂直堆疊

 

說明和注釋

說明和注釋描述圖表的信息。注釋應(yīng)該突出顯示數(shù)據(jù)點(diǎn)、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

  1. 注釋
  2. 說明

 

在桌面設(shè)備上,建議在圖表下方放置說明。而在移動(dòng)設(shè)備中,建議將說明放置在圖表上方,以便在交互過程中保持說明可見。

 

標(biāo)簽和說明

在簡單的圖表中,圖表元素可以被直接標(biāo)記。但是,密集的圖表(或較大圖表組中的部分)可以在說明中顯示標(biāo)簽。

 

小型顯示器

在可穿戴設(shè)備(或其他小型顯示屏)上顯示的圖表應(yīng)該是桌面端或移動(dòng)端圖表的簡化版。

行為

圖表為用戶提供了可以控制所展示數(shù)據(jù)的交互模式。這些模式讓用戶關(guān)注圖表中的特定值或特定范圍。

以下推薦的交互模式、樣式和效果(如觸覺反饋)可以提高用戶對(duì)圖表數(shù)據(jù)的理解:

  1. 逐級(jí)展開 提供了一種清晰的途徑來揭示細(xì)節(jié),可按需展示。
  2. 直接操作允許用戶直接對(duì)UI元素進(jìn)行操作,以減少屏幕上所需的操作步數(shù),直接操作包括:縮放和平移,分頁,數(shù)據(jù)控件。
  3. 改變透視圖可以使一項(xiàng)設(shè)計(jì)服務(wù)于不同的用戶和數(shù)據(jù)類型,例如數(shù)據(jù)控件和移動(dòng)。

 

逐級(jí)展開

使用逐級(jí)展開的方式顯示圖表細(xì)節(jié),能夠允許用戶根據(jù)需要查看特定的數(shù)據(jù)點(diǎn)。

 

縮放和平移

縮放和平移是圖表中流行的交互方式,它們影響用戶研究數(shù)據(jù)和探索圖表UI的密切程度。

 

縮放

縮放改變了UI顯示的距離。而設(shè)備類型則決定縮放的執(zhí)行方式。

  1. 在桌面端,通過點(diǎn)擊并拖動(dòng)或滾動(dòng)的方式實(shí)現(xiàn)縮放
  2. 在移動(dòng)端,使用雙指捏放的手勢來實(shí)現(xiàn)縮放

當(dāng)縮放不是主要操作時(shí),(在桌面端)可以通過單擊并拖動(dòng)或(在移動(dòng)端)通過雙擊來實(shí)現(xiàn)相同效果。

 

平移

平移能夠讓用戶探索超出屏幕之外的UI。應(yīng)該以對(duì)顯示數(shù)據(jù)有意義的方式對(duì)其進(jìn)行約束。例如,如果一張圖表的一個(gè)維度比另一個(gè)維度更重要,那么平移的方向可以僅限于更重要的維度方向上。

平移操作通常與縮放配合使用。

在移動(dòng)端,通常通過手勢進(jìn)行平移,例如單指滑動(dòng)。

 

分頁

在移動(dòng)端上,分頁是一種常見的模式,允許用戶通過左右滑動(dòng)查看上一張或下一張圖表。

視頻播放器
00:00
00:09

在移動(dòng)端,用戶可以向右滑動(dòng)查看前一天的內(nèi)容。

 

數(shù)據(jù)控件

可以使用切換控件、選項(xiàng)卡和下拉列表篩選或更改數(shù)據(jù)。

當(dāng)用戶調(diào)整控件時(shí),這些控件也可以顯示度量。

視頻播放器
00:00
00:05

切換控件、選項(xiàng)卡和下拉列表意味著可以篩選或更改數(shù)據(jù)。

 

動(dòng)效

動(dòng)效可以加強(qiáng)并鞏固數(shù)據(jù)間的關(guān)系以及用戶和數(shù)據(jù)的交互方式。動(dòng)效應(yīng)該有目的地(而不是裝飾性地)被使用,以表達(dá)不同狀態(tài)和空間之間的關(guān)系。

動(dòng)效應(yīng)該合乎邏輯,平穩(wěn)且能夠快速響應(yīng),不妨礙用戶的體驗(yàn)旅程。

 

視頻播放器
00:00
00:06

在這一案例中,數(shù)據(jù)的動(dòng)效設(shè)置在切換按天顯示和按周顯示的時(shí)候。在切換的過程中不顯示所選日期范圍之外的數(shù)據(jù),從而降低了圖表復(fù)雜性。

視頻播放器
00:00
00:06

此處的動(dòng)效顯示了兩張不同圖表之間的聯(lián)系。

 

空狀態(tài)

空白的圖片和表格可以顯示一些表明在數(shù)據(jù)可用時(shí)期望發(fā)生的內(nèi)容。

在適用的情況下,角色動(dòng)畫能夠帶來愉悅感和激勵(lì)。

 

視頻播放器
00:00
00:17

角色動(dòng)畫豐富了空白圖片。

 

儀表盤

數(shù)據(jù)可視化可以在一系列的多個(gè)圖表中展現(xiàn),這在UI中被稱為儀表盤。多個(gè)單獨(dú)的圖表有時(shí)比一個(gè)復(fù)雜的圖表能夠更好地傳達(dá)一個(gè)故事。

 

儀表盤設(shè)計(jì)

儀表盤的目的應(yīng)反映在其布局、樣式和交互模式中。儀表盤的設(shè)計(jì)應(yīng)該適應(yīng)它的使用方式,無論它是一個(gè)演示工具還是一個(gè)深入研究數(shù)據(jù)的工具。

一個(gè)儀表盤應(yīng)該:

  1. (通過布局)優(yōu)先考慮最重要的信息
  2. 顯示根據(jù)層次結(jié)構(gòu)(使用顏色、位置、大小和視覺權(quán)重)排序的信息焦點(diǎn)

 

應(yīng)該根據(jù)數(shù)據(jù)提出的問題對(duì)信息進(jìn)行優(yōu)先級(jí)排序。在本案例所示的操作儀表盤中,考慮了以下的用戶問題:

  1. 需要被注意的問題
  2. 問題發(fā)生的時(shí)間
  3. 問題發(fā)生的位置
  4. 受問題影響的其他變量

 

分析型儀表盤

分析型儀表盤能夠讓用戶探索多個(gè)數(shù)據(jù)集并發(fā)現(xiàn)趨勢。通常這些儀表盤包括復(fù)雜的圖表,這些圖表能夠發(fā)現(xiàn)數(shù)據(jù)細(xì)節(jié)。

使用情況包括:

  1. 強(qiáng)調(diào)隨時(shí)間變化的趨勢
  2. 回答“為什么”和“如果……怎樣”的問題
  3. 預(yù)測
  4. 創(chuàng)建深入的報(bào)告

 

分析型儀表盤的案例有:

  1. 跟蹤隨時(shí)間變化的廣告活動(dòng)表現(xiàn)
  2. 跟蹤產(chǎn)品在整個(gè)生命周期中的銷售和收益
  3. 顯示城市人口隨時(shí)間改變的趨勢
  4. 跟蹤隨時(shí)間變化的氣候數(shù)據(jù)

 

操作型儀表盤

操作型儀表板旨在回答一組預(yù)定義的問題。它們通常用于完成與監(jiān)視相關(guān)的任務(wù)。

在大多數(shù)情況下,這種類型的儀表盤會(huì)把當(dāng)前信息安排在一組簡單的圖表中。

使用情況包括:

  1. 根據(jù)目標(biāo)跟蹤當(dāng)前進(jìn)度
  2. 實(shí)時(shí)跟蹤系統(tǒng)表現(xiàn)

 

操作型儀表盤的案例有:

  1. 跟蹤呼叫中心活動(dòng),如呼叫量、等待時(shí)間、呼叫長度或呼叫類型
  2. 監(jiān)視云端應(yīng)用程序的運(yùn)行情況
  3. 顯示股票市場表現(xiàn)
  4. 監(jiān)視賽車的遙測數(shù)據(jù)

 

演示型儀表盤

演示型儀表板提供了關(guān)于感興趣主題的詳細(xì)快照。

這些儀表板通常包括一些小圖表或記分卡,通過動(dòng)態(tài)標(biāo)題來解釋每個(gè)支持圖表中提供的趨勢和見解。

使用情況包括:

  1. 提供關(guān)鍵績效的指標(biāo)概述
  2. 創(chuàng)建高級(jí)執(zhí)行摘要

 

展示型儀表盤的案例有:

  1. 提供投資帳戶表現(xiàn)的概述
  2. 提供產(chǎn)品銷售和市場份額數(shù)據(jù)摘要


譯者:杜雅黎

 

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》Material Design Data Visualization 數(shù)據(jù)可視化

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



數(shù)據(jù)可視化設(shè)計(jì)師如何建立靈感庫?

seo達(dá)人


 

一、前言

與其他相對(duì)成熟的設(shè)計(jì)領(lǐng)域(UI、插畫等)相比,數(shù)據(jù)可視化尚顯小眾,在一個(gè)細(xì)分、小眾、不成熟的領(lǐng)域里做設(shè)計(jì),“怎么去找靈感”確實(shí)是一些小伙伴經(jīng)常遇到的問題。本文以本人工作經(jīng)驗(yàn)為基礎(chǔ),系統(tǒng)性分析了該問題及對(duì)應(yīng)的解決方法,并將其整理成文與大家分享,這在數(shù)據(jù)可視化行業(yè)內(nèi)尚屬首次。當(dāng)然了,本文雖面向數(shù)據(jù)可視化設(shè)計(jì)師群體,但其中的方法是通用的,運(yùn)用在其他設(shè)計(jì)領(lǐng)域也完全事半功倍。

 

二、本文結(jié)構(gòu)概覽

本文圍繞“搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新” 五大塊展開。下圖向展示了這篇文章的知識(shí)結(jié)構(gòu),大家可根據(jù)思維導(dǎo)圖,選擇自己感興趣的部分閱讀,也可把這張圖作為知識(shí)卡片收藏,幫助自己梳理建立靈感庫的思路和方法。

 

三、靈感庫建立的基礎(chǔ)

靈感庫的建立大體上分主動(dòng)與被動(dòng)兩種。主動(dòng),是我們有意識(shí)的收集、整理相關(guān)作品素材形成靈感庫的過程;被動(dòng),指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因?yàn)楹笳吒豢煽?,影響因素較多,比如你所處的圈子、社交網(wǎng)絡(luò)使用習(xí)慣等都會(huì)影響被動(dòng)獲取的質(zhì)量。所以今天,我跟大家分享的主要是第一種主動(dòng)建立靈感庫的方法,而這個(gè)方法的核心我把它歸納為兩個(gè)字 :搜索。

搜索是現(xiàn)在這個(gè)時(shí)代我們主動(dòng)獲取信息的最主要手段,每天我們通過各類關(guān)鍵詞在各類APP上獲取各樣的服務(wù)、產(chǎn)品和資源。靈感的主動(dòng)收集就是一個(gè)通過關(guān)鍵詞搜索,然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實(shí)就是我們能不能用好搜索。不同的搜索方法、渠道、關(guān)鍵詞極大的影響著我們獲取到的信息的質(zhì)量,這也是本篇文章為何一搜索核心展開的原因。

如下圖所示,同樣的關(guān)鍵詞在不同的搜索渠道,得到的內(nèi)容質(zhì)量是不一樣的。

 

四、靈感庫建立的第一步:搜什么?

互聯(lián)網(wǎng)很大,如果沒有明確的目標(biāo),找靈感的過程就跟刷抖音一樣,恍恍惚惚幾個(gè)小時(shí),好像點(diǎn)了不少贊,收藏了不少干貨,回頭看其實(shí)并沒有什么特別有價(jià)值的東西,所以找靈感要有目標(biāo),有KPI才行,有目標(biāo)就有標(biāo)準(zhǔn),有標(biāo)準(zhǔn)才有方向和效率。

如上圖所示,我對(duì)數(shù)據(jù)可視化這個(gè)行業(yè)術(shù)語做了分析和拆解,這樣做的目的是為之后搜索關(guān)鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關(guān)內(nèi)容時(shí),思路總是局限在“可視化”這個(gè)關(guān)鍵詞上,但是直接使用這個(gè)關(guān)鍵詞搜索,大多數(shù)時(shí)候并不能找到我們心里預(yù)期的結(jié)果,或者搜索多次后,看到的都是之前見過的作品,很難突破邊界,獲取更多新的靈感。造成的這個(gè)結(jié)果的原因顯而易見,就是關(guān)鍵詞的匱乏,不知道搜什么。而對(duì)“大屏數(shù)據(jù)可視化”進(jìn)行解析之發(fā)現(xiàn),以往的搜索,我們只使用了四個(gè)方向里的其中一個(gè),其它三個(gè)方向并沒有很好的利用?,F(xiàn)在,我們以每個(gè)方向上的核心關(guān)鍵詞為基礎(chǔ),去豐富它的下一級(jí)關(guān)鍵詞,這樣就會(huì)像枝椏新生一樣,在各個(gè)節(jié)點(diǎn)延伸出豐富的詞匯。

 

媒介

媒介就是數(shù)據(jù)可視化設(shè)計(jì)最終落地在什么平臺(tái),一般來講,大屏數(shù)據(jù)可視化設(shè)計(jì)落地的媒介當(dāng)然就是大屏了,以它為核心做關(guān)鍵詞的發(fā)散,可以產(chǎn)生其它幾個(gè)二級(jí)關(guān)鍵詞

 

數(shù)據(jù)類型

數(shù)據(jù)類型是主要數(shù)據(jù)的特征或來源,不同的數(shù)據(jù)類型,在可視化設(shè)計(jì)時(shí)有不同的視覺特征。比如地理信息的數(shù)據(jù)可視化,一般會(huì)與道路、河流、人造建筑、某區(qū)域內(nèi)地標(biāo)等一起出現(xiàn),會(huì)有豐富的3D場景、動(dòng)效,而圖表信息相對(duì)較少;報(bào)表類信息的數(shù)據(jù)可視化,則主要以更好的展示報(bào)表內(nèi)大量數(shù)據(jù)為主,所以強(qiáng)調(diào)信息的層級(jí)、主次,設(shè)計(jì)的目標(biāo)是要減少用戶認(rèn)知負(fù)擔(dān)、引起用戶閱讀興趣,促進(jìn)數(shù)據(jù)內(nèi)容的有效傳達(dá),因而會(huì)較少使用動(dòng)畫,其次,因數(shù)據(jù)較多,也很難對(duì)應(yīng)到某個(gè)具體的物理場景,故3D模型等也較少使用。

所以以數(shù)據(jù)類型為核心,拓展的二級(jí)關(guān)鍵詞會(huì)讓搜索結(jié)果更精準(zhǔn),更有針對(duì)性。

 

設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格就是視覺設(shè)計(jì)整體上給人的想象和感受,好的設(shè)計(jì)就跟一個(gè)人一樣,一定是有自己鮮明的個(gè)性和氣質(zhì),能夠引起人的共鳴和向往的,唯有如此,設(shè)計(jì)才能吸引人,從而影響人,并最終傳遞自己的觀點(diǎn)給觀者。所以設(shè)計(jì)風(fēng)格的定義是視覺設(shè)計(jì)中最重要的一環(huán),也是最需要靈感和創(chuàng)造力的部分。

作為數(shù)據(jù)可視化設(shè)計(jì)師,我們想要找到的參考是那些具有數(shù)據(jù)可視化風(fēng)格的作品,但這些作品本身并不一定是在講數(shù)據(jù)可視化的內(nèi)容,只要作品某部分的設(shè)計(jì)有我們想要的那種“感覺”,就可以了,而這個(gè)作品可能是某段影片、某個(gè)動(dòng)效、某種圖形、某個(gè)元素或聲音?;谶@樣的思路,我歸納了一些具有數(shù)據(jù)可視化風(fēng)格但不一定都是數(shù)據(jù)可視化作品的關(guān)鍵詞。這就是一個(gè)特別有意思的點(diǎn),我門想要找到某個(gè)內(nèi)容,但當(dāng)我們用最貼切它的那個(gè)名字去找時(shí),卻不一定能找到最能代表它風(fēng)格的作品。所以當(dāng)我們跳出數(shù)據(jù)可視化這樣一個(gè)具體的點(diǎn),而從更抽象的設(shè)計(jì)風(fēng)格這個(gè)層面去看待它的時(shí)候,就能更好的的發(fā)散思維、拿到了更多好的關(guān)鍵詞,找到更多的刺激點(diǎn)。

以設(shè)計(jì)風(fēng)格為例,我們從它的節(jié)點(diǎn)上找到任意一個(gè)關(guān)鍵詞:SCI-FI,然后搜索這個(gè)關(guān)鍵詞,我們看看搜索到的結(jié)果。

 

業(yè)務(wù)場景

業(yè)務(wù)場景簡單理解就是在什么情況下要解決什么問題,它是數(shù)據(jù)可視化的落腳點(diǎn),也是數(shù)據(jù)可視化的商業(yè)價(jià)值所在。每個(gè)公司或團(tuán)隊(duì),都會(huì)有自己專注的業(yè)務(wù)方向,所以在工作中找這方面的靈感,從業(yè)務(wù)場景入手效果最好。

簡單回顧下,通過上部分文章的分析,我們從媒介、數(shù)據(jù)類型、設(shè)計(jì)風(fēng)格、業(yè)務(wù)場景四個(gè)方面形成了一個(gè)數(shù)據(jù)可視化的關(guān)鍵詞的矩陣。這個(gè)矩陣是建立靈感庫的基礎(chǔ),之后我們每當(dāng)我們有新的關(guān)鍵詞要加入,或者有效果不好的關(guān)鍵詞需要剔除,只需修改、迭代這個(gè)關(guān)鍵詞矩陣即可。有了這個(gè)關(guān)鍵詞矩陣后,我們?nèi)绾卫盟瓿梢淮位趯?shí)際需求的靈感搜集?下面給大家舉個(gè)小栗子來看一下怎么用。

 

一句話描述業(yè)務(wù)需求

首先用盡可能簡短的一句話描述業(yè)務(wù)方訴求。

一句話描述業(yè)務(wù)訴求后,我們把業(yè)務(wù)需求帶到關(guān)鍵詞矩陣中,就會(huì)獲得如下圖的結(jié)果:

可以看到,帶入需求后,按樹狀結(jié)構(gòu)去匹配與需求相吻合的關(guān)鍵詞,就可拿到明確的搜索指引目錄,然后我們按搜索指引,開始靈感收集即可。

這里有個(gè)小小的點(diǎn),就是為什么要盡可能用簡短的一句話來描述業(yè)務(wù)方訴求,

  • 1、這樣做可以把那些優(yōu)先級(jí)低的干擾因素都過濾掉,留下真正核心的訴求,越是能簡短的概括,越能真正把握需求的核心。我個(gè)人一直以來與業(yè)務(wù)方溝通需求后,都會(huì)嘗試用一句話概括,若需求方認(rèn)可,開始設(shè)計(jì)工作;不認(rèn)可,則繼續(xù)溝通。
  • 2、對(duì)于數(shù)據(jù)可視化設(shè)計(jì)師來講,明確自己在工作流中的角色、承擔(dān)的責(zé)任、要解決的問題以及最終交付怎樣的產(chǎn)出尤為重要,因?yàn)橹挥星宄诉@些,這樣我們才能有效分配自己的時(shí)間、確定跟上下游的協(xié)作策略,避免盲目的沒有KPI的設(shè)計(jì)。

 

五、靈感庫建立的第二步:去哪兒搜?

合適的關(guān)鍵詞是第一步,它保證了我們搜索結(jié)果的有效性,而去哪兒搜決定了我們搜索結(jié)果的質(zhì)量。如下圖,針對(duì)數(shù)據(jù)可視化設(shè)計(jì)師,我對(duì)“去哪兒搜”這個(gè)問題按我自己的從業(yè)經(jīng)驗(yàn)做了梳理。

從我的歸納里大家可以發(fā)現(xiàn),我把數(shù)據(jù)可視化設(shè)計(jì)師的靈感來源分為了四大塊(其它行業(yè)的設(shè)計(jì)也大體上就這四塊),分別是:設(shè)計(jì)網(wǎng)站、產(chǎn)品或服務(wù)提供方、獨(dú)立設(shè)計(jì)師或工作室、視頻網(wǎng)站。

 

第一部分:設(shè)計(jì)網(wǎng)站

設(shè)計(jì)網(wǎng)站部分列出的都是設(shè)計(jì)師們都熟悉的幾個(gè)站點(diǎn),在之前,大多數(shù)靈感的收集都可在花瓣完成,但花瓣最近幾次改版之后,已經(jīng)沒有以前那么好用了。對(duì)數(shù)據(jù)可視化方面的素材搜索,個(gè)人經(jīng)驗(yàn)下,強(qiáng)烈推薦大家去behance,雖然behance訪問方面也面臨一些困難,但是,但凡你想真的了解一些好的設(shè)計(jì),這個(gè)網(wǎng)站,是你一定要想辦法去經(jīng)常逛逛的。至于為啥不推薦其它幾個(gè)網(wǎng)站,倒并不是說其它網(wǎng)站不能用,只是搜索的結(jié)果相對(duì)局限。針對(duì)這塊的具體分析,我會(huì)在文末的Q&A里進(jìn)行。

 

第二部分:產(chǎn)品或服務(wù)提供方

我們知道,任何商業(yè)設(shè)計(jì),一定是有一個(gè)業(yè)務(wù)或應(yīng)用場景來支撐的,一定程度上設(shè)計(jì)就是在圍繞業(yè)務(wù)場景提供視覺、交互、用戶體驗(yàn)、品牌等方面的解決方案,也就是說設(shè)計(jì)是服務(wù)于業(yè)務(wù)場景的,反過來講,服務(wù)于這個(gè)業(yè)務(wù)場景的就只有設(shè)計(jì)師么?當(dāng)然不是。在市場條件下,服務(wù)的提供方除了像設(shè)計(jì)師這樣的個(gè)體外,更多的是我們熟悉的另一個(gè)機(jī)構(gòu)(組織),這個(gè)組織的名字叫“公司”。公司把大量專業(yè)的人員組織在一起,通過優(yōu)勢互補(bǔ)、強(qiáng)力協(xié)作,提供服務(wù)、解決需求方問題。對(duì)于數(shù)據(jù)可視化設(shè)計(jì)來講,企業(yè)當(dāng)然也參與其中。所以我們找靈感去服務(wù)提供方也是一個(gè)高效的方法。企業(yè)要證明自己的實(shí)力、要讓潛在客戶了解自己,必然會(huì)花大量的資源做營銷做推廣,而最常見的推廣的落腳點(diǎn)就是企業(yè)官網(wǎng)。很多做數(shù)據(jù)可視化的公司,會(huì)在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點(diǎn)、業(yè)務(wù)實(shí)力的案例,而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計(jì)作品了,沒有人會(huì)在自己的臉上放垃圾上去,對(duì)不? 所以但凡有案例展示的官網(wǎng),案列基本都是最典型最好的設(shè)計(jì),所以從這些案例中找靈感,也是一個(gè)有意思且有效的方法和途徑。

 

阿里DataV

 

Hightopo

 

Tob.Design

 

第三部分:獨(dú)立設(shè)計(jì)師或工作室

獨(dú)立設(shè)計(jì)師一般給人的感覺是什么呢?就是在自己垂直的領(lǐng)域內(nèi)極致牛逼,近乎神一樣的存在。獨(dú)立設(shè)計(jì)師要能順利“獨(dú)立”,當(dāng)然是在設(shè)計(jì)能力、個(gè)人品牌建設(shè)、客戶維護(hù)、運(yùn)營管理等方面都有比較硬核的水準(zhǔn),所以這部分設(shè)計(jì)師作品一般不會(huì)差。而工作室一般都是一個(gè)或者幾個(gè)知名設(shè)計(jì)師組成的團(tuán)隊(duì),在管理方面更“公司化”一些,這樣的工作產(chǎn)出也會(huì)比較穩(wěn)定,水平較高。就可視化(包括類可視化)領(lǐng)域來講,個(gè)人比較認(rèn)可和喜歡的工作室有以下幾個(gè)(歡迎大家評(píng)論里補(bǔ)充,或參與文末問卷調(diào)查),Ta們的作品風(fēng)格鮮明,找靈感也是不錯(cuò)的參考。

 

dennisschafer

 

huds+guis

以上對(duì)于“去哪兒搜”的分析,我相信可以給大家很好的啟發(fā):我們?cè)O(shè)計(jì)師尋找好的作品并不一定要通過設(shè)計(jì)相關(guān)網(wǎng)站進(jìn)行,你看大家都能看到的東西,即使有突破,那也是大家所熟悉的樣子,你只有從圈子里跳出去,看80%的人看不到的東西,你的靈感才有機(jī)會(huì)與眾不同,標(biāo)新立異。

 

六、靈感庫建立的第三步:怎么搜?

前面兩部分,我們介紹了搜什么(關(guān)鍵詞的定義),去哪兒搜(合適的素材來源),接下來以behance為例跟大家聊聊怎么搜,介紹一些具體的方法。我們的目標(biāo)是盡可能少的點(diǎn)擊搜索按鈕,且盡可能多的找到符合自己預(yù)期的有質(zhì)量的作品。要做到這點(diǎn),首先我改掉自己以往的不好的搜索習(xí)慣。

我知道我很多小伙伴都是輸入一個(gè)關(guān)鍵詞,然后看結(jié)果頁,沒有滿意的就換一個(gè)關(guān)鍵詞繼續(xù),這樣做很低效,容易漏掉結(jié)果頁中符合你預(yù)期的好作品,并且也容易造成關(guān)鍵詞的浪費(fèi),通過第一部分關(guān)鍵詞矩陣的介紹,大家都知道,關(guān)鍵詞是被精確定位推導(dǎo)而來的,若不停的換關(guān)鍵詞,很快就會(huì)出現(xiàn)關(guān)鍵詞用完了但是依然沒有找到好靈感的囧局,所以榨干每一個(gè)關(guān)鍵詞是高效搜索的重要手段,具體怎么做到這一點(diǎn),我個(gè)人有以下思路給大家參考:

 

1、直搜關(guān)鍵詞:快速瀏覽、標(biāo)記自己感興趣的項(xiàng)目,稍后再做整理

通過這個(gè)結(jié)果頁面我們看到,搜索結(jié)果包含“所有結(jié)果、項(xiàng)目、人物、情緒板”四個(gè)選項(xiàng),默認(rèn)顯示所有結(jié)果,但這個(gè)意義不大,重點(diǎn)在項(xiàng)目跟情緒板。

 

項(xiàng)目

切換到項(xiàng)目標(biāo)簽,項(xiàng)目標(biāo)簽下展示的都是完整的項(xiàng)目作品,這是可以快速瀏覽,看到感興趣的內(nèi)容就把它標(biāo)記到新的頁面,等所有瀏覽查看結(jié)束后再細(xì)看每個(gè)項(xiàng)目,并對(duì)項(xiàng)目做進(jìn)一步的分類和整理。

項(xiàng)目標(biāo)簽下提供的篩選項(xiàng)很實(shí)用,分類依據(jù)推薦“好評(píng)最多+本月”的組合,以月為單位既可選到大家都比較認(rèn)可的新作品也避免了因數(shù)據(jù)波動(dòng)造成部分作品質(zhì)量差的情況?!耙巡哒埂鳖愃普究峄騏I中國的首頁推薦,是被官方編輯認(rèn)可和推薦的作品,一般都會(huì)有很高的質(zhì)量,但時(shí)間上可能會(huì)比較舊。

在篩選器里面,有另一個(gè)比較實(shí)用的功能叫做“按色彩篩選”,如果客戶或者業(yè)務(wù)方對(duì)主色調(diào)有要求,就可以通過色彩的篩選,找到更符合我們業(yè)務(wù)需求的相關(guān)作品借鑒,或者設(shè)計(jì)師自己對(duì)某類顏色的搭配總是調(diào)整不好,也可以通過篩選,看看其它同行是如何處理這類色彩的,這也是一個(gè)有針對(duì)性訓(xùn)練和學(xué)習(xí)的方法。

 

情緒版

情緒版就是花瓣里的畫板,它是其Ta設(shè)計(jì)師采集的同類主題的作品合集,用法也跟花瓣一模一樣,唯一的不同是花瓣可以采集站外的內(nèi)容到畫板,而behance只能采集站內(nèi)的內(nèi)容,其余兩者完全一致。

情緒版默認(rèn)是按時(shí)間的先后順序排列的,所以可以通過篩選項(xiàng),將排列順序調(diào)整為“關(guān)注人數(shù)最多”,正常來講,關(guān)注人數(shù)越多的情緒版收集的作品質(zhì)量也越高。

 

2、利用作品標(biāo)簽聚合同一主題作品,并集中瀏覽

我們知道,像站酷、UI中國等平臺(tái),用戶上傳作品時(shí),都需要給作品添加一些標(biāo)簽,這些標(biāo)簽的作用就是幫助網(wǎng)站做人工的作品分類,我們點(diǎn)擊某一標(biāo)簽就能看到使用了同一標(biāo)簽的所有作品,可以說標(biāo)簽是比搜索關(guān)鍵詞高效的內(nèi)容檢索手段。每一個(gè)作品下,都顯示了作者上傳作品時(shí)填寫的標(biāo)簽,通過點(diǎn)擊這些標(biāo)簽我們將搜索結(jié)果引入到了另一個(gè)更純粹有效的內(nèi)容領(lǐng)域。

更有趣的是,標(biāo)簽同樣支持項(xiàng)目、情緒版這兩個(gè)層面的進(jìn)一步分類,同時(shí)也支持之前介紹過得分類篩選功能。也就是說,在最開始搜索時(shí)找準(zhǔn)一個(gè)關(guān)鍵詞,之后通過情緒板、作品標(biāo)簽等方式就能關(guān)聯(lián)起來海量的內(nèi)容。

 

3、按圖索驥:Ta推薦的作品

通過前兩步,我們已找到了一些比較不錯(cuò)的作品,而優(yōu)秀作品的背后當(dāng)然是優(yōu)秀的設(shè)計(jì)師或團(tuán)隊(duì)。所以點(diǎn)進(jìn)作者的主頁看,一般都會(huì)有驚喜的。除了能看到作者自己的作品外,我想說的是另一個(gè)標(biāo)簽“好評(píng)”,好評(píng)這個(gè)標(biāo)簽其實(shí)體現(xiàn)了作者的審美和職業(yè)方向,如果作者本人在領(lǐng)域內(nèi)已經(jīng)足夠?qū)I(yè),那么能被Ta欣賞和點(diǎn)贊的作品大概率也不會(huì)差,所以好評(píng)這個(gè)按鈕,是借助行業(yè)大咖的手幫我們做了一次作品的篩選和收集,點(diǎn)這個(gè)標(biāo)簽進(jìn)去大多數(shù)時(shí)候是不會(huì)讓你失望的,一般都驚喜滿滿。

 

4、Ta關(guān)注的設(shè)計(jì)師:順藤摸瓜,串起一個(gè)行業(yè)的大咖

在今天,每個(gè)設(shè)計(jì)師離自己領(lǐng)域里最頂尖的大咖,只隔著3.75個(gè)人,通過點(diǎn)擊作者的“正在關(guān)注”,你可以看到設(shè)計(jì)師本人還關(guān)注了行業(yè)里的哪些設(shè)計(jì)師,通過這樣的操作3到4次,你會(huì)發(fā)現(xiàn)總有那么幾個(gè)人,會(huì)在這個(gè)略顯復(fù)雜的網(wǎng)絡(luò)中被不同的大咖同時(shí)關(guān)注,那么Ta就是這個(gè)行業(yè)里比較頂尖的人才了。

在“正在關(guān)注”下面會(huì)顯示作者所在團(tuán)隊(duì),因?yàn)楹枚囗?xiàng)目其實(shí)一個(gè)人是很難完成的,大都是好幾個(gè)設(shè)計(jì)師協(xié)作的結(jié)果,所以如果你找到的這個(gè)設(shè)計(jì)師作品足夠牛逼,那說明他的團(tuán)隊(duì)也是很不錯(cuò)的,順便關(guān)注一波就好。

當(dāng)你習(xí)慣這樣摸瓜,一段時(shí)間后這個(gè)行業(yè)里幾乎頂級(jí)的大咖就都在你的關(guān)注列表里了,做到這一步后你就會(huì)有一個(gè)新的收獲,這點(diǎn)我們后面再聊。

 

七、搜索結(jié)果的整理與優(yōu)化

利用前面的搜索方式,我們已經(jīng)找到了不少較為滿意的作品,接下來我們需要再對(duì)這些作品做簡單的篩選整理,把真正符合我們需求的作品整理出來。

我習(xí)慣用網(wǎng)站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網(wǎng)站的情緒板我把它看作是一個(gè)各個(gè)終端通用的網(wǎng)盤。behance提供了兩個(gè)收藏作品的功能:點(diǎn)贊與保存到情緒版。站酷跟ui中國也有同樣的功能。

點(diǎn)贊的作品,會(huì)統(tǒng)一收集到個(gè)人主頁“點(diǎn)贊”標(biāo)簽下,所有作品按時(shí)間排列,比較亂,所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板,由于情緒板是可以分享和被搜索的,所以使用情緒板整理靈感,不僅方便了自己,也益于同行。目前來看,情緒板在behance這個(gè)產(chǎn)品中已經(jīng)跟花瓣中的畫板非常像了,不僅可以采集一個(gè)完整的作品到情緒板,也可以采集作品中某個(gè)單獨(dú)的圖片或視頻到情緒板,這樣的靈活性跟花瓣完全一致,且behance將情緒板被放到了用戶非常容易觸達(dá)的位置,所以在大家的共同努力下,各類情緒板會(huì)越來越豐富,這個(gè)功能也會(huì)更有價(jià)值。

 

八、資源的自我更新與迭代

資源的自我更新

經(jīng)常玩抖音的小伙伴都知道,抖音會(huì)根據(jù)你的點(diǎn)贊、瀏覽等行為,為你推薦符合個(gè)人口味的視頻,而這樣的推薦功能在behance也有,behance會(huì)根據(jù)你點(diǎn)贊收藏的作品、你關(guān)注的人,給你推薦相應(yīng)作品,并且推薦作品是直接顯示在首頁的,每次打開behance,你都會(huì)在網(wǎng)站最直觀的位置看到behance為你推薦的內(nèi)容,這里的內(nèi)容大體上分為兩類,一類是你關(guān)注的設(shè)計(jì)師的作品更新,另一部分基于已經(jīng)關(guān)注的作者推薦相似的作品給你,就我個(gè)人使用體驗(yàn)來講,推薦還是相當(dāng)準(zhǔn)確的。

behance的推薦功能是資源自我更新的一個(gè)重要手段,你關(guān)注的同一領(lǐng)域作者越多,收藏的作品越多,它的推薦就越準(zhǔn)確,這樣就節(jié)省了一些資源搜索的時(shí)間成本。要想獲得好的推薦結(jié)果,我建議你的behance上只關(guān)注一個(gè)領(lǐng)域的作者和作品,以我自己為例,我只關(guān)注數(shù)據(jù)可視化方向的作者和作品,雖然我也喜歡攝影、插畫等,但我主業(yè)是數(shù)據(jù)可視化,所以為了提高首頁推薦作品質(zhì)量,其它兩類我會(huì)去500px等更垂直的網(wǎng)站瀏覽,而不會(huì)在behance上關(guān)注。當(dāng)然,網(wǎng)站只是個(gè)工具,你也可以有自己的用法,與我而言,我關(guān)注的核心是效率。

 

資源的迭代

如果把我們收藏的內(nèi)容比作是云盤里的資源,那么資源并不是越多越好,無論哪種類型的內(nèi)容,當(dāng)內(nèi)容很多的時(shí)候找起來都會(huì)比較麻煩的。我們需要堅(jiān)持做一些工作來不斷減少資源的數(shù)量提高資源的質(zhì)量,少而精是最好的狀態(tài),如此我們就不需要花很多時(shí)間去找某個(gè)內(nèi)容,而已有的內(nèi)容又都能很好的滿足需求。要做到這點(diǎn),我們需要給資源做迭代,所謂迭代就是去掉舊的過時(shí)的內(nèi)容,添加新的更好的。每隔一段時(shí)間,回來翻一翻自己之前收藏的作品,會(huì)發(fā)現(xiàn)有些作品自己已經(jīng)看不上了,因?yàn)樵谧鲮`感收集的過程中,我們的審美會(huì)自然有所提高,當(dāng)輸入的作品樣本越來越多,我們對(duì)作品評(píng)價(jià)的維度也會(huì)更多,之前那些覺得好的作品,現(xiàn)在看來也就會(huì)有缺陷和不滿,這是一個(gè)很正向的結(jié)果,成長就是一個(gè)不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當(dāng)前審美的作品到各個(gè)情緒版。

迭代還意味著我們需要對(duì)那些情緒版的標(biāo)簽做維護(hù),對(duì)那些命名跟內(nèi)容不大匹配的情緒板,要及時(shí)更新更恰當(dāng)?shù)拿?。同時(shí),也要對(duì)情緒板內(nèi)容的類別做維護(hù),比如動(dòng)畫、視頻類素材最好不要跟圖片類素材放一起,因?yàn)榱斜淼姆饷鎴D并不能體現(xiàn)作品詳情里是否包含視頻等內(nèi)容,所以作品很多時(shí)找起來就比較麻煩,按內(nèi)容的不同類型把內(nèi)容分別收納進(jìn)不同的情緒版可以給我們后續(xù)的應(yīng)用節(jié)省不少時(shí)間。

 

九、Q&A

1、behance在國內(nèi)訪問受限,為何要以它為例做靈感收集的方法介紹?

首先,Behance國內(nèi)訪問不暢,并不影響它是世界范圍最優(yōu)秀的設(shè)計(jì)師聚集平臺(tái)的事實(shí)。對(duì)于數(shù)據(jù)可視化而言,并不是一個(gè)新興的領(lǐng)域,在國外早已有之,并且相對(duì)成熟,而國內(nèi)相關(guān)作品、經(jīng)驗(yàn)尚少,所以從獲取知識(shí)的角度來看,behance上你能獲取到的數(shù)據(jù)可視化相關(guān)作品或內(nèi)容,不管是數(shù)量還是質(zhì)量上,都要比國內(nèi)的好。

其次,正如文章剛開始我說的那樣,文中介紹的方法對(duì)國內(nèi)的大部分設(shè)計(jì)網(wǎng)站同樣適用,尤其是關(guān)鍵詞的定義、標(biāo)簽的使用、收藏及情緒板(畫板)的使用技巧。綜上,我當(dāng)然是要介紹“更好”的靈感獲取網(wǎng)站給大家,而不是揪著大家熟悉的聊。

 

2、我自己也收集研究了不少優(yōu)秀作品,為何做的時(shí)候還是不知道如何下手?

毋庸置疑,優(yōu)秀的作品建立在良好的審美基礎(chǔ)之上,好的作品看多了審美自然會(huì)有提升,但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個(gè)問題,一個(gè)是刻意練習(xí)的度沒到,另一個(gè)是不會(huì)分析別人好的作品??桃饩毩?xí)聽名字就知道是什么意思,而作品分析就是我們要知道一個(gè)作品之所以讓人眼前一亮,它“亮”在什么地方,就是要具體到細(xì)節(jié),我們?cè)绞悄軌蚣?xì)致的指出那些讓你覺得好的點(diǎn),就越能模仿和借鑒,之后再輔以大量的刻意練習(xí),才會(huì)有效果明顯的提升。那么到底如何去拆解、分析一個(gè)數(shù)據(jù)可視化作品?有幾步?有哪些方面?怎么做?如何應(yīng)用?這一系列問題留待下篇文章繼續(xù)聊。

當(dāng)然了,下篇文章能否順利發(fā)出,還是看大家是否喜歡和支持!


作者:BYMD

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì)師如何建立靈感庫?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



日歷

鏈接

個(gè)人資料

存檔