industry_news
industry_news
一、要做好大屏的界面設(shè)計(jì),首先需要了解大屏的硬件特點(diǎn)。
從視覺(jué)角度簡(jiǎn)單的說(shuō),大屏分為兩種,融合的(無(wú)縫的)和拼接的(有縫的),精度有高清的,有一般的。(大屏技術(shù)說(shuō)起來(lái)話長(zhǎng),有CRT、LED、DLP純數(shù)字顯示、LCOS、GLV顯示技術(shù),有興趣的好學(xué)份子可另行查閱讀詳細(xì)資料)
1融合屏(見(jiàn)下圖),屏幕是整個(gè)為一體的。
1融合屏(見(jiàn)下圖),屏幕是整個(gè)為一體的。
2 拼接屏,見(jiàn)下圖(屏是用55或46寸的屏拼起來(lái)的,將多臺(tái)獨(dú)立顯示屏幕全部整合于一個(gè)堅(jiān)固的底座上, 所以屏與屏之間有一條縫。(此種造型應(yīng)該比較低或制造工期快一些,許多客戶選擇的是此種方案,有的縫大一些,有的小一些。)
二、了解大屏的使用場(chǎng)景和用戶群體
調(diào)度中心:生產(chǎn)調(diào)度、電力調(diào)度、水利調(diào)度 ……
監(jiān)控中心:安全監(jiān)控、調(diào)度、通信網(wǎng)管、機(jī)場(chǎng)監(jiān)控、高速公路 ……
指揮中心:部隊(duì)、三警合一、武警 ……
演示中心:會(huì)議廳、演播廳、展示廳、購(gòu)物中心、車站、機(jī)場(chǎng) ……
重要的監(jiān)控中心,大屏的運(yùn)行時(shí)間是:7*24小時(shí)全天候
三、了解大屏上專用的軟件
由于大屏的硬件、使用場(chǎng)景和用戶群體,專業(yè)的大屏生產(chǎn)商是提供軟件的,大屏上除了可以直接接入計(jì)算機(jī)RGB信號(hào)、視頻信號(hào)外,還可以接入網(wǎng)絡(luò)信號(hào)。通過(guò)對(duì)信號(hào)系統(tǒng)和GIS系統(tǒng)的各種計(jì)算機(jī)圖、文及網(wǎng)絡(luò)信息、視頻圖像信息的動(dòng)態(tài)綜合顯示,實(shí)現(xiàn)對(duì)地理狀況、發(fā)生地震時(shí)的狀況等信息的實(shí)時(shí)監(jiān)視。大屏是可以配置不同區(qū)域放什么內(nèi)容,內(nèi)容區(qū)塊之間是可以互相調(diào)換位置和大小的。
如藍(lán)藍(lán)設(shè)計(jì)給利亞德設(shè)計(jì)的這套系統(tǒng)界面:
針對(duì)應(yīng)用場(chǎng)景和特殊場(chǎng)景,可以進(jìn)行不同的預(yù)案,設(shè)定不同主題的屏幕內(nèi)容和屏幕切換顯示的時(shí)間。
Vtron公司的顯示墻應(yīng)用管理系統(tǒng)軟件
四、了解大屏通常顯示的內(nèi)容
上文說(shuō)道,室內(nèi)大屏的演播廳通常用于調(diào)度中心、指揮中心、應(yīng)急中心、領(lǐng)導(dǎo)匯報(bào)工作、情況監(jiān)控,在這些場(chǎng)景下顯示的內(nèi)容通常有地圖及地圖上的位置點(diǎn)分布與監(jiān)控,工作流程及數(shù)據(jù)可視化監(jiān)控.....。抽象的描述很難理解,藍(lán)藍(lán)將收集的一些案例來(lái)展示。
四、了解大屏通常顯示的內(nèi)容
上文說(shuō)道,室內(nèi)大屏的演播廳通常用于調(diào)度中心、指揮中心、應(yīng)急中心、領(lǐng)導(dǎo)匯報(bào)工作、情況監(jiān)控,在這些場(chǎng)景下顯示的內(nèi)容通常有地圖及地圖上的位置點(diǎn)分布與監(jiān)控,工作流程及數(shù)據(jù)可視化監(jiān)控.....。抽象的描述很難理解,藍(lán)藍(lán)將收集的一些案例來(lái)展示。
看了上述這么多的案例,設(shè)計(jì)師們和產(chǎn)品經(jīng)理們大概都對(duì)屏上要放的內(nèi)容和表達(dá)方式有了一定的概念。其實(shí),每次進(jìn)行大屏設(shè)計(jì)前,產(chǎn)品經(jīng)理們最重要的工作就是梳理用戶的需求,找出核心要表達(dá)的內(nèi)容和組織布局方式。就好像策劃編輯一樣,畫(huà)出原型圖,來(lái)討論。
五、大屏界面的設(shè)計(jì)語(yǔ)言
大屏幕顯示及大數(shù)據(jù)可視化的確有其特點(diǎn),可以形成特定的設(shè)計(jì)語(yǔ)言。 通過(guò)分析,確定設(shè)計(jì)的風(fēng)格。
它是實(shí)時(shí)的,有緊張感;需要新穎的圖標(biāo)和動(dòng)效,有科技感;信息層次是豐富的;展示的數(shù)據(jù)是權(quán)威的。
1 布局柵格化。拼接的大屏尤其適合柵格化的設(shè)計(jì)。它本來(lái)就是格子間組成的嘛。
大屏上內(nèi)容的模塊化、可以任意拼接組成一屏畫(huà)面的形式,用柵格化的形式也可以發(fā)揮的很好。每一個(gè)模塊是一個(gè)單元格,彼此統(tǒng)一又獨(dú)立,可以放大和隨意擺放。每一格一模塊遵循統(tǒng)一的設(shè)計(jì)風(fēng)格、UI規(guī)范。
2 色彩對(duì)比強(qiáng),暗色為主
巨大的屏幕在室內(nèi),如果色彩鮮艷、畫(huà)面動(dòng)效不斷,就成了24小時(shí)長(zhǎng)時(shí)間播放的電影,人的本能就會(huì)注意力集中在其上。在監(jiān)控中心的工作人員,一排排桌椅直對(duì)著大屏,長(zhǎng)期如此,工作人員會(huì)受不了的。屏幕內(nèi)容需要?jiǎng)屿o之分。大屏以暗色為主,視覺(jué)更容易集中在上面的某處焦點(diǎn)(亮色為主的信息之上)。
3 地圖、線路圖及上面地點(diǎn)概況信息的設(shè)計(jì)、動(dòng)效渲染。 一個(gè)好的流程可以讓我們事半功倍,可視化的設(shè)計(jì)流程主要有分析數(shù)據(jù)、匹配圖形、優(yōu)化圖形、檢查測(cè)試。首先,在了解需求的基礎(chǔ)上分析我們要展示哪些數(shù)據(jù),包含元數(shù)據(jù)、數(shù)據(jù)維度、查看的視角等;其次,我們利用可視化工具,根據(jù)一些已固化的圖表類型快速做出各種圖表;然后優(yōu)化細(xì)節(jié);最后檢查測(cè)試。
有原始數(shù)據(jù),通過(guò)對(duì)原始數(shù)據(jù)進(jìn)行標(biāo)準(zhǔn)化、結(jié)構(gòu)化的處理,把它們整理成數(shù)據(jù)表。這是程序員的事
將這些數(shù)值轉(zhuǎn)換成視覺(jué)結(jié)構(gòu)(包括形狀、位置、尺寸、值、方向、色彩、紋理等),通過(guò)視覺(jué)的方式把它表現(xiàn)出來(lái)。例如將高中低的風(fēng)險(xiǎn)轉(zhuǎn)換成紅黃藍(lán)等色彩,數(shù)值轉(zhuǎn)換成大小。想要清楚地展現(xiàn)數(shù)據(jù),就要先了解所要繪制的數(shù)據(jù),如元數(shù)據(jù)、維度、元數(shù)據(jù)間關(guān)系、數(shù)據(jù)規(guī)模等。這是設(shè)計(jì)師的事。
將視覺(jué)結(jié)構(gòu)進(jìn)行組合,把它轉(zhuǎn)換成圖形傳遞給用戶,用戶通過(guò)人機(jī)交互的方式進(jìn)行反向轉(zhuǎn)換,去更好地了解數(shù)據(jù)背后有什么問(wèn)題和規(guī)律。這是程序員和設(shè)計(jì)師配合的事情。有地圖鉆取、區(qū)域展示信息功能,從數(shù)據(jù)庫(kù)中調(diào)取的即時(shí)數(shù)據(jù)運(yùn)算后呈現(xiàn)在地圖上,在顯示上需要強(qiáng)大的算法渲染,根據(jù)數(shù)據(jù)量有顯示的密度不同,顯示的時(shí)候有動(dòng)態(tài)效果,動(dòng)畫(huà)效果,有些可以用現(xiàn)成的控件,柱狀圖、直方圖、圓形圖這些控件可以用第三方開(kāi)源的控件,比如百度echart等,沒(méi)有控件的需要花比較多的代價(jià)去開(kāi)發(fā),實(shí)現(xiàn)效果需與后臺(tái)程序員商議。有些要使用可縮放矢量圖形(SVG),SVG是矢量格式,在任何分辨率下的顯示效果都很好。有基本的CSS規(guī)則控制設(shè)計(jì)。
大屏的實(shí)時(shí)效果是加入數(shù)據(jù)之后才能看到整體,是一個(gè)不斷的調(diào)整過(guò)程,進(jìn)一步優(yōu)化維度、動(dòng)效和數(shù)量。
維度:每個(gè)維度,只用一種表現(xiàn),清晰易懂;動(dòng)效:考慮時(shí)間和情感的把控,從原來(lái)的1.5ms改為3.5ms;數(shù)量:考慮了太密或太疏時(shí)用戶的感受,對(duì)圓的半徑做了統(tǒng)一大小的處理。
最后還需要檢查測(cè)試,從頭到尾過(guò)一遍是否滿足需求;實(shí)地投放大屏幕后,用戶是否方便閱讀;動(dòng)效能否達(dá)到預(yù)期,色差是否能接受;用戶能否理解。