數據可視化已迅速成為在網絡上傳播信息的標準。它用于各種行業，從商業智能到新聞，幫助我們理解和傳達見解。

我們的大腦善于處理可視化信息，這使我們更容易理解圖表或圖形中可視化的數據，而不是表格和電子表格中列出的數據。一個偉大的數據可視化應該利用人類視覺系統的優勢來呈現數據，以便數據被吸收和理解。它應該考慮用戶對視覺處理的了解，提高并簡化用戶的數據體驗。

目前有很多工具和框架可用于構建這些圖形，是時候回歸基礎了。是什么讓數據可視化有效？在設計數據時我們應該遵循哪些指導原則？

以下最佳實踐將幫助您設計豐富、有洞察力的數據體驗。

1.為特定受眾設計

可視化是用于揭示模式的，提供上下文并描述數據中的關系。雖然設計師對給定的一組數據集中的模式和關系沒有任何影響，但她可以根據用戶的需求選擇顯示哪些數據以及提供怎樣的語境。畢竟，就像其他產品一樣，如果用戶無法使用它，那么可視化就毫無意義。

為小白用戶設計的可視化應該是結構化的、明確的和有吸引力的。他們應該用文字直接說明受眾應該從數據中得到什么。

轉換雙親的工作時間：媽媽VS爸爸

來源：https://flowingdata.com/2016/04/20/parent-work-hours/

另一方面，面向專家用戶的可視化可以顯示更精細的數據視圖，以驅動用戶探索和發現。細節和數據密度應該簡單明了。

工作來來往往：國民失業

來源：http://graphics.wsj.com/job-market-tracker/

2.使用（但不要依賴）交互促進探索

這是一個發人深省的數字：《紐約時報》網站上只有10-15％參與可視化交互的訪客實際點擊了按鈕?！都~約時報》的圖形團隊制作了一些業內最好的作品，但幾乎沒有人與他們互動！

這表明，關于交互可視化設計，我們不能依賴交互來建立理解。關鍵數據不能隱藏在交互元素后面，而應該在沒有交互的情況下可見。

然而，什么樣的交互比較好呢？允許整合更多數據（否則可能被排除），以允許感興趣的讀者更深入地研究數據集。Nathan Yau 的流動數據已經壟斷了這種交互式可視化風格市場，正如他關于死亡原因和預期壽命的圖表中所展示的那樣。

2005年至2014年的死亡率數據：死因如何因性別和種族而異

來源：https://flowingdata.com/2016/01/05/causes-of-death/

或者，交互可以用作吸引點，一個引發關注的點，可以讓你的讀者在遠遠地瀏覽之前，親自參與該項目?？纯?Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者簡單地繪制一個圓圈——在繼續文化形態的分析概述之前——畫出簡單而有效的可視化的特征。

畫圓圈的方式說了很多關于你的故事

來源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/

同樣， The Pudding 最近發布了一個交互式可視化軟件，向讀者講述有關生日悖論的知識（生日悖論，指如果一個房間里有23個或23個以上的人，那么至少有兩個人的生日相同的 概率要大于50%。）。雖然大多數非統計學家可能會發現生日悖論，這是概率論中的一個標準問題，非?？菰锴也恢庇^，但這種可視化使得它看起來簡直令人著迷。創作者融入最近的用戶互動的方式使得整個體驗非常具有關聯性。

生日悖論實驗

來源：https://pudding.cool/2018/04/birthday-paradox/

這兩個交互式示例都起作用，因為它們允許讀者參與數據且不需要通過交互來理解。

3.利用視覺突出性聚焦并引導體驗

視覺突出性，使視覺元素從周圍環境凸顯的特性，是數據可視化的強大工具。它可以用于引導用戶注意可視化中最重要的信息，以幫助防止信息過載。通過使用視覺突出一些細節并壓制其他細節，可以使我們的設計更清晰，更容易理解。

一些視覺變量——顏色和大小——是我們創造和控制視覺顯著性的關鍵。

色彩方案是優秀的數據可視化的關鍵。眾所周知，色彩特別擅長打破偽裝。我們可以使用溫暖，高飽和度的顏色來突出關鍵數據點，并應用冷色調，使用低飽和度的顏色將不太重要的信息放到背景中。

2014：最熱的年份

來源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/

尺寸也很明顯。較大的元素比較小的元素更有吸引力，因此要擴大您希望讀者首先閱讀的元素，并縮小不太相關的文本和元素。

4.使用位置和長度表達定量信息并使用顏色表達分類信息

Cleveland 和 McGill 在信息可視化方面的著名工作，研究了視覺編碼的有效性（即數據維度與視覺屬性的映射）。他們根據人們對視覺編碼的準確感知程度，對不同類型的視覺編碼進行了排序，給出了以下（簡化的）列表：

1. 通過共同的規模定位
2. 長度
3. 角度
4. 區域
5. 顏色

