隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。

接下來為大家介紹大屏可視化的UI設計。

 --大屏UI設計--

--大數據可視化ui設計賞析--

（圖片均來源于網絡）

點擊查看更多UI/UE設計案例??????

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。

接下來為大家介紹大屏可視化的UI設計。

 --大屏UI設計--

--大數據可視化ui設計賞析--

（圖片均來源于網絡）

點擊查看更多UI/UE設計案例??????

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

文章來源：站酷

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。接下來為大家介紹大屏可視化的UI設計。

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

（圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

   隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。接下來為大家介紹大屏可視化的UI設計。

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

（圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。在數據可視化中，最常用的坐標系分為笛卡爾坐標系和極坐標系，本文介紹的坐標軸設計主要也是圍繞直角坐標系展開。

什么是坐標軸

在說坐標軸之前先來介紹下什么是坐標系。坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。

維基百科對坐標系的定義是：對于一個 n 維系統，能夠使每一個點和一組 n 個標量構成一一對應的系統，它可以用一個有序多元組表示一個點的位置。

數據可視化中，最常用的坐標系有兩種：笛卡爾坐標系和極坐標系，均為二維坐標系。

• 笛卡爾坐標系即直角坐標系，是由相互垂直的兩條軸線構成。
• 極坐標系由極點、極軸組成，坐標系內任何一個點都可以用極徑和夾角（逆時針）表示。用到直角坐標系的常見圖表有柱狀圖、折線圖、面積圖、條形圖等。

下文介紹的坐標軸設計主要也是圍繞直角坐標系展開，用到極坐標系的圖表有餅圖、圓環圖、雷達圖等。

坐標軸是坐標系的構成部分，是定義域軸和值域軸的統稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數據大部分都有一定的現實意義，因此我們可以根據坐標軸對應的變量是連續數據還是離散數據，將坐標軸分成連續軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。

坐標軸的構成要素

介紹坐標軸設計前，我們先將坐標軸拆分成「原子」要素，具體分為軸線、軸刻度、軸標簽、軸標題/單位、網格線。

坐標軸易被忽視的設計細節

根據坐標軸的構成，分類討論下每個構成要素容易被忽視的設計細節。

軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。

軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應的數據點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

網格線用于定位數據點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。

軸標題/單位主要用于說明定義域軸、值域軸的數據含義。當可視化圖表標題、圖例、軸標簽已經能充分表達數據含義，無需單獨顯示標題/單位，「如無必要，勿增實體」。

軸標簽的設計就比較復雜，涉及到的細節點很多，而且對于定義域軸和值域軸上的標簽和單位設計要考慮的細節點還有差異。下文將定義域軸和值域軸看成 x 軸和 y 軸，便于說明。

1. x軸標簽設計

x 軸標簽的設計重點在顯示規則上，不同的坐標軸類型有不同的處理方式。

連續軸/時間軸的標簽顯示

連續軸/時間軸，是由一組前后包含同等差值的等差數列組成，缺少幾個數值也能明顯看出中間的對應關系。當多個標簽在容器內全顯示發生重疊，我們可以利用抽樣顯示的手段來避免這種情況。這里不推薦使用旋轉，一方面從美觀度上，旋轉可能會破壞界面整體協調，另一方面，連續/時間軸非必須顯示所有軸標簽，抽樣標簽已經能滿足用戶對當前數組定義域的理解。

介紹一種常見的抽樣方式：等分抽樣

當多個標簽在 x 軸無法完全顯示，優先保留首尾標簽，其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數是合數，能被 1 和其本身以外的數整除。如果間隔數為質數，就需要「-1」轉成合數。

舉個例子：11 個標簽，間隔數是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 個標簽，間隔數是 11，無法等分，需要在間隔數基礎上再「-1」，轉成合數 10 后再等分，此時最后一個標簽顯示在倒數第二個數據點上。

有人會問了，能被那么多數等分，到底該選哪個呢？這就要根據標簽長度來定，選擇能放下最多標簽的等分值。由于連續軸/時間軸，一般是數值、日期、時間等，字符長度有限，即使抽樣后也能保證顯示出一定數量的標簽。

等分抽樣不太適用于表達某個時間周期內的走勢折線圖，因為最后一個標簽不一定對應最后一個數據點。對于這類折線圖，能清楚表明起始時間和末尾時間，相比顯示更多時間標簽重要性來的更高。設計上可以只顯示首尾標簽，或首尾 + 中間值。

