編輯導(dǎo)讀：雜亂無章的數(shù)據(jù)如何通過簡潔的方法表現(xiàn)出來，呈現(xiàn)出它背后的價(jià)值呢？本文作者分享了關(guān)于平臺(tái)數(shù)據(jù)可視化產(chǎn)品的設(shè)計(jì)框架，以及關(guān)于可視化設(shè)計(jì)的基本準(zhǔn)則和規(guī)范，我們一起來學(xué)習(xí)一下。

在互聯(lián)網(wǎng)行業(yè)中，我們每天都在接觸數(shù)據(jù)，無論是表格、日歷、統(tǒng)計(jì)圖，還是文本、數(shù)字、表情包，都需要透過數(shù)據(jù)來獲取所需要的信息。

在平時(shí)工作中很多業(yè)務(wù)部門都有大量的數(shù)據(jù)展示、匯總、分析等需求，但是沒有專門的系統(tǒng)支持，還是使用較為傳統(tǒng)的Excel，于是產(chǎn)生了以下痛點(diǎn)：團(tuán)隊(duì)協(xié)作受阻，成員間的數(shù)據(jù)文件分享需要互相傳，更新過程繁瑣；大量數(shù)據(jù)僅用表格展示，分析效率低下，人工成本高；不同成員之間內(nèi)容樣式五花八門，匯報(bào)時(shí)的展示效果混亂……

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

01 項(xiàng)目分析

路飛是一個(gè)數(shù)據(jù)展示分析平臺(tái)，所有功能都圍繞數(shù)據(jù)展開，主要面向?qū)?shù)據(jù)有閱讀和分析需求的運(yùn)營、產(chǎn)品、團(tuán)隊(duì)負(fù)責(zé)人等角色。項(xiàng)目的主要特點(diǎn)就是大量的數(shù)據(jù)展示，這就要求我們的設(shè)計(jì)解決方案在數(shù)據(jù)的直觀、易讀、安全等方面作為主要發(fā)力點(diǎn)。

此外，對于項(xiàng)目本身來說，路飛從立項(xiàng)到一期上線，開發(fā)周期短，后期擴(kuò)展內(nèi)容多，所以就需要在初期把設(shè)計(jì)組件底層能力搭建好，從整體上進(jìn)行樣式把控，達(dá)到設(shè)計(jì)效率高、修改成本底、擴(kuò)展能力強(qiáng)的目標(biāo)。

02 設(shè)計(jì)目標(biāo)

對項(xiàng)目背景、需求和特點(diǎn)進(jìn)行分析后，我們總結(jié)了以下三個(gè)設(shè)計(jì)目標(biāo)：

1. 平臺(tái)風(fēng)格簡約化，對重要信息進(jìn)行聚焦，減少無效樣式的視覺干擾。
2. 數(shù)據(jù)全面進(jìn)行可視化重構(gòu)，在保證數(shù)據(jù)安全的前提下，降低用戶對復(fù)雜信息的理解門檻。
3. 設(shè)計(jì)流程全面樣式化和組件化，提高團(tuán)隊(duì)協(xié)作效率，降低設(shè)計(jì)維護(hù)成本。

03 設(shè)計(jì)過程

針對以上三個(gè)設(shè)計(jì)目標(biāo)，我們在設(shè)計(jì)過程中著重對平臺(tái)風(fēng)格、數(shù)據(jù)可視化、頁面安全性、樣式組件化方面進(jìn)行了深入思考和優(yōu)化。

1. 風(fēng)格簡約處理

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

（1）主色定義

路飛logo及項(xiàng)目主色我們選用了藍(lán)色。藍(lán)色比較容易營造數(shù)據(jù)所追求的科技感，在眾多行業(yè)中運(yùn)用最廣泛，例如公安系統(tǒng)、城市交通、科技公司、政企單位、制造業(yè)等眾多行業(yè)。再結(jié)合數(shù)據(jù)平臺(tái)的定位，我們最終選用科技藍(lán)為主題色，并根據(jù)主色進(jìn)行輔色延展。