這對數據可視化設計的意義在于，我們顯示定量信息的首選應該是按位置進行編碼（如經典散點圖和條形圖所示）。與基于角度（如餅圖）或基于區域（如氣泡圖）的編碼相反，基于位置的編碼有助于觀眾在更短的時間內進行更準確的比較。

然而，這并不是說所有可視化都必須是條形圖或散點圖。在研究可視化數據的新方法時，牢記這些原則是個好主意。

我真正想要強調的是，顏色不應該用于編碼定量信息，而是應該用來編碼分類信息。也就是說，我們可以使用顏色來表示屬于不同類別的數據。

出生時的預期壽命

來源：http://www.vizwiz.com/2017/11/life-expectancy.htm

5.使結構元素像刻度線和軸一樣清晰但不顯眼

無論你是否支持 Edward Tufte 在設計中極簡主義的極端方法，都要幫自己一個忙，從你的圖表中消除視覺上的混亂。通過在數據元素和非數據元素之間創建可視化對比，來讓您的數據大放異彩，就像 Nadieh Bremer 在他的獲獎作品“美國出生時間”中所做的那樣。

嬰兒潮：白天工作時間出生高峰期

來源：https://www.visualcinnamon.com/portfolio/baby-spike

刪除不起任何作用的結構元素使數據清晰（如背景、線條和邊框）。減弱必要的結構元素（如軸、網格和刻度線），否則這些元素會與您的數據爭奪注意力。網格為淺灰色，最寬設為0.5 pt，軸為黑色或灰色，最寬設為1 pt。

6.直接標記數據點

編碼數據的每個元素都需要進行標記，以便讀者理解它所代表的內容。簡單吧？

錯。太多設計師依靠圖例來告訴讀者哪些符號或顏色代表圖表中的哪些數據系列。列舉圖例雖然對設計師來說很容易，但對讀者來說卻很難。它們迫使讀者在圖例和數據之間來回掃描，給讀者的記憶帶來不必要的壓力。

更好的方法是直接在圖表上標記數據系列。這往往更像是一個挑戰，但是，嘿，你是設計師。你的工作就是做這項工作，以便于讀者不必這樣做。在下面的例子中，Nathan Yau 完成了避免使用圖例的工作，創建了一個帶有大量直接標簽的小型交互式多重顯示。

每人每日平均消費量

來源：https://flowingdata.com/2016/05/17/the-changing-american-diet/

7.使用消息傳遞和視覺層級創建敘事流程

最好的可視化講述著引人入勝的故事。這些故事來自數據中包含的趨勢、相關性或異常值，并且由于數據周圍的元素而加強。這些故事將原始數據轉化為有用的信息。

從表面上看，似乎數據可視化完全與數字相關，但一個偉大的數據故事是無法用語言來講述的。信息傳遞具有清晰的視覺層次，才能一步一步地引導讀者閱讀數據。

例如，可視化的標題，應該明確闡明一個關鍵觀點，使讀者領會。分散在數據中的微小注釋，可以通過異常值或趨勢引起讀者注意，從而為關鍵觀點提供支撐。

來源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html

我在這里要說的是：幫助讀者，確切地告訴他們在數據中尋找什么！

8.將上下文信息直接疊加到圖表上

正如我剛才提到的，我們可以在可視化中使用注釋來幫助創建數據故事的過程。有時我們可以添加圖形元素來使這些注釋更有意義，以便將這些信息更直接地關聯到我們的數據。

以這張來自 Susie Lu 的圖片為例。“夏季大片”和“奧斯卡季”的數據重疊賦予了原本看似隨機的高峰和低谷以意義。它們幫助觀眾理解數據的重要性，比單獨使用字幕或注釋更直接。

2015 - 2017.08 票房趨勢：強大的開場和后期的爆發

來源：https://susielu.com/data-viz/box-office

9.為移動體驗而設計

靜態可視化通常以 JPG 和 PNG 等位圖圖像格式發布，這對移動端用戶來說是一個明顯的挑戰。許多數據可視化的美妙之處在于它們的視覺細節——微小的數據點和微妙的編碼——而這些細節許多在靜態格式的小屏幕上被丟失了。

例如：Accurat 工作室在諾貝爾獎上的精美復雜的作品，在印刷和高分辨率視網膜顯示器上看起來非常棒的全尺寸，卻在移動設備上幾乎難以辨認。

視覺數據

來源：http://giorgialupi.com/lalettura/

為移動體驗設計，或者使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構建響應式可視化，或者為印刷、桌面和移動設備多種載體創建相同的靜態可視化設計。

10.平衡復雜性與清晰度以促進理解

我今天談到的所有最佳實踐可以歸結為一件事：在復雜性和清晰度之間找到合適的平衡，以滿足受眾的需求。

制作精美的、探索性的可視化細節總是誘人的，但這不一定是最合適的方法。在設計圖形時要考慮周到 ，讓讀者的知識和目標決定應該包含哪些數據以及包含多少數據，并整理數據以講述您想要講述的故事。

