一期一會，表哥又帶著新鮮的乾貨來了！
上周，表哥分享了一篇關於，洋洋灑灑四千多字把可視化規範背後的原則研究了個遍。但在實際工作中，可視化常常是在多人協作中完成的，我們該如何制定一份可視化標準來確保跨人員、跨平臺設計呢？我們常聽到視覺識別系統（VIS），可視化有沒有專門的設計系統呢？
本周，表哥嘗試翻譯了一篇3次凱度信息之美獲獎者——Amy Cesal 的文章《What are Data Visualization Style Guidelines》，一起看看她是如何看待數據可視化設計系統的吧！
1、什麼是數據可視化設計系統？
2019年穀歌（Google）和倫敦城市智能（London City Intelligence）相繼將數據可視化指南納入設計規範系統中。數據可視化在企業決策和品牌價值弘揚中起到了越來越重要的作用。
↑ 倫敦城市智能（London City Intelligence）設計指南
2014年，我（Amy Cesal）為陽光基金會（Sunlight Foundation）設計了第一份數據可視化設計指南，2017年消費者金融保護局（CFPB）也提出了類似的設計需求。我很高興看到越來越多的組織投入資源規範數據可視化工作。
↑ 美國消費者金融保護局（CFPB）可視化設計指南
什麼是數據可視化設計指南？它們有什麼共性和特性？如何從中啟發來構建自己的數據可視化設計指南？
企業或組織進行數據可視化時，需要用數據可視化設計指南來規範信息表示形式。通常包括是什麼（圖表的類型有哪些？）、為什麼（如為什麼使用這個顏色？）和怎麼做（如用什麼工具設計？）。如果涉及到一些設計工具，如Excel、R、D3.js或Tableau，可視化指南還會提供一個模板來演示如何應用。
↑ 倫敦城市智能（London City Intelligence）設計指南
通常，數據可視化指南是設計規範系統的一部分，不同類型的組織有不同的信息、受眾和需求。我將收集到的案例按類型進行了整合，並儘可能突出每個案例的特性。
2、非盈利機構可視化指南
1. 美國陽光基金會（Sunlight Foundation）
美國陽光基金會歸納了一套專屬的可視化色卡，每個色號都有專屬的名字，分別對應著一類常見的變量。例如"反對（Con）"用深紅色（#BD2D28），「支持」用綠色（#0F8C79）。
↑ 陽光基金會（Sunlight Foundation）數據可視化指南
https://sunlightfoundation.com/2014/03/12/datavizguide/
他們還規範了每個圖表的結構，如標題與圖表的距離、輔助線的粗細、圖表字體和字號等。
↑ 陽光基金會（Sunlight Foundation）數據可視化指南
2. 美國卡託研究所（Cato Institute）
卡託研究所（Cato Institute）是一所位於美國華盛頓哥倫比亞特區的自由意志主義智庫。他們在數據可視化設計規範中用一系列「不好（not ideal）」和「好（better）」的例子，展示了如何更精確地展示數據。
↑ 美國卡託研究所（Cato Institute）數據可視化指南
https://github.com/glosophy/CatoDataVizGuidelines/blob/master/PocketStyleBook.pdf
例如，他們認為：同一個變量應使用相同的顏色；折線圖只能用在展示變量隨時間變化時；不重要的元素應使用灰色；展示多個類別隨時間變化時應使用面積圖而不是折線圖。
↑ 美國卡託研究所（Cato Institute）數據可視化指南
他們還舉例說明了如何跨圖表展示多類別信息。
↑ 美國卡託研究所（Cato Institute）數據可視化指南
3、盈利機構可視化指南
1. 谷歌材料設計語言（Google Material Design）
谷歌也提供了一系列數據可視化中的「好（do）」和「壞（don't）」例子，並作出了相應解釋。例如，同類別變量應避免使用不同顏色：
↑ 谷歌材料設計語言（Google Material Design）
https://material.io/design/communication/data-visualization.html
指南中還有一小節專門研究儀錶盤（Dashboards）排版。介紹了各類獨特的排版布局，以幫助企業對儀錶盤進行標準化設計。
↑ 谷歌材料設計語言（Google Material Design）
2. IBM
IBM有專門的篇章指導設計師去思考數據可視化的目的及可能受眾。可視化的出發點是什麼？是出於讀者的需求還是基於某個資料庫？類似的問題有助於設計師進行深度思考，而不是僅僅停留在視覺層面。
↑ IBM設計語言規範
https://www.ibm.com/design/v1/language/experience/data-visualization/chart-models/
IBM還以通俗易懂的方式歸納了常見的圖表類型及其適用範圍。例如下圖中的堆疊柱狀圖，IBM以設計師的口吻對圖表適用範圍進行描述——「我想使用該模型是因為我想：展示時間變化/對比/體現相關性/展示細分數據」。
↑ IBM設計語言規範
4、政府機構可視化指南
1. 美國金融消費者保護局（CFPB）
CFPB的設計指南指出了如何根據具體的法律規定和政府要求製作圖表，尤其是《美國508無障礙法案》，美國的所有政府機構都需要遵循這條法案。
例如，由於CFPB常常需要根據歷史數據進行預測，因此該指南指出預測數據必須強調出來，否則會讓人誤解它們是真實數據。比如如果是柱狀圖，可以用淺一點的顏色或用虛線框出預測數據；如果是折線圖，可以用虛線表示預測數據，並在圖例中指出哪些是真實的，哪些是預測的。
↑ 美國金融消費者保護局（CFPB）設計規範手冊
https://cfpb.github.io/design-manual/data-visualization/data-visualization.html
在國內，DT財經也經常使用虛線來代表預測數據。
↑ DT財經
2. 倫敦城市智能（London City Intelligence）
數據可視化中哪些顏色可以一起使用而哪些不能？為什麼？該指南深入研究了可視化色彩選擇方面的考量，按優先順序提供了一系列配色，並指出了每個顏色由深到淺的使用規範。除此之外還給出了該系列配色在淺色和深色兩種背景下的使用規範。
↑ 倫敦城市智能（London City Intelligence）設計指南
https://data.london.gov.uk/blog/city-intelligence-data-design-guidelines/
5、新聞媒體可視化指南
1. 達拉斯早間新聞（Dallas Morning News）
「達拉斯早間新聞」設計手冊詳細解釋了新聞報導中的地圖如何通過色彩和樣式保持視覺一致。
↑ 達拉斯早間新聞（Dallas Morning News）設計手冊
https://knightcenter.utexas.edu/mooc/file/tdmn_graphics.pdf
陸地、水域、公園等元素必須按規範顏色呈現，其中水域、公園需要加描邊：
↑ 達拉斯早間新聞（Dallas Morning News）設計手冊
虛線、icon、標註可以用來強調某個部分，不同元素意義不同。例如，
↑ 達拉斯早間新聞（Dallas Morning News）設計手冊
除此之外，由於新聞行業時效性非常關鍵，達拉斯早間新聞還制定了一套可視化工作流程圖，規範了從選題、派發需求、設計到審核的對接流程，規範了每個環節的對接人及所使用的系統及工具。
↑ 達拉斯早間新聞（Dallas Morning News）設計手冊
2. BBC新聞
BBC設計體系也有專門的「如何設計信息圖形」板塊。值得一提的是關於圖例的規範：
↑ BBC全球通用設計手冊
https://www.bbc.co.uk/gel/guidelines/how-to-design-infographics
為了給不同設備和瀏覽器的讀者更好的用戶體驗，BBC新聞還規範了響應式信息圖的設計。每個信息圖表都需要設計三種尺寸：小、中、大。小尺寸圖表是縱向設計的，適用於手機屏幕。中尺寸和大尺寸更傾向水平排布，中尺寸適用於平板，大尺寸使用電腦。
↑ BBC全球通用設計手冊
6、其它可視化指南
政府、企業和組織通常有一系列設計指南，可視化指南只是其中的一種。為了更好的了解可視化指南在當中的位置，我們也來看看其他設計指南分別起到了什麼作用。
設計系統（Design Systems）是所有設計標準和規範的總稱。廣義的設計系統包括了品牌手冊（Brand Manual）、內容風格指南（Content Style Guides）、數據可視化指南（Data Visualization Style Guide）、樣式庫（Pattern Library）和編程框架（Code Framework）。
很多大家所熟知的企業都有相應的規範，政府和國家機關也不例外，例如2019年美國政府也發布了網頁設計系統2.0（USWDS 2.0），包含了以上提到的很多部分。
↑ 美國政府網頁設計系統2.0（USWDS 2.0）
https://designsystem.digital.gov/
1. 品牌手冊（Brand Manual）
品牌手冊（Brand Manual）是一份為設計師而設計的規範化文件，目的是使企業的品牌形象在多個平臺保持整體性和一致性。品牌手冊通常定義了顏色、字體以及LOGO的使用規範，促進設計部門跨人員、跨素材、跨平臺設計，幫助企業利益相關者理解企業的核心價值。
國外設計博客Brand New也收集了眾多品牌視覺手冊的案例供大家參考和學習：
↑ Brand New官網
http://underconsideration.com/brandnew/
2. 內容風格指南（Content Style Guides）
內容風格指南（Content Style Guides），又稱編輯指南（Editorial Guidelines），定義了品牌的語氣和語調以及特定的文字用法。編輯指南通常由內容創作者編寫，對其他編輯、外部承包商和顧問都很有用。
Mailchimp就是一個很好的例子（美國的營銷自動化平臺），他們將企業的語調風格設定為有話直說的（避免隱喻）、真誠的、B2B的、幽默的。
↑ Mailchimp內容風格指南
https://styleguide.mailchimp.com/grammar-and-mechanics/
3. 樣式庫（Pattern Libraries）
樣式庫（Pattern Libraries）記錄了各種設計元素如何在特定的頁面進行組合。BBC設計系統的設計系統提供了一系列排布樣式，如頂部欄、垂直列表、底部導航欄、輪播等。
↑ BBC全球通用設計手冊
https://www.bbc.co.uk/gel/guidelines/category/design-patterns
數據可視化本身就是一種樣式，它有自己的一套組件，如標題、文字、圖表、數據源和圖例。所有這些組合起來成為一個可視化樣式。
4. 圖表庫（Charts of Charts）
圖表庫是數據可視化樣式指南的一部分，它向組織內部的設計師展示了一系列用於不同類型數據的圖表樣式。與前文所介紹案例不同的是，圖表庫只是展示可供使用的圖表，並不會更詳細地教你如何使用、為什麼這樣使用。
例如，英國金融時報（Financial Times）的視覺字典總結了適用於9種不同數據的72種圖表，如用於展示時間變化的折線圖、柱狀圖、面積圖等。
↑ 英國金融時報（Financial Times）視覺字典
https://github.com/ft-interactive/chart-doctor/blob/master/visual-vocabulary/Visual-vocabulary.pdf
7、總結
由此可見，不同的企業對可視化指南的需求也各不相同。但萬變不離其宗，可視化指南應當與企業其他設計系統相統一。從某種意義上說，可視化指南是將企業視覺設計系統應用於數據可視化的結果。
本期的分享就到這裡，如果大家還想要更多乾貨，就讓熱情來得更猛烈些吧！歡迎【轉發】、【點讚】、【在看】和【留言】，你們的捧場，就是表哥繼續創作的動力。閱讀量越高，表哥筆速就越快！
原作者 | Amy Cesal
翻 譯 | 宋丹琳
編 輯 | 鄒 磊 鄭舒雅 小 唐
圖片來自：What are Data Visualization Style Guidelines
原標題：《大公司都是怎麼做數據可視化規範的》
閱讀原文