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ù)可視化的表達方式。
下面文章為從網(wǎng)上搜集的，作為大屏設(shè)計資料的參考。
1.面積巨大——用戶站遠才能看全內(nèi)容（所以字也不能設(shè)計很?。?。
2.深色背景——緊張感強，讓視覺更好的聚焦，省電。
3.不可操作——大屏主要用來給來賓觀看的。來賓一般不會直接操作大屏。
4.空間局限——大屏不像網(wǎng)頁有滾動條，它的長寬都是固定的。
5.單獨主題——每塊大屏都有具體想給來賓表達某個主題
知道了這些，如果我們遇到一個具體的大屏項目，要怎么來設(shè)計呢？
下面我將自己經(jīng)歷過的項目和思考過程和大家分享下。
以下是我自己總結(jié)出來的設(shè)計步驟：
需要調(diào)研的點：
1.大屏的主題——這個屏要個來賓看什么信息（要規(guī)避哪些信息）
2.數(shù)據(jù)的權(quán)威和準(zhǔn)確性——對具體要展示的信息進行數(shù)據(jù)的核對正常數(shù)據(jù)是多少，歷史上極限數(shù)據(jù)是多少?
3.用戶的其他需求點——用戶說要用TOP10，但有時候只是用戶只知道TOP能表達，還有很多形式也能表示TOP的信息。
案例：
部門準(zhǔn)備做一系列專門描述特定業(yè)務(wù)場景的大屏。他們即統(tǒng)一（整體大風(fēng)格），又有區(qū)別（每個業(yè)務(wù)要有自己的特點）
我們?yōu)榱吮苊庠诤笃诖蠹矣酗L(fēng)格上的分歧而不斷修改造成項目的延期。決定盡快讓需求方確定風(fēng)格。
我們使用的快速可行性測試（2013年IXDC上微軟分享過，我們做了更加符合當(dāng)前業(yè)務(wù)的修改）。目的是讓大家快速確定風(fēng)格。保證大家的目標(biāo)統(tǒng)一。
最后我們確定了緊張，科技，權(quán)威，豐富。并且會每個關(guān)鍵詞進行了專門的理解。
緊張：數(shù)據(jù)的實時，動效的變化
科技：新穎的圖表，新穎的動效
豐富：數(shù)據(jù)豐富，豐富層次感，圖表類型多，強烈的空間感
權(quán)威：安全元素。
接下來是對每個數(shù)據(jù)的chick，知道每個數(shù)據(jù)代表什么，用什么展現(xiàn)最好。
從和業(yè)務(wù)溝通了解到，他們需要地圖，top10，餅圖，列表，數(shù)字，趨勢，這些圖表。這些能滿足他們目前所有的需求。
但是如果在多有的屏上都只放這些元素，展現(xiàn)上會缺乏很多心意，業(yè)務(wù)差別性也不好體現(xiàn)。所以需要對每個需求再剖析。
在這一步，需要重點做到以下幾點，幫助我們分析，理清思路。
1.拆分維度——將需求拆分到最小維度
2.確定優(yōu)先——選擇最佳數(shù)據(jù)來說明觀點。
3.合并維度——對維度元素進行歸類，化繁為簡。
4.最佳表現(xiàn)——確定用哪種表現(xiàn)形式來體現(xiàn)數(shù)據(jù)。
舉例：在做這一系列的具體某一個屏?xí)rA業(yè)務(wù)需要大屏展示的內(nèi)容：我們的業(yè)務(wù)針對特定區(qū)域的保護，正在實時防御著世界各地多類型的攻擊。能看到每個攻擊類型的當(dāng)天累加值和趨勢。
對于這個內(nèi)容，我們先進行拆分維度。你們能看到多少維度呢？（一定要拆到最小維度）
因為重點要表達的是我們防住了這些攻擊——表達這種自豪的情感。所以我們在來確定這些維度的主次優(yōu)先級。
看這些主要的維度有沒有可能進行合并呢？對這些信息進行相似度歸類，化繁為簡。關(guān)聯(lián)性最多的維度用同一種顏色表示，畫出所有的關(guān)系。
上圖表示，所有的維度互相關(guān)系。我們可以發(fā)現(xiàn)時間維度和所有的內(nèi)容都有聯(lián)系。但是時間又是個隱形的內(nèi)容，大屏上的數(shù)據(jù)為了表示緊張性，時間如果是實時展現(xiàn)的。那么這個維度在設(shè)計的時候不必要用某個具體的視覺元素來表現(xiàn)，是通過在時間節(jié)點上的動效變化來表現(xiàn)的。所以我們把這時間線去掉看效果。
效果清爽了不少，但是線還是很交錯的不方便閱讀和理解。對交錯關(guān)系的維度進行位置的調(diào)整。
攻擊類型：他和次要維度都有關(guān)聯(lián)。
攻擊仿效：和保護點和地獄有交錯。
我們可以看到主圖的關(guān)系中。攻擊點是所有維度中關(guān)聯(lián)性最強的。供給量和攻擊類型可以是他的屬性。地獄是攻擊點和保護點的屬性。
這樣重點就是攻擊點到被攻擊點的過程了。
各類型日累計量可以通過計數(shù)器來表達。各攻擊趨勢可以通過趨勢圖來表現(xiàn)。剩下的就是這么來設(shè)計這張地圖了。
在第二步的時候已經(jīng)將大部分分析工作都做完了，現(xiàn)在要做的是如何對這張地圖來表達我們的想給來賓傳達的信息。
在這塊主要是細節(jié)和感受的設(shè)計。設(shè)計順序：
1.模塊設(shè)計——長久考慮的模塊縱橫柵格布局設(shè)計還是不顧延展性把只為這一個屏的精致。
2.維度表現(xiàn)——具體維度用什么表現(xiàn)的確定。
3.動效設(shè)計——時間的把握和情感的控制。
4.數(shù)量控制——對實施數(shù)據(jù)的不可控性進行展現(xiàn)上的控制?？紤]頁面最后出現(xiàn)的時候太密或太疏是用戶的感受。
大屏和其他顯示屏一樣，本身都是有固定分辨率的。一般是4*3的比例。在設(shè)計時考慮到通用性，可以優(yōu)先考慮1024*768。如果設(shè)計師追求更加的表現(xiàn)，可以根據(jù)每個大屏本身的像素塊的多少來設(shè)計。比如：1400*1050或5600*3150
考慮到同系列的屏幕會有相同展現(xiàn)形式，使用相同組件，可以對大屏進行柵格。
大屏是橫縱都固定的，可以采用橫縱都12柵格的方式。
在第二步中我們已經(jīng)確定只要重點在地圖上表現(xiàn)出不同緯度：地域，攻擊點，保護點，方向，攻擊大小，攻擊類型。
這些內(nèi)容就要運用到數(shù)據(jù)可視化的知識了。
基本的表現(xiàn)形式有：大小，位置，形狀，顏色
對每個表現(xiàn)進行思考：
位置——地域：顯而易見。但是什么樣的地圖符合我們的場景呢？
如上圖，在考慮使用世界地圖還是中國地圖的時候發(fā)現(xiàn)業(yè)務(wù)上，國內(nèi)攻擊很多，而國外很少。而且需要看到的國內(nèi)的能到地級市，國外的到洲或者國家就行了，最后我們創(chuàng)新除了第三種，以中國為主的世界地圖來展現(xiàn)。
形狀——攻擊點，保護點，方向：作為體現(xiàn)情感的重點體現(xiàn)，可以對保護點做盾牌的形狀；攻擊點用普通的用戶能第一時間理解的感覺到的形狀比如圓（因為數(shù)量過多時展現(xiàn)最為清晰）；用有方向感的連線連接攻擊點和保護點來表示方向。
大小，顏色——怎么來處理呢？放在哪個維度上表現(xiàn)呢？
圓的視覺沖擊力最強，可以清晰的同時表現(xiàn)大小和顏色。所有把方案一、三、五排除掉了。
當(dāng)數(shù)據(jù)量很大的情況下，會有很多線出現(xiàn)，這是很難分清楚這些線是那些哪個線，線需要有顏色區(qū)別。所以排除方案二。
現(xiàn)在只剩下方案四和方案六：
上圖可以看出：方案六的情況下在看圓的時候會受連線粗細的干擾，連線之間也會被遮住從而干擾視線，所以確定用方案四。
確定好了這些表現(xiàn)方式之后，對每個表現(xiàn)方式做數(shù)據(jù)量化變現(xiàn)和動效的處理：
小插曲：在設(shè)計動效的時候還想通過動效的節(jié)奏來體現(xiàn)攻擊量的大小，比如頻率越快，表示的攻擊的量越大，后來實現(xiàn)中發(fā)現(xiàn)這樣畫面會更加的雜亂。
結(jié)論：每個維度，只用一種表現(xiàn)。即清晰又易懂。
1.REVIEW需求——過一遍需求是不是能夠滿足。
2.實地測試——將效果放上大屏，看是否方便閱讀，動效是否達到預(yù)期，色差是否能接受。
3.可信性測試——當(dāng)自己的講解員，給用戶講解大屏。能否一句話描述大屏，同時用戶能夠理解。
設(shè)計大屏一定是一個長期跟進的過程。有很多問題會在真正數(shù)據(jù)進來了，放在大屏上顯示才能發(fā)現(xiàn)。
在這個屏中我們改過的細節(jié)：
① tab的展現(xiàn)和圖例結(jié)合，省空間，同時方便理解。
② 線到達保護點之前攻擊點不消失（讓用戶能夠回述到攻擊源）
③ 保護點更加有動感，情感更加豐富，攻擊到達的時候才瞬間出現(xiàn)盾牌，攻擊結(jié)束后才漸變消失。
④ 在電腦上看整體地圖顏色偏暗，但是到了大屏上看效果正好。所以對地圖背景進行調(diào)暗。
希望這篇文章能幫助到做可視化設(shè)計，大屏設(shè)計的同學(xué)們。
感謝作者騎象的投遞。
北京藍藍設(shè)計作品： 太極集團承接的中央臺應(yīng)急指揮中心大屏
北京藍藍設(shè)計作品： 中國移動互聯(lián)網(wǎng)監(jiān)控大屏可視化設(shè)計及開發(fā)
藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(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://www.alimai.net