一、圖表的分類介紹以及應用范圍

一提到圖表，大家腦海里浮現的，通常是柱狀圖、餅圖、趨勢圖等等。這是按照圖形等維度對圖表進行分類，經常會導致圖表的誤用。

圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是『我有什么數據，需要用圖表做什么』，而不是 『圖表長成什么樣』 。因此我們從數據出發，從功能角度對圖表進行分類。

二、畫面布局在實戰中的應用

在畫面中我們經常會遇到各式各樣的屏幕分辨率，有大屏的LED屏，有平面顯示屏，數字拼接屏等等。那么具體的項目中我們如何去定義這些不同尺寸的屏幕來進行畫面布局呢？

如若有其他分辨率下的屏幕，按照這個規律的基本布局，盡量使組件呈現16：9比例排布是最好的；超長分辨率下的大屏設計或者拼接很多塊顯示器的大屏可以通過具體業務內容來展示，按模塊去劃分，功能點明確即可。

此處布局只是我個人覺得比較合適的展示方式，并不代表一定是需要這么排布，還可以有很多的形式去布局。也可能因為業務不同，版式也會有調整，不過萬變不離其中，掌握基礎要素，其他分辨率下照樣可以有很多編排形式！

三、硬件常用尺寸以及設備

Led屏幕

1、點間距不同

p3點與點之間的距離是3毫米，p4點與點之間的距離是4毫米。

2、清晰度不同

P后面那個數字越小，代表兩個燈珠之間的距離越小，清晰度越高，相對應，價格也會高，因為每平方的像素點P3比P4多很多，成像效果好。

3、最佳可視距離不同

點間距P3（3mm）的顯示屏，它的最佳可視距離是3.5~10米，點間距P4（4mm）的顯示屏，它的最佳可視距離是5~13.5米。可以根據自己的實際情況，選擇最適合的型號。

拼接屏

拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最后得出設計稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數學老師）

現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。

另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙，設計時千萬不能跨屏設計，不然很影響美觀。

控制端

目前企業用的最多的控制端為ipad控制，需要在ipad上制作出控制端頁面，一般尺寸為2048*1536，控制端大多數為按鈕操作，頁面盡量簡單明了。

四、字體字號以及畫面配色631

字體字號

在數據可視化設計中,一般選中的字體有如下幾種:

1. 中文字體:蘋方,思源黑體

2. 英文字體:DIN,DIN-PRO

3. 數字字體:Exo

正常1080P情況下，由于甲方大多數為政府機構，文字要求會比一般的要求大一點，一般都是選擇最小16px。字號不是固定的，人是活的，規范是由人制定的，切勿迷信規范。

配色法則以及顏色選用

運用配色631法則，將配色定義為主色60%，輔助色30%，對比色10%去貫穿整套界面文字的顏色通過重要、普通、次要去分配，是帶有色彩傾向豐富頁面視覺。

在數據可視化設計中，由于大屏是偏暗的，所以需要選擇高飽和度的色彩，并且需要選擇統一的顏色，保持畫面協調。

有時候會遇到客戶需要高飽和度的顏色并且多個顏色的時候，在選用時盡量選用飽和度不要太高的顏色，不然畫面會很不協調，也就是所說的晃眼。

在設計過程中盡量選用深色背景作為畫面主背景，這個可以解決大屏因為色差問題，對整體頁面的影響，用戶也比較容易忽略拼縫中的存在的跨屏感。同時深色背景時更容易突出主體,畫面效果更好，更能體現流光、粒子、發光等酷炫效果。

同時，大屏由于有色差，盡量不要使用漸變色，如若需要使用需要到達現場，根據大屏反饋的色差，現場調整，但還是推薦盡量使用純色。

五、畫面飽滿以及頁面裝飾點線面

畫面如何飽滿

方式一：字體的飽滿

將字體處理后，空白面積減少，整體更飽滿了些

方式二：文字的飽滿

正常情況下為使閱讀更方便，標題間距給-10%~20%為佳。

通常數字會比漢字小，為使基線對齊，數字與漢字需分開設置字號。

主副標題字號比例過大過小會導致界面不平衡，建議主標題是副標題的1.5倍。

方式三：關系的飽滿

當A=B時，圖標和文字的關系會混淆，這種情況下要滿足B>A，用間距分層次

采用黃金分割0.618值。也就是橫向21個小方塊，豎向13個小方塊。此時，最優雅的板式是A＞B的間距，1＞2＞3的間距。

方式四：圖標的飽滿

頁面如何裝飾會更豐富(如何運用點線面三大構成)

我們在設計的過程中，經常會因為畫面不夠飽滿頁面太空，收到客戶的吐槽，下面就講講如何通過點線面來豐富畫面，使畫面更豐富更有層次感。

1.原畫面設計完成

2.添加裝飾線(點線面構成)

3.調整位置,豐富畫面

在畫面添加裝飾的情況下需要給畫面留足位置，數據可視化大屏本身面積就比較大，合理運用畫面以及拼接屏縫隙添加裝飾線,可以更好的減輕拼縫所帶來的影響。裝飾線的添加還可以在后期豐富畫面動效，科技感十足，在頁面中添加裝飾線在我看來，非常的有意義，既可以豐富畫面，又可以完善動效，一舉兩得。

在裝飾線添加這一塊，推薦大家多去看看國外的可視化設計，哪些幾乎將點線面構成發揮到了極致。

六、畫面動效以及素材靈感收集

動效制作

C4D+AE

在很多設計項目中會用到很多酷炫的科技模型，比如汽車、人物、地球模型等等，我們可以運用C4D來進行主視覺建模，再通過AE進行動效輸出。

有的人可能會問在導入數據之后可能由于數據量不大的原因，動態效果不是很明顯，在這種情況下，咱們可以把不變的數據量，做成AE動效，可以把動效導成json文件直接發給前端，能很大程度上保障畫面動態效果。

素材靈感收集

Behance

在behance上有很多國外的設計師，他們的數據可視化設計做的都非常漂亮，極具代表性風格，我們可以通過behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設計圖，同時可以把這些作品保存到自己情緒版中，非常的方便。

pinterest

從“書簽”這個角度出發，我們可以發現其實Pinterest的本質就是一張張精美絕倫的圖片書簽。每一個在Pinterest上的圖片其實都是一個個網頁上所提取濃縮而成的書簽。pinterest對圖片的關注是最用心的，去除了其他的各種干擾，Pinterest只注重圖片的呈現。

而且Pinterest有個非常獨特的功能,就是他能夠自動篩選同類型圖片，并且精準度非常高。

Videohive

這是一個專注視頻模板和素材的網站(收費)，在此可以搜索出很多的HUD動效視頻以及高清圖片。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

