本期的大屏案例為“北京市電商消費(fèi)大數(shù)據(jù)”，主要呈現(xiàn)某電商平臺(tái)618購(gòu)物節(jié)的信息數(shù)據(jù)。
如銷售總金額、區(qū)域銷售排行、男女比例、年齡分布、品牌銷售排行、歷史銷售趨勢(shì)等等。
設(shè)計(jì)任何產(chǎn)品首先要做的就是了解業(yè)務(wù)和需求分析，本次的案例需求非常簡(jiǎn)單明了，只需做各指標(biāo)數(shù)據(jù)的展示。
無(wú)交互的圖表設(shè)計(jì)要點(diǎn)
無(wú)交互的大屏展示，在圖表設(shè)計(jì)上，需要按沒有交互的形式設(shè)計(jì)。
例如不能因?yàn)閿?shù)據(jù)過多，而隱藏一些通過交互才能看到的數(shù)據(jù)。
對(duì)于一組無(wú)法展示全的數(shù)據(jù)，可以只提煉最重要的指標(biāo)數(shù)據(jù)進(jìn)行展示，也可以通過動(dòng)畫形式，播放展示等等。
實(shí)時(shí)數(shù)據(jù)和事后數(shù)據(jù)的區(qū)別
本案例提供的是618購(gòu)物節(jié)事后的數(shù)據(jù)，所以在大屏的設(shè)計(jì)上可以根據(jù)真實(shí)的數(shù)據(jù)來(lái)設(shè)計(jì)呈現(xiàn)。
事后數(shù)據(jù)呈現(xiàn)，在設(shè)計(jì)上可以根據(jù)真實(shí)的數(shù)據(jù)來(lái)定義圖表，例如可以根據(jù)數(shù)據(jù)大小長(zhǎng)度，精準(zhǔn)的定義設(shè)計(jì)空間。
實(shí)時(shí)數(shù)據(jù)顧名思義指的就是數(shù)據(jù)在實(shí)時(shí)傳輸，產(chǎn)生了數(shù)據(jù)就要立即展示出來(lái)，從業(yè)務(wù)角度上可能要做其他的設(shè)計(jì)預(yù)案。
例如異常數(shù)據(jù)的處理，有突破性的數(shù)據(jù)是否設(shè)計(jì)動(dòng)畫營(yí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)保、未來(lái)、健康的綠色調(diào)。
電商、新零售行業(yè)需要烘托購(gòu)物熱鬧的場(chǎng)景，所以靚麗的暖色調(diào)更為合適。
過于冰冷理性的色調(diào)，并不是電商產(chǎn)品所追求的調(diào)性，更不符合觀者對(duì)購(gòu)物場(chǎng)景的心理認(rèn)知。
但是由于可視化大屏的面積過大，主色調(diào)不論什么顏色，背景色通常要用暗色系，以減少對(duì)觀者視覺上的沖擊。
深色背景能夠有效烘托暖色調(diào)的可視化元素，起到對(duì)比、聚焦視覺的作用。
暖色調(diào)元素可以烘托購(gòu)物特征的氛圍，如紅色、橙色、紫色、都是有效的色調(diào)，但如果都是暖色元素較容易視覺疲勞。
所以暖色中搭配一定比例的冷色，能夠緩解視覺上的不適感。
冷暖色在大屏設(shè)計(jì)中的搭配有很多技法，下面我們來(lái)解析色彩搭配。
色彩解析
首先分析色環(huán)圖，了解一下色彩知識(shí)，30度為同類色、60度為鄰近色、120度對(duì)比色、180度互補(bǔ)色。
電商大屏冷色元素通常選用藍(lán)色系色調(diào)，通過上圖對(duì)色環(huán)的認(rèn)識(shí)，來(lái)看下藍(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)烈的排斥感。
從以上的色彩分析來(lái)看，電商大屏若呈現(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)了你中有我，我中有你的感覺。
不難發(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ì)比來(lái)看，第二張?zhí)幚淼谋鹊谝粡堃呒?jí)一些，仔細(xì)看會(huì)發(fā)現(xiàn)，第二張背景色偏紫色。
紅紫為鄰近色，這樣標(biāo)題的紅色和背景就形成了較為和諧的過渡，而第一張暗藍(lán)色的背景跟標(biāo)題對(duì)比強(qiáng)烈，略顯生硬。
反面案例解析
舉個(gè)反面案例，看下圖最大的問題就是過度烘托了主題主題氛圍，導(dǎo)致整個(gè)畫面太過艷麗，沒有細(xì)節(jié)。
更不用說(shuō)數(shù)據(jù)的清晰展示了，這已經(jīng)違背了大屏可視化設(shè)計(jì)，以數(shù)據(jù)信息展示為核心的設(shè)計(jì)理念。
圖片來(lái)源網(wǎng)絡(luò)(反面案例)
大屏設(shè)計(jì)用色調(diào)烘托主題本身很好，但對(duì)于艷麗的暖色調(diào)，要適當(dāng)搭配一定比例的鄰近色和對(duì)比色。
這樣能大大緩解觀者的視覺疲勞，展示出細(xì)節(jié)，大屏看起來(lái)色彩也會(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)要突出，朝陽(yáng)區(qū)消費(fèi)占全市75%。
所有區(qū)中朝陽(yáng)的消費(fèi)是No1，所以從這點(diǎn)考慮可以使用全區(qū)地圖來(lái)展示，并且打造朝陽(yáng)區(qū)第一名的儀式感。
打造驚喜感
產(chǎn)品設(shè)計(jì)中給觀者驚喜感，無(wú)疑是好的體驗(yàn)，本次案例通過增加了兩道光線動(dòng)畫，打造微妙的驚喜感。
這樣的設(shè)計(jì)給大屏增添了動(dòng)感，看起來(lái)更富有生機(jī)，兩道光線滑向總數(shù)據(jù)指標(biāo)，會(huì)有一種數(shù)據(jù)傳輸?shù)母杏X。
同時(shí)也像滿天繁星的夜空中，劃過的流星一樣，給人帶來(lái)一種悸動(dòng)的體驗(yàn)。
3D圖表的設(shè)計(jì)要點(diǎn)
3D圖表有很強(qiáng)的視覺表現(xiàn)力，是突出重要指標(biāo)的重要手段之一，但3D圖表在數(shù)據(jù)可視化設(shè)計(jì)中，一直是有爭(zhēng)議的存在。
有人認(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)分類一般都要放到最后。
如果“其他”分類也按有序排列，就會(huì)有格格不入的感覺。
后語(yǔ)
電商大屏通常要烘托一種熱鬧的場(chǎng)景，對(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ì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司