起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識To B 端的 Dashboard 設計方法
如何用最準確的媒介來清晰、直接地傳達數據和其所表示的信息？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 協議
有用～
收藏了
寫得好