從設計思路,對一次數據信息類大屏可視化設計進行復盤
編輯導語:在數據業務展示場景中,數據可視化大屏已經變得十分常見。那么在設計思路上,數據可視化大屏應當遵循什么樣的設計邏輯?本篇文章里,作者結合實際案例,對數據化大屏的可視化設計原則做了分析,一起來看一下。
數據化大屏現在是公司的一項常用的數據業務設計展示模式,最近在負責公司的一款數據大屏的設計工作,做一下復盤吧。沒有太多看法,只說幾點思路想法。
一、設計開始時,要確定尺寸和顏色風格
大屏是電腦內容投影到大屏上的頁面,要結合電腦屏幕的分辨率來定設計稿尺寸。
拿我們公司來說,我們公司的大屏是拼接屏16:9的,所以設計頁面尺寸選用了1920*1080的尺寸,當然了也可以用4k電腦屏幕的3840*2160;因為是拼接屏,所以采用了深色暗色背景,這樣可減少拼縫帶來的不適感。
確定好尺寸和背景顏色后,需要明確出發點:大屏設計是在充分了解業務需求的基礎上進行的。
我們都知道大屏數據可視化是以大屏為主要展示載體的數據可視化設計。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。所以拿到需求的時候首先要知道這個大屏是干什么的?功能是什么?
而大屏的設計要堅持,大屏數據可視化設計原則——即設計服務需求、先總體后細節。
二、好了,接下來進行第一點分析——大屏的數據怎么放?
我們想象一下,一個屏幕承載的內容,用戶第一眼看到它,你希望他一眼記下全部? 怎么可能呢,怎么可能會讓人一眼全部看的仔細,而且記得深刻,這是不現實,我們無需說一些冠冕堂皇、大而空的話說會通過設計手法實現這個。
大屏因為大,承載數據多,而大屏承載的又是數據信息,它的特點就是數據可視化的展示;所以,它最不缺的就是數據!
當信息聚集的時候,人接收信息的方式有3種:視覺性型,聽覺型和觸覺型。
而其中獲得的大部分信息是由視覺提供的。這時候大量的數據信息集中出現,那么用戶對于信息的獲取其實是短暫的、遲鈍的,容易視覺混亂、迷失。
這時對于大屏的數據展示來說,它最缺少的恰恰是數據的篩選主次。
因此主要而首要的設計任務是要有一個數據及其內容的主次之分,輕重緩急,讓信息呈現要有焦點、有主次。大白話就是既然你無法對信息全部吸收,那就對你第一眼看到的信息過目不忘吧!
明確了這一關鍵點后,接下來需要對數據根據業務需求擬定各個指標展示的優先級(主、次、輔)。
我們可以通過對比,先把核心數據展示給用戶,待用戶理解大屏主要內容與展示邏輯后,再慢慢逐級瀏覽二三級內容。而且部分細節數據其實是可以暫時隱藏,用戶需要時可通過鼠標點擊等交互方式喚起。接下來就是:
- 核心業務指標安排在中間位置、占較大面積。
- 其余的指標按優先級依次在核心指標周圍展開。
- 一般把有關聯的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
當然了這要看屏幕的布局,如果是左右布局,那主要信息在左邊,如果是三欄布局,那主要信息在中間,遵循:上下布局擇上;左右布局擇左,三欄布局擇中的原則。
三、數據的優先級確定好后,需要進行第二點分析——大屏的數據展示怎么設計?
1. 拿到數據和需求,我該怎么辦?
首先大屏設計是直面用戶的,以體驗設計為例,大家都知道,用戶體驗分為五要素,分別為表現層、框架層、結構層、范圍層以及戰略層,每層都有相應的內容做支撐。
拿體驗設計師來說,體驗設計師的系統化設計思路,其實就是在拿到上層需求時,會先從底層戰略入手,思考底層戰略需要傳達的特征含義是什么,表現層怎么達成戰略落地。這就是為什么手里拿到一個需求,僅往上挖,挖不出太大價值的點,只能往下挖的原因。
作為設計師,在設計之初就要有模擬好要溝通的人(針對的用戶),可以通過對情緒反應、情緒體驗和情感關系的關注,運用對于用戶的同理心、共情能力,尊重用戶的感受,并將這些思考應用于設計策略中。同樣的,這種思考在大屏的展示設計中也是至關重要的,
大屏設計,數據是主要的,但是重點突出數據的重要性,會讓可視化圖表變得枯燥乏味,而過度注重絢麗多彩而讓數據的呈現效果大打折扣。
就像你看一本圖書的興趣大于一本純文字的書一樣,信息數據在大屏上的展示,也是設計的一個重點。而這個重點也是設計的其中一個要解決的問題——就是將枯燥的、專業的、不直觀的數據內容,轉變成有趣的、淺顯的、直觀的信息傳達給觀眾。實現設計與功能之間的平衡,更好地溝通與傳達信息。
2. 首先第一個技巧就是:聯想
如何進行聯想呢?聯想在于溝通,你溝通了才知道怎么去想啊,沒有目的的天馬行空只是胡思亂想。
設計師是需要溝通的:
- 設計大屏的開始就是設計師對內業務的溝通;
- 其次是設計師對外需求的溝通;
- 最后落足在設計師與大屏的溝通。
對內業務溝通在于理解整體:
運營同事和產品提供了信息與數據;那么設計師在挖掘到足量的數據基礎上,就要思考如何把業務用可視化的故事視角串聯起來。
到這就需要進行聯想了,因為身為設計,聯想是很重要的,設計師從所要傳達事物的特征標題文字或數據、或宣傳語等數據、文字出發進行的聯想,這種聯想往往具有雙關的效果,本身就帶有一定趣味性。
所以需要我們要對語言文字(理解文案想表達的)、數據有一定的整體了解(理解這些數據的最大值及其最小值,是方便你進行組件設計,進行開發),在此基礎上進行聯想和變通。
在我看來,一個大屏就是一個故事集;需要做的就是做好聯結聯系作用。
如果信息是業務層,那好辦了,那我們就可以聯想到業務的接觸者、實施者。
比如我們的大屏是以一帶一路為出發點,溝通海內外企業交流合作的,那么從地理信息出發,我們的載體很明確,從宏觀到微觀依次是全球、國家、城市、商圈、單個建筑。整個布局就可以以這些標志載體作為烘托和配圖。
對外需求的溝通在于輔助動效:
我們都知道根據動效的作用可分為:交互式動效?和?非交互式動效;但是呢,大屏上的展示多是以給交互式動效進行。
大多數情況,設計師我們要明確大屏設計本身要達到的目的,這比設計好大屏本身更加重要。
就像在我們工作中會有各種成品展示啊,工作匯報ppt啊等等,這就是展示成果。
說白了一句話:簡易的功能導航,有效的過渡以及酷炫的動效最終都是服務用戶。
a:大屏輔之以動效,這是加分的!
炫酷的動效能夠迅速抓住用戶的注意力,同時還能起到引導用戶視線的作用,也用這種巧妙的方式清晰地向用戶傳遞了企業的品牌力和產品平臺實力;
b:用戶的每一個操作都會有一個期望,這個期望可能來源于現實映射!
對于用戶的這種操作期望,利用有效的時間來去吸引我們的用戶,就需要好看的畫面,有趣的動效,將真實的現實轉換為虛擬平面,在此過程中必然要將一些“期望”情感放大,然后利用模型和3d及其動效,將平面的設計增強情景感觸;這樣達到了縮小用戶期望,也給用戶身臨其境的真實感,加強體驗舒適度。
c:利用動效,讓整個大屏模塊過度盡量的流暢!
動效的輔助使得界面與界面之間、界面上元素的出現和消失都的流暢,通過大小、位置和透明度的變化,使用戶和產品的交互過程也變得更流暢。
d:動效的存在最大的作用就在于一點,那就是:讓用戶有操縱感。
這種操縱感不僅僅表現在對用戶的操作有了反應、有了不同、有了顯示,還表現在讓用戶知道當前模塊運行的狀態,它是停止還是進行中亦或者是在線還是下線;
所以可以反向思維一下:
既然用戶需要提升操縱感,那么就通過設計動效去引導,來進行暗示和指導,讓用戶主動抑或者被動的關注你想讓用戶關注某一功能或者是信息,那么這時候通過動效展示數據屬性的定量信息進行的暗示和指導,也就能快速的幫助用戶使用功能和注意到這個信息;
設計師與大屏的溝通其實在于有趣。
可視化大屏,每張界面不僅僅只是形態多變,而是真正做到給用戶帶來震撼的視覺沖擊,有趣很重要的。
a:數據和信息的展示更要發現數據內在的信息和規律,讓他們變得有趣生動起來。
我們可以通過大屏的硬件去了解,通過圖表類型的選擇,字體字號的選擇、顏色的對比、基礎組件的構成這些去了解去實現讓信息和數據還有操作都變得有趣起來。
比如顏色,就和我們app和網頁設計一樣,都是選擇頁面中60%使用主色調,30%使用輔助色調,10%使用對比色調,選用包容性的配色方案。
拿數據的文字大小來說啊,我們想要顯示其中的一條數據,最好的方法就是加強它與其他元素的對比,從而提高它的重要性層級。就像兩個人面紅耳赤,非要一較高下,有趣有趣!
其他的就不細說了,都是一樣的; 當然了,可能你想要的“有趣”對于開發相對困難,這時候就需要跟開發多多溝通。
四、最后,設計完成了,需要進行第三點——大屏的交付
切圖與標注是少不了的,按照網頁設計標準切就好了。也要看一下大屏的運行、展示環境。UI走查一下,看看設計稿在大屏展示的效果,是否存在色差、文字內容是否清晰可見、頁面動效是否流暢、圖形圖表等是否按預期顯示、頁面是否存在變形拉伸等現象;當然了,看看你的領導是否有新的需求和更改意見,這些都是要注意的。
最后我想說,隨著智能化校園或者智能社區等的興起,還有公司項目的宣傳性提高,大屏可視化設計對于數據和信息的展示也將是向用戶傳遞了企業的品牌力和產品實力的重要一環!
本文由 @liang 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議
適應大屏的可視化數據是一種趨勢,要在多個設備端上都能順滑的呈現
是的,數據在大屏上的可視化呈現,是更能有震撼力度的,因為這是直觀的觀看,視覺聽覺的盛宴; 可能隨著虛擬技術的增強,大屏的觸覺體驗也是會有的,那時候的數據信息也就會變得更有溫度;這對用戶和觀看者來說,都是對產品的進一步印象加深
有趣的h5很能吸引我的關注,現在的儀表盤要是能做成動態的就更好了,比較深入人心
是的,有趣的產品是吸引眼球的; 儀表盤這個的主要看類型, 操作型儀表盤的界面設計比較需要簡潔直觀,因為它面向人群通常是各個部門的操作員, 但是增添有趣的設計還是加分的!
能夠抓人眼球的可視化設計就是好設計,這是一門很深的學問,值得深究
yes