幾何

前言?

數據可視化大屏設計大多以藍色調為主,因為藍色比較容易營造大屏所追求的科技感,所以在眾多行業中運用最廣泛。

例如公安系統、城市交通、科技公司、政企單位、制造業等眾多行業。

但電商類大屏需要另一種與其他大多數行業不同的調性。

本期就來分享電商類大屏設計的案例經驗,帶你了解電商大屏的設計技法與思考。

 

案例解析-業務指標分析

本期的大屏案例為“北京市電商消費大數據”,主要呈現某電商平臺618購物節的信息數據。

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

先看圖,下圖為最終的設計稿:

設計任何產品首先要做的就是了解業務和需求分析,本次的案例需求非常簡單明了,只需做各指標數據的展示。

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

 

無交互的圖表設計要點

無交互的大屏展示,在圖表設計上,需要按沒有交互的形式設計。

例如不能因為數據過多,而隱藏一些通過交互才能看到的數據。

對于一組無法展示全的數據,可以只提煉最重要的指標數據進行展示,也可以通過動畫形式,播放展示等等。

 

實時數據和事后數據的區別

本案例提供的是618購物節事后的數據,所以在大屏的設計上可以根據真實的數據來設計呈現。

事后數據呈現,在設計上可以根據真實的數據來定義圖表,例如可以根據數據大小長度,精準的定義設計空間。

實時數據顧名思義指的就是數據在實時傳輸,產生了數據就要立即展示出來,從業務角度上可能要做其他的設計預案。

例如異常數據的處理,有突破性的數據是否設計動畫營造一種儀式感,就像天貓雙11的千億彩蛋。

 

案例解析-風格與用色

定義視覺風格

定義大屏設計風格,首先要分析行業的屬性特征,然后通過情緒板等方法定義視覺調性。

例如公安系統通常運用嚴謹冷靜的藍色調;能源、教育、醫療行業的主色調,一般使用能代表環保、未來、健康的綠色調。

 

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

過于冰冷理性的色調,并不是電商產品所追求的調性,更不符合觀者對購物場景的心理認知。

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

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

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

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

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

 

色彩解析

首先分析色環圖,了解一下色彩知識,30度為同類色、60度為鄰近色、120度對比色、180度互補色。

電商大屏冷色元素通常選用藍色系色調,通過上圖對色環的認識,來看下藍色與色環圖上的暖色都呈現什么關系。

  • 同類色:在色環上成30度,特點是色相比較接近,如紅色類的朱紅、大紅、玫瑰紅都屬同類色關系。
  • 鄰近色:在色環上成60度,鄰近色的搭配會使畫面和諧統一,呈現一種你中有我,我中有你的感覺。
  • 對比色:在色環上成120度,是構成明顯色彩效果的色組,視覺上會有一種藍的更藍,紅的更紅。
  • 互補色:在色環上成180度,是對比最強的色組,兩個顏色放在一起會引起強烈的對比,會給人強烈的排斥感。

 

大面積用色技法

從以上的色彩分析來看,電商大屏若呈現大面積的暖色調,再搭配大面積藍色調會呈現對比色或互補色,形成強烈對比。

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

還能在大面積使用紫紅色的同時保持畫面和諧統一,因為紫紅色同時包含藍色和紅色兩種色調。

藍色搭配紫紅色其實就是,實現了你中有我,我中有你的感覺。

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

不難發現強烈對比效果會有一種不適感,所以大面積的暖色,一定要使用跟其他元素能夠融入的鄰近色。

 

小面積使用對比色的技法

如果是小面積的使用,就會有很多的可能性,例如下圖阿里DataV電商類數據可視化產品的模版。

都只是在標題處使用紅色烘托電商大屏的調性, 內容區并沒有過多的使用紅色,所以各種元素間,并沒有形成強烈的對比。

但從兩張圖的對比來看,第二張處理的比第一張要高級一些,仔細看會發現,第二張背景色偏紫色。

紅紫為鄰近色,這樣標題的紅色和背景就形成了較為和諧的過渡,而第一張暗藍色的背景跟標題對比強烈,略顯生硬。

 

