如何才能做出這種數(shù)據(jù)可視化頁(yè)面呢？

時(shí)間：2024-01-13 07:12:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-13 07:12:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何才能做出這種數(shù)據(jù)可視化頁(yè)面呢？：交互設(shè)計(jì)作品集中，我們會(huì)制作和學(xué)習(xí)一個(gè)UI界面設(shè)計(jì)項(xiàng)目，進(jìn)行UI數(shù)據(jù)可視化的學(xué)習(xí)。那么，優(yōu)秀的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。本期克瑞思淺談下數(shù)據(jù)可視化UI的設(shè)計(jì)趨勢(shì)和特點(diǎn)~







?什么是UI界面設(shè)計(jì)？




UI設(shè)計(jì)或稱界面設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡(jiǎn)稱。




簡(jiǎn)單說(shuō)：界面設(shè)計(jì)就是我們每天在使用的，手機(jī)App軟件、QQ和微信等。也就是給互聯(lián)網(wǎng)的產(chǎn)品外觀設(shè)計(jì)，在當(dāng)下也是有很多設(shè)計(jì)師選擇從業(yè)的。







?數(shù)據(jù)可視化重要性




在我們的日常生活中，通過(guò)搜索引擎搜索信息或訪問(wèn)智能手機(jī)時(shí)，都會(huì)產(chǎn)生數(shù)據(jù)。據(jù)Global Market Insights估計(jì)，到2026年，在工業(yè)自動(dòng)化領(lǐng)域，工業(yè)傳感器的出貨量將超過(guò)30億個(gè)。工業(yè)傳感器的日益普及，以及先進(jìn)的控制器和數(shù)據(jù)采集平臺(tái)，正在以驚人的速度實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)收集，數(shù)據(jù)量呈現(xiàn)指數(shù)級(jí)的增長(zhǎng)。




然而，單單收集數(shù)據(jù)是不夠的，還需要通過(guò)情境將其可視化為有用信息，以便快速輕松地進(jìn)行解釋。有價(jià)值的信息可以讓用戶形成概念、發(fā)現(xiàn)模式和異常，并得出結(jié)論。如今，隨著從傳感器、控制器、IIoT設(shè)備和其它系統(tǒng)接收到的數(shù)據(jù)越來(lái)越多，先進(jìn)的數(shù)據(jù)可視化變得至關(guān)重要。




相較于文本或其它類(lèi)型的數(shù)據(jù)，人類(lèi)大腦更擅長(zhǎng)處理視覺(jué)數(shù)據(jù)，并且人類(lèi)大腦也更擅長(zhǎng)記住故事和視覺(jué)效果，而不是基于文本的信息，因此以這種格式提供的信息至關(guān)重要。







UI是人與信息交互的媒介，它也是信息產(chǎn)品的功能載體和典型特征。UI作為系統(tǒng)的可用形式而存在，比如以視覺(jué)為主體的界面，強(qiáng)調(diào)的是視覺(jué)元素的組織和呈現(xiàn)。這是物理表現(xiàn)層的設(shè)計(jì)，每一款產(chǎn)品或者交互形式都以這種形態(tài)出現(xiàn)，包括圖形、圖標(biāo)( Icon)、色彩、文字設(shè)計(jì)等，用戶通過(guò)它們使用系統(tǒng)，UI也是作為人機(jī)交互的基礎(chǔ)層面。




一些用戶界面UI和數(shù)據(jù)可視化設(shè)計(jì)趨勢(shì)，開(kāi)始影響工業(yè)自動(dòng)化，包括使用真實(shí)圖片、美學(xué)極簡(jiǎn)主義和復(fù)雜的排版等概念。







?顏色

顏色可以增強(qiáng)或分散數(shù)據(jù)可視化信息的注意力。HMI設(shè)計(jì)標(biāo)準(zhǔn)ISA-101建議謹(jǐn)慎使用顏色，主要用于表示異?；虍惓顟B(tài)。情境意識(shí)方法（在設(shè)計(jì)屏幕和儀表盤(pán)時(shí)讓用戶意識(shí)到情境）也提倡謹(jǐn)慎使用顏色和形狀，以確保運(yùn)行人員將注意力放在可操作的數(shù)據(jù)上。




?形式

形式適用于區(qū)分屏幕數(shù)據(jù)的屬性。例如，動(dòng)態(tài)增加對(duì)象、突出程度或屏幕區(qū)域的大小，以表明其重要性，并迅速引起操作人員的注意力。




?空間定位

空間定位是用來(lái)表示數(shù)據(jù)的空間，它可能包括二維和三維表達(dá)的應(yīng)用。大多數(shù)數(shù)據(jù)可視化是在二維空間中描繪的。但是，地理信息系統(tǒng)和三維表達(dá)對(duì)于地理上分散的資產(chǎn)是有效的。隨著智能設(shè)備和傳感器的部署無(wú)處不在，空間定位對(duì)于實(shí)現(xiàn)數(shù)據(jù)可視化運(yùn)營(yíng)效率變得越來(lái)越重要。




?動(dòng)畫(huà)

動(dòng)態(tài)畫(huà)面一直是吸引操作人員注意力的常用方式。但是，必須謹(jǐn)慎使用以避免惱人或分散注意力的移動(dòng)、閃爍和彈出窗口。想想那些網(wǎng)絡(luò)廣告商是如何試圖用動(dòng)態(tài)顯示來(lái)吸引我們的注意力的，以及這些廣告有多令人討厭并促使用戶使用廣告攔截軟件。




