精品国产在线亚洲欧美-精品国产在线手机在线-精品国产在线国语视频-精品国产在线观看福利-亚洲色噜噜狠狠站欲八-亚洲色噜噜狠狠网站

  • 如何設(shè)計(jì)內(nèi)容精確、體驗(yàn)友好的DASHBOARD?(上篇)

    /2017-06-22 15:52:07/

  • \


    在企業(yè)類應(yīng)用服務(wù)(SaaS)、檢測工具(手機(jī)安全助手)、量化自我工具(智能手環(huán))等后臺管理系統(tǒng)中,使用Dashboard可以幫助用戶監(jiān)控和分析數(shù)據(jù),快速獲取重要信息。但如果對Dashboard設(shè)計(jì)缺乏認(rèn)知,就很可能會造成Dashboard呈現(xiàn)的信息雜亂,充斥著無關(guān)緊要的指標(biāo)、文本信息及各種半成品的圖表等,讓用戶抓不到重點(diǎn)。

    那么,設(shè)計(jì)師該如何設(shè)計(jì)內(nèi)容精確、體驗(yàn)友好的Dashboard以滿足用戶需求呢?文章將從以下幾個(gè)方面思考:

    • Dashboard是什么?
    • 主要場景是什么?能為用戶帶來什么價(jià)值?
    • 目標(biāo)用戶分析
    • 選定Dashboard內(nèi)容
    • Dashboard內(nèi)容結(jié)構(gòu)
    • 功能特性
    • 信息設(shè)計(jì)

    一. Dashboard是什么?

    在了解Dashboard之前,可以先了解下汽車儀表盤和報(bào)表。

    Dashboard的中文翻譯是“儀表盤”,與汽車的儀表盤相同——一種反映車輛各系統(tǒng)工作狀況的裝置,有車速里程表、轉(zhuǎn)速表、燃油表等。同時(shí),還會有各式各樣的指示燈或警報(bào)燈,例如冷卻液液面警報(bào)燈、燃油量指示燈、充電指示燈等。司機(jī)可以很方便地從汽車儀表盤中獲得汽車整體狀況。而對于報(bào)表,簡單的說就是用表格、圖表等格式來顯示匯總數(shù)據(jù)。同時(shí),因?yàn)槌S糜诙ㄆ趨R報(bào)場景(如每月賬本匯總),報(bào)表也要考慮紙質(zhì)打印的限制。

    \

    △  汽車儀表盤(左)和報(bào)表(右)

    而Dashboard沿襲了汽車儀表盤理念,在一個(gè)屏幕上有預(yù)設(shè)性地顯示對用戶關(guān)鍵的信息,并實(shí)時(shí)告知用戶正在發(fā)生的情況。同時(shí),Dashboard進(jìn)一步結(jié)合計(jì)算機(jī)互動的功能顯示和傳輸信息,突破了報(bào)表要考慮紙面打印輸出的限制。在Dashboard頁面中,用戶不僅可以直接對數(shù)據(jù)和圖表進(jìn)行分析,還可以通過控件來控制數(shù)據(jù)的顯示、計(jì)算、過濾和分組等等。

    在Stephen Few的《Information Dashboard Design》一書中指出:Dashboard對重要信息做視覺呈現(xiàn),這些重要信息是為了達(dá)成一個(gè)或者多個(gè)目標(biāo)而被統(tǒng)一組織在一屏內(nèi),以便能夠一眼就得到監(jiān)控。

    二. 主要場景是什么?能為用戶帶來什么價(jià)值?

    Dashboard一般通過重要內(nèi)容和核心數(shù)據(jù)來告知用戶:“業(yè)務(wù)整體狀況如何?有哪些關(guān)鍵指標(biāo)?各指標(biāo)的運(yùn)行情況分別如何?哪些指標(biāo)出現(xiàn)異常?需要用戶做些什么?”。由此可知,Dashboard主要應(yīng)用于監(jiān)控、分析和概覽三大場景。

    \

    △  Dashboard三大主要使用場景

    首先,在監(jiān)控場景中,Dashboard主要為用戶集中提供便捷的關(guān)鍵指標(biāo)實(shí)時(shí)監(jiān)測,及時(shí)告知異常狀態(tài),并引導(dǎo)用戶定位問題。

    \

    △  Dashboard監(jiān)控場景

    其次,在分析場景中,Dashboard主要通過數(shù)據(jù)圖表,配合控件進(jìn)行不同維度的數(shù)據(jù)分析。例如,用戶可以通過時(shí)間篩選控件過濾圖表上的數(shù)據(jù)范圍等。

    \

    △  Dashboard分析場景

    最后,在復(fù)雜業(yè)務(wù)中,Dashboard還用于概覽場景,集中呈現(xiàn)業(yè)務(wù)分散的重點(diǎn)信息,用戶還可以通過提供的入口快速跳轉(zhuǎn)至相關(guān)模塊。

    \

    △  Dashboard概覽場景

    通常,Dashboard三大主要使用場景是相互配合使用的。例如,用戶通常先通過概覽Dashboard了解業(yè)務(wù)整體信息,觀察監(jiān)控?cái)?shù)據(jù)的情況,如需要進(jìn)一步分析,用戶可以對數(shù)據(jù)進(jìn)行多維度分析已獲取更多信息。

    在監(jiān)控、分析和概覽主要場景中,總結(jié)提煉了Dashboard能為用戶帶來的直接價(jià)值主要如下幾點(diǎn):

    • 監(jiān)控告警,并引導(dǎo)用戶定位問題
    • 深入分析數(shù)據(jù),獲知細(xì)節(jié)信息
    • 快速獲取業(yè)務(wù)整體重點(diǎn)信息,管理資源

    三. 目標(biāo)用戶分析

    在對Dashboard有基礎(chǔ)了解后并開始設(shè)計(jì)Dashboard,首先需要清楚:Dashboard的目標(biāo)用戶是誰?他們在什么環(huán)境中會使用到Dashboard?做什么事情等?考慮這些問題,有助于確定Dashboard的大致輪廓。例如,在分析用戶時(shí)獲知運(yùn)維人員在工作時(shí)間需要監(jiān)視機(jī)器健康狀況,設(shè)計(jì)時(shí)可考慮在Dashboard中呈現(xiàn)正常、異常機(jī)器數(shù),并引導(dǎo)用戶定位到出現(xiàn)異常的機(jī)器,排查問題。
    在做目標(biāo)用戶分析時(shí),可以從用戶、場景和任務(wù)這三方面考慮,以了解用戶特點(diǎn)和目標(biāo)等相關(guān)信息。

    \

    △   用戶、場景和任務(wù)

    如上圖,了解用戶對數(shù)據(jù)和行業(yè)的熟悉程度等,可以輔助判斷提供與用戶水平相匹配的數(shù)據(jù)分析能力。同時(shí),也可以從中判斷是否需要嵌入內(nèi)容注釋和輔助信息等,幫助用戶理解。而在場景和任務(wù)中,用戶行為本身就受場景影響,設(shè)計(jì)Dashboard時(shí)要考慮不同場景下具體任務(wù)的合理性和重要程度,在后續(xù)處理內(nèi)容時(shí)輔助判斷優(yōu)先級。

    四. 選定Dashboard內(nèi)容

    對目標(biāo)用戶、場景和任務(wù)進(jìn)行分析后,接著需要考慮在Dashboard中呈現(xiàn)什么內(nèi)容幫助用戶完成不同場景下的任務(wù)。在選定內(nèi)容前,首先需要明確Dashboard的主題是什么?然后,再圍繞主題,考慮該呈現(xiàn)哪些內(nèi)容?

    1. 明確主題

    Dashboard的主題是什么?即通過Dashboard,要幫助用戶完成什么事情。

    明確Dashboard的主題時(shí),需要充分考慮目標(biāo)用戶的需求。例如,運(yùn)維人員需要Dashboard能夠幫助他“高效、精確地發(fā)現(xiàn)、定位問題,確保業(yè)務(wù)正常運(yùn)行”,而財(cái)務(wù)人員則需要在Dashboard了解到“賬戶各個(gè)季度收支情況”等。明確主題后,選定內(nèi)容時(shí)就可以緊緊圍繞主題,考慮呈現(xiàn)能夠幫助用戶的信息,規(guī)避雜亂、無效的數(shù)據(jù)。

    \

    △  電腦管家Dashboard小浮窗

    如上圖所示,騰訊電腦管家Dashboard小浮窗的主題——幫助用戶實(shí)時(shí)監(jiān)控機(jī)器使用情況。為此,在小浮窗中呈現(xiàn)CPU、內(nèi)存和流量關(guān)鍵指標(biāo)實(shí)時(shí)數(shù)據(jù)。同時(shí),也提供了各指標(biāo)資源占用較高應(yīng)用的實(shí)時(shí)數(shù)值監(jiān)測,讓用戶獲知更多詳細(xì)數(shù)據(jù)。

    2. 選定和編輯內(nèi)容

    • 選定內(nèi)容

    內(nèi)容選定時(shí)需要很好地區(qū)分真實(shí)、可付諸行動的信息和無效信息,這可以從以下三個(gè)方面進(jìn)行考慮:

    • 緊扣主題

    內(nèi)容緊扣主題,要很清楚Dashboard呈現(xiàn)的內(nèi)容能幫助用戶完成什么事情。避免呈現(xiàn)的內(nèi)容太多太雜,反而讓用戶不容易理解。當(dāng)然,無可避免會呈現(xiàn)一些輔助內(nèi)容,一種有效的處理方法就是將這些內(nèi)容放在頁面底部,確保關(guān)鍵、有用的信息放在首屏。

    • 引導(dǎo)行動

    在考慮所呈現(xiàn)的內(nèi)容時(shí),不應(yīng)該只片面考慮“用戶想要知道什么?”,而應(yīng)該進(jìn)一步考慮“如果用戶知道了這個(gè)信息,會用它來做什么?”。這能讓呈現(xiàn)的內(nèi)容更為聚焦、實(shí)用,讓用戶抓住重點(diǎn)并采取行動。例如,在Dashboard實(shí)時(shí)監(jiān)控資源健康狀態(tài),用標(biāo)紅的數(shù)字表示發(fā)生異常資源數(shù),強(qiáng)烈引起用戶注意,并通過該數(shù)字跳轉(zhuǎn)至資源列表,篩選出異常機(jī)器。

    • 統(tǒng)一認(rèn)知

    內(nèi)容應(yīng)符合用戶認(rèn)知,易獲取且真實(shí)可信。如指標(biāo)命名、數(shù)據(jù)統(tǒng)計(jì)規(guī)則等,要與行業(yè)標(biāo)準(zhǔn)保持一致。避免使用不易理解的標(biāo)簽、定義或內(nèi)容。

    \

    △  選定內(nèi)容判斷條件

    需要注意的是,選定Dashboard內(nèi)容時(shí),不一定需要全部滿足上述提到的三個(gè)方面。但精確、符合用戶需求的內(nèi)容,應(yīng)該都是緊扣主題,又能引導(dǎo)用戶行動和符合用戶認(rèn)知。

    • 編輯內(nèi)容

    選定內(nèi)容后,還需要從用戶角度做恰當(dāng)?shù)木庉嬏幚恚庇^、精確地呈現(xiàn)符合用戶需求的內(nèi)容。例如,財(cái)務(wù)人員制作每季度的報(bào)表,那么提供按“季度”呈現(xiàn)內(nèi)容會更符合用戶需求,方便且高效。
    在編輯內(nèi)容時(shí),可以從內(nèi)容的覆蓋范圍、時(shí)間跨度、粒度和個(gè)性定制等這些方面考慮,讓Dashboard的內(nèi)容更為符合用戶需求。

    \

    △  內(nèi)容編輯思考細(xì)則

    五. Dashboard內(nèi)容結(jié)構(gòu)

    在《Information Dashboard Design》一書中指出:“Dashboard內(nèi)容必須合理組織,從而反映信息的本質(zhì)和支持有效且有意義的監(jiān)控;信息不能隨便放置,也不能只是根據(jù)剩余空間來設(shè)定大小;相互關(guān)聯(lián)的項(xiàng)目應(yīng)該放置在臨近的位置;重要的項(xiàng)目版面要大一些,這樣才能比相對次要的信息更加突出;有特定順序的項(xiàng)目,要以一種視覺上被關(guān)注的順序排列。”

    合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀,理解內(nèi)容。所以,當(dāng)Dashboard的內(nèi)容選定后,就需要考慮如何將信息碎片有邏輯地組合在一起,合理呈現(xiàn)和布局,引導(dǎo)用戶理解全局。從更實(shí)用的角度來說,內(nèi)容結(jié)構(gòu)能夠成為用戶的導(dǎo)航機(jī)制,用戶知道該從哪里開始,接著該看什么。

    選擇使用什么結(jié)構(gòu)視內(nèi)容而定。依據(jù)經(jīng)驗(yàn),Dashboard內(nèi)容結(jié)構(gòu)主要有三種類型:分類型、關(guān)聯(lián)型和流程型。

    分類型

    即將有相關(guān)聯(lián)的內(nèi)容進(jìn)行分組呈現(xiàn),讓Dashboard內(nèi)容歸類而不雜亂無章。如 Google Cloud Platform 的Dashboard頁面,將內(nèi)容按卡片分為Project info、Billing、Documentation等。同時(shí),卡片與卡片之間也進(jìn)行了分組,左邊是資源信息,中間是指標(biāo)監(jiān)控,右邊是文檔幫助。

    \

    △ Google Platform Dashboard

    關(guān)聯(lián)型

    內(nèi)容相互之間具有一定的邏輯關(guān)系,如地理位置關(guān)系、數(shù)字包含關(guān)系、對象父子關(guān)系等,這種結(jié)構(gòu)可以讓對象之間的邏輯關(guān)系十分直觀。如騰訊云VPC網(wǎng)絡(luò)拓?fù)洌瑢①Y源對象的位置和關(guān)系抽象表示,很直觀的呈現(xiàn)了資源對象之間的相互關(guān)系。

    \

    △ 騰訊云VPC網(wǎng)絡(luò)拓?fù)?/span>

    流程型

    流程型結(jié)構(gòu)的內(nèi)容一般會出現(xiàn)多個(gè)環(huán)節(jié),每個(gè)環(huán)節(jié)之間都會有相應(yīng)的內(nèi)容,按照一定的流程逐步細(xì)化,深入引導(dǎo)用戶閱讀。符合這種結(jié)構(gòu),如市場銷售各環(huán)節(jié)流程,像這種垂直的流程型內(nèi)容結(jié)構(gòu),很容易讓用戶清楚每個(gè)環(huán)節(jié)的數(shù)據(jù)變動,定位哪個(gè)環(huán)節(jié)出了問題。這種結(jié)構(gòu)有個(gè)較為典型的統(tǒng)計(jì)模型是:漏斗。

    \

    △ UV轉(zhuǎn)化率分析(圖片來源:Echarts)

    六. 功能特性

    適當(dāng)考慮為Dashboard提供一些常用功能特性,能夠讓整個(gè)頁面擁有較為出色的用戶控制和友好的體驗(yàn)。

    鉆取

    鉆取是改變維的層次,變換分析粒度,提供用戶駕馭Dashboard內(nèi)不同層次的內(nèi)容。它包括向上鉆取(roll up)和向下鉆取(drill down)。roll up是在某一維上將低層次的細(xì)節(jié)數(shù)據(jù)概括到高層次的匯總數(shù)據(jù),或者減少維數(shù)。而drill down則相反,它從匯總數(shù)據(jù)深入到細(xì)節(jié)數(shù)據(jù)進(jìn)行觀察或增加新維。

    篩選

    允講用戶根據(jù)需要篩選Dashboard數(shù)據(jù)的范圍,可以是全局性的 (在整個(gè)概覽頁范圍內(nèi)選擇),也可以是局部的(在特定圖表或是規(guī)定范圍內(nèi)選擇)。特別涉及到時(shí)間的篩選,可以從記錄歷史(回溯過往數(shù)據(jù)趨勢)、快照(顯示單點(diǎn)數(shù)據(jù))、實(shí)時(shí)(監(jiān)控新進(jìn)活動)和預(yù)測(預(yù)估未來走向)等這些更細(xì)粒度角度考慮數(shù)值呈現(xiàn),讓用戶獲取精確數(shù)據(jù)。

    比較

    指標(biāo)數(shù)值的對比,能夠并列比較兩個(gè)或多個(gè)數(shù)據(jù)集。例如折線圖、面積圖等能提供數(shù)據(jù)集對比功能。

    警報(bào)

    根據(jù)預(yù)設(shè)的條件高亮顯示,當(dāng)指標(biāo)超出特定界限時(shí)就觸發(fā)報(bào)警。

    可定制

    允許用戶根據(jù)需求定制不同的內(nèi)容。

    導(dǎo)出

    為用戶提供Dashboard中導(dǎo)出數(shù)據(jù)的功能。

    保存

    當(dāng)用戶定制的情況越來越多時(shí), 提供保存定制的功能就越發(fā)顯得重要。

    總結(jié)

    本文開篇先陳述什么是Dashboard,其主要應(yīng)用場景和用戶價(jià)值是什么。然后,再從用戶分析、內(nèi)容、結(jié)構(gòu)和功能等闡述設(shè)計(jì)Dashboard過程中需要著重考慮的。在《Dashboard設(shè)計(jì)思考》的下一篇,將分析如何設(shè)計(jì)清晰、簡潔的頁面,將前期分析整理的內(nèi)容和功能更好的呈現(xiàn)給用戶。控。即Dashboard集中呈現(xiàn)重要信息,便于用戶快速瀏覽獲知全局。

    貴陽網(wǎng)站建設(shè),貴陽APP開發(fā),宏思銳達(dá)