原文標題：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB

原創作者：MIDORI NEDIGER 

原文鏈接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

翻譯作者：桃花果

授權獲取：張聿彤

文章審核：王翎旭

文章編輯：王鴻飛

該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設

作者：三分設  來源：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

在后臺系統、數據類產品、B 端產品中，表格作為最常用的一種數據整理的組件，其重要性不用過多贅述。但如何更好的設計表格呢？想必多數剛接觸 B 端的設計師都有過這個困擾。

今天，我給大家整理了一份關于表格的攻略，希望能幫到你。

什么是表格

表格是一種數據可視化的一種形式，可以查看和處理大量數據，它主要承載了數據的收集、整理、組織、展示、對比和歸納。

表格的設計原則

1. 易讀性

表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數據本身，而不是花里胡哨的樣式。

2. 可尋性

列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。

3. 高效性

表格要用最短的時間告訴用戶想要得到的信息。

4. 靈活性

可以讓用戶根據自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。

表格的構成

外部區域：標題、操作區、篩選區；

內部區域：表頭、表體、表尾。

介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。

表格元素解析

1. 標題

標題是整個表格內容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。標題的位置一般在左上角。

2. 操作區

對表格內容的增刪改等操作的區域。

使用建議：

有且只有一個主操作

特殊情況下可以沒有主操作，但不能有兩個主操作。

樣式統一

同一個產品中，操作區樣式規范要保持一致。

操作的優先級

根據使用的優先級，把常用的操作放到一級展示，不常用的收到二級展示。

不同操作狀態區分要明確

不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內容的時候是 Disable 狀態，那這時候就要和其他可操作的有明顯的樣式區別，否則容易讓用戶分不清可不可以操作。

刷新按鈕

有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內的內容。在有的后臺管理界面中，因為數據量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內容，很不好用。很多情況下，用戶只想重新加載一下列表的內容，那這個刷新就很好用啦。

同時刷新后要有即時反饋，告訴你點完操作后目前處于哪個階段中。

導出功能

此功能可以把列表內容導出為你想要的格式（一般為 word / pdf）。

數據量較大的列表中，導出功能可以很方便的把自己過濾的內容下載到本地進行其他需求的查看。

導出內容的范圍是哪些一定要事先想好，一般下載內容的范圍包括以下幾種：

• 當前頁所有列表內容（常用，而且實現難度很低）；
• 經過二次過濾后，導出所有頁上的列表內容；
• 所有頁的列表內容（不常用，而且實現及數據處理難度會非常大，慎重選擇）。

導入功能

既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內容，同時該內容是否與現有的列表字段有沖突。

自定義內容

自定義分兩種：

可以設置某列內容是否展示（需要注意的是：列內容展示數量可以不設置上限，但必須設置下限）；可以設置每一列內容的左右排序。

如果表格內容比較多的情況下，這兩個功能是很有必要的，如果內容少，則可忽略這兩個功能。

那怎么區分內容的多與少呢？我的理解：常用分辨率下，一屏可顯示完整內容的話為內容少；反之則內容多。

3.  Tab（標簽切換）

可以快速切換不同維度下的表格內容。

使用建議：

• 不同狀態區分要明顯；
• Tab 數量不宜過多，如果不可避免的數量過多的話，一般有兩種方案：最多顯示出 5 個 Tab，超過 5 個 Tab 放在“更多里面”；交互上支持左右滑動 / 切換 Tab。
• Tab 只放文本，最多可以放個 icon，盡量避免其他干擾信息；
• Tab 信息要精簡。

4. 篩選區

篩選區是對表格數據的主觀再處理，用戶根據篩選功能可以得到更精準的信息。

搜索功能：

1）模糊搜索 or 精準搜索

搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…

模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據產品選擇即可。

2）單字段搜索

輸入單字段進行搜索，比較常用的方式之一。

3）多字段組合搜索

可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數據量過大的時候優勢就很明顯了。

4）切換類別搜索

可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。

5）多類別組合搜索

多類別組合搜索適合更加復雜的列表內容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。

 篩選的樣式

輸入框、下拉選擇、日期選擇器、單選、多選。

5. 表頭

每一列列表的小標題，是對整列內容的描述。

表頭區域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。

6. 表體

表體承載了表格的主要內容，它的內容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。

使用建議：

• 內容決定表格的高度，一般設置 2~3 種行高就可以滿足大部分場景了；
• 把全局唯一且最重要的字段放在第一列，比如：名稱。同時可以把名稱固定在列表左側，就算列表橫向內容過多的時候，也可以第一時間看出區別；
• 要設置最大寬度和最大高度，避免特殊情況下的內容展示；
• 對齊方式：普通文本左對齊，數字類右對齊（記住就行，這是規范）；
• 最多支持二級列表，不可再多；
• 可以把一些常用的操作放出來，放在列表最后一列。

