儀表盤(Dashboard)設計的6個要點，都幫你總結好了！

今天爲大家分享的是「儀表盤設計」，在Dashboard頁面中，用戶可以查看並分析產品的數據和圖表，還可以通過控件來控制數據的顯示、過濾等功能。

如何才能設計一個好的儀表盤(Dashboard)，幫助用戶理解、分析並呈現清晰的內容是我們首要考慮的任務。

01

儀表盤的3種類型

1. 操作型Dashboard

操作儀表盤用於顯示 當前用戶在產品中的狀態 ，顯示與時間相關的關鍵信息。

例如後臺數據分析中，操作儀表盤包含：網站的活躍用戶、熱門社交推薦和每分鐘瀏覽量等數據。

▲ 在谷歌分析的實時儀表盤中，用戶能一目瞭然地查看所有用戶、新增用戶等一系列數據。操作型儀表盤中通常包含一些簡單的條形圖、折線圖等基本圖表。

2. 分析型Dashboard

分析型儀表盤用於向用戶展示關鍵的數據信息，以數據爲中心，並儘可能多地顯示相關聯的數據圖表。

分析型儀表盤應該以關鍵的數據爲中心，並儘量減少圖形元素。

▲ 在Manson Yarnell的儀表盤中，更注重數據前後的對比和關聯性，並將這種關係通過圖表的形式展示出來，通過對比，我們能更容易看到產品的數據情況，比如瀏覽量是比上個月漲了還是降了、漲了多少。

3. 平臺型Dashboard

平臺型儀表盤用於讓用戶訪問社交平臺上與帳戶相關的控件、工具和分析。

▲ 在YouTube的後臺頁面中，通過簡單的初始視圖就能顯示用戶的最新視頻以及每個視頻的播放量等數據信息。

在側邊欄，用戶還可以訪問大量的工具和帳戶控件，包括視頻管理器、頻道狀態等，YouTube讓操作變得簡單，用戶能完全控制。

02

儀表盤的6個設計要點

1. 確定用戶需要什麼

首先要 瞭解受衆 。因爲只有瞭解用戶，才能夠回答一個關鍵的問題：用戶希望從這個儀表盤中得到什麼？

要先明確用戶希望在儀表盤上想到看到的幾個要點，然後應用 F型和Z型閱讀模式， 構建相應的頁面。如果儀表盤上的信息太多，有可能會讓訪問後臺的用戶不知所措。

通過將所有的信息和數據合理地組合到一個頁面上，再使用適當的留白來平衡畫面，爲數據創造呼吸空間。

2. 在儀表盤中添加互動

在儀表板上添加響應性互動，可以讓用戶自己決定去關注哪些數據。讓用戶能夠控制儀表盤，很大程度上更符合用戶差異化的需求。

▲ Cuberto將後臺儀表盤設計成可以左右滑動的樣式，這個設計有點像可以左右滑動的兩塊黑板，既可以看到兩部分不一樣的內容，也能通過滑動展開看到更多的細節內容。

3. 以關鍵數據作爲先導

有的儀表盤設計得很簡潔，用大尺寸且加粗的字體來展示數據，讓用戶更清晰地明確信息。

▲ 這個Dashboard版式時尚，風格上很簡潔，有很多留白和加粗的數據。這樣呈現數據可以幫助用戶快速看到哪些內容是重要的，節省用戶時間。

▲ 整個頁面通過清晰的圖表形式呈現信息，我們能明確看到數據的變化情況，雖然沒有使用太多的文字信息，但主次分明的數據做到了很好的透視。

4. 規劃儀表盤信息架構

在設計儀表盤時，考慮信息架構和層級結構，來確定需要哪些內容卡片以及這些卡片要放在什麼位置。

▲ 深色背景的使用在組件之間形成很酷的對比，關鍵數據佔據中心位置。左側導航欄和右側卡片式信息在設計上遵循了標準的格式塔原則。

▲ 這個加密貨幣儀表盤以賬戶餘額爲線索，將最重要的信息放在用戶第一眼就能看到的地方，其他信息會根據內容重要程度，合理調整在頁面的位置。

5. 使用多樣的視圖樣式

儀表盤設計也需要變化，通過使用不同的視圖佈局來保持整體的簡潔。

▲ 在這個儀表盤中，用戶可以按日期篩選數據、在餐廳之間切換，還能看到關於預訂、付款、員工輪班和外部供應商等很多種信息，同時整個頁面仍然能保持很乾淨、簡潔。

6. 使用一致的設計方案

通常儀表盤中包含各種數據圖表，設計樣式上很難做到統一，但這並不意味着儀表盤不需要考慮視覺美觀。

▲ 協調的配色和多樣的圖表樣式讓整個頁面看起來很有設計感，環形圖、餅圖和地圖的搭配讓數據呈現更豐富。

▲ 這個儀表盤通過明亮、統一的配色，讓數據圖表更加清晰、整潔，導航更加明確。

03

最後

最後爲大家整理了一整套高質量的儀表盤UI Kit源文件和圖片素材，包括各種樣式的圖表，幫助大家更好地進行後臺設計。

慢慢來比較快，希望對你有所幫助！

文章來源：Clip設計夾，版權歸原作者所有

原文鏈接：

https://mp.weixin.qq.com/s/LNbU6s0zIGoFk3nlIfPOLw

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會註明作者和來源，本公衆號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明示或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯繫，若涉及內容或作品等版權問題，煩請原作者聯繫我們，給出內容所在的網址並提供相關證明資料，我們會覈查後立即更正或者刪除有關內容！本公衆號不承擔任何責任，並擁有對此聲明的最終解釋權。

聯繫微信：Meia_99

點這裡，獲取大會最新動態！