編輯導(dǎo)語：“儀表板”是業(yè)務(wù)人員使用非常高頻的模塊，可以實現(xiàn)圖表的快速生成和報告的編排，以及報告的分發(fā)和共享。本文作者從BI儀表板編輯器的功能場景、產(chǎn)品調(diào)研、功能設(shè)計等方面，對BI儀表板進(jìn)行了分析，希望能給你帶來幫助。

一般情況下，公司會選擇外采BI工具供內(nèi)部使用，然而對一些公司來說，外采BI不滿足需求，數(shù)據(jù)又極其敏感，業(yè)務(wù)量規(guī)模也沒那么龐大。那么可以選擇自研敏捷BI，通過打造MVP產(chǎn)品實現(xiàn)需求后續(xù)再逐漸迭代。

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

本文將從BI儀表板編輯器的功能場景、產(chǎn)品調(diào)研、功能設(shè)計等方面的方法論進(jìn)行闡述，希望能夠為大家提供一些全局的設(shè)計思路，詳細(xì)功能設(shè)計不做介紹。

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

1. 功能場景

在處理較少的數(shù)據(jù)量時，我們通常會使用Excel進(jìn)行數(shù)據(jù)分析，先將數(shù)據(jù)導(dǎo)入工作表，選中要使用的數(shù)據(jù)，再通過圖表功能生成一個分析結(jié)果。

在使用BI工具做分析時也是類似的一個過程，首先要將數(shù)據(jù)源接入BI系統(tǒng)，然后將數(shù)據(jù)字段映射到維度、指標(biāo)上，分析結(jié)果最終以可視化圖表的方式展現(xiàn)出來。

圖表是數(shù)據(jù)可視化后的直接產(chǎn)物，再將圖表以一定的頁面、布局、樣式組織起來，就形成了分析報告、運(yùn)營看板、大屏監(jiān)控等分析產(chǎn)物。

圖2 圖表數(shù)據(jù)可視化過程

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

1. 圖表制作：將數(shù)據(jù)繪制成分析中要使用到的各類圖表，如折線圖、扇形圖等
2. 報告制作：對圖表進(jìn)行組織、布局以及頁面樣式調(diào)整，制作出分析報告、運(yùn)營看板、監(jiān)控大屏等場景的分析產(chǎn)物

這樣我們就明確了圖表制作、報告制作兩大模塊及其作用，對于沒有BI產(chǎn)品設(shè)計經(jīng)驗的同學(xué)來說，無法確定兩個模塊內(nèi)具有哪些功能，下一步就是進(jìn)行產(chǎn)品調(diào)研。

2. 產(chǎn)品調(diào)研

在做產(chǎn)品調(diào)研時，途徑不止體驗產(chǎn)品功能，還可以通過官方幫助文檔來了解其設(shè)計思路。

本文選擇了國內(nèi)頭部的幾家B/S架構(gòu)BI產(chǎn)品，對其儀表板編輯器進(jìn)行拆解，從以下幾個方面對其進(jìn)行拆解：用戶路徑、圖表制作、報告制作。

實際過程中要對大量的BI產(chǎn)品進(jìn)行調(diào)研才可能總結(jié)出一些抽象設(shè)計方法，這里只舉兩個典型例子說明。

2. 1 功能分析

2.1.1 QuickBI

2.1.1.1 用戶路徑

這里的用戶路徑是指業(yè)務(wù)人員在制作分析報告時使用儀表板的大致流程，結(jié)合自己實際使用情況以及文檔資料可以看出QuickBI儀表板制作流程（如下圖3）。

打開編輯界面，可以看到圖表制作、報告制作是在同個頁面視窗。

圖3 用戶路徑

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

“新建儀表板”即新建一個分析報告，新建完成后跳轉(zhuǎn)至儀表板的編輯界面（見上圖3）。

在編輯界面，從畫布工具欄中添加圖表，在儀表板配置區(qū)對圖表進(jìn)行數(shù)據(jù)、功能配置，最后在畫布展示區(qū)域?qū)D表進(jìn)行可視化編排。

可以將黃色矩形的鏈路看作是與圖表制作相關(guān)的操作，如選擇數(shù)據(jù)集，將字段映射到維度指標(biāo)上，在畫布上繪制出圖表。

黑色矩形區(qū)域則是與報告相關(guān)的操作，如對圖表進(jìn)行布局、設(shè)置過濾組件等。

圖4 編輯操作流程

2.1.1.2 編輯器結(jié)構(gòu)

在這里初步對頁面的全局結(jié)構(gòu)進(jìn)行梳理：

