儀表盤的3種類型

1、操作型Dashboard

操作儀表盤用于顯示當(dāng)前用戶在產(chǎn)品中的狀態(tài)，顯示與時(shí)間相關(guān)的關(guān)鍵信息。

例如后臺(tái)數(shù)據(jù)分析中，操作儀表盤包含：網(wǎng)站的活躍用戶、熱門社交推薦和每分鐘瀏覽量等數(shù)據(jù)。

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

2、分析型Dashboard

分析型儀表盤用于向用戶展示關(guān)鍵的數(shù)據(jù)信息，以數(shù)據(jù)為中心，并盡可能多地顯示相關(guān)聯(lián)的數(shù)據(jù)圖表。

分析型儀表盤應(yīng)該以關(guān)鍵的數(shù)據(jù)為中心，并盡量減少圖形元素。

▲ 在Manson Yarnell的儀表盤中，更注重?cái)?shù)據(jù)前后的對(duì)比和關(guān)聯(lián)性，并將這種關(guān)系通過圖表的形式展示出來，通過對(duì)比，我們能更容易看到產(chǎn)品的數(shù)據(jù)情況，比如瀏覽量是比上個(gè)月漲了還是降了、漲了多少。

3、平臺(tái)型Dashboard

平臺(tái)型儀表盤用于讓用戶訪問社交平臺(tái)上與帳戶相關(guān)的控件、工具和分析。

▲ 在YouTube的后臺(tái)頁面中，通過簡(jiǎn)單的初始視圖就能顯示用戶的最新視頻以及每個(gè)視頻的播放量等數(shù)據(jù)信息。

儀表盤的6個(gè)設(shè)計(jì)要點(diǎn)

1、確定用戶需要什么

首先要了解受眾。因?yàn)橹挥辛私庥脩?，才能夠回答一個(gè)關(guān)鍵的問題：用戶希望從這個(gè)儀表盤中得到什么？

要先明確用戶希望在儀表盤上想到看到的幾個(gè)要點(diǎn)，然后應(yīng)用F型和Z型閱讀模式，構(gòu)建相應(yīng)的頁面。如果儀表盤上的信息太多，有可能會(huì)讓訪問后臺(tái)的用戶不知所措。

通過將所有的信息和數(shù)據(jù)合理地組合到一個(gè)頁面上，再使用適當(dāng)?shù)牧舭讈砥胶猱嬅妫瑸閿?shù)據(jù)創(chuàng)造呼吸空間。

2、在儀表盤中添加互動(dòng)

在儀表板上添加響應(yīng)性互動(dòng)，可以讓用戶自己決定去關(guān)注哪些數(shù)據(jù)。讓用戶能夠控制儀表盤，很大程度上更符合用戶差異化的需求。

▲ Cuberto將后臺(tái)儀表盤設(shè)計(jì)成可以左右滑動(dòng)的樣式，這個(gè)設(shè)計(jì)有點(diǎn)像可以左右滑動(dòng)的兩塊黑板，既可以看到兩部分不一樣的內(nèi)容，也能通過滑動(dòng)展開看到更多的細(xì)節(jié)內(nèi)容。

3、以關(guān)鍵數(shù)據(jù)作為先導(dǎo)

有的儀表盤設(shè)計(jì)得很簡(jiǎn)潔，用大尺寸且加粗的字體來展示數(shù)據(jù)，讓用戶更清晰地明確信息。

▲ 這個(gè)Dashboard版式時(shí)尚，風(fēng)格上很簡(jiǎn)潔，有很多留白和加粗的數(shù)據(jù)。這樣呈現(xiàn)數(shù)據(jù)可以幫助用戶快速看到哪些內(nèi)容是重要的，節(jié)省用戶時(shí)間。

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

4、規(guī)劃儀表盤信息架構(gòu)

在設(shè)計(jì)儀表盤時(shí)，考慮信息架構(gòu)和層級(jí)結(jié)構(gòu)，來確定需要哪些內(nèi)容卡片以及這些卡片要放在什么位置。

▲ 深色背景的使用在組件之間形成很酷的對(duì)比，關(guān)鍵數(shù)據(jù)占據(jù)中心位置。左側(cè)導(dǎo)航欄和右側(cè)卡片式信息在設(shè)計(jì)上遵循了標(biāo)準(zhǔn)的格式塔原則。

▲ 這個(gè)加密貨幣儀表盤以賬戶余額為線索，將最重要的信息放在用戶第一眼就能看到的地方，其他信息會(huì)根據(jù)內(nèi)容重要程度，合理調(diào)整在頁面的位置。

5、使用多樣的視圖樣式

儀表盤設(shè)計(jì)也需要變化，通過使用不同的視圖布局來保持整體的簡(jiǎn)潔。

▲ 在這個(gè)儀表盤中，用戶可以按日期篩選數(shù)據(jù)、在餐廳之間切換，還能看到關(guān)于預(yù)訂、付款、員工輪班和外部供應(yīng)商等很多種信息，同時(shí)整個(gè)頁面仍然能保持很干凈、簡(jiǎn)潔。

6、使用一致的設(shè)計(jì)方案

通常儀表盤中包含各種數(shù)據(jù)圖表，設(shè)計(jì)樣式上很難做到統(tǒng)一，但這并不意味著儀表盤不需要考慮視覺美觀。

▲ 協(xié)調(diào)的配色和多樣的圖表樣式讓整個(gè)頁面看起來很有設(shè)計(jì)感，環(huán)形圖、餅圖和地圖的搭配讓數(shù)據(jù)呈現(xiàn)更豐富。

▲ 這個(gè)儀表盤通過明亮、統(tǒng)一的配色，讓數(shù)據(jù)圖表更加清晰、整潔，導(dǎo)航更加明確。

慢慢來比較快，希望對(duì)你有所幫助！

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》儀表盤(Dashboard)設(shè)計(jì)的6個(gè)要點(diǎn)，都幫你總結(jié)好了！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)