起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識通過折線圖，思考后臺產品Dashboard設計
《白》一書提及了茶道中“留白”的力量，這種力量讓設計者更貼近設計初衷，通過對必要差異的控制，保留最重要的信息，脫離浮夸且無意義的設計。
本文借鑒這種力量，思考了后臺產品Dashboard設計。
在后臺業務場景中，我們常?？吹搅钊吮罎⒌凝嫶髷祿?。
作為設計師，我們在眾多的數據及信息間斟酌著，篩選著，為了能夠給用戶呈現更清晰的界面、一目了然的數據。下面是一組未經優化過的后臺場景數據圖表：
我們從需求、設計、數據三方面來看走查大盤中的問題，可以簡稱之為數據大盤3D問題分析。例如以上圖表可以從這三個角度查找問題：
排列在工作表的列或行中的數據可以繪制到折線圖中。
折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。
我們使用折線圖是為了展示數據的一個變化趨勢，如果在設計過程中丟失了趨勢變化的閱讀性那么就和設計目標背道而馳。
一、折線圖的小細節
1. 圖表展示空間過小
想在非常小的空間里展示過多的數據，導致數據點太密集，繪制出的線圖丟失了數據變化的細節。
2. X軸跨度及數據頻率
監控場景中x軸一般為時間，設計師需要在設計中協調好數據頻率和數據展示時間跨度。
常見的實時數據更新頻率有1秒、5秒、10秒、30秒、1分鐘、5分鐘。當數據為秒級更新(如下圖)，數據線上的點則為1秒1個點，那么可以換算1分鐘為60個點，數據量隨數據頻率暴增。
這個時候需要結合圖表展示的空間大小調整時間跨度，原則為不損失折線圖的波動細節。
3. Y軸刻度設置
當Y軸刻度設置跨度過大，那么趨勢圖會呈現一條非常平緩的曲線；反之，當Y軸跨度過小，則會呈現一條過于陡峭的曲線。這兩種情況都不能很好地反應趨勢的變化。
正確的做法是：Y軸刻度應使得折線在整個圖表區域內占據2/3的位置，且圖表的X軸長度應根據業務對比需求以進行參照。
例如監控場景中，一般使用1天的時間作為跨度，其中包括整個波動中的最高點（一般發生在白天）或最低點（一般出現在晚上），使得數據有較好的對比。這需要和前端同學配合進行規則的設置，以此讓Y軸數值根據需求進行動態計算。
在這里特別要說明，折線圖不同于條形圖，它不需要從0基線開始。當我們使用面積圖，尤其是迷你面積圖時，要明確的讓用戶感知到基線。
4. 折線粗細及平滑度
過細的折線會降低數據閱讀性，過粗的折線會損失折線中的數據波動細節。正確做法是使用適當的粗細，和網格輔助線形成鮮明對比，但又不損失波動。
折線圖若將波動尖刺進行優化則會變為曲線圖。在實際使用過程中，如果折線圖數據點過于密集，則曲線圖的尖刺優化效果變得微弱且這種優化會讓數據波動不清晰。
5. 數據項
在數據之間重合點不多的情況下，應將數據項的個數控制在四個左右。當數據項過多時，就無法達到比較和對比的設計目標了。
人類在一個視覺區域內能夠識別的顏色在6個左右。當我們使用多種顏色去區分數據項時，肉眼已經非常難分辨。
當數據項非常多時，圖注數量增多，在空間一定的情況下也會壓縮圖表的展示空間。正確的做法是當數據項非常多時，可以使用聯動圖表，或者圖表組。
二、從折線圖說到數據信息的組合
在這么多的約束下，設計需求卻不會因此減少，PD總是想把很多的內容塞進一個頁面里。 這個時候僅僅聚焦在單一的圖表上是難以解決問題的，要從大盤的整體布局和結構出發去考慮。
當我們進行一個數據大盤設計時，一定是圍繞一個設計主題展開的，這個設計主題下一般包含各種模塊，可能是子業務板塊或者各種維度板塊。
為了更好的布局，站在用戶的視角去解讀數據，設計師需要更進一步的了解業務邏輯和數據間的運算方法。
明確清晰的設計主題，能夠幫助決策不同模塊間及模塊內容的層級關系：誰應該被強調，誰應該弱化。模塊間的邏輯關系及模塊內數據間的邏輯關系則決定了內容和布局形式。
譬如下圖中包含兩個數據：庫存及庫存預測。需求方提供給你的時候可能是兩個折線圖表，但當你了解了兩個信息其實都是指的一個內容，那自然需要將其合并展示。
我認為數據可視化不僅僅是將數據轉化為圖表，同時也是對數據間邏輯關系的合理詮釋。
單個數據總是單薄的，只有在橫向和縱向的對比中，才能發生化學反應產生可視化價值。這種組合方式多種多樣，下文就后臺監控場景常使用的方式進行舉例說明。
1. 輔助信息就近標注
圖表是可視化的基本，不是全部。沒有對比和參照，折線圖只是展示的數據的基本。
例如下圖，在條件允許的情況下，我們可以考慮將圖注或數值直接標注在圖表上，這樣能夠減少用戶反復對比及對應關系弱的問題。
這里所說的條件允許是指數據展示的極端情況，如末尾處標注實時數據的方案在多條線圖時會出現重疊現象。
例如在后臺監控場景下，通過用研發現用戶關注數據的達標情況、波峰波谷情況，那么我們可以在圖標上更直觀的標注出來。再譬如，一般變更會引起數據波動，這種關聯性的信息也可以直接標注在圖表上：
2. 雙軸線圖及組合圖表
關系非常緊密的兩個數據圖表，當數據單位不同時，可以采用雙軸圖表或雙軸線柱圖。
雙軸圖表的使用需要注意：x軸維度必須一致；Y軸數據刻度及單位要標注清楚，以免混淆；兩個數據的基線選擇需要謹慎，基線的不同會導致兩條線的視覺關系相去甚遠。
3. 圖表交互及其他
數據內容很多難以取舍時，可以嘗試通過交互來減少頁面信息負擔。譬如下圖中，通過縮放圖表來查看不同時間跨度的數據。
三、 基于視覺工作模式選擇圖表展示方式
上文中說到了很多圖表繪制過程中易觸及的錯誤，那么有沒有一種通用的感知判斷標準？
早期，工作于AT&T貝爾實驗室的統計學家William S. Cleveland及Robert McGill曾發表過《圖像感知：研究圖像化方法的理論、實踐和應用》。
文章的重要性在對于如何根據功能選擇最佳圖表形式提出了指引。作者設計了一個包含10項基本感知任務的列表，每項任務代表展示數據的一種方法并進行了排序。
有的時候并不是精確的判斷數據值間的比較關系，可能是整體的分布感知等，這個時候認知判斷的準確性就不是越高越好了。
本文由 @阿里TXD 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
請問折線圖的起點不從0開始，有沒有特定規則，應該從什么數值開始
厲害??
感謝分享??
專業