隨著大數(shù)據(jù)產(chǎn)業(yè)的發(fā)展，越來越多的公司開始實(shí)現(xiàn)數(shù)據(jù)資源的管理和應(yīng)用，尤其是一些在日常生活中經(jīng)常使用大屏幕的大中型企業(yè)。此時，用戶界面設(shè)計(jì)者需要呈現(xiàn)相應(yīng)的視覺效果。接下來為大家介紹大屏可視化的UI設(shè)計(jì)。

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

（圖片均來源于網(wǎng)絡(luò)）

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

    更多精彩文章：

 大數(shù)據(jù)可視化設(shè)計(jì)賞析（一）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（二）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（三）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（四）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（五）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（六）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（七）

   隨著大數(shù)據(jù)產(chǎn)業(yè)的發(fā)展，越來越多的公司開始實(shí)現(xiàn)數(shù)據(jù)資源的管理和應(yīng)用，尤其是一些在日常生活中經(jīng)常使用大屏幕的大中型企業(yè)。此時，用戶界面設(shè)計(jì)者需要呈現(xiàn)相應(yīng)的視覺效果。接下來為大家介紹大屏可視化的UI設(shè)計(jì)。

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

（圖片均來源于網(wǎng)絡(luò)）

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

    更多精彩文章：

 大數(shù)據(jù)可視化設(shè)計(jì)賞析（一）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（二）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（三）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（四）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（五）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（六）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（七）

坐標(biāo)系是能夠使每個數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。在數(shù)據(jù)可視化中，最常用的坐標(biāo)系分為笛卡爾坐標(biāo)系和極坐標(biāo)系，本文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開。

什么是坐標(biāo)軸

在說坐標(biāo)軸之前先來介紹下什么是坐標(biāo)系。坐標(biāo)系是能夠使每個數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。

維基百科對坐標(biāo)系的定義是：對于一個 n 維系統(tǒng)，能夠使每一個點(diǎn)和一組 n 個標(biāo)量構(gòu)成一一對應(yīng)的系統(tǒng)，它可以用一個有序多元組表示一個點(diǎn)的位置。

數(shù)據(jù)可視化中，最常用的坐標(biāo)系有兩種：笛卡爾坐標(biāo)系和極坐標(biāo)系，均為二維坐標(biāo)系。

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

下文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開，用到極坐標(biāo)系的圖表有餅圖、圓環(huán)圖、雷達(dá)圖等。

坐標(biāo)軸是坐標(biāo)系的構(gòu)成部分，是定義域軸和值域軸的統(tǒng)稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義，因此我們可以根據(jù)坐標(biāo)軸對應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標(biāo)軸分成連續(xù)軸、時間軸、分類軸三大類。軸的類型不同在設(shè)計(jì)處理上也有差異。

坐標(biāo)軸的構(gòu)成要素

介紹坐標(biāo)軸設(shè)計(jì)前，我們先將坐標(biāo)軸拆分成「原子」要素，具體分為軸線、軸刻度、軸標(biāo)簽、軸標(biāo)題/單位、網(wǎng)格線。

坐標(biāo)軸易被忽視的設(shè)計(jì)細(xì)節(jié)

根據(jù)坐標(biāo)軸的構(gòu)成，分類討論下每個構(gòu)成要素容易被忽視的設(shè)計(jì)細(xì)節(jié)。

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

軸刻度通常不顯示，只有在肉眼無法定位到某個標(biāo)簽對應(yīng)的數(shù)據(jù)點(diǎn)時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

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

軸標(biāo)題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義，無需單獨(dú)顯示標(biāo)題/單位，「如無必要，勿增實(shí)體」。

軸標(biāo)簽的設(shè)計(jì)就比較復(fù)雜，涉及到的細(xì)節(jié)點(diǎn)很多，而且對于定義域軸和值域軸上的標(biāo)簽和單位設(shè)計(jì)要考慮的細(xì)節(jié)點(diǎn)還有差異。下文將定義域軸和值域軸看成 x 軸和 y 軸，便于說明。

1. x軸標(biāo)簽設(shè)計(jì)

x 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上，不同的坐標(biāo)軸類型有不同的處理方式。

連續(xù)軸/時間軸的標(biāo)簽顯示

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

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

當(dāng)多個標(biāo)簽在 x 軸無法完全顯示，優(yōu)先保留首尾標(biāo)簽，其余標(biāo)簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉(zhuǎn)成合數(shù)。

舉個例子：11 個標(biāo)簽，間隔數(shù)是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 個標(biāo)簽，間隔數(shù)是 11，無法等分，需要在間隔數(shù)基礎(chǔ)上再「-1」，轉(zhuǎn)成合數(shù) 10 后再等分，此時最后一個標(biāo)簽顯示在倒數(shù)第二個數(shù)據(jù)點(diǎn)上。

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

等分抽樣不太適用于表達(dá)某個時間周期內(nèi)的走勢折線圖，因?yàn)樽詈笠粋€標(biāo)簽不一定對應(yīng)最后一個數(shù)據(jù)點(diǎn)。對于這類折線圖，能清楚表明起始時間和末尾時間，相比顯示更多時間標(biāo)簽重要性來的更高。設(shè)計(jì)上可以只顯示首尾標(biāo)簽，或首尾 + 中間值。

分類軸的標(biāo)簽顯示

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

標(biāo)簽旋轉(zhuǎn)方向也有講究，因?yàn)槿说囊曈X習(xí)慣是從左到右，從上到下，標(biāo)簽順時針旋轉(zhuǎn) 45 度更符合用戶的瀏覽動線。

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

2. y軸標(biāo)簽設(shè)計(jì)

y 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長標(biāo)簽寬度自適應(yīng)縮放。如果數(shù)組是固定的，就寫成固定寬度，節(jié)省圖表計(jì)算量，提高渲染速度。

y軸標(biāo)簽數(shù)量

標(biāo)簽數(shù)量不建議過多，太多的標(biāo)簽必定導(dǎo)致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達(dá)。根據(jù) 7±2 設(shè)計(jì)原則，y 軸標(biāo)簽數(shù)量最多不超過這個范圍。

y軸標(biāo)簽取值范圍

y 軸標(biāo)簽的取值范圍決定了圖形在整個繪圖區(qū)域的顯示高度。

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

柱狀圖的 y 軸標(biāo)簽取值應(yīng)從 0 基線開始，以恰當(dāng)反映數(shù)值。如果展示被截?cái)嗟闹鶢顖D，可能會誤導(dǎo)觀眾做出錯誤的判斷。

y軸標(biāo)簽數(shù)據(jù)格式

y 軸標(biāo)簽的數(shù)據(jù)格式在 ant.vision 寫的比較詳細(xì)，重復(fù)內(nèi)容不在此說明，重點(diǎn)講下一些特殊的設(shè)計(jì)細(xì)節(jié)。標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因?yàn)槟承┹S標(biāo)簽是整數(shù)值，就略去小數(shù)點(diǎn)。

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

總結(jié)

寫了那么多關(guān)于坐標(biāo)軸的設(shè)計(jì)，你是不是恍然大悟，原來小小的坐標(biāo)軸還有如此之多的細(xì)節(jié)。往常我們做圖表設(shè)計(jì)，可能只是用網(wǎng)上自動生成的圖表簡單調(diào)整下，或者按照通用樣式來設(shè)計(jì)。然而，通用樣式雖然能表達(dá)數(shù)據(jù)意義，但也缺少了對圖表細(xì)節(jié)的把控，失了精致優(yōu)雅的感覺。

作為數(shù)據(jù)可視化設(shè)計(jì)的一小部分，就是這些設(shè)計(jì)細(xì)節(jié)，決定了圖表最終的傳達(dá)效果。

文章來源：優(yōu)設(shè)    作者：米粒的DesignNote

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

    --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

（以上圖片均來自于網(wǎng)絡(luò)）

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

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

（圖片均來源于網(wǎng)絡(luò)）

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

    更多精彩文章：

 大數(shù)據(jù)可視化設(shè)計(jì)賞析（一）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（二）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（三）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（四）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（五）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（六）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（七）

