@木槿425 文章，作者授權發布
https://www.zcool.com.cn/article/ZMTAyNzkxNg==.html
---
感謝大家對黑馬家族的支持，今天給大家推薦一篇關於數據可視化設計常常被忽略的細節相關的文章，希望帶給你更多幫助！
正文數據可視化是信息的表現形式，它不僅指狹義上理解的數字本身，還可以是具有一定意義的文字、字母、數字符號的組合、圖形、圖像、視頻、音頻等，也是客觀事物的屬性、數量、位置及其相互關係的抽象表示。從表現形式和載體入手，只專注於各類數據應用於不同環境下最優的表現形式，讓展現更具有目標性，讓設計「有理有據」。數據可視化的目的把相對複雜、抽象的數據通過可視化手段表達數據內在的信息和規律，促進數據信息的傳播和應用，更加直觀地將圖表信息一眼就是理解的數據，通過可視化信息，我們的大腦能夠更好地抓取和保存有效信息，增加信息的印象。但如果數據可視化做的較弱，反而會帶來負面效果；錯誤的表達往往會損害數據的傳播，完全曲解和誤導用戶，所以更需要我們多維的展現數據，就不僅僅是單一層面。數據可視化起到的作用是更好的分享和傳達數據信息，通過設計有效地縮簡訊息傳達的距離，這也是數據可視化存在的原因。通過數據可視化的設計我們希望達到的目的是讓數據通過視覺形式使信息更容易被接受，讓數據的內容更容易被理解，讓數據結論更容易被記憶。但數據可視化並不是新出現的事物，實際在上一百多年前就有了，我們在學生時代就學過柱形圖、折線圖和扇形圖。
在近年來數據可視化是隨著大數據行業的火熱起來的 ，大數據產業正在用一個超乎我們想像的速度蓬勃發展，大數據時代的來臨，越來越多的公司開始意識到數據資源的管理和運用，大數據可視化展示被更多的企業青睞，在給大家講數據可視化之前，先來了解一下「大數據」，2009 年「大數據」 成為網際網路行業中的熱門詞彙。最初是由世界級領先的全球管理諮詢公司麥肯錫是對「大數據」進行收集和分析的；，麥肯錫公司發現了網絡平臺記錄的個人海量信息具備潛在的商業價值，於是投入大量人力物力進行調研，在 2011 年 6 月發布了關於「大數據」的報告，該報告對「大數據」的影響、關鍵技術和應用領域等都進行了詳盡的分析。麥肯錫的報告得到了金融界的高度重視，隨後受各行各業關注。
在數據可視化設計中，我們經常傳會忽略一些基礎設計細節。一、動效設計落地；二、字體排版設計細節；三、數字字體運用；四、如何展示數據圖形；五、參考素材網站
從數據到圖形的表達讓設計服務於數據內容，給各類用戶以最為清晰明確迅捷的數據展示。信息的有效傳遞是設計重點。需構建清晰的層級關係，運用準確的視覺語言。通過視覺與動效的結合。在項目當中有許多數據都是要通過實時變化的，為了減少數據變化刷新時的突然性須要及告知用戶，動效設計就是必不可少的。在整個動效設計的過程中，除轉場動畫、數據的變化外，動效還起到了增添空間感、平衡畫面和整合信息的作用。用視覺手段將各模塊內容區分開，使各模塊數據明確展示。
設計師在做動效前會第一時間去找參考素材，Dribbble成了設計師的首選，在美觀的圖表上想通過炫酷的動效增添動感的節奏。這樣做是為了更好的展示主題還是設計師對作品展示帶有炫技的成份，在Dribbble上有很多動感炫酷的動效設計，我經常會被這些炫酷的轉場，精緻的交互細節，動感的節奏給震撼到，但這些就是好的設計嗎？在參考的過程中設計師大多到會被流行動效所帶偏，但這完全屬於自娛自樂罷了。
在Dribbble上的炫酷的動效，從技術層面來講達到了很燃很炸的感覺，從創意上能給到設計師一些靈感的價值，但是在現實中這種動效都是不落地的，從用戶體驗上來講並沒有解決產品上的問題。作為設計師設計的產品都是服於用戶的，適合用戶需求的。設計師關注當下流行趨勢是一種職業習慣，設計師能在當下流行趨勢中提煉合適的流行元素放在項目中，從而驅動產品設計，才是真正好的設計。設計師要學會在緊跟流行趨勢的同時，辨別當下各種流行趨勢放在實際工作中是否對產品有所價值。及時看清這種繁榮流行的元素設計中所存在的利弊問題，不要被華而不實的外表所帶偏，無意識盲目跟從流行趨勢只會拖慢設計師的成長。
在Dribbble上面的案例，通過浮華甚至是複雜的背景過度動效，其裝飾性很強，很大程度上傳達了設計師想向對外傳達作品的設計感。從本質上來講並不是一個優秀的產品，但是它卻是一個優秀的創意設計。對於UI設計來說在作設計時，第一個考慮的是產品是為誰服務的，不要帶入自我喜好，沉迷在自我欣賞中而不可自拔，而忽略了體驗設計本質是為用戶服務的，這樣的設計只是為了給同行看的，而不是以解決問題為出發點的，這是當下大多設計群體所存在的無意識從眾，盲目追求流行趨勢，這個出發點的錯誤真的是太可怕了。我並不否認通過炫酷的動效吸引用戶的注意力，但其核心必須是圍繞設計產品的價值存在的，其設計能為產品解決了什麼問題，這才是我們要做的。作品程現其優秀的體驗構建比感官上視覺創意體驗要有難的多。而構建優秀的體驗解來決產品中的問題，卻是我們職責所在，也是職能價值得以體現的部分。因此我們應該以客觀的心態判斷流行趨勢，認清現狀，不盲目被帶入從眾中。
為什麼我們會被炫酷的動效所震撼？因為我們能感知到細節，是設計者想讓人感知到，在各大素材平臺分享作品中，大多數的轉場動畫都在刻意減緩速度，以延長動效的整體時長，來展示更多的設計細節。每一次去看這些東西的時候都會覺得好炫酷，將這些流行動效運用到工作當中，但是這樣做真的適合嗎？如果用戶在工作時，還要等上幾秒的轉場，不能直接讓用戶到達他想去的位置，只會給用戶造成困擾，優秀的動效設計是不應輕易感知到變化的，它只應該起到過渡作用，而不應該幹擾用戶的注意力。做動效不能為了做動效而做動效，一定要想清楚通過動效想解決什麼問題。
"Motion helps make a UI expressive and easy to use」在Material Design中提到這句話，言下之意是「動效使UI富有表現力且易」於使用，動效是輔助用戶理解產品、吸引用戶注意力、減弱用戶焦慮，它的表現力是錦上添花的，易於使用的，舒適的體驗是才是核心。從用戶使用產品的順序分析，獲取信息，理解產品，感受產品，形成認知動效可以通過符合真實物理運動規律的設計元素，使實現模型、設計模型和用戶的認知模型形成匹配，降低理解成本。腦動大的設計並不代表動效的合理性，超出合理範圍的動效並不會增分，反而會降低用戶的認知體驗。動效就是講述一個故事過程，通過動效向用戶講述產品的狀態情節，讓用戶在感受趣味性的同時，減弱負面情緒的影響，留下對產品的正面的認知。眼睛是對運動物體有的敏感性的，以動效吸引用戶眼球，引導用戶的瀏覽順序，讓用戶快速感知到產品希望用戶獲取的信息。動效能夠提供及時的反饋和交互狀態。當用戶完成具體的操作行為時，產品應當且必須給予用戶反饋，以告知該操作是否生效，若無任何反饋則會導致用戶對自己和產品產生懷疑，甚至產生挫敗感。沒有反饋用戶也無法清楚產品是否還在工作。以體驗為目標，以發現的問題為出發點，思考每一個操作節點出現了什麼問題，哪些問題可以通過動效解決，或者用戶在哪些節點中產生的消極情緒可以通過動效的形式降低。當然除此之外，產品在使用和推廣的過程中背後的品牌價值和理念是否得到了合理的傳遞，進而觸達用戶的內心，用戶對於產品的認知是否形成特有的心智。解決問題不能僅僅停留在做好了一個動效通過動效語言來形成具有品牌性、一致性的認知體驗。
在數據可視化中字體排版看似一不起眼，卻是暗藏著設計師的小心機。合理的字體排版不但使具體內容能夠簡單且清晰地展現出來，對畫面和信息，都存在層級引導關係，用視覺手段將各模塊內容區分開，輔助圖形的運用，使各模塊數據明確展示。便於閱讀，同時也有利於視覺效果的增強，使其更加具有美觀性。文字排版準則對於提升你的設計能力都非常有幫助。所以字體的的影響不容小覷。都知道要這樣做，但是這些設計細節你有注意到嗎？
草率的字間距調整是設計工作中的大忌。字體間距微調整可以到產品的轉變更合理，更統一。這聽起來好像不那麼重要，但是一個優秀的字間距調整工作可以成就一個完全不同的設計 字間距調整的主要目標是確保每個字符之間的空間美學，創建優美的文本序列。
行間距與文字字號的對應我們可以對比一下。三個圖（如下圖）。第一個文字的行高是文字字號的1.2倍，第二個圖是文字的行高是字號的1.3倍。第三個行高是文字的1.4倍。從圖上，我們可以看出1.2倍和1.3倍的中文字間距顯得有些擁擠，1.4倍看著視覺上比較正常，1.5倍間距比1.4倍有些偏大一點，但是視覺上看著也是沒有問題的，也比較舒服，所以對我們來說，1.4倍和1.5倍的行高都是很舒適的視覺範圍內。那麼這種情況的間距一般用到哪裡呢？例如，評論、動態、消息等頁面，這種文字間距行數一般都不是很多，這裡需要注意一個點，如果文字的字號乘以相應的倍數計算出現小數點，那我們行高就要四捨五入取整數。
上面我們說的文字間距為1.4倍適合用於行數很少的文本，但是如果對於那種文字比較多或者圖文編輯類或者寫文章類型的產品，1.3、1.4、1.5倍的行高，就顯得閱讀性不強，和視覺感觀並不是很舒服，我在做保險的時候通常文字較多的情況都是出現在產品介紹上，而大部分這種文章類型的APP基本上用到了1.6倍和1.7倍的行高，我們可以從下面的文章間距中看出來1.3倍的行高在這種文字排版的場景中已經不能滿足我們閱讀瀏覽了，1.8倍呢，就顯得有些空曠一些，所以最佳視覺建議設置為1.6倍或者1.7倍的行高，（我個人而言，比較常用的是1.7倍的）
單行文本的行高設置，比如：標題文字、提示文字、時間、數字、暱稱文字等這種文本可能只顯示一行，所以行高得和文本的高度一致，（如下圖）圖中的暱稱文字行高設置的和暱稱高度是一樣的，這樣的話會使我們在做圖的時候才會更方便，我們在做規範的時候文字才不會都是自帶間距，影響到間距差。
當我們設置了行高的時候，第一行文本起始文本和最後一行結束的文本自帶了行高，那麼如果我們要設置文本行高對於y軸的元素，是有一定影響的。比如說（如下圖）我們文本是14px那麼我們的行高1.4倍就是20，我們如果想設置距離上方圖片間距為24px，但是我們的文本是帶著間距的。所以我們可以用下面的計算方法算下，用行高減去文字大小得出的是文本上下的間距，再除以2就可以得出上面間距，最後用總高度減去上面間距就得出了實際的高度，最後我們得到了24px。這個方法只是告訴大家怎麼得出間距的，在日常工作中我一般都是畫個間距的矩形量出來會比較快速。
數據可視化中圖表和數字運用是非常多的，數字字體的樣式也是非常重要的一點。字體的選擇並不是一個隨機過程。所以下我做了一個市場分析。
我們都知道中國的漢字和阿拉伯數字是有大小區別的，正常情況下數字比漢字小2Px左右，那麼我們在做設計稿時候就像關注數量或者金額等地方的數字顯示，就要比中文上的字號大兩號，這樣看來的整體視覺才會保持統一性。
數字字體大小上分為兩種方式，第一種lato字體是每個字體大小相等是，第二種是pipe字體根據每個字體本身⼀個⼤小劃分等分，例如：在pipe字體中，1會小一些，9會⼤一些。這兩種布局⽅式有好有壞， 但lato字體大小相等，整體會更加統一美觀。
在選擇設計數字字體時，一定要檢查清楚每個字體是否清晰，特別1和7、0各O是最容易混淆的。
在使用字體時，我們要先注意一下「.#$￥%*( )-=+.<>/ 」 這些符號是否顯示正常，不然上線會經常出現問題，產品會常常找你麻煩。
在設計時間的時候，而「年」經常省略，因此，只有月、日的時候兩種可能都有，今天即可寫成6/29，也可寫成29/6。這樣數字容易發生混淆。因此建議使用國際慣例的通用辦法，用「.」代替「/」，按照「年月日」的順序寫，並且月日用兩位數，不足的補零。那麼，今天就是2019.06.29。但是現在網頁中大家用2019-04-29這種形式。
我們在確認業務指標後，我們想通過可視化表達什麼樣的數據信息，從而滿足數據可視化的目的（容易接受、容易理解、容易記憶），在這基礎上國外專家Andrew Abela他將圖表展示的關係分為4 類：比較、分布、構成、聯繫。然後根據這個分類和數據的狀況給出了對應的圖表類型建議。圖表種類非常多，但基本類型只有以下幾種。
曲線圖：用來反映隨時間變化的趨勢。
柱形圖：用來反映分類項目之間的比較，也可以用來反映時間趨勢
條形圖：用來反映分類項目之間的比較
散點圖：用來反映相關性或分布關係
餅圖：用來反映構成，即部分佔總體的比例
地圖：用來反映區域之間的分類比較
1. 柱狀圖在AICoin界面中，漲跌分布中運用了柱狀圖，在這裡二維數據集中顯示（Y軸：上漲、下跌）、（X軸：漲跌百分比），一個分類數據欄位、一個連續數據欄位，他這隻有漲跌一個維度需要比較，用於顯示一段時間內的數據變化值之間的比較情況。利用柱子的高度、顏色反映出數據之間的差異性， 人的肉眼對高度的差異性很敏感。但這種柱狀圖有一定的局限性，他只適合用於小規模的數據展示，不能超過12條數據，下面在X軸中百分比圖中錯位顯示了11組數據，因為在移動端中如果橫軸上顯示的數據較長很難排開來，數據還必須把小數點後面的數據省略掉，而對於最後一個下跌的數據可以和前面一組數據做較比，當用戶想更了解漲跌數據的時候，再點進「交易對漲跌分布」裡面有對每一種分類數量展示。基於以上說明柱狀圖是有別於直方圖，柱狀圖無法顯示數據在一個區間內的連續變化趨勢。這適合比較條目較少時，可選用柱狀圖表示。 但需要注意的是，當柱狀圖顯示的分類很多時會導致分類名稱層疊等顯示問題。分類可參照這種文字稍微錯開一點。
當條目大於12條時，移動端上的柱狀圖會顯得擁擠不堪，更適合用條形圖。但條目數據最好不要超過30條展示，否則會帶來視覺和記憶負擔。
正負條形圖又稱雙向柱狀圖，使用正向和反向的柱子顯示類別之間的數值比較。其中分類軸表示需要對比的分類維度，連續軸代表相應的數值，分為兩種情況，一種是正向刻度值與反向刻度值完全對稱，另一種是正向刻度值與反向刻度值反向對稱，即互為相反數。
在下面兩張分別是支付寶和度小滿的收益折線圖，它們的Y軸和X軸分別是兩個連續欄位，Y軸為數據信息，X軸為時間數據，收益隨著一個連續的時間間隔顯示數據信息的變化趨勢，它的特點就是反映事物隨時間而變化的趨勢，更容易反應出數據變化的趨勢。折線圖適合二維兩個連續欄位數據，適合一個有序分類一個連續數據分類，還適合多個二維數據分類的比較。但拆線圖在單線的數據記錄數要大於2，在同一個圖上不能超過5條拆線圖。那相較於下面兩張圖，我更趨向於度小滿這張圖，因為在一個界面中，支付寶的折線圖只用了一條線展示數量變化太過於單薄，整體不夠突出信息難以被發現。而度小滿中的折線圖，運用的是折線加區域顏色面積展示的，更好的突出趨勢顯示區域。
下圖為度小滿兩張折線，圖中折線與自變量坐標軸之間的區域使用顏色，這種面積顏色的填充可以更好的突出趨勢信息，右圖只有一個自變量信息運用了區域顏色，他們的區域顏色都帶有一定的透明度，可以很好的幫助用戶觀察不同序列之間的重疊關係，沒有透明度的面積會導致不同數據之間相互穿插遮蓋減少，數據信息難以被觀察到的。右圖中「中證綜合債、比較基準」兩個數據並沒有運用區域顏色，這樣是為是更好突出「本基金」自變量的數值，如果三個數據都運用顏色區域則不能讓用戶抓住重點，三個變量的數據也不能更好的區分開。
曲線圖和折線圖,都是利用曲線的升、降變化來表示被研究現象發展變化趨勢的一種圖形。用來反映隨時間變化的趨勢發展變化、依存關係等方面具有重要作用。
主要運用來了解各項數據指標的變動情形及其好壞趨向，基於圖中多維度進度比較，而且每個維度必須可以排序，對於一些多維的性能數據，如綜合評價，常用雷達圖表示。指標得分接近圓心，說明處於較差狀態，應分析改進；指標得分接近外邊線，說明處於理想狀態。
散點圖也稱為 X-Y 圖，它將所有的數據以點的形式展現在直角坐標繫上，以顯示變量之間的相互影響程度，點的位置由變量的數值決定。以keep中的步頻圖為例 ：綠點為高步頻點，紅點為低步頻點，黃點是介於高步頻與低步頻的點，它們變量之間不存在相互關係，步頻散點圖上顯示為隨機分布的離散的點。而在右圖中的數據點之間存在某種相關聯，那麼在大部分的數據點就會相對密集，並形成某種趨勢。在散點圖上不管變量之間是否存在關聯性，但其中它們只需要對比兩維數據，基於這兩維數據顯示若干數據系列中各數值之間的關係。
餅圖在日常運用的比較廣泛，它用於表示不同分類的佔比情況，以螞蟻財富中「主營收入」為例，主營收佔整個圓餅數據的總量，不同分類的佔比總和加起來是等於100%，通過弧度大小來對比各種分類。餅圖按照每個分類的佔比來劃分成多個弧度區塊佔比，每個區塊弧度表示在該分類佔整體總分類的比例大小。它這種有一定比例佔比時讓用戶更加直觀的區別分類之間的佔比，但在下圖分類中「其他」的佔比數據較小，一小塊弧度佔比量太少在整體餅圖中較難發現。所以餅圖是適合運用在比較簡單的佔比例圖，在不要求數據精確的情況適用，其數據分類最好不要超過9條，讓用戶能清楚的比較出來。左邊為餅狀圖，右為甜甜圈圖，甜甜圈是基於餅圖上挖空，它的展示形式和餅圖是一樣的，在餅圖和甜甜圈中選擇，我個人是比較喜歡甜甜的，甜甜圈給人一種輕鬆感，而餅圖過於沉重，給人感覺壓抑。
基於餅狀圖的基礎上，招商銀行運用了半展示形式加點擊分類動效，這種形式更好解決了，我上面講到餅狀圖分類佔比數據較小時，一小塊弧度佔比量太少在整體餅圖中較難發現問題，同時又不須要考慮太多顏色搭配問題，很清晰明了。同時它的不足之處就是並不能從整體上對比出來，如果佔比有部分較小時可以用這種形式。
儀錶盤(Gauge)是一種擬物化的圖表，刻度表示度量，指針表示維度，指針角度表示數值。儀錶盤圖表就像汽車的速度表一樣，有一個圓形的錶盤及相應的刻度，有一個指針指向當前數值。目前很多的管理報表或報告上都是用這種圖表，以直觀的表現出某個指標的進度或實際情況。
在金融數據可視化最常見的是折線線、條形圖、餅圖，但由於金融數據的特性，其中用到的一些可視化圖表元素表達方式與通用的信息可視化表達不同。燭柱圖顯示股票開盤、最高、最低和收盤的價格。其中，中間的盒形就稱為「蠟燭的燭身」，連接開盤價和收盤價，而燭身上下的細線稱為「影線」，則連接最高價和最低價。
在文章前半段有講到在追波上有很多數據展示是為了展示而展示，但在工作中數據圖表要表達易接受、易理解、易記憶，易理解就是可視化設計要考慮最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。還在注意可實現問題，在做設計的時候我們要與開發即時溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這裡需要抓住重點，有取捨，不鑽牛角尖、死磕不放。
金融圖表：dygraphs
主要用於金融圖表，如股票K線圖。
http://dygraphs.com/
數學圖形：Wolfram|Alpha
支持幾何、數值和符號計算，具有強大的圖形可視化功能。
https://www.wolframalpha.com/pro-for-students/?src=google&394&gclid=Cj0KCQjwwb3rBRDrARIsALR3Xea2fOqQWQS8Do3rGqeyG4BmhBa59Kf0F3jZq4MCbDXtzfJbRp1DqsMaAkW4EALw_wcB
圖表類型：Google Chart
https://developers.google.com/chart/
通過ChartBlocks能一鍵在社交媒體上分享自己的圖表。你還可以將圖表作導出為SVG, PNG, JPEG格式的圖片以及PDF。
https://www.chartblocks.com/zh
RAWGraphs是一個在線的數據可視化開源工具，經常被用來處理Excel表中的數據。
https://rawgraphs.io/
Tableau是全球知名度很高的數據可視化工具。
https://www.tableau.com/
Highcharts國外運用最多做的最好的數據可視化網站，在EChartss沒有出來之前，國內開發人員大多都用Highcharts。
https://www.highcharts.com/demo
EChartsECharts是百度EFE數據可視化團隊做的，東西比較全面，現在國內大部份都在用這個網站。
https://www.echartsjs.com/examples/zh/index.html
antv是螞蟻金服出的一套數據可視化。
https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Chartify我個人比較喜歡Chartify的配色數據網站，很適用設計師用。
https://chartify.io/
---