7. 表尾

表尾主要是展示表格的統計信息、分頁、跳轉頁面等。每頁顯示條數常規情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。

列表詳情交互展現

1. 彈窗

模態對話框：用戶在當前頁面彈出一個彈窗，除此彈窗內容外不可操作其他區域內容，產品的主觀意識較強。

非模態對話框：也是彈出個彈窗，但是與模態對話框不同的是它不打擾其他用戶操作，此彈窗存在的時候，用戶同時也可以操作其他區域，產品的主觀意識較弱。

2. 抽屜

抽屜現在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內容區域比彈窗多了很多，同時如果區域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。

缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。

3. 跳轉頁面

直接跳轉個新頁面作為詳情，好處就是可以展示更多的內容信息以及可以讓用戶更聚焦于當前內容。

缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。

4. 嵌套

嵌套就是上面提到的二級列表，它一般用于一級列表的內容補充，并且內容不宜過多。

在最后

在數據可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。

作者：生活因你而火熱

轉載請注明：優設網

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

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

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

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇

各位數據可視化設計師們大家好，鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方，阿勇決定花一些時間去詳細剖析一下關于這方面的知識，全部都是多年工作經驗所得，絕對有料。

整個合輯一共有 10 篇文章，分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章，具體展開來講一講可視化大屏設計的知識點。（我命名為可視化設計十要素）

同時也會包含    同學們問我的問題以及我搜集的問題，將會以問答的形式去給大家講一講，如有不對的地方，還請大家指出，我們一起探討進步！

文章較長，請仔細閱讀，基本涵蓋：設備信息，分辨率尺寸，大屏適配，投屏事項，掌握本文可應對日常可視化設計設備方面的知識。

設備分類

1. LED 屏幕

政府大屏主要以點間距去區分屏幕的精細度，點間距越小，造價約昂貴；面積越大越整體，造價越高。離屏幕越近顆粒感越強，設計效果也就越不清晰，LED 顯示屏表面不平整是導致 LED 顯示屏圖像失真的主要原因。LED 顯示屏表面粗糙度的好壞主要取決于生產工藝。

屏幕介紹：按照不同點間距進行分類，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（間距越小，圖像越清晰，價格也越高，一般政府 led 屏基本都在 P1.25-P6 之間)。

最佳視距=像素間距/（0.3~0.8），這是一個近似范圍。如 LED 顯示屏 P16mm，最佳視距為 20~54 米。

2. 液晶拼接屏

拼接屏相比于點間距比較小的 LED 屏，價格方面會更便宜一點，拼接屏設計時最主要就是拼縫的處理，注意拼縫，設計時非必要情況下，都要跳過拼縫，尤其是“圓”這個造型。

拼接屏：46 寸，55 寸 物理分辨率：1920*N 1080*N（n 代表屏幕數量），1.7mm、3.5mm、0.88mm、0.44mm、無縫隙；企業常用（1.7mm 和 3.5mm）

大屏拼接縫隙：設計時應盡量不要跨屏去設計，會使畫面交叉，不重疊，尤其是圓形。

3. 大屏拼接處理器

大屏拼接處理器主要功能是將一個完整的圖像信號劃分成 N 塊后分配給 N 個視頻顯示單元，完成用多個普通視頻單元組成一個超大屏幕動態圖像顯示屏。大屏拼接處理器輸入信號數量和類型取決于用戶需要，輸出信號數量等于顯示單元數量。

4. 視頻矩陣處理器

矩陣是將多路輸入信號切換輸出到多個顯示設備，一般來說輸入信號數量要大于輸出信號數量。（我們想在 9 塊顯示器上同時監控 100 個攝像頭傳來的信號，就用矩陣來實現即可）

視頻矩陣是指通過陣列切換的方法將 m 路視頻信號任意輸出至 n 路監控設備上的電子裝置，一般情況下矩陣的輸入大于輸出即 m>n。有一些視頻矩陣也帶有音頻切換功能，能將視頻和音頻信號進行同步切換，這種矩陣也叫做視音頻矩陣。

模擬視頻矩陣的輸入設備：監控攝像機、高速球、畫面處理器等很多個設備，顯示終端一般為監視器，電視墻，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻，輸出比較少一般 2-128 個顯示器；例如 64 進 8 出，128 進 16 出，512 進 32 出，1024 進 48 出等）。

總結：矩陣只能負責信號的切換，不能處理，不能做效果。大屏拼接處理器功能十分強大，具備矩陣功能的同時，還可以實現任意開窗、漫游、疊加、場景保存與輪換。

5. 液晶拼接屏的優勢 – 拼接處理器預設場景

4*2 大屏展示端，我們通過控制端，借由拼接處理器可以對大屏進行隨意開窗，漫游，疊加，畫中畫等效果。在控制端拖動布局，大屏會隨之改變布局，非常方便。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優勢以及如何設定不同場景。

