起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識案例解析：電商大屏數(shù)據(jù)可視化設計經(jīng)驗分享！
本文結(jié)合大量實際案例，來與大家分享電商類大屏設計的經(jīng)驗，帶你了解電商大屏的設計技法與思考。
數(shù)據(jù)可視化大屏設計大多以藍色調(diào)為主，因為藍色比較容易營造大屏所追求的科技感，所以在眾多行業(yè)中運用最廣泛。例如公安系統(tǒng)、城市交通、科技公司、政企單位、制造業(yè)等眾多行業(yè)。但電商類大屏需要另一種與其他大多數(shù)行業(yè)不同的調(diào)性。
本期就來分享電商類大屏設計的案例經(jīng)驗，帶你了解電商大屏的設計技法與思考。
案例解析：業(yè)務指標分析
本期的大屏案例為“北京市電商消費大數(shù)據(jù)”，主要呈現(xiàn)某電商平臺618購物節(jié)的信息數(shù)據(jù)。如銷售總金額、區(qū)域銷售排行、男女比例、年齡分布、品牌銷售排行、歷史銷售趨勢等等。
先看圖，下圖為最終的設計稿：
設計任何產(chǎn)品首先要做的就是了解業(yè)務和需求分析，本次的案例需求非常簡單明了，只需做各指標數(shù)據(jù)的展示。
從需求上可以分析得出，大屏是純數(shù)據(jù)展示類，所以不需要有交互行為。
無交互的圖表設計要點：
無交互的大屏展示，在圖表設計上，需要按沒有交互的形式設計。例如不能因為數(shù)據(jù)過多，而隱藏一些通過交互才能看到的數(shù)據(jù)。
對于一組無法展示全的數(shù)據(jù)，可以只提煉最重要的指標數(shù)據(jù)進行展示，也可以通過動畫形式，播放展示等等。
實時數(shù)據(jù)和事后數(shù)據(jù)的區(qū)別：
本案例提供的是618購物節(jié)事后的數(shù)據(jù)，所以在大屏的設計上可以根據(jù)真實的數(shù)據(jù)來設計呈現(xiàn)。事后數(shù)據(jù)呈現(xiàn)，在設計上可以根據(jù)真實的數(shù)據(jù)來定義圖表，例如可以根據(jù)數(shù)據(jù)大小長度，精準的定義設計空間。
實時數(shù)據(jù)顧名思義指的就是數(shù)據(jù)在實時傳輸，產(chǎn)生了數(shù)據(jù)就要立即展示出來，從業(yè)務角度上可能要做其他的設計預案。例如：異常數(shù)據(jù)的處理，有突破性的數(shù)據(jù)是否設計動畫營造一種儀式感，就像天貓雙11的千億彩蛋。
案例解析：風格與用色
定義視覺風格：
定義大屏設計風格，首先要分析行業(yè)的屬性特征，然后通過情緒板等方法定義視覺調(diào)性。
例如公安系統(tǒng)通常運用嚴謹冷靜的藍色調(diào)；能源、教育、醫(yī)療行業(yè)的主色調(diào)，一般使用能代表環(huán)保、未來、健康的綠色調(diào)。
電商、新零售行業(yè)需要烘托購物熱鬧的場景，所以靚麗的暖色調(diào)更為合適。
過于冰冷理性的色調(diào)，并不是電商產(chǎn)品所追求的調(diào)性，更不符合觀者對購物場景的心理認知。
但是由于可視化大屏的面積過大，主色調(diào)不論什么顏色，背景色通常要用暗色系，以減少對觀者視覺上的沖擊。
深色背景能夠有效烘托暖色調(diào)的可視化元素，起到對比、聚焦視覺的作用。暖色調(diào)元素可以烘托購物特征的氛圍，如紅色、橙色、紫色、都是有效的色調(diào)，但如果都是暖色元素較容易視覺疲勞。
所以暖色中搭配一定比例的冷色，能夠緩解視覺上的不適感。
冷暖色在大屏設計中的搭配有很多技法，下面我們來解析色彩搭配。
色彩解析：
首先分析色環(huán)圖，了解一下色彩知識，30度為同類色、60度為鄰近色、120度對比色、180度互補色。
電商大屏冷色元素通常選用藍色系色調(diào)，通過上圖對色環(huán)的認識，來看下藍色與色環(huán)圖上的暖色都呈現(xiàn)什么關系。
- 同類色：在色環(huán)上成30度，特點是色相比較接近，如紅色類的朱紅、大紅、玫瑰紅都屬同類色關系。
- 鄰近色：在色環(huán)上成60度，鄰近色的搭配會使畫面和諧統(tǒng)一，呈現(xiàn)一種你中有我，我中有你的感覺。
- 對比色：在色環(huán)上成120度，是構(gòu)成明顯色彩效果的色組，視覺上會有一種藍的更藍，紅的更紅。
- 互補色：在色環(huán)上成180度，是對比最強的色組，兩個顏色放在一起會引起強烈的對比，會給人強烈的排斥感。
大面積用色技法：
從以上的色彩分析來看，電商大屏若呈現(xiàn)大面積的暖色調(diào)，再搭配大面積藍色調(diào)會呈現(xiàn)對比色或互補色，形成強烈對比。
所以本期案例選擇藍色的鄰近色，紫紅色進行搭配，這樣不僅能夠烘托電商的屬性特征。還能在大面積使用紫紅色的同時保持畫面和諧統(tǒng)一，因為紫紅色同時包含藍色和紅色兩種色調(diào)。藍色搭配紫紅色其實就是，實現(xiàn)了你中有我，我中有你的感覺。
下面我們對比一下，如果把本期分享的大屏案例，換成正紅色體會一下感覺。
不難發(fā)現(xiàn)強烈對比效果會有一種不適感，所以大面積的暖色，一定要使用跟其他元素能夠融入的鄰近色。
小面積使用對比色的技法：
如果是小面積的使用，就會有很多的可能性，例如下圖阿里DataV電商類數(shù)據(jù)可視化產(chǎn)品的模版。
都只是在標題處使用紅色烘托電商大屏的調(diào)性， 內(nèi)容區(qū)并沒有過多的使用紅色，所以各種元素間，并沒有形成強烈的對比。
但從兩張圖的對比來看，第二張?zhí)幚淼谋鹊谝粡堃呒壱恍?，仔細看會發(fā)現(xiàn)，第二張背景色偏紫色。
紅紫為鄰近色，這樣標題的紅色和背景就形成了較為和諧的過渡，而第一張暗藍色的背景跟標題對比強烈，略顯生硬。
反面案例解析：
舉個反面案例，看下圖最大的問題就是過度烘托了主題主題氛圍，導致整個畫面太過艷麗，沒有細節(jié)。
更不用說數(shù)據(jù)的清晰展示了，這已經(jīng)違背了大屏可視化設計，以數(shù)據(jù)信息展示為核心的設計理念。
圖片來源網(wǎng)絡(反面案例)
想象一下大屏的使用場景，這樣一個艷麗的大屏掛在墻上，看多了心情會變得焦躁，同樣的道理，沒有人會把家里的墻大面積刷成紅色一樣。
大屏設計用色調(diào)烘托主題本身很好，但對于艷麗的暖色調(diào)，要適當搭配一定比例的鄰近色和對比色。
這樣能大大緩解觀者的視覺疲勞，展示出細節(jié)，大屏看起來色彩也會更豐富有觀賞性。
案例中標題和總數(shù)據(jù)為什么使用黃色？
因為黃色和藍色、紫紅色對比性更強烈，黃色跟藍色在色環(huán)上成180度是互補色，有最強烈的對比性。
黃色與紫紅色在色環(huán)上成120度是對比色，同樣有強烈的對比性，同時黃色也跟暗色調(diào)的背景形成了鮮明的對比。
所以對于關鍵指標數(shù)據(jù)和標題，需要重點突出的元素，可以用對比強烈的色調(diào)做突出效果。
案例解析：設計要點
打造儀式感：
設計要點要從需求出發(fā)，例如需求中有一項關鍵的業(yè)務指標要突出，朝陽區(qū)消費占全市75%。
所有區(qū)中朝陽的消費是No1，所以從這點考慮可以使用全區(qū)地圖來展示，并且打造朝陽區(qū)第一名的儀式感。
打造驚喜感：
產(chǎn)品設計中給觀者驚喜感，無疑是好的體驗，本次案例通過增加了兩道光線動畫，打造微妙的驚喜感。
這樣的設計給大屏增添了動感，看起來更富有生機，兩道光線滑向總數(shù)據(jù)指標，會有一種數(shù)據(jù)傳輸?shù)母杏X。
同時也像滿天繁星的夜空中，劃過的流星一樣，給人帶來一種悸動的體驗。
3D圖表的設計要點：
3D圖表有很強的視覺表現(xiàn)力，是突出重要指標的重要手段之一，但3D圖表在數(shù)據(jù)可視化設計中，一直是有爭議的存在。
有人認為由于3D的透視關系，會導致數(shù)據(jù)呈現(xiàn)的不客觀。其實從設計角度可以解決不客觀問題，比如我們案例中的3D柱狀圖，由于柱形的厚度。
導致出現(xiàn)兩條頂端線，視覺上很難分清頂端在哪里，對指向Y軸刻度數(shù)值的體現(xiàn)的就不明確。
這種情況就需要在柱狀圖上標記出數(shù)據(jù)值，這樣畫面不僅有了3D圖表的視覺表現(xiàn)，同時也不影響數(shù)據(jù)的展示。
增強觀者認知：
增強觀者對元素的認知，可以大大提高閱讀效率，比如圖文形式通常比文字視覺上更突出。
案例中“最受歡迎品牌”就可以加上品牌logo增強對類別的認知。
條形圖通常按序排列，從大到小，或從小到大，但如果有“其他”這項分類一般都要放到最后。
因為“其他”通常是所有分類中最不關注的數(shù)據(jù)，關注的數(shù)據(jù)都會直接展示出來。
如果“其他”分類也按有序排列，就會有格格不入的感覺。
后語
電商大屏通常要烘托一種熱鬧的場景，對配色的準確把握，大面積色調(diào)的使用需要和諧過渡，同時要善于運用對比色，突出元素。
多思考設計與業(yè)務的表現(xiàn)關系，善于從設計思維出發(fā)打造儀式感、驚喜感，增加產(chǎn)品價值。
作者：吳星辰，微信公眾號：互聯(lián)網(wǎng)設計幫
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
真是外行看熱鬧 內(nèi)行看門道