為什么說是撕開 B 端封印呢？沒接觸過 B 端的同學，很大一部分都認為 B 端不就是簡單的列表和圖形嗎？拿開源組件拼拼湊湊就可以了，有什么可設計的？

其實這個想法完全錯了，你如果接觸后就會發現，B 端所需要的掌握的產品知識、思維邏輯、規范意識等等太多了。

而且近幾年 B 端這個詞出現的頻率越來越高了，因為前幾年大家都在爭 C 端市場，純 C 端的流量爭奪已經進入了尾聲，B 端產品反而帶來了新的機會點，同時也被慢慢的重視起來，比起以往 B 端設計師，現在需要掌握的技能也越來越多。你可以查閱一下一些招聘網站，現在 B 端可視化方面的崗位是非?；鸨c C 端相比，人才缺口更大，未來幾年 B 端也會更加火爆，有機會接觸 B 端的話就不要錯過機會。我們團隊平均招聘一個合適的設計師基本要兩個月的時間。

說了這么多，我們開始今天的主題吧！

首先在座的可能有部分設計師沒有接觸過數據可視化的設計，那么第一個問題來了，什么是可視化？大家想一想。給大家三秒鐘~

通過可視的表達來增強用戶處理數據的效率。

接下來我會從三個方面來講解如何構建可視化：

    · 靈感需要迸發，更需要積累

    · 從零到一設計驅動

    · 設計度量

一、靈感需要迸發，更需要積累

1.1  數字時代下，99%的問題都是舊問題

數字時代下仍有信息不對稱的情況，尤其是關鍵技術和設計上的問題，但是如果你用心尋找，就會發現你的新問題則是別人很久之前的舊問題了。所以要做個有心人。

但是問題又來了，有時候真的不知道該怎么找、去哪找？這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領域，他是比較小眾的，所以靈感以及素材的搜尋是一個令新手設計師頭疼的事情，再加上對關鍵詞的熟悉程度不夠，導致很多設計師只停留在【可視化】這個關鍵詞里，最后感覺搜來搜去都是見過的圖，沒有新意。

1.2  明確目標，知道自己想要找什么

互聯網信息太多了，漫無目的的找靈感，只會浪費時間，一會看到這張圖好看，一會看到那張圖好看。不知不覺幾個小時就過去了。

1.3  建立關鍵詞詞庫

確定目標后，就要細化關鍵詞了。怎么建立關鍵詞詞庫呢？

關鍵詞詞庫由3部分組成：終端、設計類型、業務類型。

    · 終端：大屏、移動端、web 等等。

    · 設計類型：每個細分的數據可視化類別都是有一些專有名詞的，比如最近比較熱門的車載HMI系統，那他的類型關鍵詞就是 HMI。通過這些關鍵詞，你會搜到更精準的結果。設計類型關鍵詞比如：AR/VR、HUD、HMI、FUI等等，你要了解你們公司相關類型的關鍵詞，記錄下來。以及跟你們有關聯的，都記下來，補充自己的詞庫。

    · 業務類型：智慧城市、生物醫療、監控部署等等。

這三類單獨或組合進行搜索，就會看到更多可視化產品了。把關鍵詞詞庫建立起來后，就可以去常用的網站上搜索了，最好用的還是 behance 和 Pinterest。

1.4  除了常用的設計網站，還有哪里可以看？

企業官網：很多做數據可視化的公司，會在官網展示一些能體現自己業務特點、業務實力的案例，而這些案例就是這些企業最好的數據可視化設計作品了， 所以但凡有案例展示的官網，案列基本都是最典型最好的設計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

1.5  你看到了別人看不到的，設計才能有所不同

總結一句話：你看到了別人看不到的，設計才能有所不同。如果你和別人看到的是一樣的，你怎么比別人做的更優秀？

1.6  興趣推送

經常刷短視頻/新聞網站的應該知道，系統會根據你的點贊、收藏、瀏覽等數據來給你安排后面的內容推送，以保證給你推送更精準的內容。設計網站亦是如此，behance 等網站上也都是千人千面，它會根據你的點贊收藏等來讀取你的喜好，進而推送更精準的作品。所以假設你是一個B端數據可視化方向的，你就經常搜、點贊收藏相關作品，之后你的首頁出現相關內容的幾率也會變大。

1.7  定期清理，更新迭代

最后一點，這個也是好多設計師的通病，收藏即學到。

靈感庫要求精而不是多，每隔一段時間，回來翻一翻自己之前收藏的作品，會發現有些作品自己已經看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現在看來也就會有缺陷和不滿，這是一個很正向的結果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當前審美的作品到靈感庫里。

這樣慢慢完善你的地基，才能更高的向上走。

二、從零到一  設計驅動

講完第一部分，我們開始搭建產品。

我負責從零到一的項目大大小小的得有10來個了，我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期，是可以做到設計驅動的。既然設計可以有足夠的的話語權，你就得規劃好未來的設計走向。

產品初期，經常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設計先行還是調研先行？

這是新項目必須要做的選擇題，再講之前你先想一下，如果是你，你會如何選擇？

我的觀點是設計先行。（當然設計先行是建立在你至少對這個項目的行業有個簡單的了解之后，先設計再用戶調研），為什么呢？因為如果用戶調研先行的話，用戶只會反饋當下最想要的東西，從而有可能給你帶來誤導。就比如我們經常舉的一個例子：汽車出來之前，人們只想要一匹更快的馬。

我們要解決的不是用戶當下想要的東西，而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創造性的項目，往往設計者才是當下最懂產品的人，你把決策權交給一些不懂產品的人，做到最后只能是迷失了方向，鍋還是設計來背。所以一開始設計師要把決策權拿在手中，掌握航向。

2.2  設計先行還是規范先行？

這個問題在現在看來相對比較統一，但有的同學還是有疑惑，所以我拿出來再跟大家聊一下。

首先我的觀點是設計先行，在設計之前就定好規范的基本都是自己YY的，返工率極高。等你在做具體設計的時候就知道之前做的規范都是白費力氣了。一般都會選用在項目完成之后或者主風格及主要頁面完成后再輸出規范，這樣既可以減少規范的改動，也可以保證后面功能延用規范，一舉兩得。

當然了，設計規范不是所有項目都要有的，它是為了減少工作而不是增加工作，如果是一次性項目，就不需要再額外花費精力去輸出規范了，浪費資源~

2.3  完成和完美那個更重要？

現在都是爭分奪秒的時代，任務是無止境的，沒有做完的時候。造成這個局面的無非就是一個問題：時間不夠用。通常的做法就是先完成再迭代，做產品久了你就會發現，完成比完美更重要，不完美你還可以再迭代，完不成就有可能錯過一個風口，從而失去了變完美的可能~

