編輯導讀：雜亂無章的數據如何通過簡潔的方法表現出來，呈現出它背后的價值呢？本文作者分享了關于平臺數據可視化產品的設計框架，以及關于可視化設計的基本準則和規范，我們一起來學習一下。

在互聯網行業中，我們每天都在接觸數據，無論是表格、日歷、統計圖，還是文本、數字、表情包，都需要透過數據來獲取所需要的信息。

在平時工作中很多業務部門都有大量的數據展示、匯總、分析等需求，但是沒有專門的系統支持，還是使用較為傳統的Excel，于是產生了以下痛點：團隊協作受阻，成員間的數據文件分享需要互相傳，更新過程繁瑣；大量數據僅用表格展示，分析效率低下，人工成本高；不同成員之間內容樣式五花八門，匯報時的展示效果混亂……

為了解決這些問題，我們從0打造了Luffy（路飛）平臺，寓意在數據的藍色海洋中為用戶找到明確的方向，利用技術巨輪載用戶駛向遠方。

01 項目分析

路飛是一個數據展示分析平臺，所有功能都圍繞數據展開，主要面向對數據有閱讀和分析需求的運營、產品、團隊負責人等角色。項目的主要特點就是大量的數據展示，這就要求我們的設計解決方案在數據的直觀、易讀、安全等方面作為主要發力點。

此外，對于項目本身來說，路飛從立項到一期上線，開發周期短，后期擴展內容多，所以就需要在初期把設計組件底層能力搭建好，從整體上進行樣式把控，達到設計效率高、修改成本底、擴展能力強的目標。

02 設計目標

對項目背景、需求和特點進行分析后，我們總結了以下三個設計目標：

1. 平臺風格簡約化，對重要信息進行聚焦，減少無效樣式的視覺干擾。
2. 數據全面進行可視化重構，在保證數據安全的前提下，降低用戶對復雜信息的理解門檻。
3. 設計流程全面樣式化和組件化，提高團隊協作效率，降低設計維護成本。

03 設計過程

針對以上三個設計目標，我們在設計過程中著重對平臺風格、數據可視化、頁面安全性、樣式組件化方面進行了深入思考和優化。

1. 風格簡約處理

為了讓用戶高效地獲取重要數據信息，我們在路飛項目中采用了整體扁平化的設計形式。導航、背景、篩選等模塊以極簡線面為主，可視化數據圖表使用了較高飽和度的色彩。

（1）主色定義

路飛logo及項目主色我們選用了藍色。藍色比較容易營造數據所追求的科技感，在眾多行業中運用最廣泛，例如公安系統、城市交通、科技公司、政企單位、制造業等眾多行業。再結合數據平臺的定位，我們最終選用科技藍為主題色，并根據主色進行輔色延展。

（2）簡約框架

路飛平臺本身為數據服務，復雜的層級和交互都會影響用戶獲取信息的效率，因此我們在結構框架設計上整體做減法。在導航層級上采用標簽切換的形式，使用戶的學習門檻降到最低。

界面示例圖

2. 可視化數據展示

數據閱讀本身就是一個枯燥的過程，我們需要通過設計讓數據變得有趣起來。這就需要引入數據可視化方案，更具體來說就是通過恰當地使用餅圖、折線圖、柱狀圖等圖表，讓數據主動向用戶呈現本身包含的信息。

通過對路飛項目整體數據進行整理和分析，我們發現平臺數據主要集中在排序、趨勢、占比這三個維度。每種維度都需要找到最適合的可視化展現形式，才能讓信息的傳達更準確。

（1）排序

排序是最基礎的圖表展現維度，主要展現出在同一坐標軸上數據的大小之分，因此使用了柱狀圖的圖表形式。另外由于數據種類較多，橫向無法滿足，采用縱向形式擴展性更好。

界面示例圖

（2）趨勢

趨勢是在排序基礎上進行的數據加強，單個數據可以和時間結合起來，表現一段時間中的數據發展狀態。路飛項目中很多的數據都需要通過時間來對比，折線圖就是首選。

界面示例圖

（3）占比