可能是目前大屏數(shù)據(jù)可視化設(shè)計(jì)介紹最詳盡的一篇文章了，可以當(dāng)做設(shè)計(jì)手冊使用的一篇經(jīng)驗(yàn)分享

一、基礎(chǔ)概念

1、什么是數(shù)據(jù)可視化

把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數(shù)據(jù)可視化，數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了“可視”，還可有可交流、可互動的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是抽象數(shù)據(jù)的具象表達(dá)。

數(shù)據(jù)可視化作品《launchit》

作者：Shane Mielke 

作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對應(yīng)人數(shù)

數(shù)據(jù)可視化作品《world-drawn-by-travelers》

作者：TripHappy

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

2、什么是大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。

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

利用面積大、可展示信息多的特點(diǎn)，通過關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論、決策，故大屏也常用來做數(shù)據(jù)分析監(jiān)測使用。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。

數(shù)據(jù)分析類

圖片來源：必應(yīng)；圖片作者：帆軟軟件有限公司

二、大屏數(shù)據(jù)可視化設(shè)計(jì)原則：設(shè)計(jì)服務(wù)需求、先總覽后細(xì)節(jié)

設(shè)計(jì)服務(wù)需求

大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個目標(biāo)，是大屏數(shù)據(jù)可視化的價值所在。

先總覽后細(xì)節(jié)

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

三、大屏可視化設(shè)計(jì)流程

規(guī)范的流程是好結(jié)果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

1、根據(jù)業(yè)務(wù)場景抽取關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。以共享單車電子圍欄監(jiān)控系統(tǒng)為例，這里的關(guān)鍵指標(biāo)有：企業(yè)停車時長、企業(yè)違停量、熱點(diǎn)違停區(qū)域、車輛入欄率等。

確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個指標(biāo)展示的優(yōu)先級（主、次、輔）。

2、確立指標(biāo)分析維度

“橫看成嶺側(cè)成峰”。同一個指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)自己的意圖，也沒能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒有找準(zhǔn)或定義的比較混亂。

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

聯(lián)系：數(shù)據(jù)之間的相關(guān)性

分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律

比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面

構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何

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

3、選定可視化圖表類型

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個圖表里篩選出最能體現(xiàn)我們設(shè)計(jì)意圖的那個就好了。

選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)；

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

可實(shí)現(xiàn)

1、我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)

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

4、了解物理大屏，確定設(shè)計(jì)稿尺寸

多數(shù)情況下設(shè)計(jì)稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設(shè)計(jì)稿，此時每個設(shè)計(jì)稿的尺寸即對應(yīng)信號源電腦屏幕的分辨率

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

5、頁面布局、劃分

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

6、定義設(shè)計(jì)風(fēng)格

很多小伙伴也許沒接觸過大屏設(shè)計(jì)工作，但大多數(shù)人都應(yīng)該有APP或者Web風(fēng)格定義的經(jīng)驗(yàn)。我們在定義一款A(yù)PP或者Web頁面設(shè)計(jì)風(fēng)格時常用的方法是什么呢？情緒版！

大屏雖酷炫，但實(shí)際上也是運(yùn)行在瀏覽器里的Web頁面，所以大屏設(shè)計(jì)風(fēng)格定義方法也同樣可以是用情緒版來做，這種方法也是目前比較科學(xué)的風(fēng)格定義手段

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

情緒版的一套流程下來，我們定義的風(fēng)格基本是科學(xué)準(zhǔn)確的，可以指導(dǎo)我們執(zhí)行設(shè)計(jì)。如果是給甲方爸爸做大屏，這個流程也可以讓我們提出的方案更有說服力

7、可視化設(shè)計(jì)

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

8、樣圖溝通確認(rèn)

這里的溝通分三個層面：設(shè)計(jì)師對內(nèi)溝通、設(shè)計(jì)師對外溝通、設(shè)計(jì)師與大屏的“溝通”。

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

因?yàn)槲覀冊谇皫撞揭呀?jīng)分別確定了頁面布局、圖表類型、頁面風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現(xiàn)出來，然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：

1、之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適

2、確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確

3、根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受

4、已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實(shí)現(xiàn)方面是否存在問題

5、大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象

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

9、頁面定稿、開發(fā)

事實(shí)上頁面開發(fā)階段并不是到了這一步才進(jìn)行，這里說的頁面開發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)的樣式呈現(xiàn)出來。

切圖與標(biāo)注

由于大屏實(shí)際就是一個web頁面，所以開發(fā)階段的切圖與標(biāo)注是少不了的。

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

一般開發(fā)用代碼寫不出的樣式或動效，都需要設(shè)計(jì)師切圖作支持：比如數(shù)據(jù)容器的邊框、小的動效、頁面整體大背景、部分圖標(biāo)等。切圖按正常網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)切就可以了。

標(biāo)注

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

10、整體細(xì)節(jié)調(diào)優(yōu)與測試

這部分是指頁面開發(fā)完成后，將真實(shí)頁面投放到大屏進(jìn)行的測試與優(yōu)化。這里主要有兩部分工作。

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

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

四、大屏設(shè)計(jì)的注意事項(xiàng)

1、字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體，需要嵌入字體時考慮字體的可識別性、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用。

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

關(guān)于字體版權(quán)獲取相關(guān)問題，公眾號回復(fù)“可視化”獲取

2、顏色搭配

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

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

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

3、頁面布局

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

五、Q&A

1、設(shè)計(jì)稿投到大屏上顯示效果不佳怎么辦？

大屏的分辨率、比例、使用環(huán)境、投射方式等均會對設(shè)計(jì)造成影響。理想情況下，我們應(yīng)該在設(shè)計(jì)開始前，就能打開大屏系統(tǒng)做一些簡單測試。我們可以從網(wǎng)上收集不同設(shè)計(jì)師不同風(fēng)格的大屏設(shè)計(jì)作品，然后投上去查看實(shí)際效果。因?yàn)榇蠖鄶?shù)時候大屏都會存在色彩偏差，這時通過測試我們就能發(fā)現(xiàn)漸變色、鄰近色等不同類型的色彩搭配是否可以在目標(biāo)大屏上良好呈現(xiàn)，如果不可以，那我們設(shè)計(jì)進(jìn)行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環(huán)節(jié)及時測試也很重要。

2、大屏設(shè)計(jì)定稿后，切圖切幾倍圖？

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

3、1920*1080的設(shè)計(jì)稿，投到9000*4320的屏幕上，文字圖片會發(fā)虛么？

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

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

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

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

4、設(shè)計(jì)稿完成開發(fā)后，發(fā)現(xiàn)在大屏上頁面有被拉伸或者壓縮的情況，怎么補(bǔ)救？

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

5、除自行開發(fā)可視化大屏外，還可以通過哪些第三方服務(wù)來快速實(shí)現(xiàn)？

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

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

圖表部分的二個庫是我們設(shè)計(jì)師可以打開瀏覽產(chǎn)看的，這里面所有的圖表樣式都是基于代碼實(shí)現(xiàn)的，可以作為我們設(shè)計(jì)圖表的參考，也可以讓開發(fā)拿代碼去用，或者在這些圖表的基礎(chǔ)修改

工具類的需要有一定的代碼基礎(chǔ)，里面同樣有豐富的圖表，所以跟開發(fā)的溝通也很重要，因?yàn)樗麄兛赡軙私舛嘁恍└碌那把氐膱D表形式是我們設(shè)計(jì)師不知道的，所以彼此多溝通交流是在太重要了

總結(jié)：數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué)，本文所有討論僅針對大屏數(shù)據(jù)可視化這一特定領(lǐng)域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流

轉(zhuǎn)自UI中國-BYMD

可視化是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來，再進(jìn)行交互處理的理論、方法和技術(shù)。面對醫(yī)療行業(yè)，如何將行業(yè)數(shù)據(jù)，轉(zhuǎn)化為視覺可視化中的點(diǎn)線面，是在這個項(xiàng)目中需要思考的問題。