如果你們企業還在因為屏幕適配以及尺寸問題而糾結，或者想展示：開窗，漫游，疊加，畫中畫等效果，毫無疑問你們應該選擇拼接處理器，這比傳統投屏方式更合適，更沒有比例不對的困擾。

預設場景一：

把控制端的分屏進行編號，接下來移動控制端對應的編號區塊，就可以對大屏進行重新布局，圖中展示的正是我們的預設正常場景。場景為居中布局，左右兩側為圖表展示。

預設場景二：任意窗口布局

對控制端進行隨機布局，將主視覺模塊移動到左側四塊屏幕，圖表都集中在右側，由此我們就由預設場景的居中布局變成了左右布局，左側為主視覺。

預設場景三：任意窗口漫游

可以隨意的關閉大屏某個模塊的漫游，通過控制端進行屏幕的顯示以及不顯示。

預設場景四：任意窗口平移

畫面的任何一個模塊都是可以進行平移操作的，我們將模塊一和模塊五可以平移拖拽到任何一個位置。

預設場景五：任意窗口疊加

畫面的任何一個模塊都是可以進行疊加到屏幕任何一處，還可以控制模塊置頂和置底，非常靈活。

6. WEB 端大屏

基于 web 網頁端的展示方式，通過在 web 開發，有需要時會投屏到大屏上去展示。設備比例一定不能差距過大，比如 16:9 的投屏到 32:9 的大屏就不是合適，解決方案可以是外接一塊 1920 的顯示器即可。

此處要注意 web 端演示時，記得全屏顯示，瀏覽器邊框滑動條等可以不考慮，前端會做相應的瀏覽器細節考慮，設計按正常分辨率即可。

7. 觸摸屏

觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”、“觸控臺“，是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。

當接觸了屏幕上的圖形按鈕時，屏幕上的觸覺反饋系統可根據預先編程的程式驅動各種連結裝置可用作控制端操作大屏，原理等同于 iPad 控制，只是載體不同。

設計規范以及按鍵反饋等交互體驗與 iPad 類似。

8. 滑軌屏

滑軌互動屏系統——又稱為滑軌電視、滑軌播放等，通過特殊設計的機械滑軌控制裝置，結合高清液晶拼接幕墻，實現對屏幕內容的互動控制?；瑒拥讲煌恢闷聊徽故鞠嚓P信息，包括圖片、文字、視頻等，是一種全新的互動展示形式，可與觸摸同時使用。

9. 虛擬沙盤

虛擬沙盤/數字沙盤就是用計算機通過投影儀或者 LED 大屏顯示屏動態/靜態三維顯示：智慧交通、智慧市政、智慧農業、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型，這是一種高科技的模型操作員通過程序，可以隨意調整沙盤的尺寸、規劃區域、區域布置，快速展示多種全新的創意。

具有三維顯示效果，并可以從不同角度觀察創意模型，篩選創意方案。注意虛擬沙盤和實體沙盤的聯動效果，實體沙盤為底，虛擬沙盤做效果疊加。

分辨率：物理實際分辨率

設備適配

Q：原本設計尺寸是 1920*1080，使用場景是 PC 端，同時在大屏中展示，尺寸為 3840*1080，該如何適配？

A：首先我們需要了解適配最主要的痛點就是：靈活，復用性高，可延展。

圍繞這幾個點我們可以通過模塊化開發去做，將每個模塊單獨開發。我們設計師做這種需求之前，就需要提前去構思，在設計各模塊時，盡量使用可擴展和可自適應的圖形，這樣面對適配的時候我們可以通過移動，縮放這些模塊，來完成適配。盡量避免二次設計以及開發，提升時間成本。

圖形放大適配：

圖形位移適配：

Q：如果是 16:9 適配非 32:9 是否也是這么去適配的？如果是特殊的形狀或比例該怎么適配？

A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發一套了。就好比我們通過控制端去控制大屏，如何用開發一套的時間去適配兩個甚至是多個終端，這是我們需要注意的。當然考慮到一些實際情況，會有一定程度上的修改，但是一定是要從節省工作量去出發的。

尺寸計算

場景一：拼接屏分辨率計算，已知某項目設備分辨率為寬高 4*2 拼接屏，設計稿我們該如何去定義分辨率？分辨率又是多大？

從命題我們可以看到 4*2 的拼接屏，我們可以通過一塊屏幕為 1920*1080 去計算，那么通過計算分辨率應該是 1920*4 &1080*2，也就是 7680*2160，這樣就計算出我們的分辨率了。

場景二：LED 屏分辨率計算，已知某項目 LED 屏幕物理尺寸為寬 15 米，高 4 米，設備分辨率未知（可以支持 4K 或者 2K 輸出），那么如何去制定分辨率？

工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目，那么我們只能通過計算大概的設計分辨率來出初期的設計稿件。

可能一：屏幕支持 4K 輸出，既然支持 4K 輸出，保證畫面輸出的清晰我們可以將設備的高度設定為 2160

