6大數據可視化應用設計規範

2020-12-18 人人都是產品經理

本文講述了六個數據可視化應用規範：包括圖表分類、畫面布局、硬體設施、字體字號、畫面配色、畫面飽滿和畫面動效。

今天為大家帶來的是數據可視化應用設計規範，談談我在設計過程中的一些經驗以及分享。

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

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

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

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

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

16:9是指顯示器的寬高比。根據人體工程學研究，發現人的兩隻眼睛的視野範圍是一個長寬比例為16:9的長方形，所以電視顯示器行業根據這個的黃金比例尺寸來設計產品。

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

此處布局只是我個人覺得比較合適的展示方式，並不代表一定是需要這麼排布，還可以有很多的形式去布局。

也可能因為業務不同，版式也會有調整，不過萬變不離其中，掌握基礎要素，其他解析度下照樣可以有很多編排形式！

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

1. Led屏幕

1）點間距不同

P3點與點之間的距離是3毫米，P4點與點之間的距離是4毫米。

2）清晰度不同

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

3）最佳可視距離不同

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

2. 拼接屏

拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數量比例得出長度的設計尺寸。

例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最後得出設計稿尺寸就是：高1080px乘寬3200px（在這裡感謝我的數學老師）。

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

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

3. 控制端

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

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

1. 字體字號

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

  • 中文字體：蘋方，思源黑體
  • 英文字體：DIN，DIN-PRO
  • 數字字體：Exo

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

2. 配色法則以及顏色選用

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

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

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

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

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

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

1. 畫面如何飽滿

1）字體的飽滿

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

2）文字的飽滿

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

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

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

3）關係的飽滿

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

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

4）圖標的飽滿

2. 頁面如何裝飾會更豐富

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

  • 原畫面設計完成
  • 添加裝飾線(點線面構成)
  • 調整位置，豐富畫面

在畫面添加裝飾的情況下需要給畫面留足位置。數據可視化大屏本身面積就比較大，合理運用畫面以及拼接屏縫隙添加裝飾線，可以更好的減輕拼縫所帶來的影響。

裝飾線的添加還可以在後期豐富畫面動效，科技感十足。在頁面中添加裝飾線在我看來，非常的有意義，既可以豐富畫面，又可以完善動效，一舉兩得。

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

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

1. 動效製作：C4D+AE

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

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

2. 素材靈感收集

1）Behance

在Behance上有很多國外的設計師，他們的數據可視化設計做的都非常漂亮，極具代表性風格。

我們可以通過Behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設計圖，同時可以把這些作品保存到自己情緒版中，非常的方便。

2）Pinterest

從「書籤」這個角度出發，我們可以發現其實Pinterest的本質就是一張張精美絕倫的圖片書籤。每一個在Pinterest上的圖片其實都是一個個網頁上所提取濃縮而成的書籤。

Pinterest對圖片的關注是最用心的，去除了其他的各種幹擾，Pinterest只注重圖片的呈現。

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

 

本文由 @AYONG_BDR 原創發布於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議