本文將帶來設(shè)計(jì)師在醫(yī)療院感可視化項(xiàng)目中的設(shè)計(jì)過程及思考，講述如何在業(yè)務(wù)場景下對數(shù)據(jù)進(jìn)行抽取表達(dá)。通過可視化打破傳統(tǒng)院感系統(tǒng)的表單呈現(xiàn)，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求。同時院感醫(yī)生通過可視化的解決方案能清晰直觀的了解到院感發(fā)生分布、病例分析，從而控制院感發(fā)生和預(yù)防。

本項(xiàng)目以浙江省建德市第一人民醫(yī)院為案例，地理數(shù)據(jù)以建德醫(yī)院坐標(biāo)為準(zhǔn)。

項(xiàng)目背景
院感是什么？院感為醫(yī)院感染，入院48小時內(nèi)都有可能感染到院感細(xì)菌。在醫(yī)院里有專門的院感醫(yī)生職位，對醫(yī)院感染進(jìn)行有效的預(yù)防與控制。而傳統(tǒng)院感管理的工作流：醫(yī)護(hù)人員及院感醫(yī)生 > 院感系統(tǒng)分析疑似病例 > 得出結(jié)論預(yù)防或治療。這種偏人工的方式數(shù)據(jù)獲取方式，無法更的獲取院感發(fā)生的原因、定位、以及未來的院感預(yù)測。

P1 因此我們通過對醫(yī)院數(shù)據(jù)的整理，抽離出影響院感的數(shù)據(jù)，將院感發(fā)生、發(fā)展、管控、治療、預(yù)測全流程進(jìn)行整合。

P2 通過醫(yī)院>樓層>人員三個層面，空間和時間兩個維度對院感展示。打破傳統(tǒng)院感系統(tǒng)的表單呈現(xiàn)，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求：如院長的展示性需求。院感醫(yī)生通過可視化的解決方案能清晰直觀的了解到院感發(fā)生分布、病例分析，從而控制院感發(fā)生和預(yù)防。

P3 同時在這樣的設(shè)計(jì)場景下，可以覆蓋的醫(yī)療業(yè)務(wù)場景和數(shù)據(jù)單位也會更多元，具有一定的商業(yè)化價值。

P4 設(shè)計(jì)流程
整個項(xiàng)目的設(shè)計(jì)流程可以分為4個階段：信息收集、可視化、線上搭建、效果調(diào)試。在此項(xiàng)目實(shí)踐中，重點(diǎn)投入在前三大部分。

P5 Part1信息收集
我們基于項(xiàng)目背景，梳理要展現(xiàn)的數(shù)據(jù)指標(biāo)，對整體業(yè)務(wù)場景進(jìn)行故事腳本的規(guī)劃（即如何展現(xiàn)前期的數(shù)據(jù)收集，并把其串聯(lián)在整體業(yè)務(wù)場景中），設(shè)定動作攝像機(jī)語言，同時也需要了解最終呈現(xiàn)的硬件設(shè)備與使用環(huán)境。

P6 Part2可視化

1.交互信息框架
首先梳理院感的信息框架和交互方式。

整個大屏分為院樓層，呈現(xiàn)整體院感數(shù)據(jù)的統(tǒng)計(jì)；樓層屏，作為重點(diǎn)病區(qū)的監(jiān)測預(yù)測；個人屏，分析病例回溯病程，從而預(yù)測院感。三屏之間相互跳轉(zhuǎn)， 交互演示方式從醫(yī)院的外部跳轉(zhuǎn)內(nèi)部結(jié)構(gòu)、再到患者的個人維度，三屏都分別展示相關(guān)的數(shù)據(jù)指標(biāo)。

P7 2.視覺風(fēng)格
在大屏視效風(fēng)格探索上，期初的目標(biāo)是希望可以打造不一樣行業(yè)視覺語言，所以選擇不同于以往的設(shè)計(jì)大屏風(fēng)格，選擇白色的風(fēng)格，符合大家對醫(yī)護(hù)行業(yè)的認(rèn)知。但到中期發(fā)現(xiàn)，在硬件設(shè)備上展示發(fā)是過曝的。因此對設(shè)計(jì)風(fēng)格進(jìn)行調(diào)整改為X光片的風(fēng)格，色系上偏冷綠的感覺。這是在這個項(xiàng)目中的試錯經(jīng)驗(yàn)之一。

P8 3.建模設(shè)計(jì)
在可視化部分中遇到的難點(diǎn)：建筑模型的高還原。下圖為建德第一人民醫(yī)院實(shí)拍圖。在大屏項(xiàng)目中，必須真實(shí)還原地理位置。而在此醫(yī)院沒有清晰的CAD圖紙?zhí)峁┑?；在Google的衛(wèi)星地圖下也沒有的建筑結(jié)構(gòu)的，所以我在建模的過程中，是踩了坑的，先盲畫了一版，但是精細(xì)度不夠，過于粗糙。

P9 因此我反復(fù)看得到的資料，通過在確定地理氛圍內(nèi)，去豐富場景。這樣的好處是使業(yè)務(wù)場景更加豐富，包括擴(kuò)展到院外的車流數(shù)據(jù)，為業(yè)務(wù)場景提供更多可能性 當(dāng)然后期也搖到了建筑內(nèi)部的消防圖，根據(jù)消防圖繪制內(nèi)部結(jié)構(gòu)。

P10 4.數(shù)據(jù)面板
對可視化組件的組件進(jìn)行設(shè)計(jì)：時間篩選、數(shù)據(jù)統(tǒng)計(jì)、占比關(guān)系、趨勢分析。設(shè)計(jì)之前也參考了很多概念版的可視化設(shè)計(jì)，希望在院感屏上可以呈現(xiàn)一種科技概念的感覺。

P11 Part3線上搭建
1.獲取地理數(shù)據(jù)
這部分是非常耗時的，datav是數(shù)據(jù)驅(qū)動的可視化產(chǎn)品，在搭建部分，是全程依靠datav平臺的。
首先需要明確地理數(shù)據(jù)，通過高德數(shù)據(jù)通過點(diǎn)線成面，可以作為場景定位，也就是物理模型的經(jīng)緯度數(shù)據(jù) 后面還原數(shù)據(jù)效果，造虛擬數(shù)據(jù)，是非常依賴于這個坐標(biāo)數(shù)據(jù)的。
119.291724 , 29.472365
這是建德醫(yī)院的坐標(biāo)，醫(yī)院在地圖上的數(shù)據(jù)是很簡化的，顆粒度很大，具體位置無法顯示。

P12 因此我們需要建立與地理數(shù)據(jù)綁定的建模，先對位置。

P13 在這個過程中我發(fā)現(xiàn)，如果最開始沒有對準(zhǔn)位置，也不用緊張，可以在DATAV平臺增加hook數(shù)據(jù)過濾器，解決地理數(shù)據(jù)與世界坐標(biāo)無法對齊的問題。

2.線上場景還原
根據(jù)對確定過位置模型進(jìn)行烘焙還原。這個過程中遇到了一些不知名的原因烘焙失敗，原因可能是命名有中文/位置數(shù)據(jù)錯誤/模型塊面復(fù)雜等，遇到這樣的問題就需要重新從頭檢查烘焙流程每一步。

P14  3.數(shù)據(jù)維度展示還原
這一步我們需要把前期做好的數(shù)據(jù)可視化效果，還原到線上模型中。在這一步我遇到的問題是因建德醫(yī)院內(nèi)部具體結(jié)構(gòu)的缺失，使一些可視化效果無法精準(zhǔn)匹配到模型上。所以設(shè)計(jì)過程中只能依賴于在對的地理位置上豐富的場景內(nèi)造數(shù)據(jù)，這個過程是比較吃力的。

P15 這個問題的解決辦法是通過開發(fā)工具和導(dǎo)出的結(jié)構(gòu)俯視圖，對位置，然后轉(zhuǎn)化出LEGO的數(shù)據(jù)

