<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 大屏ui設(shè)計系列之五——大屏設(shè)計語言分析 大屏數(shù)據(jù)可視化設(shè)計方法論

          2017-4-10    藍藍設(shè)計的小編

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

          作者:藍藍

          藍藍設(shè)計經(jīng)常會接到大屏設(shè)計的項目,比如中國移動互聯(lián)網(wǎng)監(jiān)控大屏可視化設(shè)計及開發(fā)太極集團承接的中央臺應(yīng)急指揮中心大屏可視化設(shè)計、交大思源承接的北京地鐵軌道批揮中心大屏可視化設(shè)計、數(shù)碼視訊展廳大屏可視化設(shè)計,在積累了一定經(jīng)驗的同時,也在不斷的學(xué)習(xí)和豐富關(guān)于大屏設(shè)計的特點及數(shù)據(jù)可視化的表達方式。


          數(shù)據(jù)可視化過濾了非常多的冗余信息,濃縮了最重要的信息,它的魅力就在于將枯燥的數(shù)據(jù)組織在一起,把最需要的那些編輯成一個故事。目前大數(shù)據(jù)那么流行,但是其實大家并不是需要那么多的數(shù)據(jù),而是需要整合的數(shù)據(jù),恰當(dāng)?shù)膶⒖蛻糇铌P(guān)注的數(shù)據(jù)挖掘展示出來才是最重要的。


          一、要做好大屏的界面設(shè)計,首先需要了解大屏的硬件特點。

          從視覺角度簡單的說,大屏分為兩種,融合的(無縫的)和拼接的(有縫的),精度有高清的,有一般的。(大屏技術(shù)說起來話長,有CRT、LED、DLP純數(shù)字顯示、LCOS、GLV顯示技術(shù),有興趣的好學(xué)份子可另行查閱讀詳細資料)

          1融合屏(見下圖),屏幕是整個為一體的。

          點擊查看原圖

          點擊查看原圖

          點擊查看原圖
          2 拼接屏,見下圖(屏是用55或46寸的屏拼起來的,將多臺獨立顯示屏幕全部整合于一個堅固的底座上, 所以屏與屏之間有一條縫。(此種造型應(yīng)該比較低或制造工期快一些,許多客戶選擇的是此種方案,有的縫大一些,有的小一些。)

          點擊查看原圖

          二、了解大屏的使用場景和用戶群體

          調(diào)度中心:生產(chǎn)調(diào)度、電力調(diào)度、水利調(diào)度 ……

          監(jiān)控中心:安全監(jiān)控、調(diào)度、通信網(wǎng)管、機場監(jiān)控、高速公路 ……

          指揮中心:部隊、三警合一、武警 ……

          演示中心:會議廳、演播廳、展示廳、購物中心、車站、機場 ……

          重要的監(jiān)控中心,大屏的運行時間是:7*24小時全天候

          點擊查看原圖

          三、了解大屏上專用的軟件

          由于大屏的硬件、使用場景和用戶群體,專業(yè)的大屏生產(chǎn)商是提供軟件的,大屏上除了可以直接接入計算機RGB信號、視頻信號外,還可以接入網(wǎng)絡(luò)信號。通過對信號系統(tǒng)和GIS系統(tǒng)的各種計算機圖、文及網(wǎng)絡(luò)信息、視頻圖像信息的動態(tài)綜合顯示,實現(xiàn)對地理狀況、發(fā)生地震時的狀況等信息的實時監(jiān)視。大屏是可以配置不同區(qū)域放什么內(nèi)容,內(nèi)容區(qū)塊之間是可以互相調(diào)換位置和大小的。

          如藍藍設(shè)計給利亞德設(shè)計的這套系統(tǒng)界面:

          0020B1wxzy7a6PLPNts5e&690.jpg

          0020B1wxzy7a6PMg79r05&690.jpg

          針對應(yīng)用場景和特殊場景,可以進行不同的預(yù)案,設(shè)定不同主題的屏幕內(nèi)容和屏幕切換顯示的時間。

          Vtron公司的顯示墻應(yīng)用管理系統(tǒng)軟件

          四、了解大屏通常顯示的內(nèi)容

          上文說道,室內(nèi)大屏的演播廳通常用于調(diào)度中心、指揮中心、應(yīng)急中心、領(lǐng)導(dǎo)匯報工作、情況監(jiān)控,在這些場景下顯示的內(nèi)容通常有地圖及地圖上的位置點分布與監(jiān)控,工作流程及數(shù)據(jù)可視化監(jiān)控.....。抽象的描述很難理解,藍藍將收集的一些案例來展示。

          0020B1wxzy7a6PTg1Mwd4&690.jpg

          0020B1wxzy7a6PTZ5eV59&690.jpg

          0020B1wxzy7a6PTbxVXc5&690.jpg

          0020B1wxzy7a6PU3z4j1f&690.jpg

          0020B1wxzy7a6PU8pHO60&690.jpg

          0020B1wxzy7a6PUd5Qx05&690.jpg

          四、了解大屏通常顯示的內(nèi)容

          上文說道,室內(nèi)大屏的演播廳通常用于調(diào)度中心、指揮中心、應(yīng)急中心、領(lǐng)導(dǎo)匯報工作、情況監(jiān)控,在這些場景下顯示的內(nèi)容通常有地圖及地圖上的位置點分布與監(jiān)控,工作流程及數(shù)據(jù)可視化監(jiān)控.....。抽象的描述很難理解,藍藍將收集的一些案例來展示。

          0020B1wxzy7a6Q1enSB35&690.jpg


          0020B1wxzy7a6Q1iO9m8c&690.jpg0020B1wxzy7a6Q1oUUNf1&690.jpg

          0020B1wxzy7a6Q1ufZO54&690.jpg
          0020B1wxzy7a6Q5kF0x75&690.jpg

          0020B1wxzy7a6Q5CKZCc4&690.jpg

          0020B1wxzy7a6Q5MgaOae&690.jpg


          屏幕快照 2017-04-10 下午6.11.31.png


          看了上述這么多的案例,設(shè)計師們和產(chǎn)品經(jīng)理們大概都對屏上要放的內(nèi)容和表達方式有了一定的概念。其實,每次進行大屏設(shè)計前,產(chǎn)品經(jīng)理們最重要的工作就是梳理用戶的需求,找出核心要表達的內(nèi)容和組織布局方式。就好像策劃編輯一樣,畫出原型圖,來討論。



          五、大屏界面的設(shè)計語言

          大屏幕顯示及大數(shù)據(jù)可視化的確有其特點,可以形成特定的設(shè)計語言。
          通過分析,確定設(shè)計的風(fēng)格。

          QQ截圖20170410105449.png
          它是實時的,有緊張感;需要新穎的圖標(biāo)和動效,有科技感;信息層次是豐富的;展示的數(shù)據(jù)是權(quán)威的。

          1 布局柵格化。拼接的大屏尤其適合柵格化的設(shè)計。它本來就是格子間組成的嘛。



          大屏上內(nèi)容的模塊化、可以任意拼接組成一屏畫面的形式,用柵格化的形式也可以發(fā)揮的很好。每一個模塊是一個單元格,彼此統(tǒng)一又獨立,可以放大和隨意擺放。每一格一模塊遵循統(tǒng)一的設(shè)計風(fēng)格、UI規(guī)范。



          2 色彩對比強,暗色為主



          巨大的屏幕在室內(nèi),如果色彩鮮艷、畫面動效不斷,就成了24小時長時間播放的電影,人的本能就會注意力集中在其上。在監(jiān)控中心的工作人員,一排排桌椅直對著大屏,長期如此,工作人員會受不了的。屏幕內(nèi)容需要動靜之分。大屏以暗色為主,視覺更容易集中在上面的某處焦點(亮色為主的信息之上)。



          3  地圖、線路圖及上面地點概況信息的設(shè)計、動效渲染。

          一個好的流程可以讓我們事半功倍,可視化的設(shè)計流程主要有分析數(shù)據(jù)、匹配圖形、優(yōu)化圖形、檢查測試。首先,在了解需求的基礎(chǔ)上分析我們要展示哪些數(shù)據(jù),包含元數(shù)據(jù)、數(shù)據(jù)維度、查看的視角等;其次,我們利用可視化工具,根據(jù)一些已固化的圖表類型快速做出各種圖表;然后優(yōu)化細節(jié);最后檢查測試。

          • 有原始數(shù)據(jù),通過對原始數(shù)據(jù)進行標(biāo)準(zhǔn)化、結(jié)構(gòu)化的處理,把它們整理成數(shù)據(jù)表。這是程序員的事
          • 將這些數(shù)值轉(zhuǎn)換成視覺結(jié)構(gòu)(包括形狀、位置、尺寸、值、方向、色彩、紋理等),通過視覺的方式把它表現(xiàn)出來。例如將高中低的風(fēng)險轉(zhuǎn)換成紅黃藍等色彩,數(shù)值轉(zhuǎn)換成大小。想要清楚地展現(xiàn)數(shù)據(jù),就要先了解所要繪制的數(shù)據(jù),如元數(shù)據(jù)、維度、元數(shù)據(jù)間關(guān)系、數(shù)據(jù)規(guī)模等。這是設(shè)計師的事。

          QQ截圖20170410110508.png








          • 將視覺結(jié)構(gòu)進行組合,把它轉(zhuǎn)換成圖形傳遞給用戶,用戶通過人機交互的方式進行反向轉(zhuǎn)換,去更好地了解數(shù)據(jù)背后有什么問題和規(guī)律。這是程序員和設(shè)計師配合的事情。有地圖鉆取、區(qū)域展示信息功能,從數(shù)據(jù)庫中調(diào)取的即時數(shù)據(jù)運算后呈現(xiàn)在地圖上,在顯示上需要強大的算法渲染,根據(jù)數(shù)據(jù)量有顯示的密度不同,顯示的時候有動態(tài)效果,動畫效果,有些可以用現(xiàn)成的控件,柱狀圖、直方圖、圓形圖這些控件可以用第三方開源的控件,比如百度echart等,沒有控件的需要花比較多的代價去開發(fā),實現(xiàn)效果需與后臺程序員商議。有些要使用可縮放矢量圖形(SVG),SVG是矢量格式,在任何分辨率下的顯示效果都很好。有基本的CSS規(guī)則控制設(shè)計。
          • 大屏的實時效果是加入數(shù)據(jù)之后才能看到整體,是一個不斷的調(diào)整過程,進一步優(yōu)化維度、動效和數(shù)量。
          • 維度:每個維度,只用一種表現(xiàn),清晰易懂;動效:考慮時間和情感的把控,從原來的1.5ms改為3.5ms;數(shù)量:考慮了太密或太疏時用戶的感受,對圓的半徑做了統(tǒng)一大小的處理。
          • 最后還需要檢查測試,從頭到尾過一遍是否滿足需求;實地投放大屏幕后,用戶是否方便閱讀;動效能否達到預(yù)期,色差是否能接受;用戶能否理解。

          QQ截圖20170410110518.png


          【延深閱讀】



          0020B1wxzy7a6Q1iO9m8c&690.jpg


          4、面積巨大——用戶站遠才能看全內(nèi)容(所以字也不能設(shè)計很小)。字體大,對比強,要看清楚,分層次。



          5、不可操作,沒有滾動條——大屏主要用來給來賓觀看的,來賓一般不會直接操作大屏。不同主題之間的輪播順序及速度是事先設(shè)定好的。大屏沒有滾動條,它的長寬都是固定的。



          6、統(tǒng)計信息——每一整屏都有具體想給來賓表達某個主題,大屏一般是用來看某個內(nèi)容的統(tǒng)計概況信息。


          0020B1wxzy7a6QoRVdff1&690.jpg

          0020B1wxzy7a6QoWyz3b5&690.jpg

          0020B1wxzy7a6Qp1BLg8e&690.jpg

          0020B1wxzy7a6QpbIX537&690.jpg


          大屏幕界面設(shè)計應(yīng)用案例欣賞:

          北京藍藍設(shè)計作品:    太極集團承接的中央臺應(yīng)急指揮中心大屏



          北京藍藍設(shè)計作品:   中國移動互聯(lián)網(wǎng)監(jiān)控大屏可視化設(shè)計及開發(fā)


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


          相關(guān)文章 


          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          日本久久久久久中文字幕| 久久精品中文无码资源站| 99久久精品国产一区二区| 日韩一区二区三区视频久久| 99久久精品国内| 色综合久久天天综合| 久久成人永久免费播放| 亚洲午夜久久久久久噜噜噜| 久久久久人妻一区精品性色av| 久久综合九色综合网站| 久久亚洲AV无码精品色午夜| 国产精品久久久久久久人人看| 一本久道久久综合狠狠爱| 亚洲精品无码久久久久久| 亚洲欧美日韩精品久久| 亚洲愉拍99热成人精品热久久| 亚洲综合精品香蕉久久网97| 久久久WWW成人| 国产成人精品久久免费动漫| 亚洲国产精品无码久久青草 | 久久综合狠狠综合久久| 久久99国产精品一区二区| 亚洲人成无码久久电影网站| 国产午夜电影久久| 久久91精品久久91综合| 中文字幕精品久久| 久久国产乱子伦精品免费午夜| 久久发布国产伦子伦精品| 婷婷久久综合| 欧美成a人片免费看久久| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 色噜噜狠狠先锋影音久久| 久久婷婷五月综合国产尤物app| 女同久久| 久久亚洲国产欧洲精品一| 综合网日日天干夜夜久久| 久久无码人妻精品一区二区三区| av午夜福利一片免费看久久| 伊人久久大香线蕉AV色婷婷色 | 久久精品国产只有精品66| 人人狠狠综合久久88成人|