手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

可視化大屏UI設(shè)計(jì):構(gòu)建全面方案制定指南

2024-10-30    藍(lán)藍(lán)小助手 大數(shù)據(jù)可視化設(shè)計(jì)文章及欣賞

大數(shù)據(jù)時(shí)代大到來(lái),推動(dòng)可視化行業(yè)的蓬勃發(fā)展,如果繼續(xù)用傳統(tǒng)的形式來(lái)展現(xiàn)龐大的數(shù)據(jù)信息是不可能的,3D可視化的展現(xiàn)形式結(jié)合云計(jì)算數(shù)據(jù)分析、物聯(lián)網(wǎng)技術(shù),建立交互式、吸引人視覺(jué)、承載大量數(shù)據(jù)并且簡(jiǎn)單直觀的可視化界面就顯得尤為重要了。我通過(guò)以往的經(jīng)驗(yàn)總結(jié)了可視化大屏從0到1的設(shè)計(jì)方案制定同大家分享,希望給想接觸可視化大屏設(shè)計(jì)的朋友們一些幫助。

前期調(diào)研

為精準(zhǔn)達(dá)到設(shè)計(jì)目標(biāo),我們前期要對(duì)需求進(jìn)行梳理分析,將產(chǎn)品的業(yè)務(wù)目標(biāo)與視覺(jué)設(shè)計(jì)目標(biāo)相統(tǒng)一,才能更好的達(dá)成目標(biāo)。以下拆解提煉出獲取的有用信息包括,客戶\產(chǎn)品需求、業(yè)務(wù)目標(biāo)、硬件設(shè)備。

 

 

根據(jù)需求制定設(shè)計(jì)方案

通過(guò)前期與客戶、產(chǎn)品的溝通提煉有用信息,從抽象的概念到實(shí)際落地的具象界面,本文將從以下五個(gè)方面講解可視化大屏從 0 到 1 的設(shè)計(jì)過(guò)程:

 

 

 

首先,確定畫(huà)板大小;然后,合理安排模塊布局;其次,明確整體界面的設(shè)計(jì)風(fēng)格;再次,對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行梳理、合理安排信息層級(jí)以及選擇合適的圖表去精準(zhǔn)的表達(dá)業(yè)務(wù)數(shù)據(jù);最后,就是快速的搭建一塊可視化大屏。

 

 

 

一、確定畫(huà)板

前期與客戶、產(chǎn)品經(jīng)理溝通后,得到的有用信息如下:

 

 

1.大屏被安置于室內(nèi);

2.配電腦 1920*1080 分辨率,大屏原始尺寸:5.8*3.2 米,采用直投形式;

3.LED 屏幕點(diǎn)間距 1.2 毫米。

通過(guò)以上信息,我們總結(jié)出大屏的色彩明度不易過(guò)亮。電腦直投形式按照“投屏電腦的分辨率為 1920*1080”設(shè)計(jì)就可以保證投屏的清晰度,不會(huì)產(chǎn)生拉伸和變形。因?yàn)?LED 屏的點(diǎn)間距 1.2 毫米,屬于比較清晰的屏幕,所以我們把最小字號(hào)設(shè)定為 12 像素。

 

二、規(guī)劃布局

確定了畫(huà)板的大小,下一步需要根據(jù)產(chǎn)品原型優(yōu)化頁(yè)面布局。

 

 

一般中心的位置會(huì)放置地圖,其余的指標(biāo)按優(yōu)先級(jí)依次在地圖周圍展開(kāi)。

首先搭建信息分布框架,根據(jù)這個(gè)框架往里邊填充內(nèi)容就更規(guī)整了。大屏是以數(shù)據(jù)展示為主,內(nèi)外邊距的設(shè)定較小,希望能給數(shù)據(jù)展示留更多的空間。目前這張屏幕每個(gè)模塊包括標(biāo)題、數(shù)據(jù)指標(biāo)以及數(shù)據(jù)分析圖表三個(gè)部分。

在設(shè)計(jì)時(shí),首先要讓用戶獲取到有用信息。所以需要考慮哪些信息內(nèi)容優(yōu)先級(jí)更高。

 

三、設(shè)計(jì)風(fēng)格

風(fēng)格定義主要依據(jù)上一篇文章分析得出的行業(yè)屬性、業(yè)務(wù)應(yīng)用場(chǎng)景、地域文化背景以及前期與客戶溝通時(shí)提到的一些訴求以及審美傾向,甚至于時(shí)下流行時(shí)政熱點(diǎn)、天氣等因素都能成為影響整體設(shè)計(jì)風(fēng)格的誘因。

