編輯導語：“儀表板”是業務人員使用非常高頻的模塊，可以實現圖表的快速生成和報告的編排，以及報告的分發和共享。本文作者從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 報告制作

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

報告配置：對報告整體的樣式主題調節，可以添加過濾組件對報告內任意圖表進行查詢等功能。
圖7 報告制作

2.1.2 FineBI

2.1.2.1 用戶路徑

和QuickBI不同的是，FineBI圖表與報告的編輯是在兩個頁面編輯器，在路徑上多了一個環節。
圖8 用戶路徑

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協議。