如何用最準(zhǔn)確的媒介來清晰、直接地傳達(dá)數(shù)據(jù)和其所表示的信息？Dashboard可以幫到你。

一、Dashboard的含義

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

在Mac的OS系統(tǒng)內(nèi)，dashboard是指包含各類小widget的面板。

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

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

因?yàn)閷τ赥o B用戶而言，它的核心始終是傳遞信息。界面上的內(nèi)容都應(yīng)有存在的理由，一些額外的裝飾可能會(huì)造成干擾。

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

二、設(shè)計(jì)步驟

設(shè)計(jì)dashboard時(shí)，可以按照以下四項(xiàng)逐步推進(jìn)：

2.1 用戶場景

進(jìn)行用戶場景分析時(shí)，需要明確“用戶”和“任務(wù)”“數(shù)據(jù)內(nèi)容”這三個(gè)要素。

用戶需要通過（監(jiān)測、分析、評估）內(nèi)容去完成（一些特定的）目的。

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

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

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

2.2 展示形式

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

同時(shí)，并不是所有內(nèi)容都要以可視化的形式展現(xiàn)，只可視化必要而且能迅速看出端倪的東西。

關(guān)于圖表形式，印象中初中的數(shù)學(xué)課就已經(jīng)介紹過，在此就不贅述了。需要特別說明幾點(diǎn)細(xì)節(jié)問題，信息設(shè)計(jì)大牛Stephen Few在他的《information Dashboard Design》一書中有提到：

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

2.3 數(shù)據(jù)排布

要通過對業(yè)務(wù)的了解、對用戶的訪談等對界面內(nèi)各項(xiàng)內(nèi)容的重要性進(jìn)行區(qū)分。用戶必須看到或者必須去做的事情要放在醒目的位置，或者要給與強(qiáng)烈的視覺暗示，避免用戶因?yàn)閿?shù)據(jù)的不起眼而錯(cuò)過重要信息。

ToB產(chǎn)品內(nèi)涉及的數(shù)據(jù)信息通常也很多，要對各部分內(nèi)容進(jìn)行有邏輯地分組。在排版上給與用戶分組的暗示，讓用戶能更快速定位到需要的信息。在《Information Dashboard Design》這本書里，作者也在一直強(qiáng)調(diào)，設(shè)計(jì)dashboard即要讓重要的信息一目了然。（關(guān)于數(shù)據(jù)排布的部分，還會(huì)再寫一篇格式塔心理學(xué)的應(yīng)用~之后奉上）

10.31更新：

數(shù)據(jù)排布主要涉及到三個(gè)心理學(xué)小知識(shí)：格式塔原則、短時(shí)記憶和神奇的X

2.3.1 格式塔原則

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

接近性

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

同時(shí)，可以靈活應(yīng)用空格來引導(dǎo)用戶瀏覽數(shù)據(jù)的方向。下圖是作者在書中的例子，可以感受到因?yàn)殚g距的不同，會(huì)自動(dòng)形成不同的瀏覽順序。

相似性

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

封閉性

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

閉合性

很多時(shí)候我們會(huì)將開放的／不完整／不常見的結(jié)構(gòu)視為閉合的／完整的／常規(guī)的。這一原則有助于減少dashboard內(nèi)視覺元素的數(shù)量。

連續(xù)性

如果數(shù)據(jù)是連續(xù)出現(xiàn)的，那容易認(rèn)為它們是作為一個(gè)整體的一部分，相鄰的數(shù)據(jù)是彼此的延續(xù)。用這個(gè)原理來展示數(shù)據(jù)之間的關(guān)系，也可減少類似于網(wǎng)格線這樣的視覺元素。

2.3.2 短時(shí)記憶

短時(shí)記憶（STM）儲(chǔ)存的是當(dāng)前最新的經(jīng)驗(yàn)或思索內(nèi)容，是剛剛產(chǎn)生的記憶。信息進(jìn)入短時(shí)記憶，人們可以毫不費(fèi)力地回憶起來，但這種記憶的容量非常有限。

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

此外，干擾信息可能會(huì)打斷當(dāng)前任務(wù)，并影響短時(shí)記憶。可以通過弱化干擾的方式來減輕其影響，例如將彈窗狀態(tài)改為非模態(tài)；或者轉(zhuǎn)換干擾的形式，用不同的感官模式呈現(xiàn)不同的信息，例如下載完畢的提示音，對視覺信息也不會(huì)有過多干擾。

2.3.3 神奇的X

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

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

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

2.4 交互方式

在完成以上幾步后，需要根據(jù)內(nèi)容細(xì)化交互方式。

例如信息關(guān)系是否有層級？如果有，那么是用什么形式去展現(xiàn)這個(gè)層級，下拉列表還是彈窗？還是會(huì)在圖表內(nèi)有進(jìn)一步的交互動(dòng)作（如下圖）？

有哪些內(nèi)容需要進(jìn)行說明或者提醒？采用hover還是toast？

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

……

三、小結(jié)

總而言之，dashboard是與用戶進(jìn)行信息展示與溝通的媒介，要用最準(zhǔn)確的媒介來清晰、直接地傳達(dá)數(shù)據(jù)和其所表示的信息。

Steven Few在書中提出，評價(jià)dashboard的好壞要看其組織是否合理、內(nèi)容是否簡潔、對相應(yīng)用戶群體或領(lǐng)域是否有針對性的定制化內(nèi)容。我們在設(shè)計(jì)時(shí)也可以參考下這些標(biāo)準(zhǔn)。

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.

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

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