<
上一篇: 用超多案例,幫你避免交互設(shè)計(jì)中的「刻板印象 」 下一篇: iOS和Android規(guī)范解析——按鈕

Hi,互相認(rèn)識一下

很高興遇見你,友誼往往從第一次握手開始, 微信聯(lián)系: 13765801787

主站蜘蛛池模板: 久久精品国产免费中文 | 亚洲国产精品无码中文字幕 | 久久99亚洲热最新地址获取 | 三级全黄的视频 | 一边亲着一面膜下奶韩剧免费 | 午夜福利免费体检区 | 胸大美女又黄的网站 | yw193.c国产在线观看 | 手机在线免费 | 伦理片qvod | 麻豆成人啪啪色婷婷久久 | 真人裸交有声性动态图 | 99午夜视频| 第一次破女视频出血视频 | 日韩欧美高清一区 | 国产精品爽爽久久久久久竹菊 | 真实处破女全过程完免费观看 | 嗯啊快停下我是你老师啊H 嗯啊快拔出来我是你老师视频 | 亚洲免费在线视频 | 久99视频精品免费观看福利 | 最近2018年手机中文字幕 | ebc5恐怖5a26房间 | 小骚妇BBBXXX | 蜜桃臀无码内射一区二区三区 | 中文字幕无线观看不卡网站 | 寂寞夜晚视频高清观看免费 | 99精品视频免费观看 | 亚洲综合色五月久久婷婷 | 国产午夜亚洲精品一区 | 俄罗斯12x13x处 | 受被三个攻各种道具PLAY | 老司机福利在视频在ae8 | 亚洲 欧美 国产 伦 综合 | xlxx美女| 精品无码三级在线观看视频 | 国产日韩欧美有码在线视频 | 爆操日本美女 | 日本不卡一二三 | 日韩亚洲欧美中文在线 | 天天躁躁水汪汪人碰人 | 好吊妞在线成人免费 |