此場景下公式為：15/4=X/2160 X=8100 那么可以大概得出寬度大概為 8100 像素（只是我們通過計算大概得出來的）

可能二：屏幕支持 2K 輸出

此場景下公式為：15/4=X/1080 X=4050

重點來了，不要以為這樣就結束了，我一直強調的可視化設計師為什么一定要在現場，為的就是方便各種測試。剛才我們只是通過計算得出的大概數值，此時我們可以在紙上畫一個正方形，并投到設備上，如圖。

• 結果一：如果正方形比例不變，設計尺寸無限接近于大屏實際比例；
• 結果二：如果正方形比例被拉伸，設計尺寸小于大屏實際尺寸；
• 結果三：如果正方形比例被壓縮，設計尺寸大于大屏實際尺寸。

此處圖片上主要是為了測試計算出來的分辨率究竟是拉伸還是被壓縮了，通過這樣的方式去測試設備大概的分辨率的大小比例，在我們產出效果圖之后，也可以投射設計圖的方式看看屏幕是否是完美適配，這種方法可以在未開發之前，盡可能確定屏幕對設計圖的影響，從而避免對開發造成大規模修改。

注意：這樣做也只是在不知道設備分辨率的情況下，去大概計算設備分辨率，僅供參考！

投屏事項

1. 電腦直接投屏

使用場景：會議室，展廳等

等比例投屏，投屏電腦投到 2*2 大屏（4K）

投屏電腦支持輸出 4K 分辨率，投屏電腦分辨率以 3840*2160 作為設計，投到 4K 拼接屏上，大屏會完美展示，并且畫面非常清晰。

投屏電腦支持輸出 2K 分辨率，投屏電腦分辨率以 1920*1080 作為設計，投到 4K 拼接屏上，只會以 1920*1080 進行輸出，因為輸出像素只能支持 2K，也只是 1920*1080 的放大。

此處需要了解兩個概念：輸出像素和顯示像素，輸出像素指的是投屏電腦的最大支持分辨率，顯示像素就是我們大屏的支持的最大分辨率。

我們實際項目中最好以顯示像素的尺寸進行設計（就是以大屏尺寸為主），但是也要看輸出設備的像素大小。

2. 硬件投屏本地運行

使用場景：科技展廳，以及一些帶主機的設備。

此種情況，一般我們的大屏會自帶主機，大屏本身就可以看成一個顯示器非常大的電腦。我們如果需要進行可視化演示，那么我們直接就可以通過顯示器的尺寸去做設計，這樣就是大屏的設計尺寸。

一般這種靠硬件的投射，都是在拼接處理器的處理下，將多個屏幕拼合成一個大的顯示器，再通過拼控系統（硬件投屏）進行輸出。

一般我們可以將我們大屏的（UE4 或者 U3D 開發）應用程序打包，打包成一個后綴為.exe 的應用程序，在大屏電腦上直接點擊，程序就可以在大屏上完美的跑起來，也不需要去進行電腦投射大屏。

3. 控制端操控大屏

如果通過控制端去控制大屏，那么投射設備就可以通過多種方式去展示了，可以是手機、平板、觸摸屏、手勢控制、體感控制等等。

這種情況下投射設備的尺寸就按照本身設備的規范去設計就可以了（比如 750*1334，2048*1536），設計尺寸就是我們大屏本身的分辨率就可以了。

4. 多主機多信號投屏

此種情況主要使用場景：屏幕寬度非常高，并且內容可以分很多模塊展示，模塊彼此之間不受影響獨立展示，這種情況下我們就可以通過此種方式去投屏。通過多個主機分別去投射大屏的同等大小區域，比如圖中的場景模塊被我分成了四等份，我們就可以通過四臺主機去分別投射四個模塊，形成一個完整的大屏。

此種大屏設計尺寸我們以輸出設備的尺寸為主要參考，四臺主機那么整體寬度就是 1920*4=7680，高度就是 1080（如果設備支持 4k 輸出，那么提升相應的設備尺寸*2 就可以了）。

5. 不同比例投屏及解決方案

Q：如果遇到一個設備是 16:9，投屏到一個 20:3 比例的大屏幕， 那我設計尺寸以 16:9，還是 20:3？

A：我們要記住，如果面對的是正常比例投屏到非等比的大屏，我們需要遵守的規范一定是：一切以大屏展示為主。所以我們設計尺寸一定是按照 20:3 來設計的，大屏展示正常才是我們的唯一標準，投屏電腦可能會出現的問題，我們只能妥協（投屏電腦可能只能展示很小的一部分，但也是沒有辦法的）

那么我們遇到這種是否就沒有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實際工作中，我也遇到過這種問題，所以在這給大家分享一下。

方案一：外接顯示器（外接多個顯示器，一般主機可以另外外接四個顯示器，這樣就可以解決投屏電腦顯示不全的問題了）

