2020-12-16 鶴鶴
排名榜單數據在我們日常生活中經常會遇到：
比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等
都會涉及到，可以說排名數據已經涉及到了我們生活中的方方面面。
那我們應該如何做好榜單排名數據可視化呢？
我們常遇到的榜單排名數據主要分為兩種：
↑ 榜單排名數據分類
一種是無數據的排名，也就是只有排名和名稱；
另外一種就是有數據的排名，也就是包含了具體的數值；
那么，本篇文章我將按無數據的排名和有數據的排名，給大家帶來，當我們遇到榜單排名數據時，應該如何將圖做的更好看！
總共涉及到大于15種可視化表現形式，希望能夠對你有所幫助！
最簡單的方法，我們可以從排名的數字本身去做優化，比如將排名數字1、2、3....去做內容的填充豐富，改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...
還可以基于數字本身所處的環境去做優化，比如在其底部加入填充形狀墊底，讓數字排名更突顯出來（如正方形、矩形等等）。
通過這兩種形式，可以讓單調的排名數字有了更多的細節，內容更豐富，展示更好看。
↑ 基于數字本身去做優化的案例
在數字本身變化的基礎上我們還可以加入對文字的變化，比如在文字的底部墊上形狀（如圓圈、條形圖等等）。這樣通過對數字和文字本身的設計強調，就從整體上得到了優化。
↑在文字底部墊上圓圈，在整體上突出設計感
雖然排名沒有具體的數值，無法生成條形圖，但是依舊可以通過等比縮放的矩形來強調文字，比如倒立金字塔和橫向柱狀圖。
↑通過矩形形成倒立金字塔和條形圖，在整體來突出設計感
如果排名數據內容所傳達的主題是品類、物品、或者城市，那么就可以借助icon來豐富可視化。
排名的數據如果涉及的是品類中的細分物品，比如生活中常見到的吃的、穿的，用的，那么就可以使用定制插畫來豐富排名可視化。
當我們的排名數據中涉及到了人物、品牌、產品之間的排名時，我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。
如果排名數據講的是省份之間的排名對比，那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖，一定要注意使用中國標準的地圖，當然基于設計的風格，你也可以使用簡約風格，去掉地圖元素，只保留可視化的部分。
排名數據也可以借助視覺背景模板來做變化，比如在涉及某個主題排名榜單時（如淘榜單、星數榜單等）就可以通過背景視覺元素來突出排名。
其實這種背景視覺模板，對可視化的要求并不高，你只需將排名通過單一表格的形式展示出來，但需要一個很強的視覺背景版來做襯托，這樣，做好一個模板，其余的榜單都可以進行復制使用了。
如果數值單一，那么可以通過常規的可視化表現形式進行展示（如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等）。
結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀，特別適合單一排名數據之間的對比展示。
如果排名數據中數值所傳達的是占比，那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。
通常我們會使用常規的豎向柱狀圖來表現數值的大小，但其實還可以對其進行一點點變形，比如將柱子的右側直角邊去掉，那么就變身成為了直角三角形柱狀圖。
這時如果排名的文字比較多，我們還可以將排名和文字置于柱子的上方進行展示，一方面節省了空間，另一方面在視覺上也起到了美觀度。
柱狀圖的變種，在《如何做出比別人好看的柱狀圖？》系列文章中有講到，大家對如何實現這種形式感興趣的可以看下之前的文章，同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。
除了基礎的可視化展示和排名數據結合外，如果排名數據所涉及的是一些主題元素（如生活中吃的、穿的、用的等等）。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。
當排名的數據中，還多了一列數據涉及到分類， 那么就可以使用?；鶊D來進行可視化的展示（如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等）。對如何實現?；鶊D感興趣的可以看看之前發的?；鶊D教程。
4 排名連線圖展示
如果我們的排名數據中，還涉及到了年份的排名變化，比如省份之前的年度排名，那么就可以使用排名連線圖，通過線段的上下連線走向來看省份之間排名的上升或下降，同時這種數據還非常的適合做成動態柱狀、折線圖（在后面會講到）。
如果我們的排名數據中，還涉及到了年份的排名變化，比如省份之前的年度排名，那么就可以使用排名連線圖，通過線段的上下連線走向來看省份之間排名的上升或下降，同時這種數據還非常的適合做成動態柱狀、折線圖（在后面會講到）。
和第一節講到的地圖一樣，如果排名數據中涉及到了地理位置數據，那么可以結合地圖進行排名數據的展示。通常情況下，完成地圖可視化后，可將具體的排名信息以表格的形式羅列在地圖的空白區域內，這樣結合地圖和具體的詳細排名數據，就會更加的直觀和豐富。
如果我們的排名數據維度非常的豐富，數據所包含的信息點在3個以上，那么就可以通過將多種可視化的表現來進行結合，通過組合式的可視化來進行展示。
排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化，那么可以通過柱子從上到下一個一個地出現來進行展示（如下圖左),如果涉及到年份的變化， 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示（如下圖右）。
動態柱狀圖的實現方法也很多，我在想做出漂亮的圖表，這12個網站不能錯過！中有講過，可以通過flourish網站（https://flourish.studio/）來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖，也可以使用B站UP主見齊的開源可視化項目（http://r6d.cn/JdYy）進行實現。
同樣的我們還可以通過動態折線圖的形式進行展示，這種表現形式主要看的是排名的趨勢變化，同樣的，借助flourish網站（https://flourish.studio/）就可以實現這種動態折線圖的展示效果。
當然，我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示，比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。
將基礎的柱狀圖，通過3D立體柱狀圖的形式進行展示，排名的結果并不是啪的一下直接公布，而是隨著鏡頭慢慢地公開，對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺！
如果我們的數據，所要傳達的信息非常富有主題場景感，那么就可以通過3D場景渲染的形式進行展示，比如下圖GIF中，在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生，置于一個教室中，再通過鏡頭的移動位移來進行展示。
這種展示形式，實際投入成本還是很大的，從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式，要不然就會出現”雖然視頻本身展示酷炫，但是由于選題不好，最終播放量不高“的尷尬情況。
比如說，當我們在時間非常緊急的時候，排名數據如果是和地理數據相關的，那么我們會盡量避免使用地圖元素來豐富可視化，因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示，雖然會丟失掉一些美觀度，但是正確性會有更高的保障。
基于文章內容，需要在圖中重點強調某些數據時，可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.
排名數據看似簡單，但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時，這篇文章能夠對你有所幫助！
文章來源：站酷 作者：鄒磊ZouL
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務