• 系統(tǒng)工具欄：作用于報告全局的功能選項，如預(yù)覽、保存、發(fā)布等操作。
• 畫布區(qū)域：畫布主要是作為圖表、報告制作和展示區(qū)域。再進(jìn)一步可拆分為畫布工具欄、畫布編輯區(qū)域，畫布工具欄承載著各類圖表以及篩選組件應(yīng)用，畫布編輯區(qū)實現(xiàn)拖拽式布局。
• 功能配置區(qū)：該區(qū)域主要是對圖表和報告中的數(shù)據(jù)、樣式等配置，可細(xì)分為圖表配置、報告配置。

圖5 儀表板編輯界面

2.1.1.3 圖表制作

上文介紹了編輯器的功能配置區(qū)可細(xì)分為圖表配置、報告配置，當(dāng)選中圖表時，功能配置區(qū)則切換到了圖表配置。

可以看到，圖表配置又可以分為兩個部分，數(shù)據(jù)選擇區(qū)、圖表功能配置區(qū)。

• 數(shù)據(jù)選擇區(qū)：供用戶選擇數(shù)據(jù)集以及展示字段。
• 圖表功能配置區(qū)：將字段映射到圖表的維度、指標(biāo)，在畫布上繪制出圖表，通過樣式設(shè)置實現(xiàn)不同視覺。

圖6 圖表制作

2.1.1.4 報告制作

當(dāng)各類圖表制作完成后，又回到了對報告整體進(jìn)行配置。

報告配置：對報告整體的樣式主題調(diào)節(jié)，可以添加過濾組件對報告內(nèi)任意圖表進(jìn)行查詢等功能。
圖7 報告制作

2.1.2 FineBI

2.1.2.1 用戶路徑

和QuickBI不同的是，F(xiàn)ineBI圖表與報告的編輯是在兩個頁面編輯器，在路徑上多了一個環(huán)節(jié)。
圖8 用戶路徑

2.1.2.2 編輯器結(jié)構(gòu)

創(chuàng)建報告之后，會進(jìn)入空白畫布區(qū)域，需要點(diǎn)擊“組件”進(jìn)行添加，可以看出報告編輯器的界面如下：

• 系統(tǒng)導(dǎo)航：針對報告層面的功能選項以及樣式配置
• 組件配置：進(jìn)行圖表、過濾組件等添加，組件的功能配置是通過彈窗形式
• 畫布區(qū)域：報告、圖表的畫布區(qū)域分開，選中圖表編輯后進(jìn)入圖表的畫布編輯區(qū)

圖9 報告編輯器

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

• 數(shù)據(jù)選擇區(qū)
• 數(shù)據(jù)配置區(qū)
• 圖表展示區(qū)

圖10 圖表編輯器

2.2 調(diào)研結(jié)論

通過大量產(chǎn)品調(diào)研可以得出做一些抽象概念的總結(jié)，在BI儀表板編輯器以下幾點(diǎn)常用設(shè)計模式。

2.2.1 一個流程和兩種流派

通過以上調(diào)研可以發(fā)現(xiàn)，不同類產(chǎn)品都有自己的設(shè)計理念和功能特點(diǎn)，但數(shù)據(jù)分析的流程是通用的。這個流程其實也是數(shù)據(jù)在系統(tǒng)內(nèi)的流轉(zhuǎn)過程，通過組件、編輯器將數(shù)據(jù)組織起來，展示為需要的可視化結(jié)果。

圖11 分析報告制作流程

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

2.2.1.1可視化編輯器

• 圖表、報告同個編輯器視窗：用戶使用路徑短，在可視化樣式調(diào)整方面更高效。在同個視窗內(nèi)，對于制作看板、大屏、駕駛艙這類偏可視化應(yīng)用時，效率較為明顯。
• 圖表、報告不同編輯器視窗：用戶路徑較長，但用戶分析時會比較專注，但會出現(xiàn)兩個窗口來回跳轉(zhuǎn)阻斷。在不同視窗內(nèi)，對于制作分析報告這類強(qiáng)分析模型較友好，進(jìn)行圖表探索分析時會更加專注。

2.2.1.2圖表繪制

在圖表類型選擇時，可以看出QuickBI是以分類的方式，先創(chuàng)建圖表在進(jìn)行編輯。而在、FineBI、網(wǎng)易有數(shù)中有個“圖形屬性”的功能，不用預(yù)選圖表類型，而通過改變幾何形狀來實現(xiàn)不同圖表繪制。這里面就涉及了圖表分類、圖形語法兩種流派。

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

2.2.2 頁面結(jié)構(gòu)

圖12 抽象出來的編輯器結(jié)構(gòu)

2.2.3 組件與畫布關(guān)系

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

圖13 組件與畫布

產(chǎn)品調(diào)研的抽象結(jié)論，有助于我們能夠了解到BI可視化編輯器的核心功能，不需要照葫蘆畫瓢也能夠設(shè)計出符合自己需求的MVP產(chǎn)品。

