在貝殼，有店東、圈經(jīng)、CA等多種服務(wù)角色依賴數(shù)據(jù)信息作業(yè)，各種各樣的數(shù)據(jù)被用于管理、分析和制定目標。但是，房產(chǎn)垂直領(lǐng)域的數(shù)據(jù)非常龐雜，數(shù)據(jù)體量也在急劇增長，圖表的應(yīng)用場景越來越復(fù)雜，除了pc和移動端的數(shù)據(jù)看板，還出現(xiàn)了線下門店大屏場景。

與此同時，數(shù)據(jù)展示一直處于無可視化規(guī)范的狀態(tài)，導(dǎo)致頻頻出現(xiàn)“數(shù)據(jù)堆疊”“數(shù)據(jù)出界”“數(shù)值無單位”等可讀性低的問題。因此，把這些復(fù)雜、抽象的數(shù)據(jù)，通過更直觀更容易理解的可視化方式展示出來，建立一套專注于房產(chǎn)領(lǐng)域的可視化組件規(guī)范，變得尤為重要。

圖1 數(shù)據(jù)部分展示現(xiàn)狀

Kecharts項目從匯總和梳理數(shù)據(jù)展示問題出發(fā)，聚焦并抽象問題點，旨在建立起統(tǒng)一的可視化規(guī)范。同時，我們還對極端數(shù)據(jù)的展示進行計算規(guī)則處理，從人工配置的效率考量，系統(tǒng)性地幫助用戶進行高效分析和決策。

1.從不統(tǒng)一到有規(guī)范

數(shù)據(jù)規(guī)范的第一步，解決“知道什么數(shù)據(jù)用什么圖表，了解顏色的使用規(guī)范、數(shù)據(jù)排版展示的要點、適配性原則”等基礎(chǔ)規(guī)范，從配色、布局、基礎(chǔ)展示規(guī)則上，滿足數(shù)據(jù)展示的美觀度和可讀性。

2.極端情況的處理規(guī)則

最難解決但也最有價值的痛點是：數(shù)據(jù)體量大、維度多帶來的“不確定性問題”，想要把海量、高維的數(shù)據(jù)以準確有效的方式展示，需要建立高質(zhì)量的交互和配圖規(guī)則。因此，我們在梳理基準展示規(guī)范的基礎(chǔ)上，也對極端情況進行了一系列的規(guī)則處理。

3.人員可配的高效性

數(shù)據(jù)往往是由平臺自上而下傳達到城市，再由專業(yè)的商業(yè)分析師對數(shù)據(jù)進行分析和處理，很多數(shù)據(jù)需要人工繪制和展示。因此，Kecharts在設(shè)計數(shù)據(jù)規(guī)則展示的同時，也要考慮數(shù)據(jù)的可配置輸出規(guī)則，盡可能減少人工操作成本，降低由于人工分析水平不同導(dǎo)致的報告質(zhì)量方差。

一、建立圖表可視化

基礎(chǔ)規(guī)范

建立基礎(chǔ)可視化規(guī)范，是為了將圖表展示拉到基準線水平，也是當(dāng)前要做的第一步。基礎(chǔ)的規(guī)范建立，可以讓圖表迅速換身衣服，第一時間提升用戶的感受。所以，第一步首先解決配色的使用、基礎(chǔ)的布局、圖形的基本表達等方面的規(guī)范問題，滿足數(shù)據(jù)的基礎(chǔ)美觀度。

1. 配色

更科學(xué)的配色帶來嶄新的視覺感受

圖2 配色色板圖示（局部）

優(yōu)化前，Kecharts各種配色之間關(guān)聯(lián)性低，與整體平臺的表現(xiàn)層形式不統(tǒng)一。優(yōu)化后色板的樣式與KeDesign（貝殼設(shè)計系統(tǒng)，“UXD筆記”公眾號后臺回復(fù)“貝殼”，領(lǐng)取VI規(guī)范文檔）無縫融合?，F(xiàn)有配色方案飽和度更協(xié)調(diào)，閱讀體驗更友好。

由于數(shù)據(jù)體量大，我們嘗試將8種常用色擴展成10種常用色以及24種擴展色來更好地滿足業(yè)務(wù)需求。并且根據(jù)不同品牌主色，進行明度調(diào)整。除此之外還增加了更沉穩(wěn)的商務(wù)主題以及暗黑主題配色，滿足特殊業(yè)務(wù)場景的使用。

2. 布局

更合理的布局帶來清晰準確的表達

基礎(chǔ)布局

圖表的構(gòu)成，由一系列獨立的圖形與法元素結(jié)合而成，如包含標題區(qū)、操作功能區(qū)、面包屑、圖例區(qū)、單位區(qū)和圖表區(qū)，通過合理的基礎(chǔ)布局增強圖表的秩序性和一致性，同時規(guī)范標題、圖例等元素的展示適配規(guī)則。

圖4 數(shù)據(jù)基礎(chǔ)布局規(guī)范（局部）

精細圖形

整體的圖形展示細節(jié)也做了統(tǒng)一調(diào)整，從整體排布、字體、字號、圓角、描邊粗細、數(shù)據(jù)軸、標簽等方面進行了優(yōu)化設(shè)計，使整個圖表看起來更加精細。

