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