方案二：采用拼控系統，而不是用純粹的設備投屏（拼控系統完美解決了尺寸不一致的難點）

方案三：設計兩稿，16:9，20:3 我們都去做設計（做兩套系統，相當于做的適配）

Q：請教大家一個問題，電腦的分辨率是 3840*2160，單個大屏的分辨率是 1920*1080，拼 9*6 的大屏，設計尺寸該設置多少啊？這樣設計尺寸會不會太大了，如何優化這個設計稿尺寸？

A：前面的文章我們已經介紹過拼接屏的尺寸的問題，這個問題的解答：1920*9/1080*6，這個就是設計分辨率，通過計算得出，最終設計稿尺寸為 17280*6480?？梢钥闯鲈O計分辨率確實太大了，設計的時候如何去優化設計尺寸呢？

通過命題我們可以看出電腦分辨率是支持 4K 的，就是說輸出分辨率和顯示分辨率我們都是可以上 4K 的，而 4K 的分辨率一般會做 3840*2160，再結合設計稿尺寸 17280*6480，可以將整個效果圖尺寸縮小三倍，也就 5760*2160。設計可以按照這個分辨率去出圖，最終交付給開發的就是切三倍圖，并提示開發是縮小三倍做的。

總結：不管在面對什么尺寸的設計，都要記住，萬變不離其宗，一切以大屏完美展示為準則，所有的一切都是要在大屏上觀看，為了完美展示，投屏電腦，設備控制等頁面可以適當的讓步。

全篇知識點

通過以上的知識點總結，不知道大家對于數據可視化大屏設計是否有了新的認識，數據可視化對于設備的尺寸，設備的信息，以及投屏注意事項，都要有更多的了解才可以。下圖就是總結本篇文章的知識點。

作者：生活因你而火熱

轉載請注明：優設網

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

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

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

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇

我們毫無疑問已經處在一個大數據的時代。各行各業都在快速產生和積累數據。 本文結合 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

轉載請注明：優設網

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

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

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

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇

在如今這個時代，越來越多的信息和內容呈現開始依賴數據驅動，也開始有更多的場合需要信息圖來輔助呈現，對于可視化數據，從來沒有像現在的要求這般高。但是另一方面，我們周圍充斥著大量錯誤的圖表呈現，希望這篇文章提供的 20 條建議能夠幫你設計出更好的信息圖。

1、選擇正確的圖表類型

不同的圖表類型所承擔的功能是截然不同的，不合理的數據呈現會容易讓用戶誤讀。同樣的數據可以使用不同的圖表呈現出不同方面的特征，因此，在設計信息圖之前，先理清需求，再來選擇使用哪種圖表能夠更好地呈現。

2、根據數據的正負值選擇正確的繪圖方向

當使用數據在0的左右波動，產生正負差異的時候，請使用基線來正確反應正負關系，不要在同一側來呈現數據，這樣很容易帶來誤讀。

3、始終從0處開始繪制條形圖

和折線圖不同，條形圖如果從非 0 的位置開始，確實更容易反應趨勢，但是給所體現的數據量級和特征是失真的。比如在下面的案例中，B看起來是D的3倍以上，但是實際的情況是，兩者差異并不大。所以需要從座標 0 處開始呈現數據，這樣會更準確。

4、折線圖應該清晰呈現Y軸上的趨勢變化

對于折線圖，需要考慮一下 Y軸上的尺度，因為如果單位太大，那么折線圖所呈現出來的波動幅度不夠大，趨勢的表達也不夠清晰。這個時候，建議調整Y軸上的單位大小，確保折線的波動幅度大概占整個Y軸的 2/3 即可。

5、使用折線圖的時候注意時間

折線圖是使用線條連接特定時間節點的特定數據的一種數據呈現形式，它有助于說明隨著時間推移，某些情況的變化，但是當間隔時間頻率不對，參差，缺失，那么折線圖的數據可能會無法對應，這個時候使用條形圖其實是更容易呈現的。

6、不要使用平滑的折線圖

平滑的「折線」在視覺上看起來是愉悅，但是它歪曲了背后的實際數據，也很難讀到關鍵的轉折點數據。

7、避免讓雙折線互相交叉

通常，為了為了節省可視化設計的空間，設計師會采用雙折線來呈現數據，但是在數量級不對等的情況下，折線圖會很難讀，甚至容易會誤導用戶，這個時候，建議分開使用2個不同的座標系來呈現，更加易讀，同樣可以看的出趨勢，也不會得出錯誤的結論。

8、限制餅圖中的扇形的數量

餅圖是最常用但是也是最容易誤用的圖表之一，在絕大多數的情況下，條形圖是更好的選擇。如果你決定使用餅圖，那么這里有2個基本的建議：

不要超過7個不同的扇區，讓餅圖盡量簡單
你可以將額外的片段分組到「其他」的扇區中

9、在餅狀圖中直接標注對應的數據

