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