P16 在數(shù)據(jù)效果還原的過程中，也發(fā)現(xiàn)我在前期設(shè)計(jì)的數(shù)據(jù)效果，不能全部實(shí)現(xiàn)，有些是依賴于開發(fā)的 。這時可以通過其他組件效果代替嘗試，比如熱力的效果用粒子放大，通過參數(shù)調(diào)節(jié)得到熱力 再比如局部房間的掃管，通過設(shè)計(jì)部分多次烘焙模型，不斷疊加掃光層，得到房間監(jiān)測的效果
P17 設(shè)計(jì)小結(jié)
綜合以上的經(jīng)驗(yàn)，院感可視化從設(shè)計(jì)到落地，整體結(jié)構(gòu)應(yīng)該是這樣從物理基礎(chǔ)坐標(biāo)的獲取、到場景搭建、再到數(shù)據(jù)展示的過程。在這個過程中會用到DATAV、C4D、數(shù)據(jù)庫、簡單的代碼等技術(shù)來實(shí)現(xiàn)。

P18 這個項(xiàng)目雖然這只是醫(yī)療行業(yè)中一個小的業(yè)務(wù)場景，但我們的業(yè)務(wù)數(shù)據(jù)提取及可視化設(shè)計(jì)思路，他不僅限于醫(yī)療行業(yè)，同時也可以成為場館類大屏解決方案的一部分，是具有一定商業(yè)化價值的。同時在這過程中沉淀下來的人體結(jié)構(gòu)模型，和一些設(shè)計(jì)經(jīng)驗(yàn)，是可以復(fù)用到對應(yīng)行業(yè)解決方案中，達(dá)到提效。

轉(zhuǎn)自：

隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。所以數(shù)據(jù)可視化設(shè)計(jì)，絕對是熱門的設(shè)計(jì)之一。很多 UI 設(shè)計(jì)師突然會接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求，如果不了解數(shù)據(jù)可視化設(shè)計(jì)，肯定是一頭霧水，不知從何入手。本文結(jié)合最近設(shè)計(jì)案例，分享大屏可視化設(shè)計(jì)過程中遇到的一些問題以及設(shè)計(jì)思路，供大家一起交流與學(xué)習(xí)。

△ 最終動態(tài)效果圖

案例分解

首先放的是項(xiàng)目改版前的頁面：

1. 需求介紹

某某應(yīng)用云，分為五大云平臺模塊：云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理、數(shù)據(jù)存儲管理、管理運(yùn)行維護(hù)。每個大模塊下?有若干個子系統(tǒng)。

可視化?屏首頁需要展示的內(nèi)容包括：

• 全局?jǐn)?shù)據(jù)：云平臺的數(shù)據(jù)總量，以及 4 個重要關(guān)注數(shù)據(jù)項(xiàng)，2 個次要關(guān)注數(shù)據(jù)項(xiàng)；
• 云平臺的五?大模塊：云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理理、數(shù)據(jù)存儲管理、管理運(yùn)行維護(hù)（只有兩個 tab 切換鏈接）；
• 搜索功能：搜索類型分為 6 個，默認(rèn)選中「綜合」類型進(jìn)行搜索；
• 重點(diǎn)關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示：原始圖上的維度包括指標(biāo)、地圖、地域排名、部?排名、類別；
• 云導(dǎo)航：展示場景在公司展廳，材質(zhì)為 Led 拼接屏，設(shè)計(jì)尺寸為 1920×1080。

2. 需求分析

分析大屏可視化的一些共性：

• 屏幕大：大屏一般都是多屏拼接，整體屏幕面積大。
• 觀距遠(yuǎn)：用戶需要遠(yuǎn)處觀看屏幕，要保證數(shù)據(jù)文字清晰可見。
• 交互弱：通過電腦已經(jīng)無法滿足大屏交互需求，現(xiàn)在也有部分開始采用 ipad、手機(jī)、激光筆等方式。
• 視覺強(qiáng)：背景色多采用重色，襯托凸顯數(shù)據(jù)，更好地為觀者傳達(dá)數(shù)據(jù)信息。
• 一屏一內(nèi)容：一屏內(nèi)容，說明一件主要事情，統(tǒng)計(jì)好它的相關(guān)數(shù)據(jù)，避免其他的干擾。

結(jié)合大屏的一些共性特點(diǎn)針對看到的線上舊版本設(shè)計(jì)，分析存在的問題。

• 布局混亂，導(dǎo)致視覺不平衡，看不出頁面層次。
• 藍(lán)色為主色調(diào)，黃色點(diǎn)綴顏色顯得比較單一沒有規(guī)則。
• 圖表比較單一，不能有效傳達(dá)數(shù)據(jù)信息。

3. 布局

整合數(shù)據(jù)，分析出主要數(shù)據(jù)、次要數(shù)據(jù)、總量數(shù)據(jù)、細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等。首先優(yōu)化頁面布局，可以先在紙上畫一畫，然后腦子里有大概思路以后再用電腦繪制，如下圖：

采用柵格化對稱布局，讓整體視覺左右平衡。

4. 風(fēng)格

一提到數(shù)據(jù)可視化大家往往能想到科技、數(shù)據(jù)、藍(lán)色等一些普遍關(guān)鍵詞。

了解到客戶是想做一個科技感強(qiáng)、炫酷的視覺效果?？梢栽诰W(wǎng)上找一些效果圖或是自己曾經(jīng)做過的案例供客戶選擇，確定一個大致的風(fēng)格，然后結(jié)合具體的業(yè)務(wù)場景進(jìn)行設(shè)計(jì)。

5. 顏色

顏色上結(jié)合產(chǎn)品使用場景，以及整個產(chǎn)品調(diào)性還是以藍(lán)色為主，背景選用深色調(diào)，讓視覺更好聚焦，內(nèi)容部分采用比較透亮的藍(lán)色系，保證內(nèi)容與背景有一定的對比關(guān)系，便于業(yè)務(wù)信息傳達(dá)。

6. 主體地圖

地圖為大屏的主要展示內(nèi)容，首先分析展示的目的是為了看清各個城市間的不同分布情況，和城市數(shù)據(jù)的匯集效果。

如圖：

改版前：地圖過于單薄，沒有立體感，太平缺乏層次，顏色黃色不符合產(chǎn)品調(diào)性。

改版后：主色調(diào)改為科技藍(lán)，在原有地圖上增加外發(fā)光和多層陰影疊加，增加地圖的立體感，地圖上增加科技線條上升的效果代表每個城市數(shù)據(jù)變化的提升，地圖背景采用比較弱化的轉(zhuǎn)動線條圓形，襯托地圖主體，使得畫面更加豐富。

7. 地圖效果的實(shí)現(xiàn)方法

首先用 ps 拉框助手新建一個山東的地圖（拉框助手的使用獲取方法可以參照上篇文章）。

完成后會得到一個叫 map 文件夾的地圖分層文件，如圖所示。這里需要對每個城市的顏色進(jìn)行調(diào)整，為了區(qū)分每個城市之間的數(shù)據(jù)不同關(guān)系。

調(diào)整完塊之間的顏色后，就需要給地圖整體增加立體效果。

首先，是整體給地圖加了一個描邊和外發(fā)光。描邊是為了強(qiáng)化地圖邊緣，外發(fā)光是為了地圖與背景有一個區(qū)分。

其次為了增加地圖立體感，需要給地圖增加多層陰影疊加的效果。復(fù)制現(xiàn)有形狀層，拼合成一個山東省的地圖，如下圖：

最后，把拼合好的圖層移動到 map 文件夾下面，陰影可以添加多層，這里針對每一層進(jìn)行不同顏色大小的調(diào)整，就是下面的這種效果了，地圖的體積厚度感也就出來了。這里只是提供一個大概的思路，大家可以多去嘗試。

整體地圖效果調(diào)整完成后，就是給地圖增加些紋理，和上升線條這些細(xì)節(jié)上的效果了。紋理可以用圖案疊加，或者找一張紋理圖剪切蒙版實(shí)現(xiàn)，最后再添加上升線條的效果，地圖的效果就完成了。

最后加上線條上升的動態(tài)效果：

8. 數(shù)據(jù)圖表拆分

在選定數(shù)據(jù)圖表之前，首先要確定圖表之間的關(guān)系，可以從以下四個維度進(jìn)行思考分析：

• 聯(lián)系：數(shù)據(jù)之間的相關(guān)性；
• 分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律；
• 比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面；
• 構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。