聊完這三個問題，我們在設計的時候也要有一些注意項，真正的做到設計驅動。

2.4  把復雜變得清晰簡單而且美

對于設計師來說，我們的任務就是把復雜問題變得清晰簡單而且美，所以我們應該成為企業和客戶之間溝通的“架橋人”。通過設計的方法，把無形的、復雜的技術，通過有形的、可視化的方式展示出來，讓客戶更直觀、清晰的感受到產品的功能，看得懂其在業務場景中產生的價值。

2.5  轉換視角，建立共鳴

站在客戶視角，聚焦客戶關注的核心問題，通過情景把內容有序組織起來，快速與客戶建立共鳴，有效降低內容理解難度。

2.6  產品架構可以不那么復雜

把復雜的業務/功能簡單化、傻瓜化，最大的降低學習成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內容

B 端項目中內容量是巨大的，面對龐雜的信息，去粗取精，提煉各場景的核心內容，避免冗余信息阻礙內容有效傳達。話術語言不單要簡單易懂，還要嚴格控制文字長度，保證內容可以被快速掃描和理解。

2.8  尊重用戶習慣

不要妄想改變用戶養成的慣性思維，你要記住慣性思維大于設計思維，他的閱讀習慣、操作習慣都是不易改變的，不要為了個性化而嘗試去改變，大部分情況下結果不會是那么的理想，除非你有極大的把握。

2.9  選用合適的圖表

這個是常提到的，我就在這里簡單給大家提個醒。比如做數據對比，柱狀圖更能清晰表達出用戶想要的結果，你卻非要放個酷炫的雷達圖，他的本質目的都沒達到，要美觀有何用？

每個圖表都適合哪些場景使用，像 antv、hicharts 等都有介紹，我就不一一贅述了，我之前也寫過一篇關于如何合理利用圖表的文章，大家有興趣的可以去看一下。

三、設計度量

產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

美與丑也是主觀的，沒有絕對的美，也沒有絕對的丑。一個產品，總會有人喜歡有人不喜歡，但是我們要迎合大多數人的審美。

所以就需要一個方法論來驗證產品的好與壞，現在各大廠都在做自己的一套產品驗證的方法論，阿里在這方便算是國內做的不錯的，我舉幾個常用的度量模型。

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優酷：DES

UES 目前是國內最好的，在 5 月份的阿里設計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧，這么多度量模型，無論他的方法、維度有所不同，但他們的目的是相同的：通過模型來度量設計成果。

    · 易用性：易操作性、易學性、易見性 ...

    · 一致性：整體樣式、通用框架、常用場景及組件 ...

    · 任務效率：任務完成率、任務完成時間、功能使用率 ...

    · 性能：首屏渲染時間、API 請求響應時間、頁面請求響應時間 ...

    · 滿意度：產品滿意度 ...

UES 分為 5 個模塊，這 5 項是整個產品生命周期需要驗證的。

關于 UES 我就介紹到這里吧，UES 模型要是展開講的話，半天都講不完，感興趣的話可以去阿里云官方發布的 UES 模型的相關資料中深度研究一下，看看適不適合自己的產品。

上面是度量產品的模型，接下來針對我們 B 端設計師，我們也要有一些指標來度量自己是否合格。

3.1  設計效率

現在內卷盛行的時代，各大廠都在講人效，畢竟時間才是最珍貴的，所以現在都在想方設法的提高人效。而且 B 端相對 C 端來說，可以有更多自動化的工具。

舉個我公司的例子，我剛去的時候基本沒有自動化工具，每個設計師每天也都在忙碌，誰也沒偷懶閑著。但是我發現有很多重復性的體力勞動是不需要多少思考就能完成的，但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效，把一些體力勞動用一些工具來代替，這樣就能釋放設計資產，去做更重要的事情。

當時就做了第一個自動化的工具：設計系統，現在大家對這個詞應該不陌生，但是我們剛開始做的時候比較早，還沒有一些比較完善的設計系統供我們參考，所以我們也算是前幾批摸索設計系統的團隊。設計系統做好后是可以把這1/3 的設計時間節省了下來，而且團隊的規范性更加統一。

后面的話我們也是做了一些其他的自動化工具，比如結合一些插件做到 icon、組件等發布的自動化，并且與研發同學打通，有相應的自動化提醒工具，這樣也節省了與研發的溝通成本。

在工作中，流程上能減少一步就是成功，慢慢來，萬里長征就是一步一步走出來的。

3.2  增長設計

增長這個詞來源于【增長黑客】這本書，顧名思義這個詞的就是通過設計來促進產品增長。

這個詞用在 C 端上比較多，因為 C 端可驗證的方法比較多，見效快，所以我們常見的一些增長設計的案例都是關于 C 端的，而 B 端的話，受限制的因素較多，設計只是影響增長的一部分，而且見效慢。

但是雖說影響因素多、見效慢，我們還是可以抓住機會、多去嘗試一些方法來做到設計增長。我這個方法不行，我就換一種嘗試。大家都是在摸索中過河~

3.3  為業務賦能

所有的設計都是要為業務賦能、為商業買單。我們設計的本質就是為用戶解決問題，讓用戶以最直觀的方式理解產品。不要為了所謂“我認為很美”而與業務背道而馳。

3.4  體驗創新

用戶體驗設計師會越來越重要，近兩年逐步被重視，而且未來幾年會越來越重視。行業內需要更多動腦的人而不是僅僅會動手的人。

現在到了互聯網下半場，拼的不僅是功能，用戶體驗的重視程度已經被提升了上來，在工作中的占比也越來越重。

再加上現在這個超級內卷的時代，你不提升，你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本，你去下家面試的時候都沒有拿得出手的產品。

3.5  善用工具

現在各種辦公類工具、軟件層出不窮，而且很多工具是比較類似的，有的設計師再選工具的時候就很糾結，我認為完全沒必要糾結，首先你要明確我想要達到什么目的，只要某個軟件滿足著你的需求就可以用。

工具是為人服務的，我們的設計軟件從 PS – Sketch – Figma，無論怎么變化總要圍繞一個目的：更高效的完成工作。

尤其是一些自動化工具，現在人工智能升級很快，要多關注設計自動化方面的工具，讓他來解放我們的雙手。

總結

最后送給大家一句話：

這時代唯一不變的，就是變化。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷    作者：胖kuan 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

我們毫無疑問已經處在一個大數據的時代。各行各業都在快速產生和積累數據。 本文結合 UED 團隊過去所參與 B 端數據可視化項目分享一些經驗及思考。

• 背景
• 什么是數據可視化
• 數據可視化的應用價值
• 如何做好數據可視化設計
• 數據可視化發展趨勢
• 結語