反面案例解析

舉個反面案例,看下圖最大的問題就是過度烘托了主題主題氛圍,導致整個畫面太過艷麗,沒有細節。

更不用說數據的清晰展示了,這已經違背了大屏可視化設計,以數據信息展示為核心的設計理念。

圖片來源網絡(反面案例)

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

大屏設計用色調烘托主題本身很好,但對于艷麗的暖色調,要適當搭配一定比例的鄰近色和對比色。

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

 

案例中標題和總數據為什么使用黃色?

因為黃色和藍色、紫紅色對比性更強烈,黃色跟藍色在色環上成180度是互補色,有最強烈的對比性。

黃色與紫紅色在色環上成120度是對比色,同樣有強烈的對比性,同時黃色也跟暗色調的背景形成了鮮明的對比。

所以對于關鍵指標數據和標題,需要重點突出的元素,可以用對比強烈的色調做突出效果。

 

案例解析-設計要點?

打造儀式感

設計要點要從需求出發,例如需求中有一項關鍵的業務指標要突出,朝陽區消費占全市75%。

所有區中朝陽的消費是No1,所以從這點考慮可以使用全區地圖來展示,并且打造朝陽區第一名的儀式感。

 

打造驚喜感

產品設計中給觀者驚喜感,無疑是好的體驗,本次案例通過增加了兩道光線動畫,打造微妙的驚喜感。

這樣的設計給大屏增添了動感,看起來更富有生機,兩道光線滑向總數據指標,會有一種數據傳輸的感覺。

同時也像滿天繁星的夜空中,劃過的流星一樣,給人帶來一種悸動的體驗。

 

3D圖表的設計要點

3D圖表有很強的視覺表現力,是突出重要指標的重要手段之一,但3D圖表在數據可視化設計中,一直是有爭議的存在。

有人認為由于3D的透視關系,會導致數據呈現的不客觀。

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

導致出現兩條頂端線,視覺上很難分清頂端在哪里,對指向Y軸刻度數值的體現的就不明確。

這種情況就需要在柱狀圖上標記出數據值,這樣畫面不僅有了3D圖表的視覺表現,同時也不影響數據的展示。

 

增強觀者認知

增強觀者對元素的認知,可以大大提高閱讀效率,比如圖文形式通常比文字視覺上更突出。

案例中“最受歡迎品牌”就可以加上品牌logo增強對類別的認知。

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

因為“其他”通常是所有分類中最不關注的數據,關注的數據都會直接展示出來。

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

 

后語?

電商大屏通常要烘托一種熱鬧的場景,對配色的準確把握,大面積色調的使用需要和諧過渡,同時要善于運用對比色,突出元素。

多思考設計與業務的表現關系,善于從設計思維出發打造儀式感、驚喜感,增加產品價值。

 

原文地址:互聯網設計幫(公眾號)

作者:吳星辰

轉載請注明:學UI網 » 電商大屏 – 數據可視化設計經驗分享!

登錄收藏
 
你可能喜歡的:
看起來很美的數據在騙人看起來很美的數據在騙人
初學者如何快速上手數據可視化設計初學者如何快速上手數據可視化設計
設計沉思錄 | 服務體系設計探索-美事視頻會議項目總結設計沉思錄 | 服務體系設計探索-美事視頻會議項目總結
大屏可視化:設計尺寸-高級指南大屏可視化:設計尺寸-高級指南
金融設計有溫度—IP設計過程金融設計有溫度—IP設計過程
【經驗】B端后臺產品UI設計小結【經驗】B端后臺產品UI設計小結
【項目分享】一刻相冊-從0-1設計背后的故事【項目分享】一刻相冊-從0-1設計背后的故事
以Ant Design為例來說說B端設計的基本套路以Ant Design為例來說說B端設計的基本套路
適配深色模式,你還沒用變量庫?適配深色模式,你還沒用變量庫?
聽說,現在不懂產品思維的人很難找到工作聽說,現在不懂產品思維的人很難找到工作
?
类似钱咖的高额赚钱