2020-5-29 資深UI設計者
坐標系是能夠使每個數(shù)組在維度空間內(nèi)找到映射關系的定位系統(tǒng)，更偏向數(shù)學/物理概念。在數(shù)據(jù)可視化中，最常用的坐標系分為笛卡爾坐標系和極坐標系，本文介紹的坐標軸設計主要也是圍繞直角坐標系展開。
在說坐標軸之前先來介紹下什么是坐標系。坐標系是能夠使每個數(shù)組在維度空間內(nèi)找到映射關系的定位系統(tǒng)，更偏向數(shù)學/物理概念。
維基百科對坐標系的定義是：對于一個 n 維系統(tǒng)，能夠使每一個點和一組 n 個標量構成一一對應的系統(tǒng)，它可以用一個有序多元組表示一個點的位置。
數(shù)據(jù)可視化中，最常用的坐標系有兩種：笛卡爾坐標系和極坐標系，均為二維坐標系。
下文介紹的坐標軸設計主要也是圍繞直角坐標系展開，用到極坐標系的圖表有餅圖、圓環(huán)圖、雷達圖等。
坐標軸是坐標系的構成部分，是定義域軸和值域軸的統(tǒng)稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實意義，因此我們可以根據(jù)坐標軸對應的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標軸分成連續(xù)軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。
介紹坐標軸設計前，我們先將坐標軸拆分成「原子」要素，具體分為軸線、軸刻度、軸標簽、軸標題/單位、網(wǎng)格線。
根據(jù)坐標軸的構成，分類討論下每個構成要素容易被忽視的設計細節(jié)。
軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。
軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應的數(shù)據(jù)點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。
網(wǎng)格線用于定位數(shù)據(jù)點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。
軸標題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當可視化圖表標題、圖例、軸標簽已經(jīng)能充分表達數(shù)據(jù)含義，無需單獨顯示標題/單位，「如無必要，勿增實體」。
軸標簽的設計就比較復雜，涉及到的細節(jié)點很多，而且對于定義域軸和值域軸上的標簽和單位設計要考慮的細節(jié)點還有差異。下文將定義域軸和值域軸看成 x 軸和 y 軸，便于說明。
x 軸標簽的設計重點在顯示規(guī)則上，不同的坐標軸類型有不同的處理方式。
連續(xù)軸/時間軸的標簽顯示
連續(xù)軸/時間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個數(shù)值也能明顯看出中間的對應關系。當多個標簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來避免這種情況。這里不推薦使用旋轉，一方面從美觀度上，旋轉可能會破壞界面整體協(xié)調(diào)，另一方面，連續(xù)/時間軸非必須顯示所有軸標簽，抽樣標簽已經(jīng)能滿足用戶對當前數(shù)組定義域的理解。
介紹一種常見的抽樣方式：等分抽樣
當多個標簽在 x 軸無法完全顯示，優(yōu)先保留首尾標簽，其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉成合數(shù)。
舉個例子：11 個標簽，間隔數(shù)是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 個標簽，間隔數(shù)是 11，無法等分，需要在間隔數(shù)基礎上再「-1」，轉成合數(shù) 10 后再等分，此時最后一個標簽顯示在倒數(shù)第二個數(shù)據(jù)點上。
有人會問了，能被那么多數(shù)等分，到底該選哪個呢？這就要根據(jù)標簽長度來定，選擇能放下最多標簽的等分值。由于連續(xù)軸/時間軸，一般是數(shù)值、日期、時間等，字符長度有限，即使抽樣后也能保證顯示出一定數(shù)量的標簽。
等分抽樣不太適用于表達某個時間周期內(nèi)的走勢折線圖，因為最后一個標簽不一定對應最后一個數(shù)據(jù)點。對于這類折線圖，能清楚表明起始時間和末尾時間，相比顯示更多時間標簽重要性來的更高。設計上可以只顯示首尾標簽，或首尾 + 中間值。
分類軸的標簽顯示
分類軸是由幾組離散數(shù)據(jù)組成，相互之間獨立存在，無緊密邏輯關聯(lián)。若采用抽樣規(guī)則，隱藏一些標簽，用戶對圖表認知就會有困難，違背了數(shù)據(jù)可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉 45 度，若 45 度仍顯示不下，繼續(xù)旋轉 90 度。如果 90 度還是放不下就要考慮結合圖表交互或反轉圖表。
標簽旋轉方向也有講究，因為人的視覺習慣是從左到右，從上到下，標簽順時針旋轉 45 度更符合用戶的瀏覽動線。
分類軸標簽字段有長有短，長文本標簽直接旋轉不僅影響美觀，而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個，長文本標簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉。
y 軸標簽的設計重點在標簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標簽顯示區(qū)域一般根據(jù)最長標簽寬度自適應縮放。如果數(shù)組是固定的，就寫成固定寬度，節(jié)省圖表計算量，提高渲染速度。
y軸標簽數(shù)量
標簽數(shù)量不建議過多，太多的標簽必定導致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達。根據(jù) 7±2 設計原則，y 軸標簽數(shù)量最多不超過這個范圍。
y軸標簽取值范圍
y 軸標簽的取值范圍決定了圖形在整個繪圖區(qū)域的顯示高度。
折線圖 y 軸標簽取值一般保證圖形約占繪圖區(qū)域的 2/3，以更有效的傳達數(shù)據(jù)波動幅度，避免掩蓋和夸大變化趨勢。2/3 即斐波那契數(shù)列第二位起，相鄰兩數(shù)之比，也是黃金分割最簡單的計算方法。
柱狀圖的 y 軸標簽取值應從 0 基線開始，以恰當反映數(shù)值。如果展示被截斷的柱狀圖，可能會誤導觀眾做出錯誤的判斷。
y軸標簽數(shù)據(jù)格式
y 軸標簽的數(shù)據(jù)格式在 ant.vision 寫的比較詳細，重復內(nèi)容不在此說明，重點講下一些特殊的設計細節(jié)。標簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因為某些軸標簽是整數(shù)值，就略去小數(shù)點。
正負向的 y 軸標簽，由于負值帶「-」符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上「+」，以達到視覺平衡的效果。
寫了那么多關于坐標軸的設計，你是不是恍然大悟，原來小小的坐標軸還有如此之多的細節(jié)。往常我們做圖表設計，可能只是用網(wǎng)上自動生成的圖表簡單調(diào)整下，或者按照通用樣式來設計。然而，通用樣式雖然能表達數(shù)據(jù)意義，但也缺少了對圖表細節(jié)的把控，失了精致優(yōu)雅的感覺。
作為數(shù)據(jù)可視化設計的一小部分，就是這些設計細節(jié)，決定了圖表最終的傳達效果。
文章來源：優(yōu)設 作者：米粒的DesignNote