編輯導(dǎo)語：在很多系統(tǒng)中都有看板功能，可以通過各種圖像的形式很直觀的看懂?dāng)?shù)據(jù)，在工作中看板工具也是很重要的一個(gè)板塊；本文作者分享了關(guān)于界面設(shè)計(jì)方法中的看板功能設(shè)計(jì)，我們一起來看一下。

看板功能，在系統(tǒng)中有非常多的應(yīng)用，它是用界面做載體，利用數(shù)據(jù)、圖標(biāo)、曲線、圖像等各類形式來展示已完成數(shù)據(jù)處理結(jié)果或是其他信息；常見的有如：系統(tǒng)的門戶、導(dǎo)航菜單、各種各樣的數(shù)據(jù)監(jiān)控儀表盤、領(lǐng)導(dǎo)駕駛艙等。

看板功能是向用戶展示數(shù)據(jù)的兩個(gè)主要形式之一（另一個(gè)是表單功能），看板在這里是“櫥窗”的概念（不是輸入功能）；雖然也是采用了界面的形式，但它不用于數(shù)據(jù)的輸入、只用于數(shù)據(jù)的查詢和展示。

通過設(shè)計(jì)看板功能，可以利用系統(tǒng)提供的各式各樣的查詢方式，快速、多樣地向用戶提供已有數(shù)據(jù)的。

一、看板功能的概念

1. 看板功能的定義

• 看板：是以界面為載體進(jìn)行數(shù)據(jù)展示的窗口。
• 看板功能：具靜態(tài)或動(dòng)態(tài)地展示、統(tǒng)計(jì)、分析數(shù)據(jù)的功能，可以使用系統(tǒng)提供的各式各樣的手段實(shí)現(xiàn)查詢、計(jì)算、展示結(jié)果。

看板功能具有以下的一些特點(diǎn)（以下簡稱為：看板）：

圖1 各類看板的示意圖

1）粒度

在設(shè)計(jì)看板時(shí)沒有特別的粒度要求，對看板顯示的內(nèi)容可以參考以下的的選擇條件：

• 以某一類數(shù)據(jù)或信息為主構(gòu)成一個(gè)專用的看板，如：安全監(jiān)督看板、市場價(jià)格數(shù)據(jù)看板、質(zhì)量檢測看板等。
• 以企業(yè)中的某個(gè)部門、某個(gè)角色關(guān)注的數(shù)據(jù)和信息為主構(gòu)成一個(gè)專用看板，如：倉庫庫存看板、xx車間生產(chǎn)進(jìn)度看板、董事長儀表盤看板等。

2）功能

看板的功能主要分為兩大類：查詢、展示。

• 查詢：采用不同的方法進(jìn)行查詢，如：條件查詢、模糊查詢、數(shù)據(jù)鉆取等；
• 展示：采用不同的形式展示數(shù)據(jù)、信息，展示形式包括：列表、曲線、圖形等；

3）作用

利用看板功能可以用作對生產(chǎn)過程的數(shù)據(jù)進(jìn)行展示、監(jiān)控、導(dǎo)引等用途，如：

• 展示看板：展示各類查詢結(jié)果的數(shù)據(jù)，比如：生產(chǎn)進(jìn)度、風(fēng)險(xiǎn)預(yù)警，質(zhì)量排名等。
• 監(jiān)控看板：監(jiān)控生產(chǎn)的關(guān)鍵數(shù)據(jù)，如發(fā)生超標(biāo)、違法等問題，發(fā)出提示、警告等。
• 導(dǎo)引看板：綜合通知、查看、展示的信息，如：系統(tǒng)門戶、導(dǎo)航菜單待辦通知等。

2. 看板功能的特殊性

看板與活動(dòng)和表單這兩個(gè)功能既有相似之處，又有不同的作用，了解它們的差異有助于看板的功能設(shè)計(jì)；下面就看板與活動(dòng)、看板與表單做個(gè)簡單的對比。

1 ) 看板與活動(dòng)的區(qū)別

• 形式：都采用了窗體的界面形式。
• 作用：活動(dòng)主要是用于記錄過程數(shù)據(jù)、承載管理規(guī)則等；看板不用于記錄過程數(shù)據(jù)，主要用于展示數(shù)據(jù)（因?yàn)檎故镜氖且淹瓿傻臄?shù)據(jù)，因此它也不承載管理規(guī)則）。

2 ) 看板與表單的區(qū)別

• 形式：看板采用窗體界面形式；表單采用表格、單據(jù)的形式。
• 作用：看板可以使用包括數(shù)據(jù)鉆取在內(nèi)的豐富查詢和表達(dá)方式，但不能打?。槐韱沃恢С止袒瘍?nèi)容的表達(dá)形式、支持打印。

二、看板功能的設(shè)計(jì)

看板功能的設(shè)計(jì)需要從以下的4個(gè)方面進(jìn)行思考：設(shè)計(jì)理念、展示對象、展示目的、展示內(nèi)容。

下面以企業(yè)管理系統(tǒng)中常見的“系統(tǒng)門戶”為例，從上述4個(gè)方面簡單地說明如何設(shè)計(jì)看板：

1. 設(shè)計(jì)理念

所謂的“門戶”就是信息系統(tǒng)的入口，因?yàn)橛猛静煌?、布局不同，所以顯示的內(nèi)容和位置也會(huì)有所不同；但是設(shè)計(jì)原則應(yīng)該是，讓每一個(gè)用戶在打開信息系統(tǒng)的門戶時(shí)，做到：

