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