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