相關焦點

  • 大公司都是怎麼做數據可視化規範的
    2019年穀歌（Google）和倫敦城市智能（London City Intelligence）相繼將數據可視化指南納入設計規範系統中。數據可視化在企業決策和品牌價值弘揚中起到了越來越重要的作用。如何從中啟發來構建自己的數據可視化設計指南？企業或組織進行數據可視化時，需要用數據可視化設計指南來規範信息表示形式。通常包括是什麼（圖表的類型有哪些？）、為什麼（如為什麼使用這個顏色？）和怎麼做（如用什麼工具設計？）。如果涉及到一些設計工具，如Excel、R、D3.js或Tableau，可視化指南還會提供一個模板來演示如何應用。
  • B端互動設計——數據可視化圖表
    編輯導語：設計師如今在日常工作中也會遇到很多數據，對於設計師來說，好看並不是判斷的標準，實際價值和作用才是真正需要的；本文作者分享了關於數據可視化的框架，以及關於可視化設計的基本準則和規範，我們一起來學習一下。
  • 數據可視化有統一規範嗎?_湃客_澎湃新聞-The Paper
    1、為什麼探討數據可視化規則？學生時代剛開始我還不太會設計，雖然在學校確實掌握了一些基本設計技巧，但我更願意稱之為「機器學習」，或者說「黑盒子」探索。什麼意思呢？打個比方，我在電腦裡上傳100張梵谷的畫作，然後再上傳任意一張圖片，電腦可以把這個圖片模擬成梵谷風格的畫。這一過程完全是計算機完成的，我並不知道具體是怎麼做到的。
  • [學子論文]電視時政報導的數據可視化應用
    第二章 數據可視化在時政新聞中的應用 一、當前電視時政新聞報導存在的問題 時政新聞報導肩負著傳達黨和國家方針、政策的重任，因此在電視新聞報導中佔有重要地位。身居要位，作用重大。但是，如今的時政報導卻存在著幾大難以破解的困局。
  • 遊戲中的數據可視化設計分析
    遊戲中往往會使用大量的可視化元素來幫助玩家更好地探索遊戲世界、認知操控角色與周圍環境，以此提升玩家的遊戲體驗。同時，遊戲本身會產生一系列的數據，如玩家控制指令數據、角色移動軌跡數據等。遊戲設計者與玩家需要對這些數據進行信息挖掘與理解，藉此提升遊戲體驗或遊戲水平。本文就嘗試分析一下遊戲內外的各種可視化元素，以及可視化在提升遊戲設計與遊戲體驗中的重要作用。
  • 凱立德地圖推出時空大數據可視化地圖服務
    智慧城市數據中心建設的解決方案通常都是由底層大數據，終端應用平臺和可視化平臺服務組成的。包括規劃、設計、建設、管理均可通過可視化系統來查詢、統計、分析、運用數據，用以支撐業務系統功能。           三維空間的有效感知與實景可視化日益成為城市建設管理的重要工具，時空地理信息大數據服務是實現數據可視化和數據分析查詢的基石，是智慧城市建設的不可或缺的基礎設施。
  • AXURE原型設計:手機版可視化視圖應用案例
    將數據可視化，可以更快地理解和處理信息，是數據分析中重要的部分。本文從四個案例出發，分析如何做好數據可視化，希望對你有幫助。數據可視化在數據分析中扮演著越來越重要的角色，試想一下，如果你把一堆數據拿給你的老闆或者甲方爸爸看，那肯定會被痛批一頓。
  • 開源免費的大數據可視化，工程仿真動態模擬，科學計算仿真利器
    在科學計算、可視化以及交互式程序設計的高科技計算環境。數值分析、矩陣計算、科學數據可視化以及非線性動態系統的建模和仿真等應用領域一直被matlab，maple等商業軟體牢牢的佔據，但是面對這些商業軟體動輒幾萬十幾萬的授權費來說一般人是無法承受的。今天給大家推介的這個科學計算軟體ParaView，有著強大的可視化建模仿真能力，與那些商業軟體相比有過之而無不及。
  • 從數據可視化到交互式數據分析
    同時這也是我認為在未來幾年數據分析方面需要取得更多進展的地方。數據規範（思維→數據/模型）當我們通過計算機與數據交互時，需要做的第一件事就是將我們的問題和想法轉換成計算機能夠讀取的規範（SQL就是一個很好的例子）。這是程序語言和格式發揮主要作用的地方。
  • 嵌入式 BI 行業解決方案:智慧環保大數據可視化系統
    嵌入式 BI 行業解決方案：智慧環保大數據可視化系統 2020年12月23日 18:10作者：黃頁編輯：黃頁 智慧環保大數據 BI 主要服務於分析和決策，包括可視化大屏一張圖、環境分析、汙染監管、預測預報、公眾服務等，並重點加強大氣環境、水環境、排汙企業的精準監管和分析評價，為汙染防治和環境決策提供支撐。
  • 醫療健康大數據:應用實例與系統分析
    設計了一套使用智慧型手機自動收集人口位置信息與接觸信息的應用。將流行病數據源分為媒體(包括官方媒體)、行動裝置、社交網絡、Pro-Med郵件列表、實驗室和醫院數據，並根據不同數據來源設計了一套收集數據、分析數據、驗證數據、數據可視化的系統，用以直觀表現流行病的情況。3.2 幫助發現藥物副作用藥品上市後的不良反應檢測一般依賴被動檢測和主動檢測。
  • 6種常用可視化場景應用解析,玩轉可視化就是這麼簡單
    數據分析越來越重要，日常工作中，我們經常會用到數據可視化，可在實際分析做圖中，我們的圖總是做的太醜，別人那些漂亮的圖都是如何做的？又或者圖表組件太多，到底該用哪一個好呢？ 今天我們將介紹6種可視化圖表類型，並分析其適用場景，從而幫助大家快速選擇，讓你的可視化報表更美觀。
  • 實時交互式數據可視化工具將重塑現代業務
    【51CTO.com快譯】數據可視化工具可以為企業帶來很多好處，因此應該將其作為大數據戰略的一部分進行投資。 它們是如何被現代交互式數據可視化工具驅動的? 一般來說，數據可視化本身直觀地表示資料庫。隨著物聯網(IoT)的廣泛應用，將會產生各種規模資料庫。資料庫被解釋為以示意性、說明性的形式(如變量或坐標)編譯的信息。數據可視化的主要假設是將內容(數據)放置在適當的媒介中——數據可視化工具。對於智能家居系統來說，物聯網是關鍵技術。
  • 十萬大獎,網易有數尋找數據可視化分析達人
    2020年5月，網易雲(163yun.com)旗下可視化分析平臺網易有數主辦的第二屆屆網易可視化大賽正式開啟報名。大賽以「創造數據力量」為主題，並特別提供數字消費等8大行業數據，面向個人選手徵集運用網易有數製作的可視化作品比賽，共同探索數據價值。
  • 快到年底了,聊聊數據可視化
    可視化實際上綜合了計算機圖形學、設計、心理物理學、數據科學和人機互動等多門學科，它們之間的關係是，心理學和設計學是基礎，而計算機將其推到了智能層面。https://webpages.uncc.edu/krs/courses/6010/ 及 百度大數據報告我們再簡化一下，只有三個環節：數據、設計和故事。
  • 打通數據價值最後一公裡:一文讓你全面了解數據可視化
    圖形和地圖是近年來的熱點技術，尤其大數據興起後，以圖形和地圖為核心的數據可視化得到長足的發展。從數據可視化的應用角度，圖形和地圖可以梳理出如下四大類應用場景：比較、序列、構成、描述。其中「比較」場景細分為進度vs目標、項目vs項目、地域vs地域。
  • 會員單位丨時空大數據可視化表達分析,看MapGIS七大「超能力」
    在自然資源管理、智慧城市建設、政府政務服務、民生工程建設、公共安全治理、航空航天乃至企業生產經營等諸多領域，時空大數據可視化表達分析都有著極大的應用空間。除擁有酷炫的空間數據快速可視化能力外，MapGIS Client forJavaScrip還具有大數據深度融合的數據運維分析能力、便捷的Web端應用可視化搭建開發能力……無論是國家各級信息化組織，還是普通的GIS二次開發商，或者是需要使用位置信息的網際網路產商，以及需要搭建WebGIS應用的企事業單位、科研院所、高校等，都可以藉此快速構建瀏覽器和移動端雲GIS應用。
  • 19款實用「數據可視化工具」
    大數據時代，數據分析已經成為一種常態。調查數據顯示，53%的企業員工都需要經常查看分析數據。由於數據數量多且雜，人們在做數據分析時需要藉助可視化工具將數據更直觀地展示出來以幫助理解。為此，站長之家本周為大家整理了一些好用的可視化工具，幫助大家提高效率。
  • APP設計的信息可視化!人機界面交互
    文/王軍 手機APP界面為信息可視化提供更為有趣的交互體驗，信息可視化也為手機APP界面提供了更為優良的視覺呈現效果和傳播形式。在進行手機APP界面設計時，為了能更加有效及時的傳達準確信息，將信息數據恰當合理的轉化為具有代表性的視覺元素符號是非常必要的。
  • 如何設計一個規範的數據倉庫
    2.2 DW層DWD層要做的就是將數據清理、整合、規範化、髒數據、垃圾數據、規範不一致的、狀態定義不一致的、命名不規範的數據都會被處理。DWD層應該是覆蓋所有系統的、完整的、乾淨的、具有一致性的數據層。在DWD層會根據維度模型，設計事實表和維度表，也就是說DWD層是一個非常規範的、高質量的、可信的數據明細層。