從0-1設計BI儀表板編輯器

編輯導語：“儀表板”是業務人員使用非常高頻的模組，可以實現圖表的快速生成和報告的編排，以及報告的分發和共享。本文作者從BI儀表板編輯器的功能場景、產品調研、功能設計等方面，對BI儀表板進行了分析，希望能給你帶來幫助。

一般情況下，公司會選擇外採BI工具供內部使用，然而對一些公司來說，外採BI不滿足需求，資料又極其敏感，業務量規模也沒那麼龐大。那麼可以選擇自研敏捷BI，通過打造MVP產品實現需求後續再逐漸迭代。

視覺化分析是敏捷BI的重要能力，業務人員只需通過簡單的拖拽就能製作出各類圖表和分析報告。其中“儀表板”是業務人員使用非常高頻的模組，可以實現圖表的快速生成和報告的編排，以及報告的分發和共享。

本文將從BI儀表板編輯器的功能場景、產品調研、功能設計等方面的方法論進行闡述，希望能夠為大家提供一些全域性的設計思路，詳細功能設計不做介紹。

圖1 視覺化分析在BI工作流中的地位

1. 功能場景

在處理較少的資料量時，我們通常會使用Excel進行資料分析，先將資料匯入工作表，選中要使用的資料，再通過圖表功能生成一個分析結果。

在使用BI工具做分析時也是類似的一個過程，首先要將資料來源接入BI系統，然後將資料欄位對映到維度、指標上，分析結果最終以視覺化圖表的方式展現出來。

圖表是資料視覺化後的直接產物，再將圖表以一定的頁面、佈局、樣式組織起來，就形成了分析報告、運營看板、大屏監控等分析產物。

圖2 圖表資料視覺化過程

再拆分來看，這個過程可以分為兩個部分：

1. 圖表製作：將資料繪製成分析中要使用到的各類圖表，如折線圖、扇形圖等
2. 報告製作：對圖表進行組織、佈局以及頁面樣式調整，製作出分析報告、運營看板、監控大屏等場景的分析產物

這樣我們就明確了圖表製作、報告製作兩大模組及其作用，對於沒有BI產品設計經驗的同學來說，無法確定兩個模組內具有哪些功能，下一步就是進行產品調研。

2. 產品調研

在做產品調研時，途徑不止體驗產品功能，還可以通過官方幫助文件來了解其設計思路。

本文選擇了國內頭部的幾家B/S架構BI產品，對其儀表板編輯器進行拆解，從以下幾個方面對其進行拆解：使用者路徑、圖表製作、報告製作。

實際過程中要對大量的BI產品進行調研才可能總結出一些抽象設計方法，這裡只舉兩個典型例子說明。

2. 1 功能分析

2.1.1 QuickBI

2.1.1.1 使用者路徑

這裡的使用者路徑是指業務人員在製作分析報告時使用儀表板的大致流程，結合自己實際使用情況以及文件資料可以看出QuickBI儀表板製作流程（如下圖3）。

開啟編輯介面，可以看到圖表製作、報告製作是在同個頁面視窗。

圖3 使用者路徑

先看最橙色矩形的鏈路，這條鏈路是製作報告的主路徑。

“新建儀表板”即新建一個分析報告，新建完成後跳轉至儀表板的編輯介面（見上圖3）。

在編輯介面，從畫布工具欄中新增圖表，在儀表板配置區對圖表進行資料、功能配置，最後在畫布展示區域對圖表進行視覺化編排。

可以將黃色矩形的鏈路看作是與圖表製作相關的操作，如選擇資料集，將欄位對映到維度指標上，在畫布上繪製出圖表。

黑色矩形區域則是與報告相關的操作，如對圖表進行佈局、設定過濾元件等。

圖4 編輯操作流程

2.1.1.2 編輯器結構

在這裡初步對頁面的全域性結構進行梳理：

• 系統工具欄：作用於報告全域性的功能選項，如預覽、儲存、釋出等操作。
• 畫布區域：畫布主要是作為圖表、報告製作和展示區域。再進一步可拆分為畫布工具欄、畫布編輯區域，畫布工具欄承載著各類圖表以及篩選元件應用，畫布編輯區實現拖拽式佈局。
• 功能配置區：該區域主要是對圖表和報告中的資料、樣式等配置，可細分為圖表配置、報告配置。