可以參照下面這個圖：

△ 圖片來自于網(wǎng)絡(luò)，侵刪

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個圖表里篩選出最能體現(xiàn)我們設(shè)計(jì)意圖的那個就好了。

傳統(tǒng)的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看，可根據(jù)選擇的圖表在其基礎(chǔ)之上進(jìn)行美化設(shè)計(jì)，總之選定圖表最重要的兩個點(diǎn)就是：易理解、可實(shí)現(xiàn)。

易理解：就是要考慮最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。

可實(shí)現(xiàn)：主要是跟開發(fā)前期溝通好實(shí)現(xiàn)方式，一般都采用開源組件庫的居多，比如 echarts 組件庫，我們設(shè)計(jì)的圖形圖表，要開發(fā)能夠?qū)崿F(xiàn)。實(shí)際工作中，一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn)，效果也不錯，但這些效果設(shè)計(jì)師用 Ps/Ai/Ae 這些工具模擬時會發(fā)現(xiàn)比較困難。同樣的，某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難，所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)。一個項(xiàng)目總有周期與預(yù)算限制，不會無限期的修改迭代，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍，不鉆牛角尖、死磕不放。

案例中在圖表選擇上，強(qiáng)化科技感元素，條形圖打破傳統(tǒng)條形圖的展示形式，采用電池晶格的展示形式，在保持圖表功能的同時更加凸顯科技感。

從頁面的整體看，已經(jīng)有兩處用到了條形圖、柱狀圖，如果這里還是條形圖，那么頁面看起來會很單調(diào)，圖表也沒有表現(xiàn)出多樣性，所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。以下圖表采用科技圓盤的形式，運(yùn)用科技線條的上升狀態(tài)代表排名的先后順序，所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀。

改版前的圖標(biāo)樣式比較單一，改版后針對每組數(shù)據(jù)不同的對比形式，采用比較貼合的圖表進(jìn)行展示，篇幅原因就不一一做展示了。

附上最終視覺效果圖：

總結(jié)

大屏設(shè)計(jì)需要注意的點(diǎn)：

• 需求分析：對需求進(jìn)行梳理，分清數(shù)據(jù)間的主次關(guān)系以及對比指標(biāo)，跟客戶溝通清楚細(xì)節(jié)。
• 確認(rèn)布局：布局上根據(jù)數(shù)據(jù)主次關(guān)系，采用柵格化布局（可以在紙上畫一下理清思路）。
• 情緒板定義設(shè)計(jì)關(guān)鍵詞，確定風(fēng)格。找參考圖給客戶確認(rèn)大致的設(shè)計(jì)方向。
• 顏色貼合業(yè)務(wù)。
• 圖表易理解可實(shí)現(xiàn)。

以上是我對數(shù)據(jù)可視化大屏的案例總結(jié)，希望能幫助到你。除此之外還有很多地方?jīng)]有涉及到，包括具體設(shè)計(jì)的操作方式、選取圖形元素的具體方法，以及在各種大屏中所需要的相對應(yīng)的組件等，在龐大的可視化大屏設(shè)計(jì)系統(tǒng)中，還有很多值得學(xué)習(xí)參考和優(yōu)化的知識，歡迎溝通交流，大家一起努力。

文章來源：優(yōu)設(shè)   

一、前言

與其他相對成熟的設(shè)計(jì)領(lǐng)域（UI、插畫等）相比，數(shù)據(jù)可視化尚顯小眾，在一個細(xì)分、小眾、不成熟的領(lǐng)域里做設(shè)計(jì)，“怎么去找靈感”確實(shí)是一些小伙伴經(jīng)常遇到的問題。本文以本人工作經(jīng)驗(yàn)為基礎(chǔ)，系統(tǒng)性分析了該問題及對應(yīng)的解決方法，并將其整理成文與大家分享，這在數(shù)據(jù)可視化行業(yè)內(nèi)尚屬首次。當(dāng)然了，本文雖面向數(shù)據(jù)可視化設(shè)計(jì)師群體，但其中的方法是通用的，運(yùn)用在其他設(shè)計(jì)領(lǐng)域也完全事半功倍。

二、本文結(jié)構(gòu)概覽

本文圍繞“搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新” 五大塊展開。下圖向展示了這篇文章的知識結(jié)構(gòu)，大家可根據(jù)思維導(dǎo)圖，選擇自己感興趣的部分閱讀，也可把這張圖作為知識卡片收藏，幫助自己梳理建立靈感庫的思路和方法。

三、靈感庫建立的基礎(chǔ)

靈感庫的建立大體上分主動與被動兩種。主動，是我們有意識的收集、整理相關(guān)作品素材形成靈感庫的過程；被動，指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因?yàn)楹笳吒豢煽?，影響因素較多，比如你所處的圈子、社交網(wǎng)絡(luò)使用習(xí)慣等都會影響被動獲取的質(zhì)量。所以今天，我跟大家分享的主要是第一種主動建立靈感庫的方法，而這個方法的核心我把它歸納為兩個字 ：搜索。

搜索是現(xiàn)在這個時代我們主動獲取信息的最主要手段，每天我們通過各類關(guān)鍵詞在各類APP上獲取各樣的服務(wù)、產(chǎn)品和資源。靈感的主動收集就是一個通過關(guān)鍵詞搜索，然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實(shí)就是我們能不能用好搜索。不同的搜索方法、渠道、關(guān)鍵詞極大的影響著我們獲取到的信息的質(zhì)量，這也是本篇文章為何一搜索核心展開的原因。

如下圖所示，同樣的關(guān)鍵詞在不同的搜索渠道，得到的內(nèi)容質(zhì)量是不一樣的。

四、靈感庫建立的第一步：搜什么？

互聯(lián)網(wǎng)很大，如果沒有明確的目標(biāo)，找靈感的過程就跟刷抖音一樣，恍恍惚惚幾個小時，好像點(diǎn)了不少贊，收藏了不少干貨，回頭看其實(shí)并沒有什么特別有價值的東西，所以找靈感要有目標(biāo)，有KPI才行，有目標(biāo)就有標(biāo)準(zhǔn)，有標(biāo)準(zhǔn)才有方向和效率。

如上圖所示，我對數(shù)據(jù)可視化這個行業(yè)術(shù)語做了分析和拆解，這樣做的目的是為之后搜索關(guān)鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關(guān)內(nèi)容時，思路總是局限在“可視化”這個關(guān)鍵詞上，但是直接使用這個關(guān)鍵詞搜索，大多數(shù)時候并不能找到我們心里預(yù)期的結(jié)果，或者搜索多次后，看到的都是之前見過的作品，很難突破邊界，獲取更多新的靈感。造成的這個結(jié)果的原因顯而易見，就是關(guān)鍵詞的匱乏，不知道搜什么。而對“大屏數(shù)據(jù)可視化”進(jìn)行解析之發(fā)現(xiàn)，以往的搜索，我們只使用了四個方向里的其中一個，其它三個方向并沒有很好的利用?，F(xiàn)在，我們以每個方向上的核心關(guān)鍵詞為基礎(chǔ)，去豐富它的下一級關(guān)鍵詞，這樣就會像枝椏新生一樣，在各個節(jié)點(diǎn)延伸出豐富的詞匯。

媒介就是數(shù)據(jù)可視化設(shè)計(jì)最終落地在什么平臺，一般來講，大屏數(shù)據(jù)可視化設(shè)計(jì)落地的媒介當(dāng)然就是大屏了，以它為核心做關(guān)鍵詞的發(fā)散，可以產(chǎn)生其它幾個二級關(guān)鍵詞

