2022-6-13 博博
上文說(shuō)到可視化設(shè)計(jì)是一個(gè)綜合類交叉學(xué)科，同樣在大屏 UI 設(shè)計(jì)中也是一個(gè)相對(duì)復(fù)雜的流程，我們需要對(duì)大屏的布局、風(fēng)格、主視覺、信息圖表、字體、規(guī)范、動(dòng)效等方面綜合考慮，推導(dǎo)設(shè)計(jì)方案。
設(shè)計(jì)前：一定要對(duì)用戶需求充分分析和理解，要知道大屏的展示場(chǎng)景及設(shè)計(jì)分辨率，大屏的拼接方法都要有一定的了解，最后是跟開發(fā)溝通下實(shí)現(xiàn)的工具與方法。
設(shè)計(jì)中：構(gòu)思布局，可以在紙上簡(jiǎn)單畫一下。根據(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)一（分清頁(yè)面的主次關(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)場(chǎng)測(cè)試，看下整體展示效果，測(cè)試輸出是否有問題，有無(wú)拉伸問題，拼接縫與內(nèi)容有無(wú)穿插，及時(shí)與開發(fā)進(jìn)行頁(yè)面的校驗(yàn)工作，最終才算是設(shè)計(jì)完成。
下面針對(duì)可視化設(shè)計(jì)中布局、風(fēng)格、主視覺、信息圖表、字體、規(guī)范、動(dòng)效等 7 個(gè)方向細(xì)節(jié)點(diǎn)的拆解。
通過硬件設(shè)備信息可以得到可視化的設(shè)計(jì)尺寸，基于尺寸新建設(shè)計(jì)畫布后，第一件事就需考慮頁(yè)面的整體布局?？梢暬笃猎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ì)化布局。避免次要信息的面積過大，喧賓奪主，影響整體的視覺效果。
提起可視化大屏，大家都會(huì)聯(lián)想到：科技感、FUI、HUD 這些關(guān)鍵詞，可以說(shuō)可視化大屏跟科技、數(shù)據(jù)這兩詞是強(qiáng)關(guān)聯(lián)的，風(fēng)格上也基本是這一類方向。
定義設(shè)計(jì)風(fēng)格：一般會(huì)基于業(yè)務(wù)需求場(chǎng)景去定義幾個(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è)計(jì)的時(shí)候，只需調(diào)整卡片和標(biāo)題的裝飾，就能夠展現(xiàn)出不同的設(shè)計(jì)風(fēng)格。
主視覺部分大致分為：地球、地圖、智慧城市、行業(yè)類業(yè)務(wù)展示等。目前比較容易出效果的都會(huì)采用三維模型的處理方式。
地球：粒子地球、地圖貼圖、地球模型。
地圖：第三方在線地圖（百度、高德、騰訊、谷歌）基于地圖開放平臺(tái)進(jìn)行個(gè)性化配置。或者通過地理位置數(shù)據(jù)建模：如全國(guó)和各個(gè)省份的輪廓模型。
智慧城市：GIS 參數(shù)化生成簡(jiǎn)模和重點(diǎn)樓宇定制化建模。
行業(yè)類：多數(shù)為定制化建模。如工業(yè)類、醫(yī)療類、能源類、園區(qū)、學(xué)校、港口、工廠、倉(cāng)儲(chǔ)庫(kù)房、零售、工程、安防、國(guó)防軍工等。
以下圖片源于 DATAV
主視覺是可視化設(shè)計(jì)中的一大難點(diǎn)，不光是設(shè)計(jì)落地的時(shí)候也會(huì)有需要注意的點(diǎn)，這里建議大家在做之前一定要充分跟開發(fā)溝通，確認(rèn)好技術(shù)選型，方便后期輸出跟開發(fā)更加高效的對(duì)接。
圖表的設(shè)計(jì)原則是易理解、可實(shí)現(xiàn)，能夠準(zhǔn)確表達(dá)數(shù)據(jù)意圖，給用戶傳達(dá)明確信息。
以下圖片源于網(wǎng)絡(luò)，如侵刪
上圖通過使用場(chǎng)景可分為比較、聯(lián)系、構(gòu)成、分布四個(gè)維度解釋圖表的不同屬性類別。在做可視化大屏設(shè)計(jì)的時(shí)候可以參照上圖，選擇對(duì)應(yīng)的數(shù)據(jù)圖表。
比較
兩個(gè)及以上變量數(shù)據(jù)，一是基于分類不同的對(duì)比，二是基于時(shí)間維度的對(duì)比。常見的圖表：條形圖、柱狀圖、雷達(dá)圖、玫瑰圖、?；鶊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ù)）或者差別不明顯的場(chǎng)景。
線形圖
折線圖用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化，它的特點(diǎn)是反映事物隨時(shí)間或有序類別而變化的趨勢(shì)。
當(dāng)水平軸的數(shù)據(jù)類型為無(wú)序的分類或者垂直軸的數(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ù)，例如在過去十年全國(guó)三大產(chǎn)業(yè)的具體產(chǎn)值，以及 GDP 增長(zhǎng)率。
面積圖
面積圖強(qiáng)調(diào)數(shù)量隨時(shí)間而變化的程度，也可用于引起人們對(duì)總值趨勢(shì)的注意。適合于比較多個(gè)變量隨時(shí)間間隔變化趨勢(shì)。
散點(diǎn)圖
散點(diǎn)圖是一種使用直角坐標(biāo)來(lái)顯示一組數(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)卷起來(lái)）。適用于顯示三個(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ù)。
桑基圖
一種特定類型的流程圖，用于描述一組值到另一組值的流向，圖中延伸的分支的寬度對(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)和說(shuō)明問題所在的環(huán)節(jié)，進(jìn)而做出決策。 適用于業(yè)務(wù)流程比較規(guī)范、周期長(zhǎng)、環(huán)節(jié)多的流程分析，比如流程流量分析、轉(zhuǎn)化率分析。
熱力圖
將數(shù)值大小通過色塊有序且緊湊地在坐標(biāo)系中呈現(xiàn)。 適合呈現(xiàn)多組數(shù)據(jù)連續(xù)的數(shù)值分布，適合做數(shù)據(jù)的預(yù)測(cè)統(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í)之間的情況。金字塔圖適合展示分類的占比情況，不適合展示分類過多或者差別不明顯的場(chǎng)景。
文字是可視化展示中最重要的構(gòu)成要素之一，可視化大屏設(shè)計(jì)中字體的運(yùn)用其實(shí)原理跟網(wǎng)頁(yè) app 的邏輯基本一致。在字體選擇上會(huì)基于業(yè)務(wù)需求選擇對(duì)應(yīng)的字體，與設(shè)計(jì)風(fēng)格相結(jié)合。這里要注意的是字體有無(wú)襯線、字重、字距等。
大屏設(shè)計(jì)中，中文字體一般會(huì)采用瀏覽器默認(rèn)字體（微軟雅黑、思源黑體、蘋方等）頁(yè)面中標(biāo)題會(huì)采用特殊字體處理，常用的字體有：優(yōu)設(shè)標(biāo)題黑、時(shí)尚中黑簡(jiǎn)體、方正正中黑體等。英文數(shù)字字體推薦：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。
建立規(guī)范的主要目的是：保證設(shè)計(jì)的一致性、提高開發(fā)效率和還原度、方便迭代 ，輔助設(shè)計(jì)和開發(fā)更好地完成設(shè)計(jì)的協(xié)作。
可視化設(shè)計(jì)中規(guī)范一般會(huì)分為：色彩、文字、圖表、標(biāo)題控件等，跟網(wǎng)頁(yè)端規(guī)范同理，這里就不一一贅述了。
大數(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)效方案。
以上通過布局、風(fēng)格、主視覺、信息圖表、字體、規(guī)范、動(dòng)效等 7 個(gè)方向總結(jié)的基本知識(shí)和事項(xiàng)，能幫助我們快速進(jìn)入大屏設(shè)計(jì)及避免一些坑。由于篇幅原因字體、規(guī)范、動(dòng)效沒有詳細(xì)拆解說(shuō)明，后面會(huì)陸續(xù)更新相關(guān)文章，感謝大家支持?？梢暬w驗(yàn)遠(yuǎn)遠(yuǎn)不止這些。歡迎大家提出更多意見和建議，我們一起前行。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
