<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          實戰(zhàn)技巧 | 數(shù)據(jù)可視化圖表應用

          共 3747字,需瀏覽 8分鐘

           ·

          2021-04-27 13:45

          點擊"三分設"關注,回復"社群"加入我們

          歡迎來到專業(yè)設計師學習交流社區(qū)

          三分設|連接知識,幫助全球 1 億設計師成長

          轉自:京東設計中心JDC

          編輯:韓平平

          本文共 3685 字,預計閱讀 10 分鐘



          一、數(shù)據(jù)可視化概述

          數(shù)據(jù)科學的大力發(fā)展,讓信息科學領域面臨的一個巨大挑戰(zhàn)就是數(shù)據(jù)爆炸。據(jù) 2020 年統(tǒng)計,世界數(shù)字化的信息總量在 35.2*(10^21) 字節(jié)。然而人類分析數(shù)據(jù)的能力已經(jīng)遠遠落后于獲取數(shù)據(jù)的能力。這個挑戰(zhàn)不僅在于數(shù)據(jù)量越來越大、越多元化,更重要的是 數(shù)據(jù)獲取的動態(tài)性,數(shù)據(jù)內(nèi)容的噪聲讓人們在龐雜的數(shù)據(jù)世界中倍感枯燥繁瑣,同時傳統(tǒng)的數(shù)據(jù)分析報告對于非專業(yè)人員來講有一定的門檻,其理解成本較高。這就讓數(shù)據(jù)可視化的出現(xiàn)賦予其特有的意義。但需要注意的是,為了數(shù)據(jù)可視化而可視化采用復雜的圖形,將它看成藝術創(chuàng)作的過程那就大錯特錯了,數(shù)據(jù)可視化需要達到 “真、善、美” 的均衡,達到有效挖掘,實現(xiàn) 設計與功能之間的平衡


          二、數(shù)據(jù)可視化流程

          數(shù)據(jù)可視化整體流程是包含用戶操控的整體閉環(huán)。從數(shù)據(jù)空間到可視空間的映射,中間包含了數(shù)據(jù)處理的各階段以及可視化處理中從布局到樣式的選擇,最終展現(xiàn)出 可交互式數(shù)據(jù)圖表



          三、數(shù)據(jù)可視化原則

          數(shù)據(jù)可視化的首要任務是準確地展示和傳達數(shù)據(jù)所包含的信息。在此前提下,針對特定的用戶對象,設計者可以根據(jù)用戶的預期和需求,提供有效輔助手段以方便用戶理解數(shù)據(jù),從而完成有效的可視化。具體包括:數(shù)據(jù)到可視化的直觀映射,恰當?shù)囊晥D選擇與交互、展示合適的信息密度、美學聚焦與平衡、可視化隱喻等。

          (在堆疊柱狀圖的基礎可視化圖表上采用咖啡杯、標記和顏色生成各種咖啡的可視化隱喻,生動地展現(xiàn)了不同種類咖啡的水、牛奶等的比例。)


          四、可視化圖表的構成

          圖表一般是由:標題、圖例、刻度軸、數(shù)據(jù)展示、網(wǎng)格線、提示信息、水位線、時間軸、Hover Tooltip 等組成。在實際應用中不一定要將全部元素展現(xiàn)出來,提供需要的信息即可,見下圖:


          1、圖例
          • 圖例的組成:圖形、名稱、數(shù)值、單位。

          • 圖例樣式:不同類型的圖表建議選用各自的圖例形態(tài),目的是在復合型圖表中可通過圖例來判斷圖表中包含幾種圖表類型以作區(qū)分。

          • 共用圖例:多個圖表的圖例相同,可共用一個圖例,減少冗余信息。



          • 圖例名稱限制:特定業(yè)務場景下,圖例名稱可能會很長,為了達到更好的展示效果,圖例名稱可設定最大值同時做省略處理。




          五、基礎圖形及特點

          1、折線圖(Line Chart)
          • 關鍵詞:變化趨勢、增減速率

          • 適用場景:折線圖用來顯示數(shù)據(jù)在一個連續(xù)時間間隔或者時間跨度上的變化,它的特點是反映出事物隨著時間或其他變量變化的趨勢以及增減的速率。如折線條數(shù)過多時不建議將多條數(shù)據(jù)繪制在一個圖表中,這樣很難看出不同類別的情況。



          1.1、曲線圖(Curve Chart)
          • 關鍵詞:整體趨勢

          • 適用場景:當數(shù)據(jù)反映的為整體趨勢時建議使用曲線圖,尤其是當數(shù)據(jù)波動較大時,如采用折線圖會讓圖表整體比較混亂,不利于信息展示。



          1.2、面積圖(Area Chart)
          • 關鍵詞:趨勢、對比

          • 適用場景:面積圖是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區(qū)域使用顏色或者紋理填充,這樣一個填充區(qū)域我們叫做面積,顏色的填充可以更好的突出趨勢信息,需要注意的是顏色要帶有一定的透明度,透明度可以很好的幫助使用者觀察不同序列之間的重疊關系,沒有透明度的面積會導致不同序列之間相互遮蓋減少可以被觀察到的信息。



          2、柱形圖(Bar Chart)
          • 關鍵詞:趨勢、分類對比

          • 適用場景:柱形圖借助于本身高度,能夠較清晰的反映數(shù)據(jù)之間的差異性,一般會用作不同角色間的對比關系,同時也可用來反映變化趨勢。通常來說,柱形圖的橫軸更多會展現(xiàn)時間維度,用戶會習慣性的認為存在時間趨勢。如果遇到橫軸為時間維度以外的變量,建議用顏色區(qū)分每根柱子。



          2.1、堆疊柱形圖(Stacked Column Chart)
          • 關鍵詞:趨勢、對比、占比

          • 適用場景:展示不同角色的數(shù)據(jù)值,同時能夠反映每個系列的數(shù)據(jù)總和。當表示占比時,每列柱子頂頭(意為占比總和為100%),可觀察不同角色的占比情況。


          2.2、嵌套柱形圖(Nested Column Chart)
          • 關鍵詞:雙維度、對比

          • 適用場景:柱形圖的嵌套可用于展示同一角色下的雙維度數(shù)據(jù)指標對比。





          3、子彈圖(Bullet Chart)
          • 關鍵詞:現(xiàn)狀、目標值、階層

          • 適用場景:子彈圖很形象的展現(xiàn)出子彈射出后帶出的軌道圖,每個子彈圖只能顯示單一的數(shù)據(jù)信息源,通過下方的標尺可以顯示出更精確的階段性數(shù)據(jù)信息,同時表達一項數(shù)據(jù)與目標的校對結果。



          4、餅圖(Pie Chart)
          • 關鍵詞:占比

          • 適用場景:描述某一部分占整體的百分比。將份額最大的部分放在 12 點方向,順時針放置第二大份額的部分,以此類推。需要注意的是:如需比較數(shù)據(jù)時,可使用條形圖或柱狀圖,切勿將扇形轉化為數(shù)據(jù)在餅圖間比較,因為人的肉眼對面積大小不敏感,易導致對數(shù)據(jù)的誤讀。



          5、旭日圖(Sunburst)
          • 適用場景:也稱為 “多層餅形圖” “徑向樹圖”,通過一層層圓環(huán)顯示層次結構,按不同類別節(jié)點進行切割。適用于擴展每一層級的細分數(shù)據(jù)指標情況。



          6、散點圖(Scatter Chart)
          • 關鍵詞:關聯(lián)、分布

          • 適用場景:散點圖用于研究兩個變量之間關系的經(jīng)典圖表。數(shù)據(jù)量小的情況下會比較分散且混亂,看不出分布邏輯,該情境下不建議使用。



          6.1、氣泡圖(Bubble Chart)
          • 關鍵詞:關聯(lián)、分布、大小

          • 適用場景:用氣泡大小代替散點圖中的數(shù)值點,面積大小代表數(shù)值大小。



          7、雷達圖(Radar Chart)
          • 關鍵詞:多維數(shù)據(jù)

          • 適用場景:將多個分類的數(shù)據(jù)量映射到坐標軸上,可對比項目內(nèi)不同屬性的情況。但當指標變量過多,雷達圖會顯示的比較混亂,數(shù)據(jù)點一般 6 個左右。



          8、漏斗圖(Funnel Chart)
          • 關鍵詞:步驟、流轉

          • 適用場景:漏斗圖展現(xiàn)業(yè)務流程比較規(guī)范,從上到下有邏輯上的順序關系,適用于有固定流程并且環(huán)節(jié)較多的分析。通過各環(huán)節(jié)業(yè)務數(shù)據(jù)能夠說明問題所在進而做出決策,能直觀顯示流轉情況。漏斗圖還可擴展為“對稱漏斗圖”,同時對兩個業(yè)務流程進行分析,對比兩者的數(shù)據(jù)情況。



          9、桑基圖(Sankey Diagram)
          • 關鍵詞:分流、大小

          • 適用場景:桑基圖用來描述一組指標到另一組指標的流轉情況。在內(nèi)部,不同色值代表了不同指標下的分流情況,流轉寬度表達相應數(shù)據(jù)量的大小。



          10、熱力矩陣圖(Heat map)
          • 關鍵詞:顏色、交叉、多變量

          • 適用場景:通過顏色變化來顯示數(shù)據(jù),適合交叉檢查多變量數(shù)據(jù),整體觀察數(shù)據(jù)之間的差異性和相關性。



          10.1、矩形樹圖(Rectangular Tree Diagram)
          • 適用場景:利用嵌套式矩陣顯示層次結構的方法,用于展現(xiàn)同一層級下不同分類的情況,通過面積大小顯示每個類別的數(shù)量。



          11、箱線圖(Box Plot)
          • 適用場景:又稱 “盒須圖”,支持展現(xiàn)數(shù)據(jù)的上級限、上四分位數(shù)、中位數(shù)、下四分位數(shù)、下極限,垂直或水平的方式展示均可,從箱體兩端延伸出來的線條稱為 “晶須”,用來表示上、下四分位數(shù)以外的變量。異常值有時會與晶須處于同一水平的單一數(shù)據(jù)點表示。箱形圖通常用于描述性統(tǒng)計。



          12、燭臺圖(Candlestick Chart)
          • 適用場景:又稱 “日本 K 線圖”,通常用來顯示和分析證券、衍生工具、外匯貨幣、股票、債券等商品隨著時間的價格變動。蠟燭圖通過使用燭臺式的符號來顯示多種價格信息,如:開盤價、收盤價、最高價和最低價,每個代表單一時間段(每分鐘、每小時、每天或每月)的交易活動。每個燭臺符號沿著 X 軸上的時間刻度繪制,顯示隨著時間推移的交易活動。




          六、總結

          數(shù)據(jù)可視化的作用體現(xiàn)在多個方面,如揭示想法和關系、形成論點或意見、觀察事物演化的趨勢、傳播和探索性數(shù)據(jù)分析等。可以顯著提高分析信息的效率,最主要的原因是其擴充了人腦的記憶,幫助人腦形象地理解和分析所面臨的任務。對于數(shù)據(jù)可視化圖表的理解與認識是基礎,在此基礎之上可以嘗試多視圖協(xié)調關聯(lián),甚至根據(jù)數(shù)據(jù)需求創(chuàng)作出新的視圖,感受數(shù)據(jù)可視化的樂趣所在。

          參考文獻:《數(shù)據(jù)可視化》-陳為、沈則潛、陶煜波等編著 電子工業(yè)出版社。



          超值課程推薦
          華為用戶體驗設計的體系搭建方法
          超 10 億用戶的產(chǎn)品,到底是怎么做用戶體驗的?
          揭秘滴滴、蔚來等大廠的用戶體驗設計策略
          原創(chuàng)好文推薦
          十個技巧幫助你設計一款在線學習 APP
          如何進行產(chǎn)品優(yōu)先級排序?帶你掌握 5 種好用的排序框架
          全新 Spotify 社交功能構建分析
          Web Vitals —— 谷歌的新一代 Web 性能體驗和質量指標
          一款為你帶來難忘體驗的美食 APP
          如何制作打動面試官的作品集,這里有一份完整的指導手冊
          向標桿致敬:移動用戶體驗的 7 個設計原則



          歡迎大家關注三分設,每天分享優(yōu)質設計、創(chuàng)意靈感、新知新識,定期大咖老師直播分享,零距離連麥,答疑解惑。

          瀏覽 85
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  一区二区操逼豆花口骚逼 | 麻豆一级久久久 | 一本色道久久综合熟妇人妻 | 国产乱子伦 | 中文字幕第一页精品 |