2022-6-13 博博
上文說到可視化設計是一個綜合類交叉學科，同樣在大屏 UI 設計中也是一個相對復雜的流程，我們需要對大屏的布局、風格、主視覺、信息圖表、字體、規范、動效等方面綜合考慮，推導設計方案。
設計前：一定要對用戶需求充分分析和理解，要知道大屏的展示場景及設計分辨率，大屏的拼接方法都要有一定的了解，最后是跟開發溝通下實現的工具與方法。
設計中：構思布局，可以在紙上簡單畫一下。根據業務需求定義設計關鍵詞進行設計的提煉與分析，方便自己找參考。顏色上背景深色為主，為了更好地聚焦，數據可以采用亮色，有一定的對比關系，便于業務信息傳達。字體上可以采用系統默認字體，數字采用特殊字體包的形式（這塊根據實際需求，切記不要照搬）。圖表選擇恰當的展示形式，同時保證視覺上的統一（分清頁面的主次關系，圖表的展示切莫設計過度，容易造成搶主體）
設計后：再次校驗信息層級、文字大小、圖表等各層級間的對比關系是否傳達準確，與技術同步溝通下技術的實現性。最后開發完成后，要拿演示 demo 去現場測試，看下整體展示效果，測試輸出是否有問題，有無拉伸問題，拼接縫與內容有無穿插，及時與開發進行頁面的校驗工作，最終才算是設計完成。
下面針對可視化設計中布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向細節點的拆解。
通過硬件設備信息可以得到可視化的設計尺寸，基于尺寸新建設計畫布后，第一件事就需考慮頁面的整體布局?？梢暬笃猎O計從信息布局到數據表達，都需要設計師對業務深入了解后才能用數據助力業務決策。
常見的大屏布局：居中結構、左右結構兩種常見的布局形式以常規的 16：9 模板為例，下面列舉的一些常見的布局形式，供大家參考。
居中結構
異形超寬拼接屏幕。
左右結構
布局的原則一定要主次分明，根據業務需求抽取關鍵性的指標，提取主要信息?？梢栽诩埳洗蟾女嬕幌?，然后在軟件里具體細化布局。避免次要信息的面積過大，喧賓奪主，影響整體的視覺效果。
提起可視化大屏，大家都會聯想到：科技感、FUI、HUD 這些關鍵詞，可以說可視化大屏跟科技、數據這兩詞是強關聯的，風格上也基本是這一類方向。
定義設計風格：一般會基于業務需求場景去定義幾個設計關鍵詞，根據關鍵詞去找一些參考圖，推導出貼合業務的設計風格。
我們可以通過調整顏色、裝飾細節、主視覺、字體等一些細節點控制區分不同的設計風。下面拿圖表舉例，我們在做設計的時候，只需調整卡片和標題的裝飾，就能夠展現出不同的設計風格。
主視覺部分大致分為：地球、地圖、智慧城市、行業類業務展示等。目前比較容易出效果的都會采用三維模型的處理方式。
地球：粒子地球、地圖貼圖、地球模型。
地圖：第三方在線地圖（百度、高德、騰訊、谷歌）基于地圖開放平臺進行個性化配置?；蛘咄ㄟ^地理位置數據建模：如全國和各個省份的輪廓模型。
智慧城市：GIS 參數化生成簡模和重點樓宇定制化建模。
行業類：多數為定制化建模。如工業類、醫療類、能源類、園區、學校、港口、工廠、倉儲庫房、零售、工程、安防、國防軍工等。
以下圖片源于 DATAV
主視覺是可視化設計中的一大難點，不光是設計落地的時候也會有需要注意的點，這里建議大家在做之前一定要充分跟開發溝通，確認好技術選型，方便后期輸出跟開發更加高效的對接。
圖表的設計原則是易理解、可實現，能夠準確表達數據意圖，給用戶傳達明確信息。
以下圖片源于網絡，如侵刪
上圖通過使用場景可分為比較、聯系、構成、分布四個維度解釋圖表的不同屬性類別。在做可視化大屏設計的時候可以參照上圖，選擇對應的數據圖表。
比較
兩個及以上變量數據，一是基于分類不同的對比，二是基于時間維度的對比。常見的圖表：條形圖、柱狀圖、雷達圖、玫瑰圖、?；鶊D等
聯系
兩個及以上數據之間的相關性，隨時間變化比較關聯。常見的圖表：散點圖、氣泡圖、多級餅圖、熱力圖、力導向圖等。
構成
指標里的數據都由哪幾部分組成、每部分占比如何。常見的圖表：餅圖、環形圖、堆積面積圖、堆積柱狀圖、瀑布圖等。
分布
指標里的數據主要集中在什么范圍、表現出怎樣的規律，想表達兩個數據點之間數量的演變過程。常見的圖表：階梯折線圖、面積圖、直方圖等。
基于圖表的類型可分為：餅圖、線形圖、柱狀圖、混合圖、面積圖、散點圖、極坐標圖、關系圖、樹圖、?；鶊D、漏斗圖、熱力圖、還有其他圖表類型等。
餅圖
適合展示分類的占比情況，不適合展示分類過多（超過 9 條數據）或者差別不明顯的場景。
線形圖
折線圖用于顯示數據在一個連續的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢。
當水平軸的數據類型為無序的分類或者垂直軸的數據類型為連續時間時，不適合使用折線圖。同樣，當折線的條數過多時不建議將多條線繪制在一張圖上。
柱狀圖
柱狀圖提供了分類數據的可視化展示，基于不同的數據類型有以上幾種不同的形式。分類數據是將數據分組成離散的組，例如月份、年齡組、鞋碼和動物。這些類別通常是定性的。圖表上的條形圖可以按任何順序排列。
混合圖
折線圖和堆疊柱狀圖的組合圖表。同時顯示兩個坐標軸，用于展示兩種不同類型的數據。
適用于帶有細分分類的累計數據大小以及與之相關的趨勢數據，例如在過去十年全國三大產業的具體產值，以及 GDP 增長率。
面積圖
面積圖強調數量隨時間而變化的程度，也可用于引起人們對總值趨勢的注意。適合于比較多個變量隨時間間隔變化趨勢。
散點圖
散點圖是一種使用直角坐標來顯示一組數據的兩個變量值的圖表。數據顯示為一個點的集合，每個點都有一個變量的值決定水平軸上的位置，另一個變量的值決定垂直軸上的位置。
通常用于顯示和比較數值，不光可以顯示趨勢，還能顯示數據集群的形狀，以及在數據云團中各數據點的關系。
極坐標圖
基于直角坐標系的徑向變形（相當于把直角坐標卷起來）。適用于顯示三個或更多的維度的變量對比或者部分與整體的趨勢。
關系圖
可以展示數據的占比情況，還能厘清多級數據之間的關系。 通常用于可視化大量元素之間的復雜關系。
樹圖
樹圖是一種流行的利用包含關系表達層次化數據的可視化方法，是研究多元目標問題的一般工具。 適合展示數據之間的層級關系，適合 6 條以上數據。
?；鶊D
一種特定類型的流程圖，用于描述一組值到另一組值的流向，圖中延伸的分支的寬度對應數據流量的大小。用以展示數據的層級關系。常用于可視化能源或成本轉移，也幫助我們確定各部分流量在總體中的大概占比情況。
漏斗圖
一種直觀表現業務流程中轉化情況的分析工具，總是開始于一個 100%的數量，結束于一個較小的數量。通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。 適用于業務流程比較規范、周期長、環節多的流程分析，比如流程流量分析、轉化率分析。
熱力圖
將數值大小通過色塊有序且緊湊地在坐標系中呈現。 適合呈現多組數據連續的數值分布，適合做數據的預測統計，可以在圖片上直接展示熱度。例如展示城市在不同時間段打車熱度情況。
其他圖表
詞云圖適用于對比大量文本或繪制特定形狀的詞云。水球圖適用于多個百分百數據呈現。子彈圖用于表達多項同類數據的對比，可以表達一項數據與不同目標的校對結果。 維諾圖適用于層級數據比較大小，同時能看到各層級之間的情況。金字塔圖適合展示分類的占比情況，不適合展示分類過多或者差別不明顯的場景。
文字是可視化展示中最重要的構成要素之一，可視化大屏設計中字體的運用其實原理跟網頁 app 的邏輯基本一致。在字體選擇上會基于業務需求選擇對應的字體，與設計風格相結合。這里要注意的是字體有無襯線、字重、字距等。
大屏設計中，中文字體一般會采用瀏覽器默認字體（微軟雅黑、思源黑體、蘋方等）頁面中標題會采用特殊字體處理，常用的字體有：優設標題黑、時尚中黑簡體、方正正中黑體等。英文數字字體推薦：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。
建立規范的主要目的是：保證設計的一致性、提高開發效率和還原度、方便迭代 ，輔助設計和開發更好地完成設計的協作。
可視化設計中規范一般會分為：色彩、文字、圖表、標題控件等，跟網頁端規范同理，這里就不一一贅述了。
大數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效能增加觀感體驗，凸顯關鍵產品內容、強調功能信息關聯，幫助用戶理解產品、情感化互動。但過分的動效極其容易喧賓奪主，影響用戶閱讀，反而弱化了數據的展示。
動效的設計原則
動效應優先滿足核心內容、故事線。常見的大屏動效 – 展示類，用于突出產品核心功能和特點。界面信息按照一定的規律呈現，引導用戶的視覺流向。
好的大屏設計應該是數據展示模塊最好動效不宜過多，要有一定的主次關系變化，例如一個動畫表現的視覺強，另一個就表現稍弱化，有強有弱、有主有次節奏才會舒服，同時動效要結合數據變化，考慮極端情況的展示效果，最終輸出一套完整的動效方案。
以上通過布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向總結的基本知識和事項，能幫助我們快速進入大屏設計及避免一些坑。由于篇幅原因字體、規范、動效沒有詳細拆解說明，后面會陸續更新相關文章，感謝大家支持?？梢暬w驗遠遠不止這些。歡迎大家提出更多意見和建議，我們一起前行。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