沒有合適的文本標簽說明的情況下，無論信息圖設計得多好都沒有意義，直接在圖表上進行明確的標識，才會對觀看者產生價值，需要觀看者自己去關聯的設計是失敗的。

10、不要在扇面上做標注

不要將數值直接放置在餅狀圖的扇區上，在較小的扇區塊上數據會非常難讀，相反，使用引線來指引數據對應的區塊會是更好的方法。

11、控制餅圖中扇面的排序讓其方便閱讀

對于餅狀圖的切分方式，有2種常見的順序：

將最大的一塊置于12點鐘方向，然后順時針按照大小來排布所有的塊
將最大的一塊置于12點鐘方向，然后在右邊放次大的塊，右邊放置再次的塊，基本上就是越大的扇區約靠上。

12、避免隨機排列

同樣的建議也適用于其他的圖表，不要使用字母順序來進行排列，不要使用筆畫排序，而是按照數據大小來進行排列，水平條形圖就將最大數據放在頂部，垂直排布則將最大數據的放在左側，減少閱讀的時候的信息分辨的障礙。

13、不要犧牲信息圖的可讀性

餅狀圖通常是最不容易讀的圖表，因為它很難對相似的數據進行對比，所以在將它設計成環狀的時候，我們可以使用輔助的數據來呈現，但是一定不要犧牲彩色扇區的可讀性，這樣看起來高級但是并不具備基本的可讀性。

14、視覺效果不要影響數據的呈現

不要讓不必要的視覺效果來分散用戶的注意力，這可能會導致用戶對于數據產生誤解，通常你應該避免使用：

3D元素和陰影
漸變和失真的色彩
斑馬紋或者過多的網格線
裝飾性過強的字體

15、選擇和數據屬性匹配的配色

配色是可視化設計當中繞不開的一個重要的部分，在設計的時候可以考慮以下三種不同的配色方案：

使用定性的配色方案，不同的色相對應不同的元素，確保在整體配色的可訪問性
使用符合一定順序（比如明暗）的近似色的配色，呈現出一種連續的色彩變化
橫跨冷暖色調的配色方案，將中性色置于中間，用來呈現存在正負關系的數據變化

16、使用無障礙的配色

根據目前的統計數據，大概 12 人當中有一個人存在視覺障礙，有的是色盲，有的是色弱。你的圖表設計需要確保兼顧到這一部分用戶的需求。

在配色方案當中使用不同飽和度和明暗的色彩
使用去色效果來校驗你的配色的對比度

17、關注內容的易讀性

在信息圖的排版易讀性上同樣是有要求的，要避免分散用戶的注意力，不會制造視覺障礙：

選擇清晰的非襯線字體，避免使用襯線體和過度裝飾的字體
避免使用斜體、粗體和全大寫字體
確保和背景之間的信息對比度
不要旋轉文本

18、使用水平條形圖來優化傾斜標簽

這是一個非常簡單的技巧，能夠確保用戶在閱讀的時候足夠輕松，不會因為傾斜的文本扭傷脖子或者加重落枕的癥狀。

19、事先選好你的圖表庫

如果你的設計項目是面向 Web 或者移動端的交互式圖表，那么你需要考慮的第一個問題就是，要用什么樣的圖標庫。如今不同的圖表庫在功能模塊和規則上各不相同，你需要在一開始就基于你的需求和設計想法，做出選擇。

20 、不只停留在在數據靜態呈現上

信息圖本質上是在對數據進行優化處理、呈現的基礎上，幫助用戶進行探索，最大化地從數據中獲得信息洞察，讓數據發揮價值。在下面的 iOS Health 應用就是在最大程度地反映數據應有的意義和功能。

結語

對于所有想要在數據的可視化設計上有所建樹的同學而言，強烈建議閱讀一下 Dona M.Wong 所撰寫的《華爾街日報信息圖設計指南：呈現數據和事實的注意事項》，本文中很多內容都受到了這本書的啟發。

作者：陳子木

轉載請注明：優設網

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

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

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

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

大數據可視化界面設計之一：可視化大屏設計快速入門指南

大數據可視化界面設計之二：可能是最詳細的大屏數據可視化設計指南

大數據可視化界面設計之三：可視化大屏不會做？這篇 UI 設計指南總結了7個重要知識點！

大數據可視化界面設計之四：可視化大屏設計快速入門指南，看這篇就夠了！

大數據可視化界面設計之五：想做好數據可視化？先掌握常見 5 類圖表的特點和設計細節

大數據可視化界面設計之六：超全面的數據可視化設計指南：字體篇

大數據可視化界面設計之七：想把數據可視化做好？這 20 個超實用的經驗總結一定要先看過！

大數據可視化界面設計之八：B端產品如何做好數據可視化？收下這篇7000+的干貨！

大數據可視化界面設計之九：超全面的數據可視化設計指南：設備篇

大數據可視化界面設計之十：數據可視化必修課：表格篇