占比和排序、趨勢不同，是所有數據分類在一個整體中占的比例，一般這個整體是100%。路飛項目中使用扇形圖來表現這一數據維度。

界面示例圖

3. 水印數據保護

作為數據類產品，安全性也是很重要的一環。業務部門的大部分數據都比較敏感，為了防止數據被截圖外傳，需要對頁面整體做水印處理。水印如何在保證作用的前提下，不影響界面的展示和可讀性，也需要從設計層面做思考。

既然是水印，或多或少都會影響頁面的數據呈現，那么如何讓水印在發揮作用的同時，盡量降低對用戶瀏覽時的干擾呢？我們主要從透明度、角度和密度三方面，對水印文本的顏色、傾斜角度、元素間距進行設計。

界面示例圖

（1）透明度

水印文本顏色采用了4%透明度的#000000，路飛項目中輔助文本顏色為#7F8FA4，二者同時出現時能夠明顯區分。同時我們也考慮了不同電腦的視覺兼容，比如用戶量龐大的Windows電腦，以確保不同環境下水印都可識別。

（2）角度

在正常網頁中，文本一般角度為0，水平排列。如果水印也做成水平就會出現和網頁文本重疊的現象，影響用戶對網頁數據的接收。因此為了防止重疊，路飛的水印文本使用了45度傾斜，這樣無論在哪個位置，水印文本都會和正常文本形成角度，盡量降低水印對用戶的信息干擾。

（3）密度

水印過于稀疏分散，截圖可能會繞過，失去安全價值。過于密集也不行，直接影響頁面的呼吸感，降低頁面閱讀體驗。因此經過對比和測試，我們把水印的上下間距定為80px，以確保水印整體對頁面的干擾降到最低。

4. 樣式和組件

路飛整體使用了組件化的設計思路，無論是文本、顏色、間距等基礎信息，還是表單、篩選、圖表等組件元素，都從整體上進行了組件庫控制，方便后期進行修改和延展，提高設計效率，同時減少修改成本。

（1）顏色變量

為了讓眾多圖表數據區分展示，我們在主色基礎上使用HSL（色相、飽和度、亮度）色彩模式延伸出了20種圖表配色。

并且，以上所有顏色使用了Sketch最新的Color Variables顏色變量功能，成為可以隨時調用的基礎樣式。

（2）文本樣式

路飛設計稿中的字體使用了蘋方，這也是Mac系統最常用的字體，看起來非常舒服漂亮。但實際用戶使用中卻并不是這樣。

市面上Win系統占有率達到了80%以上，默認使用字體是微軟雅黑。因此我們在字體的FontFamily屬性中做了兼容，讓Mac優先顯示蘋方，Win優先顯示微軟雅黑，使不同平臺顯示最適合的字體。

同時在Sketch中做了文本樣式，包含不同的大小、行高、對齊方式、顏色，方便整體調用。

（3）響應式組件

作為數據平臺，路飛項目中不可避免需要大量的、重復調用的各種按鈕、輸入、下拉、導航等元素對象，我們在Sketch中對以上常用組件進行了組件化處理，并使用位置約束，相同類別的組件就會具有非破壞性的響應式寬度。

同時借助Sketch強大的Layout功能，對組件進行響應式處理。例如按鈕組件，我們需要讓按鈕根據文本的寬度變化，并且兩端始終保持16的間距，同時要滿足最小80的寬度。那么利用Layout進行設置后，按鈕組件已具備高靈活性，可大幅提升整體項目的設計效率。

04 總結

到目前為止，路飛項目已經按照以上方法快速進行了三期迭代，完成了對原有Excel數據進行可視化的過程，讓用戶擁有了一個高效、方便、門檻低的數據分析平臺，實現了人力、效率、協作多方提升的目標。

在這0到1的設計過程中，我們看到了組件化思想在設計效率提升方面的作用，同時也思考了未來如何讓數據更加智能、主動地傳達給用戶。在這之后，產品、技術、測試等同學將會繼續協作，努力讓路飛繼續遠航在數據海洋中。

作者：郭夢雲，UI設計師

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@郭夢雲

題圖來自pexels，基于CC0協議