• 最快地讓用戶尋找到 “主動(dòng)想找的信息和功能”。
• 最快地讓用戶接受到“由信息系統(tǒng)推送而來的信息”。

門戶是信息系統(tǒng)的“臉面”，它不但是每日工作的開始點(diǎn)，而且也是每日工作的結(jié)束點(diǎn)，所以設(shè)計(jì)師要能夠做到讓每個(gè)用戶早上打開系統(tǒng)的門戶時(shí)就知道：今天的計(jì)劃是什么、有什么通知、待辦事項(xiàng)等；晚上關(guān)閉系統(tǒng)門戶前可以確認(rèn)：今天完成了什么工作、還有哪些工作未完成等。

2. 展示對象

這里“展示對象”指的是觀看數(shù)據(jù)的用戶，每個(gè)用戶進(jìn)入系統(tǒng)后的第一界面就是門戶，因此門戶是放置每個(gè)用戶每日必看信息的地方，也是布置看板的最佳位置。

因?yàn)椴煌脩舻慕巧煌?，他所關(guān)注的信息內(nèi)容不同、許可展示的范圍也不同，所以首先要確定數(shù)據(jù)展示的對象是誰。

參見圖2，試舉幾個(gè)常用的功能（不限于此）：

圖2 企業(yè)管理信息系統(tǒng)的門戶

不論對象是誰，門戶上的這些區(qū)域的內(nèi)容和功能對全員都是一樣的：①部門通知、②常用功能、③工作日歷、⑤待辦事項(xiàng)、⑥登錄管理。

針對不同的角色也可以展示不同的內(nèi)容，比如④生產(chǎn)數(shù)據(jù)區(qū)域，門戶上的“產(chǎn)值/利潤對比”的內(nèi)容，公司級的領(lǐng)導(dǎo)可以看到全公司的數(shù)據(jù)，部門領(lǐng)導(dǎo)可以看到本部門的數(shù)據(jù)，個(gè)人只能看到本人的數(shù)據(jù)等。

3. 展示的目的

確定了觀看數(shù)據(jù)的對象后，那么第二個(gè)要研究的就是通過展示的內(nèi)容要達(dá)到什么目的，也就是要向觀看者傳遞什么信息；因?yàn)橄到y(tǒng)中的數(shù)據(jù)非常多，不可能都在這個(gè)門戶上一次都顯示出來，因此需要針對這個(gè)角色設(shè)計(jì)他所需要展示的信息，內(nèi)容有兩個(gè)維度：自主關(guān)心、被動(dòng)關(guān)心。

1）展示觀看者主動(dòng)關(guān)注的內(nèi)容

• 如用戶的角色是董事長，則他可能關(guān)心：產(chǎn)值、利潤、資金等信息，參見④。
• 如用戶的角色是生產(chǎn)經(jīng)理，則他可能關(guān)心：進(jìn)度、產(chǎn)量、質(zhì)量等信息，參見④。

2）展示希望被觀看者關(guān)注到的內(nèi)容

根據(jù)不同的用戶角色，系統(tǒng)主動(dòng)地向他推送與他相關(guān)的信息，如：會(huì)議通知、待辦事項(xiàng)、電子郵件等，參見①、②、③、⑤。

4. 展示的內(nèi)容

確定了對象、目的后，就可以圍繞著對象和目的確定展示內(nèi)容，內(nèi)容包括：數(shù)據(jù)信息、展示形式等。

• 數(shù)據(jù)信息：根據(jù)對象（在系統(tǒng)中的角色）和目的，抽取數(shù)據(jù)、進(jìn)行加工形成展示信息；
• 展示形式：采用何種形式展示，對展示的效果來說非常重要，最好是直觀、簡潔，可以利用數(shù)據(jù)表、曲線、圖形、鉆透功能等方式，充分利用窗體展示的優(yōu)勢。

5. 看板的案例

下面舉兩個(gè)例子加深對看板設(shè)計(jì)的理解。

【例1】展示看板-信息儀表盤，如圖3所示：

圖3 信息儀表盤

根據(jù)不同的用戶角色建立不同的信息儀表盤，將角色關(guān)心的全部內(nèi)容歸集到一處，采用表格、曲線、圖形等各種方式展示數(shù)據(jù)和信息。

【例2】導(dǎo)航菜單，如圖4所示：

圖4 導(dǎo)航菜單

• 導(dǎo)航菜單：將業(yè)務(wù)流程圖上的活動(dòng)全部連接到該活動(dòng)原型上，點(diǎn)擊活動(dòng)名稱的圖標(biāo)就可以直接打開界面，使得用戶在工作過程中不但可以找到需要的功能；同時(shí)通過尋找的過程加深對業(yè)務(wù)架構(gòu)、業(yè)務(wù)流程、以及系統(tǒng)構(gòu)成的理解，比傳統(tǒng)的樹形菜單的效果直觀。
• 狀態(tài)導(dǎo)圖：在業(yè)務(wù)流程上，標(biāo)注該流程現(xiàn)在推進(jìn)到那個(gè)步驟，還剩下幾個(gè)步驟。

三、應(yīng)用設(shè)計(jì)

由于都是窗口形式的界面，所以看板的應(yīng)用設(shè)計(jì)的內(nèi)容請參考本系列第二篇“活動(dòng)功能的設(shè)計(jì)”相關(guān)部分。

四、記錄模板

看板設(shè)計(jì)結(jié)果的記錄形式也采用“設(shè)計(jì)4件套”的模板，請參考本系列第二篇“活動(dòng)功能的設(shè)計(jì)”相關(guān)部分。

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

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