背景

“得益于計算機技術和海量數據庫的發展，個人在真實世界的活動得到了前所未有的記錄……社會科學將脫下‘準科學’的外衣， 在21世紀全面邁進科學的殿堂。”- 雅虎首席科學家Duncan J. Watts

“大數據的影響，就像四個世紀前人類發明的顯微鏡一樣……而大數據，將成為我們下一個觀察人類自身社會行為的‘顯微鏡’。” – 麻省理工教授Erik Brynjolfsson

從數據，到海量數據，再到大數據，對人類的做事和思維方式都有很大的影響。在《大數據時代：生活、工作與思維的大變革》一書中，作者歸納了大數據的三個特點:

• 更多：不是隨機樣本，而是所有的數據;
• 更雜：不是精確性，而是混雜性;
• 更好：不是因果關系，而是相關關系。 [1]

當前對大數據的研究涉及計算機科學、數學、生物學等多個領域。大數據尤其是對數據存儲、數據挖掘等提出了重大挑戰。而數據可視化也將在大數據時代扮演一個重要的角色。數據可視化可以將紛繁復雜的大數據集、晦澀難懂的數據報告變得直觀易讀、易于理解，通過圖表將雜亂的數據進行科學有序的呈現，使用戶找到數據的變化規律以及潛在價值，幫助用戶作出決策。就數據可視化的應用來看，應用范圍極其廣泛，如政府應用、商業決策、公共服務等等。

什么是數據可視化

顧名思義，數據可視化就是將數據轉換成圖或表等形式，以一種更直觀的方式呈現數據。通過可視化的方式，我們可以將大量復雜的數據通過圖形化的手段進行有效地表達，幫助用戶發現規律和特征，發掘數據背后的價值。

圖 1 @Marco Zemolin Siresia Bagnoli

數據可視化的應用價值

1. 易于理解，有利于發現信息特征

使用可視化的方式來表達復雜的數據，可以確保對關系的理解要比那些混亂的報告或電子表格更快。通過圖形化的表現方式，我們可以以清晰和連貫的方式解釋大量的數據，從而讓我們理解數據，得出結論。

案例：流媒體平臺節目數量的變化

以下圖為例，當用戶希望了解 2011 至 2020 下圖四大流媒體平臺節目的數量變化情況時，以表格方式呈現效果如下圖：

未經可視化設計的表格數據圖

如果通過可視化設計處理后效果如下圖：

經可視化設計后的數據圖

在這個案例中，我們可以看到，通過文字信息表達的方式，所有的數據在文字信息的表達中都只是零散的個體，我們很難在短時間內對列舉數據有一個大致的了解，更不用說發現特征得到結論了；而在可視化表達中則不同，所有的元數據通過圖表形成一個整體，數字信息被轉化為視覺信息，通過可視化圖表，通過觀察點的位置和顏色即可感知到數據的差異，原本需要通過計算數字大小完成的對比，變成了肉眼可見的點的顏色與間距對比，我們可以迅速了解到近十年四大流媒體平臺每年節目數量、每年不同平臺節目數量的對比以及各個流媒體平臺節目數量的增長趨勢等。

2. 將數據轉化為更具吸引力的故事

據研究發現：人腦處理圖片信息的速度顯著快于處理文字信息，例如一篇 300 字的小故事，看一遍需要數十秒，而轉化成圖片后則只需要一眼即可記在腦海里。

這表明，在信息的類型中，人腦對圖片信息的接收和處理效率遠高于文字信息。而數據可視化則可以將數據通過可視化的方式轉化一個以圖片形式展示的故事，幫助用戶快速接收、處理信息，激發用戶聯想并產生情感共鳴。

案例一：新冠病毒如何通過空氣傳播

隨著新冠疫情在全球各個地區的蔓延，如何做好疫情防控已經成為了每個民眾的頭等大事 。Mariano 和 Javier 用可視化的方式生動形象地傳達了新冠病毒是如何通過空氣傳播的以及可以通過哪些措施來降低傳染風險。

圖 2 @Mariano & Javier

案例二：在敘利亞，誰和誰戰斗？

許多不同的團體之間的關系可能很難理解 – 尤其是當有11個這樣的團體存在的時候，這些團體之間有的結盟，有的敵對，這讓人難以理解。但是，Joshua Keating 和Chris Kirk通過表格的形式和熟悉的視覺效果和色彩，將這些數據簡化為一種簡單的、易于理解和可互動的形式，讓人們可以輕松了解這些團體之間的關系和故事

圖 3 @Joshua Keating and Chris Kirk

3. 幫助人們作出決策，加快決策過程

現實生活中大部分的人是視覺學習者，他們傾向于在與視覺元素相關聯的情況下進行學習并與信息互動。[2] 人類大腦識別并理解一張圖像最快僅需 13 毫秒。[3] 因此，相比起閱讀和理解文本，大部分人更容易通過圖表或其他可視化形式來理解數據，合理的數據可視化設計可以提高他們作出決策的速度。

圖 4 @Bea Vaquero

如何做好 B 端數據可視化設計

1. 明確客戶需求

設計師在設計數據可視化項目的開始階段應該盡量與客戶進行深入溝通，確定他們的業務訴求，也可以理解為確定客戶的初衷與目的，從企業客戶對數據可視化的需求看來，通常會有兩種類型：

• 側重于匯報展示，主要用途是為了對外宣傳、對內展示等，對于這類需求，設計時可強化視覺效果的呈現，對數據進行場景化設計，嘗試讓數據以一種新的載體，有趣的互動等形式結合展現。
• 側重于數據分析和協助決策，對于這類需求，一定要清晰了解需求方的業務內容和重點指標，重點關注數據的維度、種類、數量等信息，視效設計上應該優先滿足業務訴求。

明確客戶訴求，通過設計手段幫助客戶達成目標，這才是 B 端數據可視化設計的關鍵所在。只有當我們了解客戶的需要，我們才能快速推導產品結構、關鍵數據、視效風格等信息。

圖 5 @Daria

2. 確定關鍵指標與優先級

關鍵指標是對一組或者一系列數據的統稱。一般情況下，一個指標在屏幕上獨占一塊區域，所以通過關鍵指標定義，我們就知道數據大屏上大概會顯示哪些內容以及數據大屏會被分為幾塊。

那么關鍵指標的選取依據是什么呢？我個人認為主要還是依據客戶訴求，數據可視化的最終目的就是幫助客戶達成業務目標。需要思考的是，哪些數據通過何種呈現方式能夠幫助客戶解決問題、達到目的、滿足他們的期望，選擇出一系列關鍵指標。