數(shù)據(jù)類型是主要數(shù)據(jù)的特征或來源，不同的數(shù)據(jù)類型，在可視化設(shè)計(jì)時有不同的視覺特征。比如地理信息的數(shù)據(jù)可視化，一般會與道路、河流、人造建筑、某區(qū)域內(nèi)地標(biāo)等一起出現(xiàn)，會有豐富的3D場景、動效，而圖表信息相對較少；報(bào)表類信息的數(shù)據(jù)可視化，則主要以更好的展示報(bào)表內(nèi)大量數(shù)據(jù)為主，所以強(qiáng)調(diào)信息的層級、主次，設(shè)計(jì)的目標(biāo)是要減少用戶認(rèn)知負(fù)擔(dān)、引起用戶閱讀興趣，促進(jìn)數(shù)據(jù)內(nèi)容的有效傳達(dá)，因而會較少使用動畫，其次，因數(shù)據(jù)較多，也很難對應(yīng)到某個具體的物理場景，故3D模型等也較少使用。

所以以數(shù)據(jù)類型為核心，拓展的二級關(guān)鍵詞會讓搜索結(jié)果更精準(zhǔn)，更有針對性。

設(shè)計(jì)風(fēng)格就是視覺設(shè)計(jì)整體上給人的想象和感受，好的設(shè)計(jì)就跟一個人一樣，一定是有自己鮮明的個性和氣質(zhì)，能夠引起人的共鳴和向往的，唯有如此，設(shè)計(jì)才能吸引人，從而影響人，并最終傳遞自己的觀點(diǎn)給觀者。所以設(shè)計(jì)風(fēng)格的定義是視覺設(shè)計(jì)中最重要的一環(huán)，也是最需要靈感和創(chuàng)造力的部分。

作為數(shù)據(jù)可視化設(shè)計(jì)師，我們想要找到的參考是那些具有數(shù)據(jù)可視化風(fēng)格的作品，但這些作品本身并不一定是在講數(shù)據(jù)可視化的內(nèi)容，只要作品某部分的設(shè)計(jì)有我們想要的那種“感覺”，就可以了，而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音?；谶@樣的思路，我歸納了一些具有數(shù)據(jù)可視化風(fēng)格但不一定都是數(shù)據(jù)可視化作品的關(guān)鍵詞。這就是一個特別有意思的點(diǎn)，我門想要找到某個內(nèi)容，但當(dāng)我們用最貼切它的那個名字去找時，卻不一定能找到最能代表它風(fēng)格的作品。所以當(dāng)我們跳出數(shù)據(jù)可視化這樣一個具體的點(diǎn)，而從更抽象的設(shè)計(jì)風(fēng)格這個層面去看待它的時候，就能更好的的發(fā)散思維、拿到了更多好的關(guān)鍵詞，找到更多的刺激點(diǎn)。

以設(shè)計(jì)風(fēng)格為例，我們從它的節(jié)點(diǎn)上找到任意一個關(guān)鍵詞：SCI-FI，然后搜索這個關(guān)鍵詞，我們看看搜索到的結(jié)果。

業(yè)務(wù)場景簡單理解就是在什么情況下要解決什么問題，它是數(shù)據(jù)可視化的落腳點(diǎn)，也是數(shù)據(jù)可視化的商業(yè)價值所在。每個公司或團(tuán)隊(duì)，都會有自己專注的業(yè)務(wù)方向，所以在工作中找這方面的靈感，從業(yè)務(wù)場景入手效果最好。

簡單回顧下，通過上部分文章的分析，我們從媒介、數(shù)據(jù)類型、設(shè)計(jì)風(fēng)格、業(yè)務(wù)場景四個方面形成了一個數(shù)據(jù)可視化的關(guān)鍵詞的矩陣。這個矩陣是建立靈感庫的基礎(chǔ)，之后我們每當(dāng)我們有新的關(guān)鍵詞要加入，或者有效果不好的關(guān)鍵詞需要剔除，只需修改、迭代這個關(guān)鍵詞矩陣即可。有了這個關(guān)鍵詞矩陣后，我們?nèi)绾卫盟瓿梢淮位趯?shí)際需求的靈感搜集？下面給大家舉個小栗子來看一下怎么用。

一句話描述業(yè)務(wù)需求

首先用盡可能簡短的一句話描述業(yè)務(wù)方訴求。

一句話描述業(yè)務(wù)訴求后，我們把業(yè)務(wù)需求帶到關(guān)鍵詞矩陣中，就會獲得如下圖的結(jié)果：

可以看到，帶入需求后，按樹狀結(jié)構(gòu)去匹配與需求相吻合的關(guān)鍵詞，就可拿到明確的搜索指引目錄，然后我們按搜索指引，開始靈感收集即可。

這里有個小小的點(diǎn)，就是為什么要盡可能用簡短的一句話來描述業(yè)務(wù)方訴求，

1、這樣做可以把那些優(yōu)先級低的干擾因素都過濾掉，留下真正核心的訴求，越是能簡短的概括，越能真正把握需求的核心。我個人一直以來與業(yè)務(wù)方溝通需求后，都會嘗試用一句話概括，若需求方認(rèn)可，開始設(shè)計(jì)工作；不認(rèn)可，則繼續(xù)溝通。

2、對于數(shù)據(jù)可視化設(shè)計(jì)師來講，明確自己在工作流中的角色、承擔(dān)的責(zé)任、要解決的問題以及最終交付怎樣的產(chǎn)出尤為重要，因?yàn)橹挥星宄诉@些，這樣我們才能有效分配自己的時間、確定跟上下游的協(xié)作策略，避免盲目的沒有KPI的設(shè)計(jì)。

五、靈感庫建立的第二步：去哪兒搜？

合適的關(guān)鍵詞是第一步，它保證了我們搜索結(jié)果的有效性，而去哪兒搜決定了我們搜索結(jié)果的質(zhì)量。如下圖，針對數(shù)據(jù)可視化設(shè)計(jì)師，我對“去哪兒搜”這個問題按我自己的從業(yè)經(jīng)驗(yàn)做了梳理。

從我的歸納里大家可以發(fā)現(xiàn)，我把數(shù)據(jù)可視化設(shè)計(jì)師的靈感來源分為了四大塊（其它行業(yè)的設(shè)計(jì)也大體上就這四塊），分別是：設(shè)計(jì)網(wǎng)站、產(chǎn)品或服務(wù)提供方、獨(dú)立設(shè)計(jì)師或工作室、視頻網(wǎng)站。

第一部分：設(shè)計(jì)網(wǎng)站

設(shè)計(jì)網(wǎng)站部分列出的都是設(shè)計(jì)師們都熟悉的幾個站點(diǎn)，在之前，大多數(shù)靈感的收集都可在花瓣完成，但花瓣最近幾次改版之后，已經(jīng)沒有以前那么好用了。對數(shù)據(jù)可視化方面的素材搜索，個人經(jīng)驗(yàn)下，強(qiáng)烈推薦大家去behance，雖然behance訪問方面也面臨一些困難，但是，但凡你想真的了解一些好的設(shè)計(jì)，這個網(wǎng)站，是你一定要想辦法去經(jīng)常逛逛的。至于為啥不推薦其它幾個網(wǎng)站，倒并不是說其它網(wǎng)站不能用，只是搜索的結(jié)果相對局限。針對這塊的具體分析，我會在文末的Q&A里進(jìn)行。

第二部分：產(chǎn)品或服務(wù)提供方

我們知道，任何商業(yè)設(shè)計(jì)，一定是有一個業(yè)務(wù)或應(yīng)用場景來支撐的，一定程度上設(shè)計(jì)就是在圍繞業(yè)務(wù)場景提供視覺、交互、用戶體驗(yàn)、品牌等方面的解決方案，也就是說設(shè)計(jì)是服務(wù)于業(yè)務(wù)場景的，反過來講，服務(wù)于這個業(yè)務(wù)場景的就只有設(shè)計(jì)師么？當(dāng)然不是。在市場條件下，服務(wù)的提供方除了像設(shè)計(jì)師這樣的個體外，更多的是我們熟悉的另一個機(jī)構(gòu)（組織），這個組織的名字叫“公司”。公司把大量專業(yè)的人員組織在一起，通過優(yōu)勢互補(bǔ)、強(qiáng)力協(xié)作，提供服務(wù)、解決需求方問題。對于數(shù)據(jù)可視化設(shè)計(jì)來講，企業(yè)當(dāng)然也參與其中。所以我們找靈感去服務(wù)提供方也是一個的方法。企業(yè)要證明自己的實(shí)力、要讓潛在客戶了解自己，必然會花大量的資源做營銷做推廣，而最常見的推廣的落腳點(diǎn)就是企業(yè)官網(wǎng)。很多做數(shù)據(jù)可視化的公司，會在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點(diǎn)、業(yè)務(wù)實(shí)力的案例，而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計(jì)作品了，沒有人會在自己的臉上放垃圾上去，對不? 所以但凡有案例展示的官網(wǎng)，案列基本都是最典型最好的設(shè)計(jì)，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