通過(guò)這些影響因素搜集了相關(guān)詞匯,最終提取 3 個(gè)核心關(guān)鍵詞。

 

 

① 科技。我們的業(yè)務(wù)需求是:玉環(huán)市泵閥(水暖閥門(mén))產(chǎn)業(yè)大腦,產(chǎn)業(yè)大腦就是將產(chǎn)業(yè)數(shù)字化治理。以科技驅(qū)動(dòng)產(chǎn)業(yè)升級(jí),是我們業(yè)務(wù)的核心目標(biāo)。所以第一個(gè)關(guān)鍵詞為科技。

② 機(jī)械。本屏主要是展示機(jī)械設(shè)備相關(guān)的企業(yè)數(shù)據(jù),所以,機(jī)械被選入了第二個(gè)關(guān)鍵詞。

③ 玉環(huán)。此處結(jié)合了地域文化:“ 玉環(huán)市 ” 被譽(yù)為中國(guó)閥門(mén)之都,并且玉環(huán)市的命名也是源于當(dāng)?shù)鬲?dú)特的自然現(xiàn)象 “ 晨霧繚繞,形如玉環(huán) ”,我們可以把這種感覺(jué)設(shè)計(jì)在大屏中。

看到這個(gè)情緒板后,大家是不是頭腦中已經(jīng)描摹出一副大屏的初步模樣了?

將情緒版落實(shí)到具體的設(shè)計(jì)細(xì)節(jié)有這五個(gè)方向:

 

 

① 圖形:我們選用偏機(jī)甲風(fēng)的造型。與機(jī)械硬朗的感覺(jué)相比,細(xì)節(jié)上我們采用圓角做融合;

② 質(zhì)感:運(yùn)用科技、光感;

③ 色彩:傾向于科技藍(lán),并且這這塊客戶也有明確表示過(guò)藍(lán)色更符合他們企業(yè)的整體調(diào)性。為了豐富畫(huà)面整體效果,為此增加了黃色、綠為輔助色。

④ 動(dòng)效:采用流光等光效效果。

⑤ 字體:首選擇現(xiàn)代、簡(jiǎn)潔一點(diǎn)的字體,更符合產(chǎn)業(yè)工業(yè)的氣質(zhì);也要考慮后期開(kāi)發(fā)實(shí)現(xiàn)。目前莫奈系統(tǒng)中字體有限,需要在這里找到比較符合現(xiàn)代感的字體。標(biāo)題選用-京東朗正;其他字體選用-思源黑體;數(shù)字字體為選用-京東正黑。

 

四、業(yè)務(wù)設(shè)計(jì)

1. 視覺(jué)層級(jí)劃分:我們針對(duì)業(yè)務(wù)內(nèi)容(信息維度的優(yōu)先級(jí))進(jìn)行了梳理:

 

 

第一視覺(jué)層級(jí)是希望用戶能第一眼看到的內(nèi)容:這里包括:指標(biāo)名稱、數(shù)據(jù)指標(biāo)、圖表、業(yè)務(wù)興趣點(diǎn)。

第二視覺(jué)層級(jí)是指模塊背景層:包括模塊 UI-背景、裝飾元素、圖標(biāo)、控件等。

第三層視覺(jué)級(jí)為基礎(chǔ)底圖層:包括行政區(qū)域-邊界、地面、地形、建筑、道路、水域、綠地等。

 

2. 圖表的正確使用:在選定適合的圖表表達(dá)業(yè)務(wù)數(shù)據(jù)之前,首先要明確數(shù)據(jù)指標(biāo)所要表達(dá)的維度,它是否符合業(yè)務(wù)場(chǎng)景?它是否合理表達(dá)了該數(shù)據(jù)業(yè)務(wù)屬性?

在這里我對(duì)常用的圖表做了個(gè)歸類。在不同維度下,應(yīng)該選擇什么類型的圖表,供大家參考。

 

 

 

3. 圖表結(jié)構(gòu)

 

 

以上是圖表的解構(gòu)圖。它包括:圖表標(biāo)題、X\Y 軸線、坐標(biāo)軸文本、網(wǎng)格線、圖例以及圖表背景。圖表的每一部分都是可以根據(jù)界面整體設(shè)計(jì)風(fēng)格去重新設(shè)計(jì)。不過(guò)前期請(qǐng)和開(kāi)發(fā)工程師溝通好實(shí)現(xiàn)機(jī)制。了解圖表的構(gòu)成,還有另外一個(gè)好處就是在產(chǎn)品原型內(nèi)容缺失或者表達(dá)不準(zhǔn)確時(shí)候我們知道如何去調(diào)整它。

 