正確實(shí)施后，用戶界面可以受益于數(shù)據(jù)儀表板上的動(dòng)畫(huà)按鈕，作為一種強(qiáng)大的技術(shù)，它可以在需要采取行動(dòng)時(shí)，向操作人員發(fā)出指示。這對(duì)于空間受限的移動(dòng)設(shè)備尤其重要。







?UI數(shù)據(jù)可視化趨勢(shì)




UI用戶界面設(shè)計(jì)行業(yè)在全球軟件業(yè)，屬于高薪技術(shù)設(shè)計(jì)產(chǎn)業(yè)，與國(guó)外在同步發(fā)展水平。其次國(guó)內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國(guó)移動(dòng)、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專(zhuān)業(yè)的UI設(shè)計(jì)部門(mén)，但專(zhuān)業(yè)人才稀缺，人才資源爭(zhēng)奪激烈。就業(yè)市場(chǎng)供不應(yīng)求。




而數(shù)據(jù)可視化上呢，我們使用主動(dòng)、持續(xù)的智能來(lái)自動(dòng)處理實(shí)時(shí)和歷史數(shù)據(jù)，也可以允許運(yùn)行人員處理增加的數(shù)據(jù)量，從而發(fā)揮作用。通過(guò)檢測(cè)異常并產(chǎn)生有效的UI指示、報(bào)警和事件，數(shù)據(jù)可視化成為提醒運(yùn)行人員潛在問(wèn)題的有效方式。以下是一些數(shù)據(jù)可視化的最新趨勢(shì)。







?智能設(shè)備




智能設(shè)備無(wú)處不在，無(wú)時(shí)無(wú)刻不在收集數(shù)據(jù)，這導(dǎo)致了數(shù)據(jù)激增。然而，數(shù)據(jù)的價(jià)值會(huì)隨著時(shí)間的久遠(yuǎn)而減少，所以數(shù)據(jù)可視化必須發(fā)生在更接近數(shù)據(jù)來(lái)源的地方，同時(shí)提供企業(yè)層級(jí)的可視化。此外，跨分布式數(shù)據(jù)集的連接使企業(yè)能夠在這些不同的設(shè)備之間識(shí)別有價(jià)值的連接、關(guān)系和洞察力。




根據(jù)IDC的數(shù)據(jù)，預(yù)計(jì)到2024年，70%的企業(yè)將其邊緣生成的數(shù)據(jù)與基于云的企業(yè)系統(tǒng)集成，以實(shí)現(xiàn)基于物聯(lián)網(wǎng)分析的實(shí)時(shí)行動(dòng)。




?數(shù)據(jù)敘事

傳統(tǒng)HMI/SCADA和儀表板的數(shù)據(jù)可視化，可以向運(yùn)行人員顯示正在發(fā)生的事情，但不顯示原因。數(shù)據(jù)敘事data storytelling，是一種通過(guò)引人入勝的敘述來(lái)傳達(dá)原因的方法。




據(jù)Gartner預(yù)測(cè)，到2025年，數(shù)據(jù)敘事將成為用戶使用分析數(shù)據(jù)的主要方式。數(shù)據(jù)敘事利用為運(yùn)營(yíng)商量身定制的數(shù)據(jù)、敘事和視覺(jué)效果，來(lái)有效傳達(dá)可操作的見(jiàn)解。換句話說(shuō)，數(shù)據(jù)可視化以圖形方式表示數(shù)據(jù)，而數(shù)據(jù)敘事則給出數(shù)據(jù)背后的意義。這提供了一個(gè)以簡(jiǎn)單、簡(jiǎn)潔的方式，能夠整合大量復(fù)雜數(shù)據(jù)的敘述，解釋數(shù)據(jù)背后的方式和原因。




?實(shí)時(shí)可視化

對(duì)于工業(yè)自動(dòng)化應(yīng)用來(lái)說(shuō)，實(shí)時(shí)可視化數(shù)據(jù)并不是什么新鮮事。然而，鑒于數(shù)據(jù)收集速度的加快，所涉及的智能設(shè)備和傳感器的部署數(shù)量也在不斷增加，需求不斷擴(kuò)大。實(shí)時(shí)可視化必須收集、匯總、關(guān)聯(lián)并提供分析，以加速?zèng)Q策過(guò)程。







《Data Visualization: Modern Approaches》（意為“數(shù)據(jù)可視化：現(xiàn)代方法”），概括闡述了數(shù)據(jù)可視化的下列主題 ：

1）思維導(dǎo)圖

2）新聞的顯示

3）數(shù)據(jù)的顯示

4）連接的顯示

5）網(wǎng)站的顯示

6）文章與資源

7）工具與服務(wù)

所有這些主題全都與圖形設(shè)計(jì)和信息表達(dá)密切相關(guān)。




所以，UI數(shù)據(jù)為智能自動(dòng)化和戰(zhàn)略決策提供動(dòng)力。當(dāng)簡(jiǎn)化了大量數(shù)據(jù)，并以吸引用戶的方式傳達(dá)情境信息時(shí)，數(shù)據(jù)可視化就有一種美感。合適的數(shù)據(jù)可視化軟件與智能硬件相結(jié)合將帶來(lái)諸多好處，有助于改善整個(gè)企業(yè)的運(yùn)營(yíng)效率。