亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

可視化大屏中的交互設(shè)計

2022-5-9    博博

在完成一張可視化大屏的過程中,除了炫酷的科技感,我們是否忽略了大屏中的“交互設(shè)計”呢,整理了一篇心得與大家一起分享學(xué)習(xí)。

      在數(shù)據(jù)可視化的分析過程中,用戶是所有行為的主體,通過獲取的可視信息形成認(rèn)知,在交互分析過程中獲取解決問題的方法。

     在這個過程中,感知和認(rèn)知能力直接影響著信息的獲取和處理進(jìn)程,進(jìn)而影響用戶對外在世界環(huán)境做出的反應(yīng),這也是設(shè)計數(shù)據(jù)可視化產(chǎn)品服務(wù)藍(lán)圖的基礎(chǔ)邏輯。

     從數(shù)據(jù)到知識有兩個途徑:交互的可視化方法和自動的數(shù)據(jù)挖掘方法。

     我們可以看到,下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數(shù)據(jù),終點是提煉的知識。

     可視化的首要任務(wù)是準(zhǔn)確地展示和傳達(dá)數(shù)據(jù)所包含的信息。根據(jù)預(yù)期和需求,提供有效輔助手段以方便用戶理解數(shù)據(jù),從而完成有效的可視化。

     但是當(dāng)出現(xiàn)數(shù)據(jù)尺寸大、結(jié)構(gòu)復(fù)雜的情況時,有限的空間大大限制了靜態(tài)可視化的效果,有限的可視化空間和數(shù)據(jù)過載之間的處理是非常復(fù)雜的。有時我們會通過物理環(huán)境的變化來改變服務(wù)模型,但是更多時候我們需要通過交互設(shè)計來完成對復(fù)雜信息的處理,提升用戶對數(shù)據(jù)解讀的便捷性。

     那么當(dāng)我們在設(shè)計一張數(shù)據(jù)大屏?xí)r,我們該如何通過交互提升用戶獲取有效數(shù)據(jù)的效能呢,下面我們一起來探討如何完善大屏設(shè)計中的交互設(shè)計:


一、信息架構(gòu)

1、清晰易理解、可拓展的信息架構(gòu)

2、清晰易理解的導(dǎo)航關(guān)系

3、清晰易理解的層級關(guān)系


案例分析:

在我們收到原型圖時,首先我們需要梳理清楚大屏的信息架構(gòu),比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結(jié)構(gòu)。又或者是如何設(shè)計重要功能的入口,比如整屏的導(dǎo)航tab選項,在布局設(shè)計上用戶是否可以明晰它是是否是全屏篩選,在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達(dá)內(nèi)容。那么當(dāng)用戶進(jìn)行了導(dǎo)航的切換后又返回到上一頁面,整個行為是可以形成路徑閉環(huán)的。


二、流程設(shè)計

1、可下鉆的模塊需給用戶以引導(dǎo)

2、相同功能的用戶體驗路徑需保持一致

3、逆向流程的功能設(shè)計能形成閉環(huán)


案例分析:

我們經(jīng)常會在大屏中間設(shè)計地圖的樣式來展示某個省的數(shù)據(jù)情況,比如,如圖所示,當(dāng)業(yè)務(wù)側(cè)需要從湖北省跳轉(zhuǎn)至武漢市,查看武漢市的詳細(xì)數(shù)據(jù),那么我們可以在省級地圖輪播的數(shù)據(jù)氣泡上給予用戶以提示,用戶可以清楚獲取到跳轉(zhuǎn)市級大屏的路徑方法。


三、界面展示

1、一致可控的圖表組件

可視化大屏中最核心的數(shù)據(jù)展示形式就是圖表模塊,我們需要正確地展示圖表組件外觀與組件關(guān)系,把控好相似功能的橫向一致性,我們可以細(xì)分為以下幾點。

(1)選擇正確清晰的圖表組件

(2)正確表達(dá)組件元素之間的關(guān)系

(3)一致性的組件樣式和交互行為

(4)不要忽視組件的不可用狀態(tài)(按鈕)

(5)刪減影響用戶視線和注意力的冗余元素


案例分析:

當(dāng)一個模塊內(nèi)需要展示數(shù)據(jù)的多個維度,我們?nèi)绾螌⒃撃K設(shè)計得更加清晰呢。如下圖,根據(jù)人從左往右的閱讀習(xí)慣,在左邊展示數(shù)據(jù)1和數(shù)據(jù)2的總指標(biāo)數(shù),在右邊展示數(shù)據(jù)1和數(shù)據(jù)2的詳細(xì)走勢,右上角我們還可以添加tab選項,用戶可以進(jìn)行tab切換查看更多維度的數(shù)據(jù)內(nèi)容。