分類軸的標簽顯示

分類軸是由幾組離散數據組成，相互之間獨立存在，無緊密邏輯關聯。若采用抽樣規則，隱藏一些標簽，用戶對圖表認知就會有困難，違背了數據可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉 45 度，若 45 度仍顯示不下，繼續旋轉 90 度。如果 90 度還是放不下就要考慮結合圖表交互或反轉圖表。

標簽旋轉方向也有講究，因為人的視覺習慣是從左到右，從上到下，標簽順時針旋轉 45 度更符合用戶的瀏覽動線。

分類軸標簽字段有長有短，長文本標簽直接旋轉不僅影響美觀，而且也不利于用戶閱讀。如果數據量比較少只有 2~4 個，長文本標簽更適合水平展示，顯示不下省略即可；如果數據量比較多，就限定字符數后旋轉。

2. y軸標簽設計

y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度自適應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。

y軸標簽數量

標簽數量不建議過多，太多的標簽必定導致橫向網格線變多，造成元素冗余，干擾圖形信息表達。根據 7±2 設計原則，y 軸標簽數量最多不超過這個范圍。

y軸標簽取值范圍

y 軸標簽的取值范圍決定了圖形在整個繪圖區域的顯示高度。

折線圖 y 軸標簽取值一般保證圖形約占繪圖區域的 2/3，以更有效的傳達數據波動幅度，避免掩蓋和夸大變化趨勢。2/3 即斐波那契數列第二位起，相鄰兩數之比，也是黃金分割最簡單的計算方法。

柱狀圖的 y 軸標簽取值應從 0 基線開始，以恰當反映數值。如果展示被截斷的柱狀圖，可能會誤導觀眾做出錯誤的判斷。

y軸標簽數據格式

y 軸標簽的數據格式在 ant.vision 寫的比較詳細，重復內容不在此說明，重點講下一些特殊的設計細節。標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。

正負向的 y 軸標簽，由于負值帶「-」符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上「+」，以達到視覺平衡的效果。

總結

寫了那么多關于坐標軸的設計，你是不是恍然大悟，原來小小的坐標軸還有如此之多的細節。往常我們做圖表設計，可能只是用網上自動生成的圖表簡單調整下，或者按照通用樣式來設計。然而，通用樣式雖然能表達數據意義，但也缺少了對圖表細節的把控，失了精致優雅的感覺。

作為數據可視化設計的一小部分，就是這些設計細節，決定了圖表最終的傳達效果。

文章來源：優設    作者：米粒的DesignNote

     如今大數據產業正在超出我們的想象悄然發展，而隨著大數據時代的到來，越來越多的公司開始意識到數據資源的管理和運用。今天就給大家介紹一些可視化大屏的UI設計。

    --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

（以上圖片均來自于網絡）

其實可視化大屏的UI設計并不只是一個簡單的設計，其核心就是要以展示數據為核心，不管在多么炫目的情況下都不會影響數據的展示。

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

（圖片均來源于網絡）

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

    更多精彩文章：

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

可能是目前大屏數據可視化設計介紹最詳盡的一篇文章了，可以當做設計手冊使用的一篇經驗分享

一、基礎概念

1、什么是數據可視化

把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

數據可視化作品《launchit》

作者：Shane Mielke 

作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對應人數

數據可視化作品《world-drawn-by-travelers》

作者：TripHappy

國家之間相互連通的旅游路線，顏色越相近的國家，表明兩國家的人們互動越頻繁

2、什么是大屏數據可視化

大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。電商雙11類大屏利用此特點打造了熱烈、狂歡的節日氛圍，原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

數據分析類

圖片來源：必應；圖片作者：帆軟軟件有限公司

二、大屏數據可視化設計原則：設計服務需求、先總覽后細節

設計服務需求

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

先總覽后細節

大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。

三、大屏可視化設計流程

規范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

1、根據業務場景抽取關鍵指標

關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例，這里的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。

2、確立指標分析維度

“橫看成嶺側成峰”。同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

上圖向大家展示了數據分析常用的4個維度，我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。而上圖，可以引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。

聯系：數據之間的相關性

分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律

比較：數據之間存在何種差異、差異主要體現在哪些方面