對于這些選取出來的關鍵指標，我們需要對其進行優先級的排列，一般來說，主要指標能夠呈現業務的主要邏輯，一般放在顯眼位置，用重點元素標識；次要指標圍繞主要信息進一步闡述；輔助指標是對主要信息的補充，一般放在非核心區域，或者二級結構中。

通過合理優化關鍵指標并進行優先級排列，能夠保證數據可視化的核心設計的重點，避免數據空洞散亂。

3. 合理使用數據圖表

在選擇圖表展示相關數據指標時我們要思考各個指標的主要呈現，更進一步的講，是我們想通過可視化表達怎樣的信息。下面這張圖就清晰告知了我們如何從數據的展示目的出發，選擇合適的可視化方式來呈現數據。

圖 6 翻譯自@Stephen Few

4. 合理進行頁面布局

數據可視化頁面布局的設計是相對靈活的，為了保證數據呈現最佳效果需要結合實際需求來合理規劃。關注核心數據的比例和位置，橫向布局最為常見（人眼的水平運動比垂直運動快，會先注意水平方向的事物），核心數據場景劃分在中心位置，占較大面積；其余的指標按優先級遵循人們的瀏覽習慣在核心指標周圍依次展開。將類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

@布局設計案例

5. 制定設計方向

在定義設計風格的階段，從項目背景出發，綜合行業類型、產品定位、品牌傳播等因素，提取關鍵信息，構建設計框架。

數據可視化的設計風格主要根據客戶要求、行業特性、數據指標等因素決定。通常我們很容易看到的可視化設計以深色為主，是因為相比于淺色基調，深色背景設計能夠有效緩解視覺疲勞，其次深色設計能夠更好地營造對比差異以及數據層級，再者深色設計更容易呈現豐富的動態效果，營造出強烈的空間感等。配色的設計使用應該充分考慮項目背景以及項目屬性，例如黨政機關類項目會慎重考慮用色，應當確保設計嚴肅，莊重。

數據可視化的設計除了對數據進行合理設計，還需要注重場景感的塑造，例如，我們通過場景化設計可以讓某大數據平臺成為大型“圖書館”，查看數據的過程就跟圖書館看書一致，場景化設計的優勢是能夠讓用戶能夠以一種具象的互動方式來理解十分抽象的業務數據，當然合理的構建動態數據效果能夠讓數據具備“生命力”。

圖 7 @Gan Gryc

6. 設計對比

除了尺寸和位置，我們還可以通過配色來突出數據。

無論是通過顏色或形狀對比設計，容易產生強烈的視覺沖擊力。

圖 8 @Bureau Oberhaeuser

利用明度的對比，我們可以用深色烘托鮮明的色彩，或者用鮮明的色彩襯托某一塊暗沉的色彩，亮色靠附近的暗色襯托顯得更加鮮明，其色彩特征表現得更加充分；

圖 9 @Zoey Shen

正確的對數據進行配色，讓數據傳遞出的信息更清楚、更明白，例如國內 A 股，紅色代表漲，綠色代表跌（美股綠漲紅跌）如果給國內的股票、金融等相關客戶做數據可視化設計時，需要避免不同地區文化所產生的差異。

圖 10 @Dima Groshev

7. 選擇 2D or 3D?

隨著數字孿生概念的火熱，越來越多的企業熱衷于打造自己的 3D 數據可視化產品，那么 3D 可視化就一定比 2D 強嗎？

數據可視化設計本身就是為了高效傳達數據信息而服務的，相比平面呈現，3D 最大的優勢在于多了空間維度，適合那些需要跟空間結合的數據呈現，例如地理信息、建筑樓宇、工業生產等場景。那么 3D 數據可視化相比 2D 就一定能夠展示更多的信息嗎，顯然不是絕對的；需要根據實際業務需求出發。

通常我們所說的數據 3D 可視化，就是把大量復雜抽象的數據信息，通過 3D 模型以視覺方式呈現出來，幫助人們理解和分析數據。相比于數據 2d 可視化，數據 3d 可視化具有以下的優勢：

• 展示空間相關的數據，因為空間數據具有三個維度，如果想要將其以視覺方式直觀呈現出來，就必須要借助 3d 模型。例如顯示一棟大樓不同樓層的人員分布情況，此時只有 3D 數據可視化能夠幫助我們達到目標；
• 視覺沖擊力更強，相比于 3D 可視化從視覺上表現力更強；
• 場景/對象仿真，在一些需要高度仿真的項目，例如與軍事、地理勘測相關的項目中，數據 3D 可視化就不可或缺了，無論宏觀態勢還是細微結構的精密運行，數據 3d 可視化都可以將相關信息清晰呈現給使用者，將真實的環境、對象搬到屏幕上，降低使用者的認知成本。

在一個實際的數據可視化產品項目中，有必要應用 3D 數據可視化的情形；

• 需要展示多維空間數據
• 需要通過對場景/對象進行仿真，減少使用者的認知成本和學習成本
• 需要依靠 3D 效果來提升視覺沖擊力

相比 2D，3D 的設計與開發成本相對較高；其次 3D 場景會容易產生視角遮擋以及操作成本等問題，那么從實際項目出發合理選擇才是最重要的。

亞信數字樓宇@PRD MO UED

8. 設計還原

設計稿完成了并不代表設計師在這個項目中的工作就結束了，在后續的開發工作中，設計師還要與開發人員合作，減少上線產品與設計稿的差異。

這個階段的工作也并非聽上去那么容易，尤其是 3D 可視化設計，我們會使用相關 3D 工具制作設計效果，但 3D 設計工具與最終開發引擎存在著色、渲染等差異；在這個時候我們需要靈活運用開發引擎特性，提供對應的美術資源。作為設計師同樣需要了解相關引擎著色器知識，幫助設計效果實現同時也提升對接效率。

亞信數字樓宇@PRD MO UED

9. 調優與測試

測試客戶終端上線是否正常，有無適配所造成的兼容性問題；排查有無視效及體驗問題，同時也要考慮極端場景下所產生的問題及應對方案。

對于大型 3D 可視化場景會存在性能卡頓，加載緩慢等問題，在保證視效基礎上盡可能壓縮相關美術資源，減少不必要的效果計算和內存占用量，根據實時效果需要不斷優化性能提升產品體驗度。

數據可視化發展趨勢

趨勢一：數據可視化 ╳ AI人工智能

隨著企業發展數據量日益龐大，通過人腦分析復雜數據變得越來越困難，我們需要借助 AI 人工智能的幫助。AI 人工智能可以通過強大的算法快速識別分析數據，為企業節省了寶貴的時間和資源，目前人工智能已經被廣泛應用于醫療保健服務、銷售、供應鏈、客戶分析和欺詐預防的數據可視化項目中。