基礎(chǔ)的配色、字號、布局調(diào)整之后，基本滿足了數(shù)據(jù)的展示基準，從基礎(chǔ)合理性展示和視覺感提升上，有了一定的改良。

圖5 基準規(guī)范后的對比

3.適配

更靈活的規(guī)則帶來細膩的交互體驗

圖6 柵格化設(shè)計圖示

定義圖表的適配規(guī)則

定義四種圖表卡片的適配方案，當(dāng)圖表放大或縮小到某一區(qū)間時，內(nèi)部布局會根據(jù)圖表大小變化進行有權(quán)重的刪減，使圖表在多種區(qū)間內(nèi)能夠?qū)⒑诵臄?shù)據(jù)表達的更清晰。

圖7 柵格化設(shè)計圖示

二、極致探索

極端情況規(guī)則

滿足了數(shù)據(jù)的基準展示，并沒有達到完整的可視化展示規(guī)范，海量和高維帶來的展示問題依舊存在。所以，在建立基準規(guī)則的基礎(chǔ)上，結(jié)合貝殼數(shù)據(jù)的特色，需要集中處理極端情況帶來的問題，從基準線提升到具有易用性的“標準線”。

圖8 以餅狀圖為例的極端情況分析

1.解決數(shù)據(jù)量過載

導(dǎo)致的不確定問題

過濾數(shù)據(jù)

首先從底層數(shù)據(jù)進行過濾，過濾底層占比0%的數(shù)據(jù)，減少數(shù)據(jù)呈現(xiàn)量。將占比為0%的大部分數(shù)據(jù)在圖表的可視化展示中去除，轉(zhuǎn)移到圖例中展示，滿足了用戶需要完整數(shù)據(jù)的訴求外還大幅度提升了圖表的可視化程度。

元素優(yōu)化

優(yōu)化標簽、線條、指示等元素的展示規(guī)范，從定義邊界位置、規(guī)范標簽的展示內(nèi)容上，對圖表內(nèi)元素的極端情況做適配處理。

智能檢測

為了消除信息過載帶來的標簽碰撞，我們制定了標簽的智能檢測規(guī)則，當(dāng)兩個標簽重疊超過1/3時，自動化地隱藏部分標簽，被隱藏的部分可以通過懸停展示詳細信息，不經(jīng)意間大幅度的提升圖表的展示美感和用戶的瀏覽體驗。

圖9 餅狀圖為例的處理過程

2.拓展通用性極端處理規(guī)范

從單點問題擴展為通用性規(guī)范處理，在不同類型圖表的極端情況處理過程中，從全局的角度出發(fā)，對極端情況下出現(xiàn)的核心問題做匯總并抽象，在顏色、碰撞、超圖形等方面，輸出極端情況處理規(guī)范。

圖10 通用性智能檢測規(guī)則（局部）

三、提升人工配置

的高效性

數(shù)據(jù)分析和傳達的過程，依托于人工過濾、處理、繪制和展示，考慮數(shù)據(jù)的配置輸出，人為水平難以把控，盡可能減少人工不必要的操作成本，從而提升數(shù)據(jù)報告產(chǎn)出的質(zhì)量。

在配置自由度時結(jié)合產(chǎn)品定位、屬性和功能進行思考。用戶希望數(shù)據(jù)通過配置層處理后轉(zhuǎn)化為可視化圖表。普通用戶期望通過簡單的操作快速搭建數(shù)據(jù)看板；高級用戶希望對可視化圖表有精細化的自定義需求。

我們盡量用智能處理代替人工對數(shù)據(jù)無效數(shù)據(jù)的篩選，對數(shù)據(jù)的展示做智能的適配，如指標卡的展示，前置設(shè)置了一系列的展示模版，在用戶選擇指標數(shù)據(jù)的同時，會根據(jù)指標的數(shù)量做自動化貼合排布。與此同時，保留了一定的人工可配置自由度，支持用戶可自由配置指標卡的細節(jié)展示等。

圖11 指標卡用戶配置示意

因此，針對大量雜亂的數(shù)據(jù)，數(shù)據(jù)的呈現(xiàn)通常需要兩層呈現(xiàn)給用戶。第一層是數(shù)據(jù)庫和數(shù)據(jù)源，會自動過濾掉存在的垃圾數(shù)據(jù)和無效數(shù)據(jù)。

第二層是數(shù)據(jù)分發(fā)層，盡可能的通過自動化的配置去輔助操作員進行數(shù)據(jù)的分發(fā)和最終數(shù)據(jù)面板的呈現(xiàn)效果。通過簡化操作流程和匹配人為操作習(xí)慣，降低學(xué)習(xí)成本，提升操作效率，為操作者提供“順其自然的設(shè)計”。

圖12 數(shù)據(jù)處理分層圖示

結(jié)語

Kecharts的初衷是保證數(shù)據(jù)的真實、高效展示數(shù)據(jù)、遵循美學(xué)原則。我們遵循數(shù)據(jù)能夠真實呈現(xiàn)的原則，在可視化表達中確保不遺漏、不誤導(dǎo)，確保數(shù)據(jù)準確性。