構成：指標里的數據都由哪幾部分組成、每部分占比如何

當然，上圖例舉的示例圖表都比較傳統，在大屏數據可視化中常還有另一類地理信息（常以2/3D地圖、地球呈現）出現。上圖雖未包含這類圖形，但它提供給我們的確定數據分析維度的思路和方法是相通的，可借鑒。

3、選定可視化圖表類型

當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

選定圖表注意事項：易理解、可實現；

易理解就是可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

可實現

1、我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現

2、我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難；同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。

4、了解物理大屏，確定設計稿尺寸

多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設計稿，此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率

一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置后的分辨率；此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

5、頁面布局、劃分

尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

6、定義設計風格

很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有APP或者Web風格定義的經驗。我們在定義一款APP或者Web頁面設計風格時常用的方法是什么呢？情緒版！

大屏雖酷炫，但實際上也是運行在瀏覽器里的Web頁面，所以大屏設計風格定義方法也同樣可以是用情緒版來做，這種方法也是目前比較科學的風格定義手段

上圖提供了情緒版應用的腦圖，具體操作細節不做介紹，不太了解的小伙伴可以自己找找資料哈。

情緒版的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執行設計。如果是給甲方爸爸做大屏，這個流程也可以讓我們提出的方案更有說服力

7、可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

8、樣圖溝通確認

這里的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的“溝通”。

樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

1、之前確立的布局在放入設計內容后是否依然合適

2、確立的圖表類型帶入數據后是否仍然客觀準確

3、根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受

4、已有的樣式、數據內容、動效等在開發實現方面是否存在問題

5、大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象

跟大屏“溝通”是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現，所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。

9、頁面定稿、開發

事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

切圖與標注

由于大屏實際就是一個web頁面，所以開發階段的切圖與標注是少不了的。

切圖：哪些元素需要切圖，怎么切？

一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

標注

Web頁面用什么插件做標注這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那么此時的標注與開發可以使用rem作為基本單位來實現，這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

10、整體細節調優與測試

這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

視覺方面的測試（有點像APP的UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。

四、大屏設計的注意事項

1、字體使用

字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。（一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字）

關于字體版權獲取相關問題，公眾號回復“可視化”獲取

2、顏色搭配

 1、色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色

2、使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、做出一些流光、粒子等酷炫的效果，

3、漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。

3、頁面布局

主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割

五、Q&A

1、設計稿投到大屏上顯示效果不佳怎么辦？

大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現，如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。

2、大屏設計定稿后，切圖切幾倍圖？

由于是將我們電腦屏幕投射到了大屏，大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率，正常切1倍圖就可以

3、1920*1080的設計稿，投到9000*4320的屏幕上，文字圖片會發虛么？

看情況，視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流下。

大屏邏輯分辨率（設計稿尺寸）——顯卡輸出分辨率——視頻矩陣切換器（DVI）支持分辨率——大屏實際物理分辨率。

一般后兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到DVI接口的分辨率，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。輸出分辨率等于DVI支持分辨率時顯示效果最佳。輸出分辨率低于DVI支持分辨率，DVI會將信號放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實圖形還是有差距的。此外，多信號源投射效果優于單個信號源投射。對于現場直播數據大屏，一般至少有兩個信號源，一個投屏，另一個也投屏但是處于備用狀態。

離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠，會顯的較為清晰

4、設計稿完成開發后，發現在大屏上頁面有被拉伸或者壓縮的情況，怎么補救？

一般來講，開發只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴展不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點，有的電腦可以通過自定義分辨率解決這部分問題。

5、除自行開發可視化大屏外，還可以通過哪些第三方服務來快速實現？

阿里云DataV、騰訊云圖、百度Sugar等

6、數據可視化的圖表樣式可以在那些地方找到參考？

圖表部分的二個庫是我們設計師可以打開瀏覽產看的，這里面所有的圖表樣式都是基于代碼實現的，可以作為我們設計圖表的參考，也可以讓開發拿代碼去用，或者在這些圖表的基礎修改

工具類的需要有一定的代碼基礎，里面同樣有豐富的圖表，所以跟開發的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式是我們設計師不知道的，所以彼此多溝通交流是在太重要了

總結：數據可視化是一門龐大系統的科學，本文所有討論僅針對大屏數據可視化這一特定領域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流

轉自UI中國-BYMD