2021-10-12 資深UI設(shè)計(jì)者
數(shù)據(jù)成為了日常工作的一大重要角色，越來越多的公司以數(shù)據(jù)驅(qū)動(dòng)產(chǎn)品進(jìn)行迭代。但令人困惑的是可視化圖表無處不矮，但卻給大家?guī)砹苏`導(dǎo)。作者分享了一些簡單的思路與方法，以此來改善這些問題，希望對你有所幫助。
越來越多的公司以數(shù)據(jù)驅(qū)動(dòng)產(chǎn)品進(jìn)行迭代，從中我們能看出數(shù)據(jù)的重要性。
日常工作中，無論是匯報(bào)還是設(shè)計(jì)，都離不開圖表的使用。但令人困惑的可視化圖表無處不在，往往給人帶來誤導(dǎo)性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題。
選擇錯(cuò)誤的圖表類型，或默認(rèn)使用最常見的類型，可能會(huì)混淆用戶對數(shù)據(jù)產(chǎn)生誤解。
一組數(shù)據(jù)可以有多種表示方式，具體類型取決于用戶希望看到的內(nèi)容。
當(dāng)數(shù)據(jù)中出現(xiàn)正負(fù)值時(shí)，要先確定基線的位置，再確定數(shù)據(jù)位置，將正值分布在基線上側(cè)（X軸）或右側(cè)（Y軸），負(fù)值分布在下側(cè)（X軸）或左側(cè)（Y軸）。
避免在基線的同一側(cè)同時(shí)添加正值和負(fù)值，造成用戶對圖表信息理解錯(cuò)誤。
單看左側(cè)的條形圖，能發(fā)現(xiàn)B的值比D的值要多3倍以上，但在右側(cè)從零開始的條形圖中，實(shí)際差異要小得多。從零開始可確保用戶獲得更準(zhǔn)確的數(shù)據(jù)展示。
對折線圖來說，如果始終將Y軸的比例限制為從零開始，一旦數(shù)據(jù)波動(dòng)幅度很小，那整個(gè)折線圖會(huì)看起來很平坦，效果不明顯。
折線圖主要用來表現(xiàn)趨勢，根據(jù)給定時(shí)間的數(shù)據(jù)調(diào)整比例，并保持折線區(qū)域能占到Y(jié)軸范圍的三分之二。
折線圖是由一條條小線段連接組成，這些線段展示了在短時(shí)間內(nèi)數(shù)據(jù)是如何變化的。當(dāng)時(shí)間間隔很大或數(shù)據(jù)更新不頻繁時(shí)，就要慎重考慮是否使用折線圖。
例如想表示年收入，左側(cè)的兩個(gè)折線圖樣式都不太合適，每個(gè)月的收入是固定的數(shù)字，而折線圖展現(xiàn)的數(shù)據(jù)更像是收入的變化，相反右側(cè)的條形圖更適合來展示每月具體的收入。
平滑的折線圖可能看著很舒服，但它們歪曲了背后的實(shí)際數(shù)據(jù)，而且過粗的線條掩蓋了真正的節(jié)點(diǎn)。
當(dāng)兩組數(shù)據(jù)出現(xiàn)X軸代表的信息相同但Y軸不同時(shí)，為節(jié)省空間我們可能會(huì)考慮用雙軸圖。
但大部分雙軸圖難以閱讀，只是感覺圖表上有很多數(shù)據(jù)，但遠(yuǎn)遠(yuǎn)沒有單個(gè)圖表展示的清晰。
餅圖是最受歡迎但經(jīng)常被誤用的圖表之一。在使用餅圖時(shí)，首先要注意切片的數(shù)量最好保持在5-7片。
如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。
如果沒有正確的標(biāo)注，無論圖表設(shè)計(jì)的多好看都沒有意義。
直接在圖表上標(biāo)注數(shù)據(jù)或信息對使用者來說更直觀，更節(jié)省時(shí)間和精力。
將數(shù)值放在切片上雖然很直觀，但可能會(huì)導(dǎo)致很多問題，例如左側(cè)餅圖數(shù)值的可讀性問題、切片太薄無法添加數(shù)值等，對比來看，右側(cè)餅圖添加標(biāo)注的方式更合適。
餅圖切片的排序是一個(gè)很容易忽略的問題，將餅圖切片只是一個(gè)開始，通過合理的排序保證用戶清晰觀看圖表才是關(guān)鍵。
常見的排序方法是將面積最大的切片放在12點(diǎn)鐘位置，然后按順時(shí)針降序放置第二大的切片，以此類推。
同樣的建議適用于其他類型的圖表。盡量不要默認(rèn)按字母順序排序，將最大值放在頂部(水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的值占據(jù)最突出的空間，減少視線運(yùn)動(dòng)和閱讀圖表所需的時(shí)間。
環(huán)形圖，又稱為甜甜圈圖,是餅圖的一種變體,本質(zhì)是餅圖將中間區(qū)域挖空，用在多樣品間的多種數(shù)據(jù)的比較中。
雖然環(huán)形圖騰出中間區(qū)域來顯示額外的信息，但犧牲清晰度走極端會(huì)讓圖表變得毫無用處。
不必要的設(shè)計(jì)樣式不僅會(huì)分散注意力，還可能導(dǎo)致用戶對數(shù)據(jù)誤解并產(chǎn)生錯(cuò)誤印象，圖表在設(shè)計(jì)上應(yīng)避免：
顏色是保持?jǐn)?shù)據(jù)可視化有效的組成部分，在設(shè)計(jì)時(shí)考慮3種調(diào)色板類型：
根據(jù)眼科研究中心的數(shù)據(jù)，大約每12個(gè)人中就有1個(gè)色盲，圖表只有在廣泛受眾可以訪問的情況下才是成功的：
確保圖表排版在傳達(dá)信息并幫助用戶專注于數(shù)據(jù)，而不是分散注意力：
這個(gè)簡單的技巧可以確保用戶能夠更有效地瀏覽圖表，而不會(huì)使他們感到緊張。
如果你的任務(wù)是將交互式圖表添加到Web和移動(dòng)項(xiàng)目中，那么首要考慮問題是將使用什么樣的圖表？
基于定義的庫(Highcharts)進(jìn)行設(shè)計(jì)將確保易于實(shí)現(xiàn)，并為我們提供大量的交互想法。
通過更改參數(shù)、可視化類型、時(shí)間線幫助用戶進(jìn)行探索，得出最大價(jià)值化的結(jié)論。例如IOS Health結(jié)合使用了各種數(shù)據(jù)表示來發(fā)揮優(yōu)勢。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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://bouu.cn