01、數(shù)據(jù)可視化的基本概念
1.宏觀的可視化
如圖所示,我們先從宏觀上來看看可視化,我們從可以兩個基本維度:①信息性質(zhì):我要傳達的是信息還是數(shù)據(jù);②傳達目標:我在陳述某事,還是在探索某事,劃分為如圖的四象限矩陣。
象限二是概念性的描述,也就是類似于組織結(jié)構圖、決策樹就是電典型的概念描述圖表;象限三是創(chuàng)意挖掘,比如戰(zhàn)略討論和創(chuàng)意項目早期階段所畫的圖等;而象限一與四,也就是我們微觀層面上的數(shù)據(jù)可視化,也是本次直播給大家分享的。
2.數(shù)據(jù)可視化的定義
微觀的數(shù)據(jù)可視化是為了更形象地表達數(shù)據(jù)內(nèi)在信息和規(guī)律 ,促進數(shù)據(jù)信息的傳播和應用,是把相對復雜、抽象的數(shù)據(jù)通過可視化的方法以人們更容易理解的形式展示出來的一系列手段。
在當前新技術支持下,數(shù)據(jù)可視化除了“可視”,還有可交流、可互動的特點,其本質(zhì)核心是傳遞信息,即如何將信息準確、可靠、易于理解傳達給對方。
而我們本次直播所分享的大屏數(shù)據(jù)可視化,是以大屏為主要展示載體的數(shù)據(jù)可視化設計,也是當前可視化領域的一項熱門應用,通常可以分為如圖所示的信息展示類、數(shù)據(jù)分析類及監(jiān)控預警類。
數(shù)據(jù)可視化大屏,有兩個要點:一是展示效果的酷炫,二是展示數(shù)據(jù)之間的層次關系。好的數(shù)據(jù)可視化大屏是布局、色彩、圖表、動效的綜合運用。
3.數(shù)據(jù)可視化有哪些好處?
(1)化繁為簡,方便理解
數(shù)據(jù)可視化能將不可見的數(shù)據(jù)現(xiàn)象轉(zhuǎn)化為可見的圖形符號,能將錯綜復雜、看起來沒法解釋和關聯(lián)的數(shù)據(jù),建立起聯(lián)系和關聯(lián),發(fā)現(xiàn)規(guī)律和特征,獲得商業(yè)價值。
正所謂“一圖勝千言”,使用圖表來總結(jié)復雜的數(shù)據(jù),這種溝通方式也使業(yè)務領導者能夠更快地理解和處理他們的信息。
(2)發(fā)現(xiàn)新趨勢、新機遇
例如企業(yè)收集到的消費者行為的數(shù)據(jù),可以為適應性強的公司帶來許多新的機遇。通過使用大數(shù)據(jù)可視化來監(jiān)控關鍵指標,更加陽光透明,及時發(fā)現(xiàn)問題第一時間做出應對。
例如:天貓的雙11數(shù)據(jù)大屏實況直播,可視化大屏展示大數(shù)據(jù)平臺的資源利用、任務成功率、實時數(shù)據(jù)量等。企業(yè)領導人可以更容易發(fā)現(xiàn)各種大數(shù)據(jù)集的市場變化和趨勢。
(3)增強數(shù)據(jù)交互
數(shù)據(jù)可視化的主要好處是它及時帶來了風險變化。但與靜態(tài)圖表不同,交互式數(shù)據(jù)可視化鼓勵用戶探索甚至操縱數(shù)據(jù)來發(fā)現(xiàn)其他“秘密”。這就為使用分析提供了更好的意見。
02、數(shù)據(jù)可視化的難點
1.準備工作
這也是數(shù)據(jù)可視化的最大難點工作,主要集中在數(shù)據(jù)的獲取與整理上。
比如數(shù)據(jù)收集是否全面準確?清洗數(shù)據(jù)是否到位?數(shù)據(jù)分析是否有據(jù)可循?數(shù)據(jù)分析結(jié)論是否清晰?如果用來數(shù)據(jù)可視化的數(shù)據(jù)出現(xiàn)問題,數(shù)據(jù)可視化的頁面與結(jié)果都不具有任何參考價值。
2.對數(shù)據(jù)需要具備一定的敏感性
當面對復雜的數(shù)據(jù)、信息,怎么找到數(shù)據(jù)之間的邏輯關系,就需要制作人具備一定的數(shù)據(jù)分析能力,也就是對大量復雜的數(shù)據(jù)具備數(shù)據(jù)敏感性,快速找到多維度、多變量的數(shù)據(jù)之間的邏輯關系,確定哪些數(shù)據(jù)之間有直接關系,哪些數(shù)據(jù)之間具有間接關系,需要重點展現(xiàn)哪些數(shù)據(jù)之間的關系,這些都需要制作人或者數(shù)據(jù)分析師及時做出準確判斷。
3.用簡潔易懂的圖表展示復雜的數(shù)據(jù)關系
因為閱讀者需要在極短的時間內(nèi)掌握了解各類圖表所傳遞的數(shù)據(jù)關系,數(shù)據(jù)可視化需要盡可能簡潔,便于讓不同的閱讀者快速抓住其重點,因此數(shù)據(jù)可視化就需要用有限的文字、簡潔的圖表展現(xiàn)大量的數(shù)據(jù)之間的各種關系與其客觀規(guī)律。
4.選擇合適的圖表
每種圖表都有自己的優(yōu)勢和局限性,條形圖就有一般條形圖、堆積條形圖、百分比條形圖、雙向柱狀圖等分類,餅狀圖也有:一般餅狀圖、玫瑰餅狀圖、環(huán)形圖、旭日圖等類型。所以,如何從千變?nèi)f化的各類圖表中,選出適合自己數(shù)據(jù)的圖表類型是數(shù)據(jù)可視化的關鍵。
5.圖表細節(jié)的處理
圖表細節(jié)的處理需要綜合考慮多方面因素,比如刻度標記類型、間隙、刻度標簽位置、數(shù)據(jù)類型、小數(shù)位、是否千分位、顏色取值、圖例位置、圖上標簽、圖表標題、備注文字說明等等。
在這里細節(jié)的處理不僅影響數(shù)據(jù)可視化的效果,若處理不好,可能還會加大閱讀人的閱讀困難。例如:刻度選取不合理折線過于陡峭,折線太細不便于觀察線等。
03、數(shù)據(jù)可視化設計的5個原則
我們在進行可視化設計的過程中需要遵循的5個基本原則:
1.目標明確
并不是所有的數(shù)據(jù)都需要數(shù)據(jù)可視化。數(shù)據(jù)可視化是借助圖形化的分析過程,來解決業(yè)務上某一問題或者發(fā)現(xiàn)某一問題,當數(shù)據(jù)脫離了業(yè)務,就沒有必要可視化了。所以做數(shù)據(jù)可視化之前先要明確這個數(shù)據(jù)可視化的分析目的到底是什么?你打算通過數(shù)據(jù)向用戶講述怎樣的故事,數(shù)據(jù)可視化之后又在表達什么?通過這些數(shù)據(jù),能為你后續(xù)的工作提供哪些指導?
為了準確找到數(shù)據(jù)可視化的目的,我們往往會先思考這7個問題:
如果我們對以上7個問題有明確的答案,那么就明確了這次的數(shù)據(jù)可視化到底要解決什么問題。
2.了解你的受眾
如果不是為了與目標受眾清楚地溝通,數(shù)據(jù)可視化是沒有實際的應用價值的。因此應該與受眾的專業(yè)知識兼容,并允許他們輕松快速地查看和處理數(shù)據(jù)。
所以這里就有了我們第二個原則,需要考慮到受眾對數(shù)據(jù)所呈現(xiàn)的基本原則的熟悉程度,以及他們是否了解這些可視化的主要背景,最后是這些圖表是否會被定期重復使用等等。
3.簡潔、美觀
現(xiàn)在很多企業(yè)或者機構在做數(shù)據(jù)可視化的時候一味追求酷炫的動態(tài)圖、華麗的視覺效果等,但這個做法并一定正確。圖表主要作用是傳遞信息,追求過分漂亮只會使徒增無用功。
圖表的基礎美感會給人帶來視覺上的享受可以用來做圖表的概念,圖表中的坐標軸、形狀、線條、字體、標簽、標題排版等元素是都會影響人的視覺效果,因此這些圖表元素經(jīng)過合理的搭配會給整個數(shù)據(jù)可視化作品加分,比如圖表的色彩,如果搭配合理,會使整個圖表看起來更加生生動,同時也會加深閱讀者的記憶。
而我們?nèi)绾尾拍茏龅竭@一點呢?這里我們可以從以下6個方面來進行:
(1)字體的使用與選擇
字體優(yōu)先使用系統(tǒng)默認字體,需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。除此以外,選擇字母容易辨識不會產(chǎn)生奇異的字體更有利于用于數(shù)據(jù)可視化設計。字體的選擇主要有三個方面:字體大小、字母間距、中西文間隔等等,這些都數(shù)據(jù)可視化需要考慮到的。
(2)背景色的使用
顏色是可視化大屏中影響畫面效果的重要元素。使用不當,會讓讀者分心。背景色的選擇與可視化展示的設備相關,分為深色、淺色、彩色。
如果是小屏幕,背景色選擇范圍就比較廣,選擇淺色、彩色、深色均可以做出很好的設計。一般情況下,淺色背景更適合展示大量的數(shù)據(jù)信息,如圖所示,因為在淺色底上數(shù)據(jù)圖表的識別度比較高。
而深色、彩色背景更適合渲染簡單的數(shù)據(jù),用于烘托氣氛,所以在大屏設備中普遍用深色作為背景色,以減少屏幕拖尾,觀眾在視覺上也不會覺得刺眼。因此大屏的配色需要以深色背景為基礎。保證可視化圖的清晰辨識度,色調(diào)與明度變化需要有跨度。
除此以外,深色暗色背景可減少拼縫帶來的不適感。由于背景面積大,使用暗色背景還能夠減少屏幕色差對整體表現(xiàn)的影響;同時暗色背景更能聚焦視覺,也方便突出內(nèi)容,做出一些流光、粒子等酷炫的效果。
(3)顏色搭配
這里需要注意的是色彩的飽和度和明度,它們需要差異顯著、對比鮮明,盡量避免使用鄰近色配色。如果顏色過于相似(例如淺灰與更淺的灰),人們難以發(fā)現(xiàn)兩者間的區(qū)別。相反,也要避免強烈的對比色,例如紅配綠或藍配黃。這里億信華辰曾為多個行業(yè)配置過可視化大屏,列舉一些各個行業(yè)的專屬的一些配色,大家可以參考下。
(4)同類型的數(shù)據(jù)排列盡量均勻
也就是使用用一種顏色去表達相同類型的數(shù)據(jù),在圖表中使用自然增量(0、5、10、15),而非不均勻的增量(0、3、5、16)排序要均勻,比如趨勢、排名或者占比,如圖所示。
(5)圖表類型多樣化,注重對比
可視化讓數(shù)據(jù)對比更直觀,但是僅僅把兩組圖表緊挨著放在一起并不能達成這個目標,甚至更令人費解,所以要多用不同類型的圖片進行對比。
(6)保持視覺一致性
這里想跟大家分享就是大屏需要保持整體色彩感覺一致,配色風格一致,不同顏色之間搭配協(xié)調(diào)。
不要一會黑白配,一會又來個紅綠配。圖表、圖像、按鈕包括尺寸,都要與整體風格保持一致。要么都是填充式的,要么都是中空式的,要么都是棱角分明,要么都是圓潤光滑。例如下圖,某公安行業(yè)可視化大屏(部分)是個很好的例子,配色統(tǒng)一,風格一致。
4.懂得利用工具
得心應手的數(shù)據(jù)可視化工具會使數(shù)據(jù)可視化的工作事半功倍。
比如,億信華辰的數(shù)據(jù)可視化平臺——酷屏??崞潦莾|信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品,可靈活、快捷地制作各類交互式常規(guī)屏和大屏可視化,內(nèi)置百余種炫酷組件和3D特效,讓數(shù)據(jù)得到更形象、更直觀的可視化呈現(xiàn),我們PPT上的所有配圖都是運用酷屏幫助客戶做出來的。
但這里我們也需要注意的是數(shù)據(jù)可視化是一種信息交流形式,它以圖形形式描繪密集和復雜的信息,最終的視覺效果旨在簡化數(shù)據(jù),并使用數(shù)據(jù)幫助用戶決策。因此總體上需要遵循三個小原則;
第一,是準確性,數(shù)據(jù)可視化需考慮數(shù)據(jù)的準確性,清晰度和完整性。以不失真的方式呈現(xiàn)信息,減少用戶的思考成本。
第二,是實用性,強調(diào)數(shù)據(jù)需要實用,可以幫助用戶使用強調(diào)探索和比較的上下文和啟示來導航數(shù)據(jù),比如比較數(shù)據(jù),預警數(shù)據(jù),瀏覽數(shù)據(jù)。
第三,是適應性,能適應多設備、多場景??筛鶕?jù)不同設備大小調(diào)整可視化,同時預測用戶對數(shù)據(jù)深度、復雜性的需求。
5.實事求是
數(shù)據(jù)可視化的結(jié)果一定要實事求是,不可規(guī)避“異常數(shù)據(jù)”。因此真實反映業(yè)務數(shù)據(jù),才可能幫助我們發(fā)現(xiàn)問題,掩蓋問題只會造成更大的損失。
若數(shù)據(jù)很龐大,也不可隨意省去自認為不重要的數(shù)據(jù)部分,找到核心數(shù)據(jù)指標和異常數(shù)據(jù),重點展示核心數(shù)據(jù)指標,分析異常數(shù)據(jù)的問題原因,最后給出合理、準確的數(shù)據(jù)分析結(jié)論。
04、可視化圖表的選擇
總所周知,數(shù)據(jù)可視化是一個展現(xiàn)復雜信息的強大武器。通過可視化信息,我們的大腦能夠更好地抓取和保存有效信息,增加信息的印象。
但如果數(shù)據(jù)可視化做得不好,反而會帶來負面效果,所以更需要我們選擇合理的數(shù)據(jù)可視化方法,高效傳達數(shù)據(jù)。接下來,我們一起看看不同圖表的不同使用場景。
如圖所示,我們可以將圖表的展示分成4種類型,分別是比較、分布、構成和聯(lián)系。在比較中,我們又可以依據(jù)分類和時間再進行一步進行拆分,比如基于時間,我們又可以根據(jù)數(shù)據(jù)是否循環(huán),從而選擇相應的雷達圖、折線圖、金字塔圖或漏斗圖等等。
1.比較類
可視化的方法顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積和顏色來比較數(shù)值的大小,通常用于展示不同步分類間的數(shù)值對比,不同時間點的數(shù)據(jù)對比。因此關于比較類的圖表,我們可以有多種圖表進行選擇,比如柱狀圖、氣泡圖、雷達圖等等。
2.占比類
可視化的方法顯示同一維度上占比關系,可以使用餅圖、環(huán)圖、矩形樹圖等等。
3.區(qū)間類
可視化的方法顯示同一維度上值的上限和下限之間的差異。使用圖形的大小和位置表示數(shù)值的上限和下限,通常用于表示數(shù)據(jù)在某一個分類(時間點)上 的最大值和最小值。比如儀表盤、堆疊面積圖等。
4.關聯(lián)類
可視化的方法顯示數(shù)據(jù)之間相互關系,使用圖形的嵌套和位置表示數(shù)據(jù)之間的關系,通常用于表示數(shù)據(jù)之間的前后順序。比如桑基圖、和弦圖等。
5.趨勢類
可視化的方法分析數(shù)據(jù)的變化趨勢。使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布,通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律,比如折線圖、面積圖等。
6.時間類
可視化的方法是展示數(shù)據(jù)隨時間的變化趨勢。是屬于趨勢類的一個細分,在數(shù)據(jù)分析里使用的不交多的,比如面積圖、折線圖等等。
7.地圖類
這個是現(xiàn)在政務大屏上出現(xiàn)最多的統(tǒng)計圖,主要分為兩類,一類是傳統(tǒng)的熱區(qū)地圖,一類是我們的GIS地圖,通過顯示地理區(qū)域上的數(shù)據(jù),使用地圖作為背景,通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置,通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。GIS地圖還可以通過定位、放大縮小的特性來展示咱們的事件或者事務對象的真實情況。
?
05、大屏項目落地的9個步驟
將大屏項目的落地劃分為9個步驟:
1.梳理業(yè)務需求與使用場景
大屏設計要避免為了展示而展示,排版布局、圖表選用等應服務于業(yè)務,所以大屏設計是在充分了解業(yè)務需求的基礎上進行的。
那什么是業(yè)務需求呢?業(yè)務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標,是大屏數(shù)據(jù)可視化的價值所在。
整體項目是利用大屏設備進行相關數(shù)據(jù)及圖表展示,我們預想將項目應用的場景分為兩種情況:
(1)專業(yè)展示:參與商務活動、分享或為某些團體進行講解及展示使用。
(2)普通展示:主辦公區(qū)域或前臺大廳實時數(shù)據(jù)展示。通過應用場景,還可以進一步將用戶進行區(qū)分。比如:
將場景和用戶進行分類后,就可以進一步根據(jù)他們的需求,進行需求可視化大屏的整理。
2.根據(jù)業(yè)務場景抽取關鍵指標
關鍵指標是一些概括性詞語,是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下可以用來做圖表的概念,一個指標在大屏上獨占一塊區(qū)域,所以通過關鍵指標定義,我們就知道大屏上大概會顯示哪些內(nèi)容以及大屏會被分為幾塊,如圖所示,確定關鍵指標后,根據(jù)業(yè)務需求擬定各個指標展示的優(yōu)先級(主、次、輔)。
一般情況下,主要指標位于屏幕中央,多為動效豐富的地圖或翻牌器;次要指標位于屏幕兩側(cè)多為各類圖表;輔助指標的補充信息可不顯示或顯示于副屏或鼠標經(jīng)過顯示。以學校校情大屏為例:這里的關鍵指標是教學經(jīng)費投入、教學用房面積、多媒體教室座位等。
3.確定指標分析維度
同一個指標的數(shù)據(jù),從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設計,發(fā)現(xiàn)可視化圖形并沒有準確表達自己的意圖,也沒能向觀者傳達出應有的信息,可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。
4.選定可視化圖表類型
當確定好分析維度后,事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個圖表里篩選出最能體現(xiàn)我們設計意圖的那個就好了。選定圖表注意事項:易理解、可實現(xiàn)
(1)易理解:可視化設計要考慮大屏最終用戶,可視化結(jié)果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
(2)可實現(xiàn):我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等,然后評估數(shù)據(jù)是否能夠支撐相應的可視化表現(xiàn)。
5.了解物理大屏,確定設計稿尺寸
大屏一般分辨率比較高,如果不事先確定物理大屏尺寸,設計稿設計出來的效果被投放到大屏上就會有偏差失真。一般情況下,確定設計稿尺寸需要分兩種情況:
(1)當投屏電腦與與大屏系統(tǒng)尺寸比例、分辨率一致時,設計稿的尺寸、分辨率以投屏電腦為準;
(2)當投屏電腦與與大屏系統(tǒng)尺寸比例、分辨率不一致時,設計稿的尺寸、分辨率以物理大屏為準;
這里還需要注意的是:若物理大屏分辨率過高,可進行分辨率減半設計,但一般我們也不建議大屏用自適應方式,如果是自適應,系統(tǒng)就會按各自模塊的寬高比先計算實際值,一旦大屏內(nèi)容布局較多或指標計算復雜,則會非常影響大屏計算性能和實時分析能力。
6.頁面布局與劃分
尺寸確立后,接下來要對設計稿進行布局和頁面的劃分。這里的劃分,主要根據(jù)我們之前定好的業(yè)務指標進行,核心業(yè)務指標安排在中間位置、占較大面積;其余的指標按優(yōu)先級依次在核心指標周圍展開。一般把有關聯(lián)的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
這里我們列舉了一些7種頁面布局的要點,應用場景和優(yōu)勢,大家可以看看,下面我們分別來給大家展示下:
(1)標準大屏
對于標準大屏來說,我們有兩種,一種是常規(guī)布局,一種是左右布局:
常規(guī)布局就是中間為主要指標,左右兩邊次要指標,經(jīng)常用在教育、房地產(chǎn)、政務等行業(yè)的數(shù)據(jù)分析展示中;左右布局就是重點區(qū)域擴大,左或右放置少量指標,經(jīng)常用在智慧園區(qū)、智慧工廠、智慧城市等。
(2)超大屏
對于超大屏來說,我們有三種,一種是均等布局,一種是故事布局,還有一種是君臣布局:
(3)異形屏
對于異形屏來說,我們有兩種布局,一種是縱向布局,一種是繁星布局。
縱向布局就是將頁面分割為上中下部分,主要的應用場景是展會;繁星布局就是滿屏都是各種各樣的指標,盡可能多地展現(xiàn),經(jīng)常用于日常運維、監(jiān)管人員使用。
7.可視化設計
在這一步驟中,我們主要是根據(jù)定義好的設計風格與選定的圖表類型進行合理的可視化設計。
目前來講大屏可視化主要有指標類信息和地理類信息兩大可視化數(shù)據(jù)。指標類信息可視化效果相對簡單易實現(xiàn),而地理類信息一般可視化效果酷炫,但是開發(fā)相對困難,需要設計師跟開發(fā)多溝通的。
地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質(zhì)以及可交互實時演算等特點,所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求,硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況,所以這點也是需要提前溝通評估的。
下面我們分別從定義設計風格、可視化顏色搭配和動效設置來看下。
(1)定義設計風格
可視化大屏的設計風格主要根據(jù)行業(yè)類型、客戶喜好、具體展示指標整體搭配,但總體一般以深色為主,這主要是因為大屏如果是淺色系長時間觀看會造成眼睛疲勞、刺疼,還一點就是淺色上面不是很適合體現(xiàn)動感光線等特效的展示。
當然大屏雖酷炫,但我們也不能忘記了為了炫酷而炫酷,實際我們還是要以展示具體指標為主要目的。另外數(shù)據(jù)是核心,場景是大數(shù)據(jù)呈現(xiàn)的承載體,這里我們列舉了一些場景,比如:
①場景使用具有金屬質(zhì)感的深青灰,符合理性的、冷靜的、智能化產(chǎn)品的個性;
②數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色,和場景形成強對比,使數(shù)據(jù)更為突顯、更具吸引力;③為了強化客戶對于風險的感知,通過顏色區(qū)分數(shù)據(jù)的風險等級,更直觀的傳達數(shù)據(jù)的含義。如:高風險的使用紅色,紅色讓人聯(lián)想到危險、警報。
(2)可視化顏色搭配
色彩是最能給人直觀感受的,能夠直接的牽引用戶去尋找有效信息。整體色彩確定后,便運用色彩來劃分信息的層級關系,用主色調(diào)強調(diào)重點內(nèi)容,以引導用戶能夠清晰、明確、迅捷的識別重要信息。
圖表需要的顏色較多時,建議最多不超過12種色相。通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨6?12種不同色相。過多的顏色對傳達數(shù)據(jù)是沒有作用的,反而會讓人產(chǎn)生迷惑。關于這部分,前面我們已經(jīng)介紹過了,這里大家可以看看以下這些色卡來進行一步學習不同行業(yè)的顏色搭配。
(3)動效設置
在一些大屏項目中,有許多數(shù)據(jù)都是實時變化的,為了減少數(shù)據(jù)變化刷新時的突然性,我們也經(jīng)常會用到動效設計。
在整個動效設計的過程中,除過場動畫、數(shù)據(jù)的變化外,動效還肩負起增添空間感、平衡畫面和整合信息的作用。
但是在增加動效的同時,仍需考慮服務器在承載大量數(shù)據(jù)涌入的同時,是否能夠承載較多的動效,分析畫面與數(shù)據(jù)量,對動效部分進行適當取舍。使動效不必喧賓奪主,明確畫面中的重點進行展示。
8.頁面定稿與開發(fā)
實際上頁面開發(fā)階段并不是到了這一步才進行,這里說的頁面開發(fā)僅指前端樣式的實現(xiàn),實際上后臺數(shù)據(jù)準備工作在定義好分析指標后就已經(jīng)開始進行了,而我們當前的工作是把數(shù)據(jù)接入到前端,然后用設計好的樣式呈現(xiàn)出來。
這里可以按照以下幾個要點來繼續(xù)頁面定稿的核實
9.整體的細節(jié)調(diào)優(yōu)和測試
這部分是指頁面開發(fā)完成后,將真實頁面投放到大屏進行的測試與優(yōu)化。這里主要有兩部分工作:
第一,是視覺方面的測試:關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
第二,是性能與數(shù)據(jù)方面的測試:圖形圖表動畫是否流暢、數(shù)據(jù)加載、刷新有無異常;頁面長時間展示是否存在奔潰、卡死等情況;后臺控制系統(tǒng)能否正常切換前端頁面顯示。
06、小結(jié)
大屏因為大,承載數(shù)據(jù)多,為了避免觀者迷失,大屏信息呈現(xiàn)要有焦點、有主次??梢酝ㄟ^對比,先把核心數(shù)據(jù)拋給用戶,待用戶理解大屏主要內(nèi)容與展示邏輯后,再逐級瀏覽二三級內(nèi)容。