IBM 數據可視化專家 Mauro Martino 創建的儀表板，允許用戶可視化新聞中出現的主題

趨勢二：數據可視化 ╳ XR

AR 和 VR 技術的應用可以增強數據在空間上的感知，從而幫助人們更好地使用數據。通過結合 VR、AR 技術，用戶能夠更好，更快地理解、分析數據。最近進行的許多研究表明，VR 和 AR 具有較強的感官體驗，可以促進更快的學習和理解。幫助用戶對業務問題進行多維度的分析，并更快速地找到解決方案。

圖 11 LM9000@5puj47980xk

趨勢三：數據可視化 ╳ 實時數據

在數字時代，事物變化很快，企業需要對數據告訴他們的信息做出快速反應——正因為如此，實時可視化數據比以往任何時候都更重要。

在 COVID-19 大流行期間，企業能夠迅速作出反應更加重要。各國政府和衛生當局已經使用實時數據可視化來跟蹤感染情況并據此進行調整。越來越多的公司正在將實時數據集成到他們的產品中。

實時數據可視化可以采取一些簡單的形式，如實時更新的折線圖或使用新信息(如銷售)快速更新的交互式地圖。

圖 13 @Esri & The Science of Where Podcast

趨勢四：數據可視化 ╳ 全面體驗設計

以用戶體驗為核心的數據可視化設計是一種重要趨勢，將用戶放在第一位，然后是數據。無論處在哪個行業，設計師都應該遵循類似的思考過程，從思考用戶需求及其痛點開始, 用戶正在嘗試解決哪些問題，以及他們面臨哪些可能的困難？他們需要什么信息和功能來解決這些問題？我們如何以最佳方式為他們打造數據可視化？

最新的趨勢之一是將用戶的工作流與可行的見解、建議、預測以及針對當前任務或決策的最佳后續操作合并，幫助用戶進一步鉆研數據并發現模式、趨勢和相關性。

結語

數據可視化是一門同時結合了科學和藝術的復雜學科，其核心意義在于清晰的敘述和藝術化的呈現，這些需要依靠數據工程師和設計師的精心策劃而不是僅僅考慮如何實現炫酷的效果 ，只有最終達到幫助用戶理解數據和做出決策的目標，才能發揮它巨大的價值和無限的潛力。

文章來源：優設 作者：AsiaInfo Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

語言交流是人類的本能，近幾年語音交互的迅速崛起讓產品更加人性化了。然而即使不考慮技術限制，人與機器的互動也不是只有聽或說單一模態的，因為這不符合我們的自然交流。目前，在居家場景中，用戶與電視的交互依然是對眾多信息-圖像、語音、觸感-的同時處理，它們分別對應著觀看、聽說和必要的遙控器操作。對UX設計師而言，如何讓電視端同時承載這樣多的感知設計是值得思考的。

語音體驗設計是一個很大的系統，從用研、功能、內容到交互、技術實現等等，而GUI的展示只是一種輔助模態。今天我想探討的是如何結合GUI與VUI展開界面設計。

文章分兩個部分：電視端VUI的搭建和一次改版迭代。

目錄

1. VUI的構成

2. 改版需求

3. 界面改版

4. 設計驗證

1. VUI的構成

“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”

 <Voice User Interface Design>

1.1 定義

VUI：是一種交互模態，讓人能夠或多或少通過語音交互與機器共同完成一系列任務；

領域：是將用戶想要完成的任務分為一些大的類型，比如視頻領域、音樂領域、百科領域等；

意圖：指某領域下的具體任務，比如視頻領域下的“我想看某部電影”，即為影視搜索意圖。

1.2 場景示例

小明：“給我推薦點美劇”；

電視：“看看這些有沒有你喜歡的”，并推送一些熱門美劇；

小明：考慮了一會兒....說“風騷律師吧”；

電視：起播《風騷律師》。

在這個故事中，除了眾所周知的VUI應具備的基礎功能-聽和說-以外，我們還需要定義更完整的體驗流程：

1. 小明如何開啟與電視的對話？因為電視機不能一直處于聆聽狀態，那樣很可能會識別用戶無意圖的語言，從而誤響應。
2. 電視端應該以什么方式推薦美劇？如果只一個個播報片名，小明會記不住。

3. 推薦幾部合適？隔空喊話的情況下（遠場語音，下圖解釋），最好不需要再用遙控器翻頁。

4. 如果小明問的是其他領域問題，比如天氣、歌曲、球賽等，對應的媒體資源會涉及到多樣化的信息類型，如圖形、音頻等。不僅要統一設計風格，還要為未來可能支持的新領域/新意圖預留承載框架。

5. 如果小明的詢問得到了錯誤答復，或者一直未被答復，除了技術上提高識別率和語義理解程度，該怎么緩解用戶的茫然和憤怒情緒？

6. 當小明問了一個問題，不被理解，但換個問法卻成功理解。如何教會小明盡可能一次就做出能被識別的表達？

7. 我們能支持幾十個領域、幾百種意圖，怎樣能讓小明知道一共有哪些？ 

8. 如何結束對話，以免電視一直聆聽造成誤識別？

9. ......

為了回答以上問題，我們經過大量的模擬對話、競品分析和demo體驗，從而定義了電視端VUI的交互流程和組成模塊：

1.3 交互流程

喚起、聆聽、思考、反饋、退出：

電視端的語音有三種對話狀態：

1. 單輪對話：每說一句話都需要喚起一次語音；

2. 多輪對話：一次喚起，多輪對話，但輪數受限于領域范圍；

3. 全雙工模式：一次喚起，多輪對話，輪數不限。

圖源網絡

1.4 GUI模塊

這是本文重點描述的部分，電視端的GUI包括：

1. 狀態指示動畫：告知用戶當前狀態；

2. 提示詞條：提示用戶有哪些說法；

3. 用戶指令：用戶說法的文字識別結果，它讓人知道自己說的話是否被正確識別，若出了錯，用戶就知道原來是錯在這一環節；

4. 電視答復：文字+音頻；

5. 內容展示：所有媒資內容的呈現，如果沒有，則不展示。比如，天氣需要展示圖像，而交通限行用一句話回答即可。

舊版設計方案概覽：

語音GUI分為兩塊：語音基礎界面（必須）和內容展示區（可選），基礎界面包括上圖中的1234內容。

2. 改版需求

上圖效果是從17年逐漸搭建起來的框架，隨著需求增多、不同設計師的參與，設計越來越碎片。從易用性、視覺、開發維護難度和新功能兼容上，都存在很多問題：

2.1 設計目標

1. 布局調整

由于電視用戶使用最多、最重要的功能是觀看影視，所以優先考慮視頻領域。因此布局調整的優先順序是：基礎界面>視頻領域>其他領域。

2. 建立視覺規范

