可視化大屏設(shè)計(jì)快速入門指南,看這篇就夠了!
隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展,很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。智慧城市、智慧交通、智慧醫(yī)療等等越來越多的行業(yè)都有了可視化的需求,可視化行業(yè)也迎來了迅速發(fā)展的成長期。
數(shù)據(jù)可視化釋義
數(shù)據(jù)可視化就是把一些相對(duì)復(fù)雜、抽象的、我們看不懂的數(shù)據(jù)數(shù)據(jù)通過"可視化"的方式,運(yùn)用圖形化的手段清晰有效地將數(shù)據(jù)信息進(jìn)行解讀和傳達(dá),幫助我們發(fā)現(xiàn)其中的規(guī)律和特征,挖掘數(shù)據(jù)背后的價(jià)值。
可視化大屏
可視化大屏是以 大屏 為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。它的應(yīng)用場景非廣泛如 ToC、ToB、ToG 等都會(huì)存在。一般應(yīng)用在會(huì)議展廳、園區(qū)管理、城市交通調(diào)度中心、公安指揮中心、企業(yè)生產(chǎn)監(jiān)控等重要場所。
可視化用戶群體相對(duì)比較明確,主要是單位領(lǐng)導(dǎo)及一些一線人員。通過交互式實(shí)時(shí)數(shù)據(jù)監(jiān)測,洞悉運(yùn)營增長,助力智能高效決策。
伴隨行業(yè)的發(fā)展,行業(yè)內(nèi)也對(duì)可視化進(jìn)行了一些行業(yè)細(xì)分。常見的一些類別:行業(yè)可視化(如交通、醫(yī)療、金融、軍警部隊(duì)、農(nóng)業(yè)、工廠、化工等)、智能終端系統(tǒng)類(定制化終端產(chǎn)品)、演示 demo(數(shù)據(jù)演示、展覽展示、數(shù)據(jù)看板 )、可視化分析系統(tǒng)(通過對(duì)數(shù)據(jù)的分析監(jiān)控輔助決策,如交通預(yù)警平臺(tái)、天氣監(jiān)控平臺(tái)等)。
市場現(xiàn)狀
1. 平臺(tái)化
由于近幾年可視化的需求越來越大,一般的公司都會(huì)有一些可視化的需求,各大廠商也逐漸整合可視化資源,實(shí)現(xiàn)平臺(tái)化、低代碼化。滿足了大多數(shù)公司的可視化需求。國內(nèi)比較知名的可視化廠商:光啟元(Ray design)、Data V、優(yōu)諾科技(森工廠)、袋鼠云(Easy V)、數(shù)字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺(tái),拖拖拽拽就能實(shí)現(xiàn)一些不錯(cuò)的效果,滿足了一些公司的展示需求。
2. 實(shí)現(xiàn)方式
目前可視化框架是大多數(shù)都是基于 Web 端的(基于 web 開發(fā)或者 web 封裝)而非 PC 端。常見的可視化實(shí)現(xiàn)方式是二維加三維相結(jié)合,比如大屏兩側(cè)的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實(shí)現(xiàn)。
主視覺部分會(huì)基于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具去實(shí)現(xiàn)。滿足三維炫酷的效果需求。使整個(gè)可視化大屏效果有了質(zhì)的提升。這些三維工具的優(yōu)勢(shì)是三維粒子效果能很好的支持,且效果非常炫酷。多平臺(tái)支持,可通過 webgl 封裝在瀏覽器里打開使用。缺點(diǎn)就是維護(hù)成本較高,需要相關(guān)的專業(yè)人員去開發(fā)維護(hù),有一定的使用門檻。一般公司如果不是專門做可視化相關(guān)業(yè)務(wù)不會(huì)配備相關(guān)專業(yè)人員。
說下幾種工具的優(yōu)缺點(diǎn):
Ventuz 國內(nèi)用的相對(duì)較少,相關(guān)專業(yè)人員也較少。虛幻引擎效果上是比較好的,但是對(duì) WebGL 參數(shù)支持的較少。Threejs 雖然支持三維但是沒有 Unity 那么強(qiáng)大的編輯器,一些復(fù)雜的效果實(shí)現(xiàn)不了。相對(duì)于前者 Unity 相對(duì)成熟一些,也是目前市場上用的比較多的,不過 three 對(duì)于前端開發(fā)同學(xué)更友好一些,容易上手,學(xué)習(xí)成本相對(duì)低一些。
可視化設(shè)計(jì)師應(yīng)了解的知識(shí)
可視化設(shè)計(jì)是相對(duì)新興的行業(yè),就目前市場來看也是當(dāng)今比較火的行業(yè)。作為一名設(shè)計(jì)師,不僅僅是只做完效果圖就能行的,是一個(gè)結(jié)合 硬件設(shè)備、UI 設(shè)計(jì)、三維建模、三維渲染、動(dòng)態(tài)設(shè)計(jì)、數(shù)據(jù)可視化、圖形技術(shù)、GIS 數(shù)據(jù)、渲染引擎、交互技術(shù)等等綜合類的交叉學(xué)科。
1. 硬件設(shè)備
硬件設(shè)備信息是做大屏一切的開始,我們首先要了解它的尺寸、比例、屏幕種類(拼接屏、LED 屏)投影方式 等等 一系列的信息,方便后續(xù)的設(shè)計(jì)工作。
上圖為一些常見的屏幕拼接方式,確認(rèn)好屏幕的拼接方式就可以計(jì)算出整個(gè)大屏的物理分辨率。舉個(gè)例子:上圖中最后一個(gè)的拼接方式為橫向3塊屏,豎向2塊屏幕。他們每塊的屏幕分辨率為 寬1920px 高1080px,那么這塊2×3的拼接屏幕的尺寸就應(yīng)該是:寬度 1920乘以3(橫向3塊屏)高度1080乘以2(豎向2塊屏)得出 整個(gè)屏幕的物理分辨率為:5760×2160。
物理分辨率 VS 輸出分辨率
大屏的投射方式大致分為三種:1、電腦屏幕 1 比 1 等比例投屏。2、通過主機(jī)直接輸出給拼接屏(這種大多都是一些自定義比例屏幕和分辨率超大的情況會(huì)應(yīng)用到)。3、投影儀投射。
一般大屏的物理屏幕分辨率大小都有不同,有的是極大的,幾萬像素,如果我們按照物理分辨率來去做設(shè)計(jì)的話會(huì)很卡,所以這里設(shè)計(jì)尺寸建議按照輸出分辨率設(shè)計(jì)。輸出分辨率會(huì)受到硬件的限制(超大情況下需等比縮放),我們一般會(huì)采用輸出分辨率作為最終 的設(shè)計(jì)尺寸。針對(duì)硬件設(shè)備設(shè)計(jì)時(shí)要關(guān)注以下幾點(diǎn):屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設(shè)計(jì)尺寸、內(nèi)容排布、拼接縫的規(guī)避等問題。
2. GIS 數(shù)據(jù)
通常應(yīng)用于參數(shù)化建模,主要是通過一些地理位置高程數(shù)據(jù)進(jìn)行模型的生成。屬于智慧城市可視化設(shè)計(jì)的基礎(chǔ)設(shè)施。
常見的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于貼圖處理)。
一些常用的工具:Qgis、Arcgis、Google mapper。
3. 三維建模
在可視化設(shè)計(jì)中,一般我們會(huì)結(jié)合生成 參數(shù)化模型 加 定制化手工模型 的方式處理整體效果。這么處理的目的:一是設(shè)計(jì)上能突出主體,增加畫面的層次感。二是在性能上能很好地優(yōu)化,提高整體性能。
下圖為設(shè)計(jì)側(cè)到開發(fā)側(cè)對(duì)接流程:
4. 動(dòng)效設(shè)計(jì)
常見的一些動(dòng)效對(duì)接格式:GIF、MP4、APNG、Lottie、序列幀。感興趣的小伙伴可看這篇:
5. 圖形技術(shù)
了解圖形成像原理,是由一個(gè)個(gè)的粒子點(diǎn)生成的畫面。
下圖是由一個(gè) 50×100 的粒子組成的平面,每個(gè)粒子都會(huì)對(duì)應(yīng)的 xy 軸的坐標(biāo)位置,我們通過控制的粒子透明度、大小、顏色、位置、旋轉(zhuǎn)等參數(shù)呈現(xiàn)不同的視覺效果。
世界地圖的是通過一個(gè)一個(gè)粒子成像形成的畫面,其中黑色=0、白色=1。比如粒子大小是 1,它對(duì)應(yīng)的位置是黑色,黑色是 0,1×0 就=0 顯示為黑色。
我們常做的粒子世界地圖就是通過控制粒子黑白 x 粒子大小疊加出來的。
比如我們做粒子地球的時(shí)候是通過一張貼圖來去控制黑白度 海洋是黑色所以就不顯示粒子,陸地為白色顯示 為白色粒子,最終呈現(xiàn)了一個(gè)粒子地球的效果。
6. 渲染引擎的技術(shù)架構(gòu)
前面實(shí)現(xiàn)方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具實(shí)現(xiàn)的。它們的底層是由 BS(Browser-Server)架構(gòu)和 CS(Client-Server)架構(gòu)兩大架構(gòu)組成的。
BS 架構(gòu)與 CS 架構(gòu)特點(diǎn)
BS:(Browser-Server)瀏覽器/服務(wù)器模式,web 應(yīng)用可以實(shí)現(xiàn)跨平臺(tái),客戶端零維護(hù),但是個(gè)性化能力低,響應(yīng)速度較慢。WebGL 就屬于 BS 架構(gòu)的一種。優(yōu)點(diǎn)就是使用便捷、數(shù)據(jù)實(shí)時(shí)更新、跨平臺(tái)。缺點(diǎn)是渲染效果較差,大場景支持差。
CS:(Client Server,客戶端/服務(wù)器模式),桌面級(jí)應(yīng)用響應(yīng)速度快,安全性強(qiáng),個(gè)性化能力強(qiáng),響應(yīng)數(shù)據(jù)較快。Unreal Engine、Unity3D、Ventuz 屬于 CS 框架。優(yōu)勢(shì)就是整體渲染視覺效果棒,大場景支持好,缺點(diǎn)是必須安裝客戶端、電腦性能要求高、不同平臺(tái)需要不同文件。
可視化大屏 UI
可視化設(shè)計(jì)是一個(gè)綜合類交叉學(xué)科,同樣在大屏 UI 設(shè)計(jì)中也是一個(gè)相對(duì)復(fù)雜的流程,我們需要對(duì)大屏的布局、風(fēng)格、主視覺、信息圖表、字體、規(guī)范、動(dòng)效等方面綜合考慮,推導(dǎo)設(shè)計(jì)方案。
設(shè)計(jì)前:一定要對(duì)用戶需求充分分析和理解,要知道大屏的展示場景及設(shè)計(jì)分辨率,大屏的拼接方法都要有一定的了解,最后是跟開發(fā)溝通下實(shí)現(xiàn)的工具與方法。
設(shè)計(jì)中:構(gòu)思布局,可以在紙上簡單畫一下。根據(jù)業(yè)務(wù)需求定義設(shè)計(jì)關(guān)鍵詞進(jìn)行設(shè)計(jì)的提煉與分析,方便自己找參考。顏色上背景深色為主,為了更好地聚焦,數(shù)據(jù)可以采用亮色,有一定的對(duì)比關(guān)系,便于業(yè)務(wù)信息傳達(dá)。字體上可以采用系統(tǒng)默認(rèn)字體 數(shù)字采用特殊字體包的形式(這塊根據(jù)實(shí)際需求,切記不要照搬)。圖表選擇恰當(dāng)?shù)恼故拘问?,同時(shí)保證視覺上的統(tǒng)一(分清頁面的主次關(guān)系,圖表的展示切莫設(shè)計(jì)過度,容易造成搶主體)
設(shè)計(jì)后:再次校驗(yàn)信息層級(jí)、文字大小、圖表等各層級(jí)間的對(duì)比關(guān)系是否傳達(dá)準(zhǔn)確,與技術(shù)同步溝通下技術(shù)的實(shí)現(xiàn)性。最后開發(fā)完成后,要拿演示 demo 去現(xiàn)場測試,看下整體展示效果,測試輸出是否有問題,有無拉伸問題,拼接縫與內(nèi)容有無穿插,及時(shí)與開發(fā)進(jìn)行頁面的校驗(yàn)工作,最終才算是設(shè)計(jì)完成。
下面針對(duì)可視化設(shè)計(jì)中 布局、風(fēng)格、主視覺、信息圖表、字體、規(guī)范、動(dòng)效等 7 個(gè)方向細(xì)節(jié)點(diǎn)的拆解
1. 布局
通過硬件設(shè)備信息可以得到可視化的設(shè)計(jì)尺寸,基于尺寸新建設(shè)計(jì)畫布后,第一件事就需考慮頁面的整體布局??梢暬笃猎O(shè)計(jì)從信息布局到數(shù)據(jù)表達(dá),都需要設(shè)計(jì)師對(duì)業(yè)務(wù)深入了解后才能用數(shù)據(jù)助力業(yè)務(wù)決策。
常見的大屏布局:居中結(jié)構(gòu)、左右結(jié)構(gòu)兩種種常見的布局形式以常規(guī)的 16:9 模板為例,下面列舉的一些常見的布局形式,供大家參考。
居中結(jié)構(gòu)
異形超寬拼接屏幕
左右結(jié)構(gòu)
布局的原則一定要主次分明,根據(jù)業(yè)務(wù)需求抽取關(guān)鍵性的指標(biāo),提取主要信息??梢栽诩埳洗蟾女嬕幌拢缓笤谲浖锞唧w細(xì)化布局。避免次要信息的面積過大,喧賓奪主,影響整體的視覺效果。
2. 風(fēng)格
提起可視化大屏,大家都會(huì)聯(lián)想到:科技感、FUI、HUD 這些關(guān)鍵詞,可以說可視化大屏跟科技、數(shù)據(jù)這兩詞是強(qiáng)關(guān)聯(lián)的,風(fēng)格上也基本是這一類方向。
定義設(shè)計(jì)風(fēng)格:一般會(huì)基于業(yè)務(wù)需求場景去定義幾個(gè)設(shè)計(jì)關(guān)鍵詞,根據(jù)關(guān)鍵詞去找一些參考圖,推導(dǎo)出貼合業(yè)務(wù)的設(shè)計(jì)風(fēng)格。
我們可以通過調(diào)整顏色、裝飾細(xì)節(jié)、主視覺、字體等一些細(xì)節(jié)點(diǎn)控制區(qū)分不同的設(shè)計(jì)風(fēng)。下面拿圖表舉例,我們?cè)谧鲈O(shè)的時(shí)候,只需調(diào)整卡片和標(biāo)題的裝飾,就能夠展現(xiàn)出不同的設(shè)計(jì)風(fēng)格。
3. 主視覺
主視覺部分大致分為:地球、地圖、智慧城市、行業(yè)類業(yè)務(wù)展示等。目前比較容易出效果的都會(huì)采用三維模型的處理方式。地球:粒子地球、地圖貼圖、地球模型。
地圖:第三方在線地圖(百度、高德、騰訊、谷歌)基于 地圖開放平臺(tái)進(jìn)行個(gè)性化配置?;蛘咄ㄟ^地理位置數(shù)據(jù)建模:如全國和各個(gè)省份的輪廓模型。
智慧城市:GIS 參數(shù)化生成簡模和重點(diǎn)樓宇定制化建模。
行業(yè)類:多數(shù)為定制化建模。如工業(yè)類、醫(yī)療類、能源類、園區(qū)、學(xué)校、港口、工廠、倉儲(chǔ)庫房、零售、工程、安防、國防軍工等。
以上圖片源于 DAT
主視覺是可視化設(shè)計(jì)中的一大難點(diǎn),不光是設(shè)計(jì)落地的時(shí)候也會(huì)有需要注意的點(diǎn),這里建議大家在做之前一定要充分跟開發(fā)溝通,確認(rèn)好技術(shù)選型,方便后期輸出跟開發(fā)更加高效的對(duì)接。
4. 信息圖表
圖表的設(shè)計(jì)原則是易理解、可實(shí)現(xiàn),能夠準(zhǔn)確表達(dá)數(shù)據(jù)意圖,給用戶傳達(dá)明確信息。
以上圖片源于網(wǎng)絡(luò),如侵刪
上圖通過通過使用場景可分為比較、聯(lián)系、構(gòu)成、分布四個(gè)維度解釋圖表的不同屬性類別。在做可視化大屏設(shè)計(jì)的時(shí)候可以參照上圖,選擇對(duì)應(yīng)的數(shù)據(jù)圖表。
比較
兩個(gè)及以上變量數(shù)據(jù),一是基于分類不同的對(duì)比,二是基于時(shí)間維度的對(duì)比。常見的圖表:條形圖、柱狀圖、雷達(dá)圖、玫瑰圖、桑基圖等
聯(lián)系
兩個(gè)及以上數(shù)據(jù)之間的相關(guān)性,隨時(shí)間變化比較關(guān)聯(lián)。常見的圖表:散點(diǎn)圖、氣泡圖、多級(jí)餅圖、熱力圖、力導(dǎo)向圖等。
構(gòu)成
指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。常見的圖表:餅圖、環(huán)形圖、堆積面積圖、堆積柱狀圖、瀑布圖等。
分布
指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律,想表達(dá)兩個(gè)數(shù)據(jù)點(diǎn)之間數(shù)量的演變過程。常見的圖表:階梯折線圖、面積圖、直方圖等。
基于圖表的類型可分為:餅圖、線形圖、柱狀圖、混合圖、面積圖、散點(diǎn)圖、極坐標(biāo)圖、關(guān)系圖、樹圖、桑基圖、漏斗圖、熱力圖、還有其他圖表類型等。
餅圖
適合展示分類的占比情況,不適合展示分類過多(超過 9 條數(shù)據(jù))或者差別不明顯的場景。
線形圖
折線圖用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化,它的特點(diǎn)是反映事物隨時(shí)間或有序類別而變化的趨勢(shì)。
當(dāng)水平軸的數(shù)據(jù)類型為無序的分類或者垂直軸的數(shù)據(jù)類型為連續(xù)時(shí)間時(shí),不適合使用折線圖。同樣,當(dāng)折線的條數(shù)過多時(shí)不建議將多條線繪制在一張圖上。
柱狀圖
柱狀圖提供了分類數(shù)據(jù)的可視化展示,基于不同的數(shù)據(jù)類型有以上幾種不同的形式。分類數(shù)據(jù)是將數(shù)據(jù)分組成離散的組,例如月份、年齡組、鞋碼和動(dòng)物。這些類別通常是定性的。圖表上的條形圖可以按任何順序排列。
混合圖
折線圖和堆疊柱狀圖的組合圖表。同時(shí)顯示兩個(gè)坐標(biāo)軸,用于展示兩種不同類型的數(shù)據(jù)。 適用于帶有細(xì)分分類的累計(jì)數(shù)據(jù)大小以及與之相關(guān)的趨勢(shì)數(shù)據(jù),例如在過去十年全國三大產(chǎn)業(yè)的具體產(chǎn)值,以及 GDP 增長率。
面積圖
面積圖強(qiáng)調(diào)數(shù)量隨時(shí)間而變化的程度,也可用于引起人們對(duì)總值趨勢(shì)的注意。適合于比較多個(gè)變量隨時(shí)間間隔變化趨勢(shì)。
散點(diǎn)圖
散點(diǎn)圖是一種使用直角坐標(biāo)來顯示一組數(shù)據(jù)的兩個(gè)變量值的圖表。數(shù)據(jù)顯示為一個(gè)點(diǎn)的集合,每個(gè)點(diǎn)都有一個(gè)變量的值決定水平軸上的位置,另一個(gè)變量的值決定垂直軸上的位置。
通常用于顯示和比較數(shù)值,不光可以顯示趨勢(shì),還能顯示數(shù)據(jù)集群的形狀,以及在數(shù)據(jù)云團(tuán)中各數(shù)據(jù)點(diǎn)的關(guān)系。
極坐標(biāo)圖
基于直角坐標(biāo)系的徑向變形(相當(dāng)于把直角坐標(biāo)卷起來)。適用于顯示三個(gè)或更多的維度的變量對(duì)比或者部分與整體的趨勢(shì)。
關(guān)系圖
可以展示數(shù)據(jù)的占比情況,還能厘清多級(jí)數(shù)據(jù)之間的關(guān)系。 通常用于可視化大量元素之間的復(fù)雜關(guān)系
樹圖
樹圖是一種流行的利用包含關(guān)系表達(dá)層次化數(shù)據(jù)的可視化方法,是研究多元目標(biāo)問題的一般工具。 適合展示數(shù)據(jù)之間的層級(jí)關(guān)系,適合 6 條以上數(shù)據(jù)。
?;鶊D
一種特定類型的流程圖,用于描述一組值到另一組值的流向,圖中延伸的分支的寬度對(duì)應(yīng)數(shù)據(jù)流量的大小。用以展示數(shù)據(jù)的層級(jí)關(guān)系。常用于可視化能源或成本轉(zhuǎn)移,也幫助我們確定各部分流量在總體中的大概占比情況。
漏斗圖
一種直觀表現(xiàn)業(yè)務(wù)流程中轉(zhuǎn)化情況的分析工具,總是開始于一個(gè) 100%的數(shù)量,結(jié)束于一個(gè)較小的數(shù)量。通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進(jìn)而做出決策。 適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的流程分析,比如流程流量分析、轉(zhuǎn)化率分析。
熱力圖
將數(shù)值大小通過色塊有序且緊湊地在坐標(biāo)系中呈現(xiàn)。 適合呈現(xiàn)多組數(shù)據(jù)連續(xù)的數(shù)值分布,適合做數(shù)據(jù)的預(yù)測統(tǒng)計(jì),可以在圖片上直接展示熱度。例如展示城市在不同時(shí)間段打車熱度情況。
其他圖表
詞云圖適用于對(duì)比大量文本或繪制特定形狀的詞云。水球圖適用于多個(gè)百分百數(shù)據(jù)呈現(xiàn)。子彈圖用于表達(dá)多項(xiàng)同類數(shù)據(jù)的對(duì)比,可以表達(dá)一項(xiàng)數(shù)據(jù)與不同目標(biāo)的校對(duì)結(jié)果。 維諾圖適用于層級(jí)數(shù)據(jù)比較大小,同時(shí)能看到各層級(jí)之間的情況。金字塔圖適合展示分類的占比情況,不適合展示分類過多或者差別不明顯的場景。
5. 字體
文字是可視化展示中最重要的構(gòu)成要素之一,可視化大屏設(shè)計(jì)中字體的運(yùn)用其實(shí)原理跟網(wǎng)頁 app 的 邏輯基本一致。在字體選擇上會(huì)基于業(yè)務(wù)需求選擇對(duì)應(yīng)的字體,一會(huì)會(huì)與設(shè)計(jì)風(fēng)格相結(jié)合。這里要注意的是字體有無襯線、字重、字距等。
大屏設(shè)計(jì)中,中文字體一般會(huì)采用瀏覽器默認(rèn)字體(微軟雅黑、思源黑體、蘋方等)頁面中標(biāo)題會(huì)采用特殊字體處理,常用的字體有:優(yōu)設(shè)標(biāo)題黑、旁門正道標(biāo)題體、時(shí)尚中黑簡體、方正正中黑體等。英文數(shù)字字體推薦:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。
6. 規(guī)范
建立規(guī)范的主要目的是:保證設(shè)計(jì)的一致性、提高開發(fā)效率和還原度、方便迭代 ,輔助設(shè)計(jì)和開發(fā)更好地完成設(shè)計(jì)的協(xié)作。可視化設(shè)計(jì)中規(guī)范一般會(huì)分為:色彩、文字、圖表、標(biāo)題控件等,跟網(wǎng)頁端規(guī)范同理,這里就不一一贅述了。
7. 動(dòng)效
大數(shù)據(jù)可視化大屏設(shè)計(jì)少不了動(dòng)效,動(dòng)效是可視化重要的組成部分,動(dòng)效能增加觀感體驗(yàn),凸顯關(guān)鍵產(chǎn)品內(nèi)容、強(qiáng)調(diào)功能信息關(guān)聯(lián),幫助用戶理解產(chǎn)品、情感化互動(dòng)。但過分的動(dòng)效極其容易喧賓奪主,影響用戶閱讀,反而弱化了數(shù)據(jù)的展示。
動(dòng)效的設(shè)計(jì)原則
動(dòng)效應(yīng)優(yōu)先滿足核心內(nèi)容、故事線。常見的大屏動(dòng)效 – 展示類,用于突出產(chǎn)品核心功能和特點(diǎn)。界面信息按照一定的規(guī)律呈現(xiàn),引導(dǎo)用戶的視覺流向。
好的大屏設(shè)計(jì)應(yīng)該是數(shù)據(jù)展示模塊最好動(dòng)效不易過多,要有一定的主次關(guān)系變化,例如一個(gè)動(dòng)畫表現(xiàn)的視覺強(qiáng),另一個(gè)就表現(xiàn)稍弱化,有強(qiáng)有弱、有主有次節(jié)奏才會(huì)舒服,同時(shí)動(dòng)效要結(jié)合數(shù)據(jù)變化,考慮極端情況的展示效果,最終輸出一套完整的動(dòng)效方案。
最后
以上是我對(duì)可視化參差不齊的一些認(rèn)知,主要是給大家普及可視化設(shè)計(jì)的一些流程以及相關(guān)的專業(yè)知識(shí),希望能夠幫助你快速進(jìn)入大屏設(shè)計(jì)及避免一些坑。由于篇幅原因字體、規(guī)范、動(dòng)效沒有詳細(xì)拆解說明,后面會(huì)陸續(xù)更新相關(guān)文章,感謝大家支持??梢暬w驗(yàn)遠(yuǎn)遠(yuǎn)不止這些。歡迎大家提出更多意見和建議,我們一起前行。
作者:Mr.小六
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)