圖5 儀表板編輯介面

2.1.1.3 圖表製作

上文介紹了編輯器的功能配置區可細分為圖表配置、報告配置，當選中圖表時，功能配置區則切換到了圖表配置。

可以看到，圖表配置又可以分為兩個部分，資料選擇區、圖表功能配置區。

• 資料選擇區：供使用者選擇資料集以及展示欄位。
• 圖表功能配置區：將欄位對映到圖表的維度、指標，在畫布上繪製出圖表，通過樣式設定實現不同視覺。

圖6 圖表製作

2.1.1.4 報告製作

當各類圖表製作完成後，又回到了對報告整體進行配置。

2.1.2 FineBI

2.1.2.1 使用者路徑

2.1.2.2 編輯器結構

建立報告之後，會進入空白畫布區域，需要點選“元件”進行新增，可以看出報告編輯器的介面如下：

• 系統導航：針對報告層面的功能選項以及樣式配置
• 元件配置：進行圖表、過濾元件等新增，元件的功能配置是通過彈窗形式
• 畫布區域：報告、圖表的畫布區域分開，選中圖表編輯後進入圖表的畫布編輯區

圖9 報告編輯器

FineBI的圖表編輯器在新的頁面，功能與QuickBI大同小異，不再贅述。頁面結構如下：

• 資料選擇區
• 資料配置區
• 圖表展示區

圖10 圖表編輯器

2.2 調研結論

通過大量產品調研可以得出做一些抽象概念的總結，在BI儀表板編輯器以下幾點常用設計模式。

2.2.1 一個流程和兩種流派

通過以上調研可以發現，不同類產品都有自己的設計理念和功能特點，但資料分析的流程是通用的。這個流程其實也是資料在系統內的流轉過程，通過元件、編輯器將資料組織起來，展示為需要的視覺化結果。

圖11 分析報告製作流程

在儀表板編輯中，視覺化編輯器分為兩種流派，圖表的繪製也分為兩種流派，下面大致描述下。

2.2.1.1 視覺化編輯器

• 圖表、報告同個編輯器視窗： 使用者使用路徑短，在視覺化樣式調整方面更高效。在同個視窗內，對於製作看板、大屏、駕駛艙這類偏視覺化應用時，效率較為明顯。
• 圖表、報告不同編輯器視窗： 使用者路徑較長，但使用者分析時會比較專注，但會出現兩個視窗來回跳轉阻斷。在不同視窗內，對於製作分析報告這類強分析模型較友好，進行圖表探索分析時會更加專注。

2.2.1.2 圖表繪製

在圖表型別選擇時，可以看出QuickBI是以分類的方式，先建立圖表在進行編輯。而在、FineBI、網易有數中有個“圖形屬性”的功能，不用預選圖表型別，而通過改變幾何形狀來實現不同圖表繪製。這裡面就涉及了圖表分類、圖形語法兩種流派。

1. 圖表分類： 將圖表按照自身特徵，如折線圖、柱狀圖、餅圖等進行窮舉分類列出所有的圖表，每種圖表都有自己的一套配置來修改其樣式、資料等內容。
2. 圖形語法： 這是由Wilkinson提出的，一套用來描述所有統計圖表底層特性的語法規則。簡單來說，通過這套語法能夠繪製出所有的統計圖表且不受圖表型別的限制。就像英語語法一樣可以由“主—謂—賓”構成一個完整句子，只要掌握一套語法就能夠說出很多種正確語句。

2.2.2 頁面結構

圖12 抽象出來的編輯器結構

2.2.3 元件與畫布關係

無論是圖表、過濾元件以及其他元件，都可以將其視為一類物件“元件”，整個報告都是由“元件”在“畫布”上進行組織布局、樣式配置而來的。

圖13 元件與畫布

產品調研的抽象結論，有助於我們能夠了解到BI視覺化編輯器的核心功能，不需要照葫蘆畫瓢也能夠設計出符合自己需求的MVP產品。

除了以上抽象總結出的內容外，還有具體功能也要詳細列出來，這裡不再贅述，此時產品調研階段結束。

3. 具體設計

3.1 Web設計原理

這裡介紹幾個做產品設計時可供參考的原則，防止在設計時出現錯誤。

3.1.1 Web介面設計原則