建立原子化設計規范：配色方案、文字、間距、圓角、圖標，以及可復用和拓展的組件、模版。

3. 統一狀態動效

將上文的5種基礎狀態結合全雙工狀態統一設計，并為未來可能開發的主動提示等狀態，預留一席之地。

3. 界面改版

3.1 語音基礎界面

經過競品分析，窮舉了7種可能的布局方式：

這么多的優缺點該如何取舍？我們將痛點歸類，并根據通用的交互原則排列了優先級：

最后決定用B1-底部長矩形，但設計UI時需要借鑒B2那樣增加一點漸變過渡。而針對B1的痛點，需要重新設計小面積狀態指示動畫，并定義好低欄左側的識別文字與右側的提示詞條之間間距，從技術上，我們能做到跟進用戶說話和播報內容，說一句、展示一句。

3.2 內容展示區－視頻領域

電視端就像是一塊自由發揮的大畫布。視頻海報的擺放，得從幾個方面考慮：

1. 背景占比：半屏、全屏、半屏至全屏；

2. 導航方式：宮格（我們的海報尺寸是可以統一的，所以不考慮瀑布流，此階段也沒有專題分類，無需考慮tab欄和泳道欄）；

3. 海報方向：橫幅、豎幅；

4. 展示數量：是否超過一頁、海報尺寸。

市面上的競品就有這幾種方案：

行為數據顯示，我們用戶的視頻意圖分兩種：明確自己想看什么－“播放陳情令”，和不明確目標、向電視尋求推薦－“推薦點古裝劇”。我們分別稱為普通推薦和個性化推薦。由于前者在大多數情況下內容較少，所以用半屏，后者則用全屏。由于視頻會單獨設計一個APP，故最后定的普推和個推的坑位都是十張：

3.3 內容展示區－其他領域

上面確定了視頻領域，而其他幾十個領域的信息，同所有平面設計的信息一樣，都是文字、圖片、圖標的排列組合，可以把它們按照原子化設計系統，從分子到模版逐步搭建：

這樣的結構，能確保20多個帶內容的領域都能從中找到對應的排列方式，模版如下表。這里看起來可能比較抽象，可以先看后面的UI效果圖再回來看這里。

3.4 內容展示區－背景

實際界面中，內容可能會以前面的任何一種排列形式出現，給較少的內容使用大背景是浪費，反過來則擁擠雜亂，故不同內容需要不同的背景。依然還是窮舉了5種背景待選擇：

1. 卡片 

2. 懸空半透明容器

3. 半屏羽化背景

4. 半屏實心背景

5. 全屏背景

按照痛點的優先級打分：

可見方案d-半屏實心背景最佳，但它最適合內容量級為中等的情況。所以我們考慮了是否也采用卡片和全屏來適應內容過少和過多的情況。最后結論是：只采用方案d和e，舍棄a，因為d的背景高度可以隨內容的多寡而變化。這樣以來，設計就不會很碎片化了。

3.5 設計規范與效果圖

到這里，已經確定了語音基礎界面（低欄）、各領域信息排列方式和背景。接下來就像搭積木把它們組合起來，這一步重點考慮的是內容是否上焦點和翻頁，這需要根據具體領域的資源參數和使用場景甄別。

正好在做這個項目時，我們電視端的視覺規范也在完善中，所以焦點色、文字、柵格等規范是直接從規范庫搬過來的。

實際效果：（抱歉GIF原圖太大了，只好展示一小截。手機拍攝有一點色差，實際的色彩還原度是很高的。）

4. 設計驗證

我們找來40名用戶體驗新舊版本語音，進行了偏好測試和用戶反饋收集，部分反饋如下：

40名用戶中，有80%認為新版更好，分別有12.5%和7.5%的人認為兩者差不多和舊版更好。這次的改版中，UI&交互、動效、顏色&背景三者，體驗感分別提升了12%、2%和7%。

當時大家對新版評價最高的是：簡潔易看、空間利用率高、布局更好。

吐槽最多的問題是：背景色太深、配色單一，動畫不夠好看、不夠明顯。我們隨即對背景色做了優化，上圖看到的是優化后的效果。

后續兼容性驗證：新版結構能較好適應節假日換膚、半屏小程序、第三方App適配等多種需求。

小結

文章復盤了電視端語音的基礎界面、視頻領域、其他領域和背景的重構過程。主要用到的方法有原子化設計理論、競品分析、痛點云圖（表格形式）和用戶偏好測試。對界面布局有較好的優化效果。最大的收獲是掌握了從最底層元素展開剖析的方法，這種細致的方法用來搭建界面設計會很穩固、全面，并且拓展性強。

經驗和不足：

1. 大屏經常強調沉浸式體驗，因而電視端疊加功能很多，但必須要注意分個主次。一是疊加內容不能太多，要么就不疊加、全屏展示。二是一定要考慮背景播的不確定因素，避免花亂；

2. 上面只是分析了二維平面，還有次級頁面、時序等三、四維的規則還未深入學習研究。這樣的研究會對所有App設計都有更好的指引。

3. 我們雖然已有了簡單的導航、柵格等布局規范，但內容展示區依然是毫無章法的自定義排列，智能電視產品還沒有像手機、PC一樣較成熟的設計框架，我覺得蘋果的tvOS模版規范做的比較穩定，我們也應該借鑒，形成自己的風格。

文章來源：優設  作者：lady珠珠

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

什么是數據可視化：概述

Jorge Rey的化石燃料Dataviz 

它是如何工作的？

如果我們能看到它，我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調，但這是事實，可視化更加有效和全面。

在某種程度上，我們可以說數據Viz是講故事的一種形式，目的是幫助我們根據數據做出決策。這些數據可能包括：

• 追蹤銷售

• 識別趨勢

• 識別變化

• 監控目標

• 監測結果

• 合并數據

秘密7 –塞爾吉奧·費爾南德斯（Sergio Fernandez）提出離婚可視化的理由 

什么時候使用？

數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數字中。

話雖如此，Data Viz適用于：

• 年度報告

• 簡報

• 社交媒體微敘事

• 信息手冊

• 研究

• 趨勢販運

• SciViz

• 燭臺圖，用于財務分析

• 確定路線

可以看到數據可視化的常見情況是在銷售和營銷，醫療保健，科學，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統計信息圖 

為什么要使用它？

簡短的答案：決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說，它是確定以下情況的寶貴工具。

• 識別變量關系之間的相關性。

• 獲得有關受眾行為的市場見解。

• 確定價值與風險指標。

• 隨時間監視趨勢。

• 通過頻率檢查速率和潛力。

• 應對變化的能力。

太空垃圾-BBC科學焦點，作者：Federica Fragapane

