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