• 直截了當：恰如Alan Cooper所言:“需要在哪裡輸出，就要允許在哪裡輸入”，這就是直接操作的原理。
• 簡化互動：設計師Ericson deJesus在重新設計Yahoo! 360時，曾用“少費事”這3個字來描述減少與站點互動操作的需求，而實現少費事的主要途徑就是利用上下文工具。
• 足不出戶：使用者心流會因重新整理頁面而被打斷，為避免每個操作都重新整理一次頁面的情況，可以返璞歸真，採用根據使用者自然操作流程建模的方式。
• 提供邀請：Web中的富互動設計面臨的一個主要挑戰就是易發現性，再好的功能，如果使用者發現不了，結果仍然等於零。提供邀請是改善易發現性的重要途徑，邀請可以提示使用者下一步互動操作是什麼。
• 使用變換：能夠讓介面具有魅力，增強與使用者之間的溝通。
• 及時反應：智慧介面的特點是具有良好的反應能力，這個原理探討了怎樣通過響應操作為使用者提供豐富的體驗。

3.1.2 互動設計原則

• 可視性：讓使用者有機會確定哪些行動是合理的，以及呈現該裝置的當前狀態。
• 反饋：關於行動的後果，以及產品或服務當前狀態的充分和持續的資訊。當執行了一個動作之後，很容易確定新的狀態。
• 概念模型：設計傳達所有必要的資訊，創造一個良好的系統概念模型，引導使用者理解系統狀態，帶來掌控感。概念模型同時包括可視性和評估行動的結果。
• 示能：設計合理的示能，讓期望的行動能夠實施。
• 意符：有效地使用意符確保可視性，並且很好地溝通和理解反饋。
• 對映：使控制和控制結果之間的關係遵循良好的對映原則，儘可能地通過空間佈局和時間的連續性來強化對映。
• 約束：提供物理、邏輯、語義、文化的約束來指導行動，容易理解。

3.2 功能設計

比如，像QuickBI（網易有數、永洪）這類產品的報告和圖表的編輯在同個頁面，而FineBI（觀遠、位元組的datawind）是在兩個頁面，哪種方式更好呢？這個還真說不準，只能通過使用者調研以及業務場景進行分析。

可以根據使用者群體、使用場景作為一個參考方式，選擇不同頁面結構。

這裡採用的是報告、圖表製作在同一編輯器下，主要是縮短使用者操作路徑，提高製作效率。圖表繪製是選擇圖形語法流派，為使用者提供靈活的圖表型別時，也便於前端統一維護配置項。

圖14 報告編輯介面

圖 15 圖表編輯介面

這裡忽略報告層面的內容製作，先看圖表層面的製作層面。與圖表製作相關的區域如下圖所示，分為工具欄、資料集展示與選擇區、資料對映與樣式配置區、圖表繪製區四個部分。

圖 15 圖表編輯器結構分割槽

• 工具欄 ：作為編輯器的儲存、預覽、返回以及撤銷還原操作區域。
• 資料集展示與選擇區 ：使用者從最右側選取資料集（大多數情況下是經過資料處理後的資料），然後在該區域會展示資料表內的所有資料欄位及其型別，並且自動區分為維度、度量。
• 資料對映和樣式配置區 ：該區域分為資料、樣式兩種屬性配置，“資料”配置主要是負責將資料對映到圖表的維度、度量上。樣式配置主要是用來配置圖表要展示的文字、圖形等。
• 圖表繪製區 ：該區域一般稱為畫布，用來展示繪製出來的圖表及其樣式。當報告、圖表編輯在同一頁面時，畫布也會增加一些頁面內容的編輯屬性，如上方除了圖表元件外，多了一些容器佈局元件。

4. 總結

在做整個儀表板設計時，要考慮的因素很多，比如與其他模組上下游關係，資料在系統內流轉的情況等。

在做產品調研時，不是根據自己喜好去選擇參考的物件，而是通過大量樣本調研可以抽象出行業內產品設計的通用方法論，加以變通，設計出符合公司需求的功能。

本文內容不足夠細緻，但大致描繪出瞭如何從0-1設計BI儀表板編輯器的思路，提供了作者認為比較好編輯器設計模式，希望對大家有所幫助。

作者：Shawn，一個成長中的資料產品經理；微信公眾號：Shawn的產品筆記。

本文由 @Shawn 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自unsplash，基於CC0協議。