4. 圖表選擇

 

 

案例分析

上圖表是對(duì)平臺(tái)銷售趨勢(shì)進(jìn)行分析,根據(jù)之前的研究表示趨勢(shì)的圖表有折線圖、面積圖、?;鶊D。

我們?cè)倏聪略搱D表產(chǎn)品原型存在的問(wèn)題:

① X 軸表示時(shí)間維度,Y 軸上數(shù)據(jù)缺失;

② 懸浮層要表達(dá) 3 個(gè)維度的信息:該時(shí)間點(diǎn)下的訂單量和銷售額;

③該圖表沒(méi)有展示圖例信息;

桑基圖應(yīng)用于數(shù)據(jù)維度趨勢(shì)比較復(fù)雜的情況下使用,而面積圖除了可以展示數(shù)據(jù)趨勢(shì)以外,還可以通過(guò)面積對(duì)比不同的數(shù)據(jù)量,但是訂單量和銷售額不在同一個(gè)分析維度,因此不需要對(duì)比。

所以最后我們還是采用了更簡(jiǎn)單易懂的折線圖。

 

5. 快速搭建

可以分為以下兩步:

第一步:設(shè)計(jì)師用我們長(zhǎng)期積累的設(shè)計(jì)組件快速搭建界面;

第二步:設(shè)計(jì)師/研發(fā)人員用京東城市的數(shù)據(jù)可視化引擎—莫奈去快速實(shí)現(xiàn)界面效果,目前市面上可視化搭建平臺(tái)有很多大家都可以嘗試一下。

 

 

上面這張屏正是采用了設(shè)計(jì)組件搭建而成。組件化不僅在提升設(shè)計(jì)師設(shè)計(jì)效率方面有著很重要的意義,還能夠在項(xiàng)目長(zhǎng)期迭代和多人協(xié)同完成設(shè)計(jì)方案的情況下保證設(shè)計(jì)的一致性。從而節(jié)省了更多的時(shí)間讓我們?nèi)ゴ蚰ピO(shè)計(jì)細(xì)節(jié)。

以下附上我們還在不斷完善的 Rainbow D(京東智能城市設(shè)計(jì)語(yǔ)言系統(tǒng))。本設(shè)計(jì)系統(tǒng)包含了可視化組件庫(kù)、中后臺(tái)組件庫(kù)以及相應(yīng)的設(shè)計(jì)規(guī)范供大家參考。

網(wǎng)址: http://dev-uc.urban-computing.cn/find-react/index-cn

 

如果有項(xiàng)目周期特別緊張的情況下,客戶想要快速看到線上效果,設(shè)計(jì)師也可以協(xié)助產(chǎn)品在莫奈系統(tǒng)上(京東城市數(shù)據(jù)可視化引擎)快速搭建產(chǎn)品原型。以下為在莫奈系統(tǒng)中搭建的大屏。

 

 

在莫奈系統(tǒng)中可以自定義配置圖表、地圖、文字,也可以嵌入視頻、動(dòng)態(tài)圖片等

 

總結(jié)

我們簡(jiǎn)單回顧一下可視化大屏方案制定的流程:

首先在明晰設(shè)計(jì)需求為前提的情況下,根據(jù)實(shí)際應(yīng)用場(chǎng)景確定畫(huà)板大小、根據(jù)業(yè)務(wù)數(shù)據(jù)優(yōu)先級(jí)合理的規(guī)劃布局和信息層級(jí);

再根據(jù)行業(yè)屬性、業(yè)務(wù)場(chǎng)景、客戶傾向性等因素確定適合大屏設(shè)計(jì)風(fēng)格;

大屏風(fēng)格確定之后,需要從數(shù)據(jù)分析維度,去選定最適合表達(dá)業(yè)務(wù)數(shù)據(jù)的圖表;

接著,就是采用設(shè)計(jì)組件庫(kù)和莫奈可視化引擎去快速搭建完成可視化大屏



作者:Crystal克莉絲多
鏈接:https://www.zcool.com.cn/article/ZMTU0NDkyOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
image.png藍(lán)藍(lán)設(shè)計(jì)(www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