阿里DataV

Hightopo

 Tob.Design

第三部分：獨(dú)立設(shè)計(jì)師或工作室

獨(dú)立設(shè)計(jì)師一般給人的感覺是什么呢？就是在自己垂直的領(lǐng)域內(nèi)牛逼，近乎神一樣的存在。獨(dú)立設(shè)計(jì)師要能順利“獨(dú)立”，當(dāng)然是在設(shè)計(jì)能力、個人品牌建設(shè)、客戶維護(hù)、運(yùn)營管理等方面都有比較硬核的水準(zhǔn)，所以這部分設(shè)計(jì)師作品一般不會差。而工作室一般都是一個或者幾個知名設(shè)計(jì)師組成的團(tuán)隊(duì)，在管理方面更“公司化”一些，這樣的工作產(chǎn)出也會比較穩(wěn)定，水平較高。就可視化（包括類可視化）領(lǐng)域來講，個人比較認(rèn)可和喜歡的工作室有以下幾個（歡迎大家評論里補(bǔ)充，或參與文末問卷調(diào)查），Ta們的作品風(fēng)格鮮明，找靈感也是不錯的參考

dennisschafer

huds+guis

以上對于“去哪兒搜”的分析，我相信可以給大家很好的啟發(fā)：我們設(shè)計(jì)師尋找好的作品并不一定要通過設(shè)計(jì)相關(guān)網(wǎng)站進(jìn)行，你看大家都能看到的東西，即使有突破，那也是大家所熟悉的樣子，你只有從圈子里跳出去，看80%的人看不到的東西，你的靈感才有機(jī)會與眾不同，標(biāo)新立異。

六、靈感庫建立的第三步：怎么搜？

前面兩部分，我們介紹了搜什么（關(guān)鍵詞的定義），去哪兒搜（合適的素材來源），接下來以behance為例跟大家聊聊怎么搜，介紹一些具體的方法。我們的目標(biāo)是盡可能少的點(diǎn)擊搜索按鈕，且盡可能多的找到符合自己預(yù)期的有質(zhì)量的作品。要做到這點(diǎn)，首先我改掉自己以往的不好的搜索習(xí)慣。

我知道我很多小伙伴都是輸入一個關(guān)鍵詞，然后看結(jié)果頁，沒有滿意的就換一個關(guān)鍵詞繼續(xù)，這樣做很低效，容易漏掉結(jié)果頁中符合你預(yù)期的好作品，并且也容易造成關(guān)鍵詞的浪費(fèi)，通過第一部分關(guān)鍵詞矩陣的介紹，大家都知道，關(guān)鍵詞是被定位推導(dǎo)而來的，若不停的換關(guān)鍵詞，很快就會出現(xiàn)關(guān)鍵詞用完了但是依然沒有找到好靈感的囧局，所以榨干每一個關(guān)鍵詞是搜索的重要手段，具體怎么做到這一點(diǎn)，我個人有以下思路給大家參考：

1、直搜關(guān)鍵詞：快速瀏覽、標(biāo)記自己感興趣的項(xiàng)目，稍后再做整理

通過這個結(jié)果頁面我們看到，搜索結(jié)果包含“所有結(jié)果、項(xiàng)目、人物、情緒板”四個選項(xiàng)，默認(rèn)顯示所有結(jié)果，但這個意義不大，重點(diǎn)在項(xiàng)目跟情緒板。

項(xiàng)目

切換到項(xiàng)目標(biāo)簽，項(xiàng)目標(biāo)簽下展示的都是完整的項(xiàng)目作品，這是可以快速瀏覽，看到感興趣的內(nèi)容就把它標(biāo)記到新的頁面，等所有瀏覽查看結(jié)束后再細(xì)看每個項(xiàng)目，并對項(xiàng)目做進(jìn)一步的分類和整理。

項(xiàng)目標(biāo)簽下提供的篩選項(xiàng)很實(shí)用，分類依據(jù)推薦“好評最多+本月”的組合，以月為單位既可選到大家都比較認(rèn)可的新作品也避免了因數(shù)據(jù)波動造成部分作品質(zhì)量差的情況?！耙巡哒埂鳖愃普究峄騏I中國的首頁推薦，是被官方編輯認(rèn)可和推薦的作品，一般都會有很高的質(zhì)量，但時間上可能會比較舊。

在篩選器里面，有另一個比較實(shí)用的功能叫做“按色彩篩選”，如果客戶或者業(yè)務(wù)方對主色調(diào)有要求，就可以通過色彩的篩選，找到更符合我們業(yè)務(wù)需求的相關(guān)作品借鑒，或者設(shè)計(jì)師自己對某類顏色的搭配總是調(diào)整不好，也可以通過篩選，看看其它同行是如何處理這類色彩的，這也是一個有針對性訓(xùn)練和學(xué)習(xí)的方法。

情緒版

情緒版就是花瓣里的畫板，它是其Ta設(shè)計(jì)師采集的同類主題的作品合集，用法也跟花瓣一模一樣，唯一的不同是花瓣可以采集站外的內(nèi)容到畫板，而behance只能采集站內(nèi)的內(nèi)容，其余兩者完全一致。

情緒版默認(rèn)是按時間的先后順序排列的，所以可以通過篩選項(xiàng)，將排列順序調(diào)整為“關(guān)注人數(shù)最多”，正常來講，關(guān)注人數(shù)越多的情緒版收集的作品質(zhì)量也越高。

2、利用作品標(biāo)簽聚合同一主題作品，并集中瀏覽

我們知道，像站酷、UI中國等平臺，用戶上傳作品時，都需要給作品添加一些標(biāo)簽，這些標(biāo)簽的作用就是幫助網(wǎng)站做人工的作品分類，我們點(diǎn)擊某一標(biāo)簽就能看到使用了同一標(biāo)簽的所有作品，可以說標(biāo)簽是比搜索關(guān)鍵詞的內(nèi)容檢索手段。每一個作品下，都顯示了作者上傳作品時填寫的標(biāo)簽，通過點(diǎn)擊這些標(biāo)簽我們將搜索結(jié)果引入到了另一個更純粹有效的內(nèi)容領(lǐng)域。

更有趣的是，標(biāo)簽同樣支持項(xiàng)目、情緒版這兩個層面的進(jìn)一步分類，同時也支持之前介紹過得分類篩選功能。也就是說，在最開始搜索時找準(zhǔn)一個關(guān)鍵詞，之后通過情緒板、作品標(biāo)簽等方式就能關(guān)聯(lián)起來海量的內(nèi)容。

3、按圖索驥：Ta推薦的作品

通過前兩步，我們已找到了一些比較不錯的作品，而優(yōu)秀作品的背后當(dāng)然是優(yōu)秀的設(shè)計(jì)師或團(tuán)隊(duì)。所以點(diǎn)進(jìn)作者的主頁看，一般都會有驚喜的。除了能看到作者自己的作品外，我想說的是另一個標(biāo)簽“好評”，好評這個標(biāo)簽其實(shí)體現(xiàn)了作者的審美和職業(yè)方向，如果作者本人在領(lǐng)域內(nèi)已經(jīng)足夠?qū)I(yè)，那么能被Ta欣賞和點(diǎn)贊的作品大概率也不會差，所以好評這個按鈕，是借助行業(yè)大咖的手幫我們做了一次作品的篩選和收集，點(diǎn)這個標(biāo)簽進(jìn)去大多數(shù)時候是不會讓你失望的，一般都驚喜滿滿。

4、Ta關(guān)注的設(shè)計(jì)師：順藤摸瓜，串起一個行業(yè)的大咖

