坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。在數(shù)據(jù)可視化中，最常用的坐標(biāo)西分為笛卡爾坐標(biāo)系和極坐標(biāo)系，本文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開，enjoy~

什么是坐標(biāo)軸

在說坐標(biāo)軸之前先來介紹下什么是坐標(biāo)系。坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。

維基百科對(duì)坐標(biāo)系的定義是：對(duì)于一個(gè)n維系統(tǒng)，能夠使每一個(gè)點(diǎn)和一組n個(gè)標(biāo)量構(gòu)成一一對(duì)應(yīng)的系統(tǒng)，它可以用一個(gè)有序多元組表示一個(gè)點(diǎn)的位置。

數(shù)據(jù)可視化中，最常用的坐標(biāo)系有兩種：笛卡爾坐標(biāo)系和極坐標(biāo)系，均為二維坐標(biāo)系。

• 笛卡爾坐標(biāo)系即直角坐標(biāo)系，是由相互垂直的兩條軸線構(gòu)成。
• 極坐標(biāo)系由極點(diǎn)、極軸組成，坐標(biāo)系內(nèi)任何一個(gè)點(diǎn)都可以用極徑和夾角（逆時(shí)針）表示。用到直角坐標(biāo)系的常見圖表有柱狀圖、折線圖、面積圖、條形圖等。

下文介紹的坐標(biāo)軸設(shè)計(jì)主要也是圍繞直角坐標(biāo)系展開，用到極坐標(biāo)系的圖表有餅圖、圓環(huán)圖、雷達(dá)圖等。

坐標(biāo)軸是坐標(biāo)系的構(gòu)成部分，是定義域軸和值域軸的統(tǒng)稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義，因此我們可以根據(jù)坐標(biāo)軸對(duì)應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標(biāo)軸分成連續(xù)軸、時(shí)間軸、分類軸三大類。軸的類型不同在設(shè)計(jì)處理上也有差異。

坐標(biāo)軸的構(gòu)成要素

介紹坐標(biāo)軸設(shè)計(jì)前，我們先將坐標(biāo)軸拆分成“原子”要素，具體分為軸線、軸刻度、軸標(biāo)簽、軸標(biāo)題/單位、網(wǎng)格線。

坐標(biāo)軸易被忽視的設(shè)計(jì)細(xì)節(jié)

根據(jù)坐標(biāo)軸的構(gòu)成，分類討論下每個(gè)構(gòu)成要素容易被忽視的設(shè)計(jì)細(xì)節(jié)。

軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會(huì)隱藏y軸線，條形圖則是隱藏x軸線，以達(dá)到信息降噪，突出視覺重點(diǎn)的目的。

軸刻度通常不顯示，只有在肉眼無法定位到某個(gè)標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)點(diǎn)時(shí)，會(huì)顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

網(wǎng)格線用于定位數(shù)據(jù)點(diǎn)的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實(shí)線的最多，斑馬線由于感知過強(qiáng)，一般不用。

軸標(biāo)題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義，無需單獨(dú)顯示標(biāo)題/單位，“如無必要，勿增實(shí)體”。

軸標(biāo)簽的設(shè)計(jì)就比較復(fù)雜，涉及到的細(xì)節(jié)點(diǎn)很多，而且對(duì)于定義域軸和值域軸上的標(biāo)簽和單位設(shè)計(jì)要考慮的細(xì)節(jié)點(diǎn)還有差異。下文將定義域軸和值域軸看成x軸和y軸，便于說明。

1. x軸標(biāo)簽設(shè)計(jì)

x軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上，不同的坐標(biāo)軸類型有不同的處理方式。

1.1 連續(xù)軸/時(shí)間軸的標(biāo)簽顯示

連續(xù)軸/時(shí)間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個(gè)數(shù)值也能明顯看出中間的對(duì)應(yīng)關(guān)系。當(dāng)多個(gè)標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來避免這種情況。這里不推薦使用旋轉(zhuǎn)，一方面從美觀度上，旋轉(zhuǎn)可能會(huì)破壞界面整體協(xié)調(diào)，另一方面，連續(xù)/時(shí)間軸非必須顯示所有軸標(biāo)簽，抽樣標(biāo)簽已經(jīng)能滿足用戶對(duì)當(dāng)前數(shù)組定義域的理解。

介紹一種常見的抽樣方式：等分抽樣。

當(dāng)多個(gè)標(biāo)簽在x軸無法完全顯示，優(yōu)先保留首尾標(biāo)簽，其余標(biāo)簽按同等步長(zhǎng)間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被1和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要“-1”轉(zhuǎn)成合數(shù)。

舉個(gè)例子：11個(gè)標(biāo)簽，間隔數(shù)是10，能被2和5整除，即分成2等分和5等分。12個(gè)標(biāo)簽，間隔數(shù)是11，無法等分，需要在間隔數(shù)基礎(chǔ)上再“-1”，轉(zhuǎn)成合數(shù)10后再等分，此時(shí)最后一個(gè)標(biāo)簽顯示在倒數(shù)第二個(gè)數(shù)據(jù)點(diǎn)上。

