坐标系是能夠使每個數組在維度空間内找到映射關系的定位系統，更偏向數學/物理概念。在數據可視化中，最常用的坐标西分為笛卡爾坐标系和極坐标系，本文介紹的坐标軸設計主要也是圍繞直角坐标系展開，enjoy~

什麼是坐标軸

在說坐标軸之前先來介紹下什麼是坐标系。坐标系是能夠使每個數組在維度空間内找到映射關系的定位系統，更偏向數學/物理概念。

維基百科對坐标系的定義是：對于一個n維系統，能夠使每一個點和一組n個标量構成一一對應的系統，它可以用一個有序多元組表示一個點的位置。

數據可視化中，最常用的坐标系有兩種：笛卡爾坐标系和極坐标系，均為二維坐标系。

• 笛卡爾坐标系即直角坐标系，是由相互垂直的兩條軸線構成。
• 極坐标系由極點、極軸組成，坐标系内任何一個點都可以用極徑和夾角（逆時針）表示。用到直角坐标系的常見圖表有柱狀圖、折線圖、面積圖、條形圖等。

下文介紹的坐标軸設計主要也是圍繞直角坐标系展開，用到極坐标系的圖表有餅圖、圓環圖、雷達圖等。

坐标軸是坐标系的構成部分，是定義域軸和值域軸的統稱。系的範圍更大，而軸包含在系的概念裡。由于可視化圖表繪制的數據大部分都有一定的現實意義，因此我們可以根據坐标軸對應的變量是連續數據還是離散數據，将坐标軸分成連續軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。

坐标軸的構成要素

介紹坐标軸設計前，我們先将坐标軸拆分成“原子”要素，具體分為軸線、軸刻度、軸标簽、軸标題/單位、網格線。

坐标軸易被忽視的設計細節

根據坐标軸的構成，分類讨論下每個構成要素容易被忽視的設計細節。

軸線一般隻考慮是否顯示，例如柱狀圖、折線圖等，在有背景網格線的情況下，會隐藏y軸線，條形圖則是隐藏x軸線，以達到信息降噪，突出視覺重點的目的。

軸刻度通常不顯示，隻有在肉眼無法定位到某個标簽對應的數據點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

網格線用于定位數據點的值域範圍，跟随值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。

軸标題/單位主要用于說明定義域軸、值域軸的數據含義。當可視化圖表标題、圖例、軸标簽已經能充分表達數據含義，無需單獨顯示标題/單位，“如無必要，勿增實體”。

軸标簽的設計就比較複雜，涉及到的細節點很多，而且對于定義域軸和值域軸上的标簽和單位設計要考慮的細節點還有差異。下文将定義域軸和值域軸看成x軸和y軸，便于說明。

1. x軸标簽設計

x軸标簽的設計重點在顯示規則上，不同的坐标軸類型有不同的處理方式。

1.1 連續軸/時間軸的标簽顯示

連續軸/時間軸，是由一組前後包含同等差值的等差數列組成，缺少幾個數值也能明顯看出中間的對應關系。當多個标簽在容器内全顯示發生重疊，我們可以利用抽樣顯示的手段來避免這種情況。這裡不推薦使用旋轉，一方面從美觀度上，旋轉可能會破壞界面整體協調，另一方面，連續/時間軸非必須顯示所有軸标簽，抽樣标簽已經能滿足用戶對當前數組定義域的理解。

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

當多個标簽在x軸無法完全顯示，優先保留首尾标簽，其餘标簽按同等步長間隔顯示。間隔等分的前提是間隔數是合數，能被1和其本身以外的數整除。如果間隔數為質數，就需要“-1”轉成合數。

舉個例子：11個标簽，間隔數是10，能被2和5整除，即分成2等分和5等分。12個标簽，間隔數是11，無法等分，需要在間隔數基礎上再“-1”，轉成合數10後再等分，此時最後一個标簽顯示在倒數第二個數據點上。

有人會問了，能被那麼多數等分，到底該選哪個呢？這就要根據标簽長度來定，選擇能放下最多标簽的等分值。由于連續軸/時間軸，一般是數值、日期、時間等，字符長度有限，即使抽樣後也能保證顯示出一定數量的标簽。

等分抽樣不太适用于表達某個時間周期内的走勢折線圖，因為最後一個标簽不一定對應最後一個數據點。對于這類折線圖，能清除表明起始時間和末尾時間相比顯示更多時間标簽重要性來的更高。設計上可以隻顯示首尾标簽，或首尾 中間值。

1.2 分類軸的标簽顯示

分類軸是由幾組離散數據組成，相互之間獨立存在，無緊密邏輯關聯。若采用抽樣規則，隐藏一些标簽，用戶對圖表認知就會有困難，違背了數據可視化清晰、有效的設計原則。分類軸最佳處理方式是标簽旋轉45度，若45度仍顯示不下，繼續旋轉90度。如果90度還是放不下就要考慮結合圖表交互或反轉圖表。

标簽旋轉方向也有講究，因為人的視覺習慣是從左到右，從上到下，标簽順時針旋轉45度更符合用戶的浏覽動線。

分類軸标簽字段有長有短，長文本标簽直接旋轉不僅影響美觀，而且也不利于用戶閱讀。如果數據量比較少隻有2~4個，長文本标簽更适合水平展示，顯示不下省略即可；如果數據量比較多，就限定字符數後旋轉。

2. y軸标簽設計

y軸标簽的設計重點在标簽數量、取值範圍和數據格式上。标簽顯示區域一般根據最長标簽寬度自适應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。

2.1 y軸标簽數量

标簽數量不建議過多，太多的标簽必定導緻橫向網格線變多，造成元素冗餘，幹擾圖形信息表達。根據7±2設計原則，y軸标簽數量最多不超過這個範圍。

2.2 y軸标簽取值範圍

y軸标簽的取值範圍決定了圖形在整個繪圖區域的顯示高度。

折線圖y軸标簽取值一般保證圖形約占繪圖區域的2/3，以更有效的傳達數據波動幅度，避免掩蓋和誇大變化趨勢。2/3即斐波那契數列第二位起，相鄰兩數之比，也是黃金分割最簡單的計算方法。

柱狀圖的y軸标簽取值應從0基線開始，以恰當反應數值。如果展示被截斷的柱狀圖，可能會誤導觀衆做出錯誤的判斷。

2.3 y軸标簽數據格式

y軸标簽的數據格式在ant.vision寫的比較詳細，重複内容不在此說明，重點講下一些特殊的設計細節。标簽保留的小數位數保持統一，不要因為某些軸标簽是整數值，就略去小數點。

正負向的y軸标簽，由于負值帶“-”符号，整個y軸看起來會有視覺偏差，特别是雙軸圖的右y軸更明顯。這裡建議正負向y軸給正值标簽帶上“ ”，以達到視覺平衡的效果。

總結

寫了那麼多關于坐标軸的設計，你是不是恍然大悟，原來小小的坐标軸還有如此之多的細節。往常我們做圖表設計，可能隻是用網上自動生成的圖表簡單調整下，或者按照通用樣式來設計。然而，通用樣式雖然能表達數據意義，但也缺少了對圖表細節的把控，失了精緻優雅的感覺。

作為數據可視化設計的一小部分，就是這些設計細節，決定了圖表最終的傳達效果。

上述内容是本人近期工作的經驗總結，對于數據可視化設計還不具備指導意義，歡迎各位大神們來交流探讨~

本文由 @米粒 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部