如何用最準確的媒介來清晰、直接地傳達數據和其所表示的信息？Dashboard可以幫到你。

一、Dashboard的含義

早期dashboard是指汽車等產品上的信息面板，中文譯名即儀表盤。

在Mac的OS系統內，dashboard是指包含各類小widget的面板。

目前我們說的dashboard承襲了儀表板的核心概念——通過圖表、列表等形式，直接、高效、準確地向用戶傳遞重要信息。

在dribble等網站上可以搜到很多作品（如下圖）。不過除非是用于對外展示，否則dashboard的形式不必特別華麗。

因為對于To B用戶而言，它的核心始終是傳遞信息。界面上的內容都應有存在的理由，一些額外的裝飾可能會造成干擾。

我們要做的事情是：少做沒意義的事情，多把有用的信息呈現并突顯出來。

二、設計步驟

設計dashboard時，可以按照以下四項逐步推進：

2.1 用戶場景

進行用戶場景分析時，需要明確“用戶”和“任務”“數據內容”這三個要素。

用戶需要通過（監測、分析、評估）內容去完成（一些特定的）目的。

對于用戶：需要了解其身份、在公司內的職位、工作內容等。

對于目的：需要弄清是什么觸發了用戶使用dashboard的行為？用戶訪問dashboard的原因是什么？為了達到目的需要以什么頻率訪問dashboard？

對于內容：需要明白用戶使用dashboard后需要做出哪些決定？哪些關鍵信息輔助自己做出決定？有哪些情況需要提醒用戶等。

2.2 展示形式

根據數據內容選擇不同形式或形式組合，例如dashboard內常用的圖表、表格或列表等。其中，圖表的特點是可以方便看出趨勢但是難以索引 ，表格與列表反之。

同時，并不是所有內容都要以可視化的形式展現，只可視化必要而且能迅速看出端倪的東西。

關于圖表形式，印象中初中的數學課就已經介紹過，在此就不贅述了。需要特別說明幾點細節問題，信息設計大牛Stephen Few在他的《information Dashboard Design》一書中有提到：

• 人對于面積和角度的敏感度不如對長度的感覺。餅圖通常不是一個好的選擇，除非很強調個體在整體中的比例，此時也可以用堆積條形圖；
• 人對于橫向長度的敏感度又高于縱向；
• 3D的數據圖表又增加了縱深的維度會影響閱讀和記憶；
• 要做到圖表上每個像素都是有用不多余的，一般折線或柱狀圖已經足夠用了。

2.3 數據排布

要通過對業務的了解、對用戶的訪談等對界面內各項內容的重要性進行區分。用戶必須看到或者必須去做的事情要放在醒目的位置，或者要給與強烈的視覺暗示，避免用戶因為數據的不起眼而錯過重要信息。

ToB產品內涉及的數據信息通常也很多，要對各部分內容進行有邏輯地分組。在排版上給與用戶分組的暗示，讓用戶能更快速定位到需要的信息。在《Information Dashboard Design》這本書里，作者也在一直強調，設計dashboard即要讓重要的信息一目了然。（關于數據排布的部分，還會再寫一篇格式塔心理學的應用~之后奉上）

10.31更新：

數據排布主要涉及到三個心理學小知識：格式塔原則、短時記憶和神奇的X

2.3.1 格式塔原則

設計方法上，利用視覺感知的格式塔原則可以更合理地進行排布，以便用戶高效獲取信息。具體可以運用到以下幾點：

接近性

通常我們認為彼此靠近的物體是屬于同一組的。這個是最簡單常用的分組的方式。

同時，可以靈活應用空格來引導用戶瀏覽數據的方向。下圖是作者在書中的例子，可以感受到因為間距的不同，會自動形成不同的瀏覽順序。

相似性

