儀表盤的3種類型
1、操作型Dashboard
操作儀表盤用于顯示當前用戶在產(chǎn)品中的狀態(tài),顯示與時間相關的關鍵信息。
例如后臺數(shù)據(jù)分析中,操作儀表盤包含:網(wǎng)站的活躍用戶、熱門社交推薦和每分鐘瀏覽量等數(shù)據(jù)。
▲ 在谷歌分析的實時儀表盤中,用戶能一目了然地查看所有用戶、新增用戶等一系列數(shù)據(jù)。操作型儀表盤中通常包含一些簡單的條形圖、折線圖等基本圖表。
2、分析型Dashboard
分析型儀表盤用于向用戶展示關鍵的數(shù)據(jù)信息,以數(shù)據(jù)為中心,并盡可能多地顯示相關聯(lián)的數(shù)據(jù)圖表。
分析型儀表盤應該以關鍵的數(shù)據(jù)為中心,并盡量減少圖形元素。
▲ 在Manson Yarnell的儀表盤中,更注重數(shù)據(jù)前后的對比和關聯(lián)性,并將這種關系通過圖表的形式展示出來,通過對比,我們能更容易看到產(chǎn)品的數(shù)據(jù)情況,比如瀏覽量是比上個月漲了還是降了、漲了多少。
3、平臺型Dashboard
平臺型儀表盤用于讓用戶訪問社交平臺上與帳戶相關的控件、工具和分析。
▲ 在YouTube的后臺頁面中,通過簡單的初始視圖就能顯示用戶的最新視頻以及每個視頻的播放量等數(shù)據(jù)信息。
儀表盤的6個設計要點
1、確定用戶需要什么
首先要了解受眾。因為只有了解用戶,才能夠回答一個關鍵的問題:用戶希望從這個儀表盤中得到什么?
要先明確用戶希望在儀表盤上想到看到的幾個要點,然后應用F型和Z型閱讀模式,構建相應的頁面。如果儀表盤上的信息太多,有可能會讓訪問后臺的用戶不知所措。
通過將所有的信息和數(shù)據(jù)合理地組合到一個頁面上,再使用適當?shù)牧舭讈砥胶猱嬅妫瑸閿?shù)據(jù)創(chuàng)造呼吸空間。
2、在儀表盤中添加互動
在儀表板上添加響應性互動,可以讓用戶自己決定去關注哪些數(shù)據(jù)。讓用戶能夠控制儀表盤,很大程度上更符合用戶差異化的需求。
▲ Cuberto將后臺儀表盤設計成可以左右滑動的樣式,這個設計有點像可以左右滑動的兩塊黑板,既可以看到兩部分不一樣的內(nèi)容,也能通過滑動展開看到更多的細節(jié)內(nèi)容。
3、以關鍵數(shù)據(jù)作為先導
有的儀表盤設計得很簡潔,用大尺寸且加粗的字體來展示數(shù)據(jù),讓用戶更清晰地明確信息。
▲ 這個Dashboard版式時尚,風格上很簡潔,有很多留白和加粗的數(shù)據(jù)。這樣呈現(xiàn)數(shù)據(jù)可以幫助用戶快速看到哪些內(nèi)容是重要的,節(jié)省用戶時間。
▲ 整個頁面通過清晰的圖表形式呈現(xiàn)信息,我們能明確看到數(shù)據(jù)的變化情況,雖然沒有使用太多的文字信息,但主次分明的數(shù)據(jù)做到了很好的透視。
4、規(guī)劃儀表盤信息架構
在設計儀表盤時,考慮信息架構和層級結構,來確定需要哪些內(nèi)容卡片以及這些卡片要放在什么位置。
▲ 深色背景的使用在組件之間形成很酷的對比,關鍵數(shù)據(jù)占據(jù)中心位置。左側導航欄和右側卡片式信息在設計上遵循了標準的格式塔原則。
▲ 這個加密貨幣儀表盤以賬戶余額為線索,將最重要的信息放在用戶第一眼就能看到的地方,其他信息會根據(jù)內(nèi)容重要程度,合理調整在頁面的位置。
5、使用多樣的視圖樣式
儀表盤設計也需要變化,通過使用不同的視圖布局來保持整體的簡潔。
▲ 在這個儀表盤中,用戶可以按日期篩選數(shù)據(jù)、在餐廳之間切換,還能看到關于預訂、付款、員工輪班和外部供應商等很多種信息,同時整個頁面仍然能保持很干凈、簡潔。
6、使用一致的設計方案
通常儀表盤中包含各種數(shù)據(jù)圖表,設計樣式上很難做到統(tǒng)一,但這并不意味著儀表盤不需要考慮視覺美觀。
▲ 協(xié)調的配色和多樣的圖表樣式讓整個頁面看起來很有設計感,環(huán)形圖、餅圖和地圖的搭配讓數(shù)據(jù)呈現(xiàn)更豐富。
▲ 這個儀表盤通過明亮、統(tǒng)一的配色,讓數(shù)據(jù)圖表更加清晰、整潔,導航更加明確。
慢慢來比較快,希望對你有所幫助!
原文地址:Clip設計夾(公眾號)
作者:Clippp
轉載請注明:學UI網(wǎng)》儀表盤(Dashboard)設計的6個要點,都幫你總結好了!
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務