（2）簡約框架

路飛平臺(tái)本身為數(shù)據(jù)服務(wù)，復(fù)雜的層級(jí)和交互都會(huì)影響用戶獲取信息的效率，因此我們在結(jié)構(gòu)框架設(shè)計(jì)上整體做減法。在導(dǎo)航層級(jí)上采用標(biāo)簽切換的形式，使用戶的學(xué)習(xí)門檻降到最低。

界面示例圖

2. 可視化數(shù)據(jù)展示

數(shù)據(jù)閱讀本身就是一個(gè)枯燥的過程，我們需要通過設(shè)計(jì)讓數(shù)據(jù)變得有趣起來。這就需要引入數(shù)據(jù)可視化方案，更具體來說就是通過恰當(dāng)?shù)厥褂蔑瀳D、折線圖、柱狀圖等圖表，讓數(shù)據(jù)主動(dòng)向用戶呈現(xiàn)本身包含的信息。

通過對路飛項(xiàng)目整體數(shù)據(jù)進(jìn)行整理和分析，我們發(fā)現(xiàn)平臺(tái)數(shù)據(jù)主要集中在排序、趨勢、占比這三個(gè)維度。每種維度都需要找到最適合的可視化展現(xiàn)形式，才能讓信息的傳達(dá)更準(zhǔn)確。

（1）排序

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

界面示例圖

（2）趨勢

趨勢是在排序基礎(chǔ)上進(jìn)行的數(shù)據(jù)加強(qiáng)，單個(gè)數(shù)據(jù)可以和時(shí)間結(jié)合起來，表現(xiàn)一段時(shí)間中的數(shù)據(jù)發(fā)展?fàn)顟B(tài)。路飛項(xiàng)目中很多的數(shù)據(jù)都需要通過時(shí)間來對比，折線圖就是首選。

界面示例圖

（3）占比

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

界面示例圖

3. 水印數(shù)據(jù)保護(hù)

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

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

界面示例圖

（1）透明度

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

（2）角度

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

（3）密度

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

4. 樣式和組件

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

（1）顏色變量

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

并且，以上所有顏色使用了Sketch最新的Color Variables顏色變量功能，成為可以隨時(shí)調(diào)用的基礎(chǔ)樣式。

（2）文本樣式

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

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

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

（3）響應(yīng)式組件

作為數(shù)據(jù)平臺(tái)，路飛項(xiàng)目中不可避免需要大量的、重復(fù)調(diào)用的各種按鈕、輸入、下拉、導(dǎo)航等元素對象，我們在Sketch中對以上常用組件進(jìn)行了組件化處理，并使用位置約束，相同類別的組件就會(huì)具有非破壞性的響應(yīng)式寬度。

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

04 總結(jié)

到目前為止，路飛項(xiàng)目已經(jīng)按照以上方法快速進(jìn)行了三期迭代，完成了對原有Excel數(shù)據(jù)進(jìn)行可視化的過程，讓用戶擁有了一個(gè)高效、方便、門檻低的數(shù)據(jù)分析平臺(tái)，實(shí)現(xiàn)了人力、效率、協(xié)作多方提升的目標(biāo)。

在這0到1的設(shè)計(jì)過程中，我們看到了組件化思想在設(shè)計(jì)效率提升方面的作用，同時(shí)也思考了未來如何讓數(shù)據(jù)更加智能、主動(dòng)地傳達(dá)給用戶。在這之后，產(chǎn)品、技術(shù)、測試等同學(xué)將會(huì)繼續(xù)協(xié)作，努力讓路飛繼續(xù)遠(yuǎn)航在數(shù)據(jù)海洋中。

作者：郭夢雲(yún)，UI設(shè)計(jì)師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@郭夢雲(yún)

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