相似性 – 我們傾向于將大小、形狀、顏色、方向等一致的元素歸為一組?？梢酝ㄟ^這些特征來區分這些數據的集合，或者加強某一數據的集合。當我們想要表現的元素在dashboard中不得不分散的時候，可以用相似性來加強彼此的聯系。

封閉性

視覺邊界使我們將物體歸為一組。通過使用邊界，無論是顏色填充還是邊框，可以圈定出一個區域，這是最直接有效的對信息進行分組的方式。

閉合性

很多時候我們會將開放的／不完整／不常見的結構視為閉合的／完整的／常規的。這一原則有助于減少dashboard內視覺元素的數量。

連續性

如果數據是連續出現的，那容易認為它們是作為一個整體的一部分，相鄰的數據是彼此的延續。用這個原理來展示數據之間的關系，也可減少類似于網格線這樣的視覺元素。

2.3.2 短時記憶

短時記憶（STM）儲存的是當前最新的經驗或思索內容，是剛剛產生的記憶。信息進入短時記憶，人們可以毫不費力地回憶起來，但這種記憶的容量非常有限。

在進行信息設計時，為了增強短時記憶，可以從視覺上對數據進行加工。例如運用顏色（ 結合亮度與飽和度）、空間位置、外形（方向、長度、大小、形狀、標記等）、還有運動等。這些都可用于dashboard來強化分組或強調某信息。這些特征不光能讓用戶注意到該信息，還可以讓用戶對該信息的印象更深。

此外，干擾信息可能會打斷當前任務，并影響短時記憶?？梢酝ㄟ^弱化干擾的方式來減輕其影響，例如將彈窗狀態改為非模態；或者轉換干擾的形式，用不同的感官模式呈現不同的信息，例如下載完畢的提示音，對視覺信息也不會有過多干擾。

2.3.3 神奇的X

神奇的7（Magic 7）是指人的短時記憶是有局限性的，能夠記住的模塊上限通常為7±2個。

這個理論由G.Miller在1956年提出，教育和設計領域都有很多應用。例如在教育領域中，我們在記單詞時，可以將長單詞劃分為幾個小模塊進行記憶。在設計領域中常見的例子是手機號。如果直接顯示十一位數字，既不利于識別，也不利于記憶。iPhone就采用了xxx xxxx xxxx的形式進行展示，可讀性提升，記憶難度降低。當然，344的劃分結構我猜可能和運營商與歸屬地也有關系，應該是綜合考量后的結果。

Magic 7是流傳比較廣泛的一種說法。查找了一些資料后發現，其實學界有人提出了更進一步的觀點，將短時記憶的容量定位在4個模塊左右。具體到個例的話，每個組塊所包含內容的復雜程度、間接干擾等對記憶的難度都會有影響。但總的來說，在進行信息設計時，可以試著將重要的模塊控制在4個左右，以獲得更好的信息傳達效果。

2.4 交互方式

在完成以上幾步后，需要根據內容細化交互方式。

例如信息關系是否有層級？如果有，那么是用什么形式去展現這個層級，下拉列表還是彈窗？還是會在圖表內有進一步的交互動作（如下圖）？

有哪些內容需要進行說明或者提醒？采用hover還是toast？

相似控件的交互方式是否保持一致？

……

三、小結

總而言之，dashboard是與用戶進行信息展示與溝通的媒介，要用最準確的媒介來清晰、直接地傳達數據和其所表示的信息。

Steven Few在書中提出，評價dashboard的好壞要看其組織是否合理、內容是否簡潔、對相應用戶群體或領域是否有針對性的定制化內容。我們在設計時也可以參考下這些標準。

Reference:

Stephen Few. (2006). Information Dashboard Design.

George Miller. (1956). The Magical Number Seven, Plus or Minus Tow: Some Limits on our Capacity for Processing Information

Nelson Cowan. (2001). The magical number 4 in short-term memory: A reconsideration of mental storage capacity

Mike Hughes.?Dashboard Design 10.

本文由 @魚丸子 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議