除了以上抽象總結(jié)出的內(nèi)容外，還有具體功能也要詳細(xì)列出來，這里不再贅述，此時產(chǎn)品調(diào)研階段結(jié)束。

3. 具體設(shè)計

3.1 Web設(shè)計原理

這里介紹幾個做產(chǎn)品設(shè)計時可供參考的原則，防止在設(shè)計時出現(xiàn)錯誤。

3.1.1 Web界面設(shè)計原則

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

3.1.2 交互設(shè)計原則

• 可視性：讓用戶有機(jī)會確定哪些行動是合理的，以及呈現(xiàn)該設(shè)備的當(dāng)前狀態(tài)。
• 反饋：關(guān)于行動的后果，以及產(chǎn)品或服務(wù)當(dāng)前狀態(tài)的充分和持續(xù)的信息。當(dāng)執(zhí)行了一個動作之后，很容易確定新的狀態(tài)。
• 概念模型：設(shè)計傳達(dá)所有必要的信息，創(chuàng)造一個良好的系統(tǒng)概念模型，引導(dǎo)用戶理解系統(tǒng)狀態(tài)，帶來掌控感。概念模型同時包括可視性和評估行動的結(jié)果。
• 示能：設(shè)計合理的示能，讓期望的行動能夠?qū)嵤?/li>
• 意符：有效地使用意符確保可視性，并且很好地溝通和理解反饋。
• 映射：使控制和控制結(jié)果之間的關(guān)系遵循良好的映射原則，盡可能地通過空間布局和時間的連續(xù)性來強(qiáng)化映射。
• 約束：提供物理、邏輯、語義、文化的約束來指導(dǎo)行動，容易理解。

3.2 功能設(shè)計

比如，像QuickBI（網(wǎng)易有數(shù)、永洪）這類產(chǎn)品的報告和圖表的編輯在同個頁面，而FineBI（觀遠(yuǎn)、字節(jié)的datawind）是在兩個頁面，哪種方式更好呢？這個還真說不準(zhǔn)，只能通過用戶調(diào)研以及業(yè)務(wù)場景進(jìn)行分析。

可以根據(jù)用戶群體、使用場景作為一個參考方式，選擇不同頁面結(jié)構(gòu)。

這里采用的是報告、圖表制作在同一編輯器下，主要是縮短用戶操作路徑，提高制作效率。圖表繪制是選擇圖形語法流派，為用戶提供靈活的圖表類型時，也便于前端統(tǒng)一維護(hù)配置項。

圖14 報告編輯界面

圖 15 圖表編輯界面

這里忽略報告層面的內(nèi)容制作，先看圖表層面的制作層面。與圖表制作相關(guān)的區(qū)域如下圖所示，分為工具欄、數(shù)據(jù)集展示與選擇區(qū)、數(shù)據(jù)映射與樣式配置區(qū)、圖表繪制區(qū)四個部分。

圖 15 圖表編輯器結(jié)構(gòu)分區(qū)

• 工具欄：作為編輯器的保存、預(yù)覽、返回以及撤銷還原操作區(qū)域。
• 數(shù)據(jù)集展示與選擇區(qū)：用戶從最右側(cè)選取數(shù)據(jù)集（大多數(shù)情況下是經(jīng)過數(shù)據(jù)處理后的數(shù)據(jù)），然后在該區(qū)域會展示數(shù)據(jù)表內(nèi)的所有數(shù)據(jù)字段及其類型，并且自動區(qū)分為維度、度量。
• 數(shù)據(jù)映射和樣式配置區(qū)：該區(qū)域分為數(shù)據(jù)、樣式兩種屬性配置，“數(shù)據(jù)”配置主要是負(fù)責(zé)將數(shù)據(jù)映射到圖表的維度、度量上。樣式配置主要是用來配置圖表要展示的文字、圖形等。
• 圖表繪制區(qū)：該區(qū)域一般稱為畫布，用來展示繪制出來的圖表及其樣式。當(dāng)報告、圖表編輯在同一頁面時，畫布也會增加一些頁面內(nèi)容的編輯屬性，如上方除了圖表組件外，多了一些容器布局組件。

4. 總結(jié)

在做整個儀表板設(shè)計時，要考慮的因素很多，比如與其他模塊上下游關(guān)系，數(shù)據(jù)在系統(tǒng)內(nèi)流轉(zhuǎn)的情況等。

在做產(chǎn)品調(diào)研時，不是根據(jù)自己喜好去選擇參考的對象，而是通過大量樣本調(diào)研可以抽象出行業(yè)內(nèi)產(chǎn)品設(shè)計的通用方法論，加以變通，設(shè)計出符合公司需求的功能。

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

作者：Shawn，一個成長中的數(shù)據(jù)產(chǎn)品經(jīng)理；微信公眾號：Shawn的產(chǎn)品筆記。

本文由 @Shawn 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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