在今天，每個設(shè)計(jì)師離自己領(lǐng)域里最頂尖的大咖，只隔著3.75個人，通過點(diǎn)擊作者的“正在關(guān)注”，你可以看到設(shè)計(jì)師本人還關(guān)注了行業(yè)里的哪些設(shè)計(jì)師，通過這樣的操作3到4次，你會發(fā)現(xiàn)總有那么幾個人，會在這個略顯復(fù)雜的網(wǎng)絡(luò)中被不同的大咖同時關(guān)注，那么Ta就是這個行業(yè)里比較頂尖的人才了。

在“正在關(guān)注”下面會顯示作者所在團(tuán)隊(duì)，因?yàn)楹枚囗?xiàng)目其實(shí)一個人是很難完成的，大都是好幾個設(shè)計(jì)師協(xié)作的結(jié)果，所以如果你找到的這個設(shè)計(jì)師作品足夠牛逼，那說明他的團(tuán)隊(duì)也是很不錯的，順便關(guān)注一波就好。

當(dāng)你習(xí)慣這樣摸瓜，一段時間后這個行業(yè)里幾乎的大咖就都在你的關(guān)注列表里了，做到這一步后你就會有一個新的收獲，這點(diǎn)我們后面再聊。

七、搜索結(jié)果的整理與優(yōu)化

利用前面的搜索方式，我們已經(jīng)找到了不少較為滿意的作品，接下來我們需要再對這些作品做簡單的篩選整理，把真正符合我們需求的作品整理出來。

我習(xí)慣用網(wǎng)站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網(wǎng)站的情緒板我把它看作是一個各個終端通用的網(wǎng)盤。behance提供了兩個收藏作品的功能：點(diǎn)贊與保存到情緒版。站酷跟ui中國也有同樣的功能。

點(diǎn)贊的作品，會統(tǒng)一收集到個人主頁“點(diǎn)贊”標(biāo)簽下，所有作品按時間排列，比較亂，所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板，由于情緒板是可以分享和被搜索的，所以使用情緒板整理靈感，不僅方便了自己，也益于同行。目前來看，情緒板在behance這個產(chǎn)品中已經(jīng)跟花瓣中的畫板非常像了，不僅可以采集一個完整的作品到情緒板，也可以采集作品中某個單獨(dú)的圖片或視頻到情緒板，這樣的靈活性跟花瓣完全一致，且behance將情緒板被放到了用戶非常容易觸達(dá)的位置，所以在大家的共同努力下，各類情緒板會越來越豐富，這個功能也會更有價值。

八、資源的自我更新與迭代

資源的自我更新

經(jīng)常玩抖音的小伙伴都知道，抖音會根據(jù)你的點(diǎn)贊、瀏覽等行為，為你推薦符合個人口味的視頻，而這樣的推薦功能在behance也有，behance會根據(jù)你點(diǎn)贊收藏的作品、你關(guān)注的人，給你推薦相應(yīng)作品，并且推薦作品是直接顯示在首頁的，每次打開behance，你都會在網(wǎng)站最直觀的位置看到behance為你推薦的內(nèi)容，這里的內(nèi)容大體上分為兩類，一類是你關(guān)注的設(shè)計(jì)師的作品更新，另一部分基于已經(jīng)關(guān)注的作者推薦相似的作品給你，就我個人使用體驗(yàn)來講，推薦還是相當(dāng)準(zhǔn)確的。

behance的推薦功能是資源自我更新的一個重要手段，你關(guān)注的同一領(lǐng)域作者越多，收藏的作品越多，它的推薦就越準(zhǔn)確，這樣就節(jié)省了一些資源搜索的時間成本。要想獲得好的推薦結(jié)果，我建議你的behance上只關(guān)注一個領(lǐng)域的作者和作品，以我自己為例，我只關(guān)注數(shù)據(jù)可視化方向的作者和作品，雖然我也喜歡攝影、插畫等，但我主業(yè)是數(shù)據(jù)可視化，所以為了提高首頁推薦作品質(zhì)量，其它兩類我會去500px等更垂直的網(wǎng)站瀏覽，而不會在behance上關(guān)注。當(dāng)然，網(wǎng)站只是個工具，你也可以有自己的用法，與我而言，我關(guān)注的核心是效率。

資源的迭代

如果把我們收藏的內(nèi)容比作是云盤里的資源，那么資源并不是越多越好，無論哪種類型的內(nèi)容，當(dāng)內(nèi)容很多的時候找起來都會比較麻煩的。我們需要堅(jiān)持做一些工作來不斷減少資源的數(shù)量提高資源的質(zhì)量，少而精是最好的狀態(tài)，如此我們就不需要花很多時間去找某個內(nèi)容，而已有的內(nèi)容又都能很好的滿足需求。要做到這點(diǎn)，我們需要給資源做迭代，所謂迭代就是去掉舊的過時的內(nèi)容，添加新的更好的。每隔一段時間，回來翻一翻自己之前收藏的作品，會發(fā)現(xiàn)有些作品自己已經(jīng)看不上了，因?yàn)樵谧鲮`感收集的過程中，我們的審美會自然有所提高，當(dāng)輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現(xiàn)在看來也就會有缺陷和不滿，這是一個很正向的結(jié)果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當(dāng)前審美的作品到各個情緒版。

迭代還意味著我們需要對那些情緒版的標(biāo)簽做維護(hù)，對那些命名跟內(nèi)容不大匹配的情緒板，要及時更新更恰當(dāng)?shù)拿?。同時，也要對情緒板內(nèi)容的類別做維護(hù)，比如動畫、視頻類素材最好不要跟圖片類素材放一起，因?yàn)榱斜淼姆饷鎴D并不能體現(xiàn)作品詳情里是否包含視頻等內(nèi)容，所以作品很多時找起來就比較麻煩，按內(nèi)容的不同類型把內(nèi)容分別收納進(jìn)不同的情緒版可以給我們后續(xù)的應(yīng)用節(jié)省不少時間。

九、Q&A

1、behance在國內(nèi)訪問受限，為何要以它為例做靈感收集的方法介紹？

首先，Behance國內(nèi)訪問不暢，并不影響它是世界范圍最優(yōu)秀的設(shè)計(jì)師聚集平臺的事實(shí)。對于數(shù)據(jù)可視化而言，并不是一個新興的領(lǐng)域，在國外早已有之，并且相對成熟，而國內(nèi)相關(guān)作品、經(jīng)驗(yàn)尚少，所以從獲取知識的角度來看，behance上你能獲取到的數(shù)據(jù)可視化相關(guān)作品或內(nèi)容，不管是數(shù)量還是質(zhì)量上，都要比國內(nèi)的好。

其次，正如文章剛開始我說的那樣，文中介紹的方法對國內(nèi)的大部分設(shè)計(jì)網(wǎng)站同樣適用，尤其是關(guān)鍵詞的定義、標(biāo)簽的使用、收藏及情緒板（畫板）的使用技巧。綜上，我當(dāng)然是要介紹“更好”的靈感獲取網(wǎng)站給大家，而不是揪著大家熟悉的聊。

2、我自己也收集研究了不少優(yōu)秀作品，為何做的時候還是不知道如何下手？

毋庸置疑，優(yōu)秀的作品建立在良好的審美基礎(chǔ)之上，好的作品看多了審美自然會有提升，但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題，一個是刻意練習(xí)的度沒到，另一個是不會分析別人好的作品?？桃饩毩?xí)聽名字就知道是什么意思，而作品分析就是我們要知道一個作品之所以讓人眼前一亮，它“亮”在什么地方，就是要具體到細(xì)節(jié)，我們越是能夠細(xì)致的指出那些讓你覺得好的點(diǎn)，就越能模仿和借鑒，之后再輔以大量的刻意練習(xí)，才會有效果明顯的提升。那么到底如何去拆解、分析一個數(shù)據(jù)可視化作品？有幾步？有哪些方面？怎么做？如何應(yīng)用？這一系列問題留待下篇文章繼續(xù)聊。當(dāng)然了，下篇文章能否順利發(fā)出，還是看大家是否喜歡和支持！

 轉(zhuǎn)自：站酷-BYMD