有人會(huì)問了，能被那么多數(shù)等分，到底該選哪個(gè)呢？這就要根據(jù)標(biāo)簽長(zhǎng)度來定，選擇能放下最多標(biāo)簽的等分值。由于連續(xù)軸/時(shí)間軸，一般是數(shù)值、日期、時(shí)間等，字符長(zhǎng)度有限，即使抽樣后也能保證顯示出一定數(shù)量的標(biāo)簽。

等分抽樣不太適用于表達(dá)某個(gè)時(shí)間周期內(nèi)的走勢(shì)折線圖，因?yàn)樽詈笠粋€(gè)標(biāo)簽不一定對(duì)應(yīng)最后一個(gè)數(shù)據(jù)點(diǎn)。對(duì)于這類折線圖，能清除表明起始時(shí)間和末尾時(shí)間相比顯示更多時(shí)間標(biāo)簽重要性來的更高。設(shè)計(jì)上可以只顯示首尾標(biāo)簽，或首尾+中間值。

1.2 分類軸的標(biāo)簽顯示

分類軸是由幾組離散數(shù)據(jù)組成，相互之間獨(dú)立存在，無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則，隱藏一些標(biāo)簽，用戶對(duì)圖表認(rèn)知就會(huì)有困難，違背了數(shù)據(jù)可視化清晰、有效的設(shè)計(jì)原則。分類軸最佳處理方式是標(biāo)簽旋轉(zhuǎn)45度，若45度仍顯示不下，繼續(xù)旋轉(zhuǎn)90度。如果90度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。

標(biāo)簽旋轉(zhuǎn)方向也有講究，因?yàn)槿说囊曈X習(xí)慣是從左到右，從上到下，標(biāo)簽順時(shí)針旋轉(zhuǎn)45度更符合用戶的瀏覽動(dòng)線。

分類軸標(biāo)簽字段有長(zhǎng)有短，長(zhǎng)文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀，而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有2~4個(gè)，長(zhǎng)文本標(biāo)簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉(zhuǎn)。

2. y軸標(biāo)簽設(shè)計(jì)

y軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長(zhǎng)標(biāo)簽寬度自適應(yīng)縮放。如果數(shù)組是固定的，就寫成固定寬度，節(jié)省圖表計(jì)算量，提高渲染速度。

2.1 y軸標(biāo)簽數(shù)量

標(biāo)簽數(shù)量不建議過多，太多的標(biāo)簽必定導(dǎo)致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達(dá)。根據(jù)7±2設(shè)計(jì)原則，y軸標(biāo)簽數(shù)量最多不超過這個(gè)范圍。

2.2 y軸標(biāo)簽取值范圍

y軸標(biāo)簽的取值范圍決定了圖形在整個(gè)繪圖區(qū)域的顯示高度。

折線圖y軸標(biāo)簽取值一般保證圖形約占繪圖區(qū)域的2/3，以更有效的傳達(dá)數(shù)據(jù)波動(dòng)幅度，避免掩蓋和夸大變化趨勢(shì)。2/3即斐波那契數(shù)列第二位起，相鄰兩數(shù)之比，也是黃金分割最簡(jiǎn)單的計(jì)算方法。

柱狀圖的y軸標(biāo)簽取值應(yīng)從0基線開始，以恰當(dāng)反應(yīng)數(shù)值。如果展示被截?cái)嗟闹鶢顖D，可能會(huì)誤導(dǎo)觀眾做出錯(cuò)誤的判斷。

2.3 y軸標(biāo)簽數(shù)據(jù)格式

y軸標(biāo)簽的數(shù)據(jù)格式在ant.vision寫的比較詳細(xì)，重復(fù)內(nèi)容不在此說明，重點(diǎn)講下一些特殊的設(shè)計(jì)細(xì)節(jié)。標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因?yàn)槟承┹S標(biāo)簽是整數(shù)值，就略去小數(shù)點(diǎn)。

正負(fù)向的y軸標(biāo)簽，由于負(fù)值帶“-”符號(hào)，整個(gè)y軸看起來會(huì)有視覺偏差，特別是雙軸圖的右y軸更明顯。這里建議正負(fù)向y軸給正值標(biāo)簽帶上“+”，以達(dá)到視覺平衡的效果。

總結(jié)

寫了那么多關(guān)于坐標(biāo)軸的設(shè)計(jì)，你是不是恍然大悟，原來小小的坐標(biāo)軸還有如此之多的細(xì)節(jié)。往常我們做圖表設(shè)計(jì)，可能只是用網(wǎng)上自動(dòng)生成的圖表簡(jiǎn)單調(diào)整下，或者按照通用樣式來設(shè)計(jì)。然而，通用樣式雖然能表達(dá)數(shù)據(jù)意義，但也缺少了對(duì)圖表細(xì)節(jié)的把控，失了精致優(yōu)雅的感覺。

作為數(shù)據(jù)可視化設(shè)計(jì)的一小部分，就是這些設(shè)計(jì)細(xì)節(jié)，決定了圖表最終的傳達(dá)效果。

上述內(nèi)容是本人近期工作的經(jīng)驗(yàn)總結(jié)，對(duì)于數(shù)據(jù)可視化設(shè)計(jì)還不具備指導(dǎo)意義，歡迎各位大神們來交流探討~

本文由 @米粒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議