數據可視化類型

您可能已經猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

地圖

地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關的信息，并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D（靜態或動態），因此可以使用多種組合來創建Data Viz地圖。

COVID-19支出數據可視化POGO，George Railean

但是，最常見的是：

• 區域地圖：顯示國家，城市或地區的經典地圖。對于每個區域中的不同特征，它們通常以不同的顏色表示數據。

• 線圖：它們通常包含空間和時間，由于對特定場景進行了分析，因此通常是路線選擇的理想選擇，尤其是該地區的駕車或出租車路線。

• 點地圖：這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。

• 熱圖：它們根據特定屬性指示地理區域的權重。例如，熱圖可以按區域分布感染者的飽和度。

圖表

圖表以圖形，圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別，因此它們經常與圖形混淆。但是，兩者之間的差別很?。簣D形顯示數據組之間的數學關系，并且僅是表示數據的統計圖方法之一。

圖表數據可視化，作者：Madeline VanRemmen

順便說一句，讓我們談談數據可視化中最基本的圖表類型。

條狀圖

他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇，并遵循不超過三個變量的趨勢，否則，條形變得混亂且難以理解。

餅狀圖

這些熟悉的圓形圖按部分劃分數據。切片越大，部分越大。它們非常適合描述整體的各個部分，它們的總和必須始終為100％。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。

線形圖

他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。

散點圖

這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如，如果您的x軸包含有關汽車價格的信息，而y軸包含有關薪水的信息，則正向或負向關系將告訴您某人的汽車所反映的薪水。

表格

與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現，并且旨在顯示應該閱讀而不是可視化的特定數值數據時，它們是理想的選擇。

數據可視化| Aishwarya Anand Singh的養蜂與否 

例如，圖表非常適合顯示特定區域內一段時間內特定疾病的數據，但是當您還需要了解具體原因（例如原因，結果，復發，治療時間和治療方法）時，最好使用表格。

數據可視化與信息圖表

5個主要差異

它們并沒有什么不同，因為它們在視覺上都代表數據。通常，您搜索信息圖表并找到標題為“數據可視化”的圖像，反之亦然。但是，在許多情況下，這些標題都不會引起誤解。這是為什么？

1. 數據可視化僅由一個元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個Data Viz元素。

2. 與可能簡單或極其復雜且繁重的數據可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人，后者通常也是可以理解的。

3. 有趣的是，數據Viz不提供敘述和結論，而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如，數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”，而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。

4. 數據可視化可以在Excel中進行，也可以使用其他自動生成設計的工具，除非將其設置為演示或發布。但是，信息圖表的美學非常重要，其設計必須吸引更廣泛的受眾。

5. 在交互方面，數據可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態圖像。

Skype通過可視化.com進行可視化

如何創建有效的數據可視化？

5有用的技巧

該過程自然類似于創建信息圖表，并且圍繞了解您的數據和受眾。更準確地說，這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

1.做功課

準備工作已經完成了一半。在甚至開始可視化數據之前，必須確保您了解該數據的最后細節。

不可否認的是，了解您的數據查看對象是另一個重要部分，因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰？他們如何處理視覺數據？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報告？

您正在可視化什么樣的信息，它能反映出您的目標嗎？

最后，考慮要使用多少數據并加以考慮。

圖片來自Brodie Vissers

2.選擇正確的圖表類型

在上一節中，我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。

• 圖表中將有多少個變量？

• 您將為每個變量放置幾項？

• 值之間的關系是什么（時間段，比較，分布等）

話雖如此，如果您需要展示整個項目的各個部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產品的市場份額的百分比。但是，餅圖不適用于時間范圍內的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點圖，s和折線圖更為有效。

另一個示例是如何在圖表中使用時間。使用水平軸會更準確，因為時間應該從左到右。它在視覺上更直觀。

Oberhaeuser的MagnaGlobal廣告市場海報 

3.對數據進行排序

首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時，您必須處理大量數據，這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫，將您的信息分成兩個或多個圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

提示：使用條形圖和柱形圖進行比較時，請按值（而不是字母順序）以升序或降序對信息進行排序。

圖片由薩曼莎·赫爾利（Samantha Hurley） 

4.利用顏色發揮自己的優勢

在每種可視化形式中，顏色都是您最好的朋友和最強大的工具。它們產生對比，重音，強調并直觀地引導眼睛。即使在這里，色彩理論也很重要。

設計圖表時，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負，并且難以為觀眾閱讀。但是，您可以使用顏色強度來發揮自己的優勢。例如，當您在不同的時間段內比較同一概念時，可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

選擇顏色時要考慮的事項：

• 不同類別的顏色不同。

• 系列中所有圖表的采用一致調色板，方便以后將進行比較。

• 最好使用對色盲友好的調色板。

Jamie Kettle可視化塑料廢物污染數據 

5.獲取靈感

當您想成為數據可視化設計中的佼佼者時，請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實現的每種數據。

下圖這個Twitter帳戶數據可視化是一個很好的例子。同時，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數據創建視覺效果。

lilit Hayrapetyan創作的大數據紀錄片的人臉 

8個數據可視化示例

作為另一種藝術形式，Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土，這些圖表證明了數據也可以是美麗的?，F在，讓我們來看看一些例子。

1.黑暗之魂III體驗數據

我們從孟小偉的個人項目開始，介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大，但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作，并且在信息圖表中看起來很棒。

我的黑暗之魂3孟小偉在播放數據 

2.有史以來最偉大的電影

凱蒂·西爾弗（Katie Silver）根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影?？梢暬@示了每部電影的關鍵數據點，例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

凱蒂·西爾弗（Katie Silver）的100部最佳電影數據可視化 

3.最暴力的城市

費德里卡·弗拉加帕內（Federica Fragapane）顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列，并根據兇殺率在水平軸上排序。

4.家族企業作為數據

這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖，其中包含行業細分以及對就業貢獻的散點圖。

視角雜志–家族企業by Valerio Pellegrini 

5.太陽系的軌道圖

該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置，并按小行星的類型進行了著色。

埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖 

6.標題的語義

KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

標題語義學KatjaFlükiger 

7.月球和地震

該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh） 

8. Nanosats的黎明

可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini） 

最后的話

數據可視化不僅是一種科學形式，而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據，并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數據和受眾有關。這樣，您就可以選擇正確的圖表類型，并使用可視化技術來發揮自己的優勢。

文章來源：站酷  作者：ZZiUP

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

大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。

接下來為大家分享精美的大屏 UI設計案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。

圖片均來源于網絡）

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

更多精彩文章：

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

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

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

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

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

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

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

  大數據可視化界面設計賞析（八）

大數據可視化界面設計賞析（九）

大數據可視化界面設計賞析（十）

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