所以,我們可以將用戶使用習(xí)慣和交互行為很好地結(jié)合起來,不僅免去了圖表多亂雜的場景,用戶也可以更快地查看到想要獲取的數(shù)據(jù)信息。


2、清晰的數(shù)據(jù)展示

配合圖表展示的就是我們的“數(shù)據(jù)數(shù)字”內(nèi)容了,在我們將設(shè)計稿傳遞給前端同事后,填充真實數(shù)據(jù)后的視覺效果可能看起來沒有效果圖規(guī)整,一方面在進(jìn)行繪制效果圖之前,可以與產(chǎn)品業(yè)務(wù)側(cè)共同探討數(shù)據(jù)內(nèi)容,盡量給視覺設(shè)計師提供真實的數(shù)據(jù),另一方面,在我們作圖搬磚的時候,也要注意一下幾點:

(1)不要遺漏了“無數(shù)據(jù)”的缺省空界面,當(dāng)無法獲取到數(shù)據(jù)時,我們需要給前端提供這樣的缺省圖;

(2)清晰的數(shù)據(jù)排序規(guī)則,比如環(huán)形圖中,總起始點到終點,數(shù)據(jù)對應(yīng)的數(shù)值量應(yīng)該是遞減的排序規(guī)則;

(3)考慮數(shù)據(jù)的極值情況,比如在搜索列表中學(xué)校名稱文字的極限字?jǐn)?shù)是多少,超出多少字用省略號顯示,這些我們都需要考慮到;

(4)是否需要標(biāo)明數(shù)據(jù)的更新時間節(jié)點,有的大屏強(qiáng)調(diào)數(shù)據(jù)實時性,我們經(jīng)常會在右上角增加數(shù)據(jù)截止更新時間來來引導(dǎo)用戶;

(5)特定的數(shù)值按照特定的格式和單位顯示,比如羊字符能讓用戶第一時間識別到是人民幣,而如果金額數(shù)字過長后面再加元會降低識別效率。


案例分析:


3、選擇與輸入的信息反饋

(1)展示合適的首選項或默認(rèn)值

(2)輸入前有效的文本提示

(3)輸入完成后需及時反饋


案例分析:


4、用動效進(jìn)行有效的交互引導(dǎo)

     利用動效進(jìn)行交互引導(dǎo),即使大屏操作鏈路過長,也可以讓用戶快速上手操作,減少流程學(xué)習(xí)時間。進(jìn)入下一場景后,又會有對應(yīng)的區(qū)域提示用戶返回全局或查看其他場景;當(dāng)做到層層有響應(yīng),就能減少用戶在每一步操作上的困惑時間,幫助用戶快速上手操作流程,并且大大提升工作效率。

     但是我們需要注意的是,不要為了酷炫而做太多無用的動效,不僅會讓頁面加載速度慢,也會讓用戶覺得雜亂無重點。


     總結(jié):

     交互可提高可視化系統(tǒng)的效率,幫助用戶處理更多的數(shù)據(jù),完成更復(fù)雜的任務(wù)。然而,實現(xiàn)交互本身也有額外成本。互動的系統(tǒng)可以使用戶能探索更大的信息空間,但隨之而來的成本是用戶需要花費(fèi)更多的時間與精力去瀏覽和探索數(shù)據(jù)。

     因此,可視化系統(tǒng)應(yīng)當(dāng)采用數(shù)據(jù)挖掘算法自動發(fā)現(xiàn)用戶可能會關(guān)心的數(shù)據(jù)或者模式;并通過可視化呈現(xiàn)給用戶,用戶在這個基礎(chǔ)上通過互動進(jìn)行更深入的挖掘。設(shè)計師的設(shè)計決定了系統(tǒng)的可理解性,一旦掌握了這個邏輯,再復(fù)雜的頁面也會變得有條不紊。

     我們?nèi)孕柙跀?shù)據(jù)可視化的道路上不斷探索挖掘數(shù)據(jù)價值,給決策者提供有效的數(shù)據(jù)分析支撐,讓設(shè)計驅(qū)動數(shù)據(jù)價值最大化。



文章來源:站酷   作者:Racinere


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

日歷

鏈接

個人資料

存檔