2017-8-5 藍藍設計的小編
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計經常會接到大屏設計的項目，比如中國移動互聯網監控大屏可視化設計及開發、太極集團承接的中央臺應急指揮中心大屏可視化設計、交大思源承接的北京地鐵軌道批揮中心大屏可視化設計、數碼視訊展廳大屏可視化設計，在積累了一定經驗的同時，也在不斷的學習和豐富關于大屏設計的特點及數據可視化的表達方式。
前一段參加ixdc大屏數據可視化設計的工作坊，聽阿里的交互設計師和視覺設計師講淘寶大屏設計的理念和過程，回來繼續收集一些資料做為學習和理解，
分享如下：
，
原文鏈接：http://www.zcool.com.cn/article/ZNDA1MDM2.html
項目背景：
2016年3月，阿里巴巴中國零售交易市場2016財年商品交易即時總額即將突破三萬億，這是阿里歷史性的一刻，也見證了消費的力量， 為了記錄這一歷史時刻，三萬億大屏項目應運而生。
我們先看一下最終的上線效果
對于頁面風格，主要要求是要帶一點喜慶的氛圍。那么我們在用色上就不能太過沉悶單調。另一方面由于這是一個數據大屏，那么數字就是當之無愧的主角，從這個角度出發，整個頁面的風格還要透著嚴謹和專業。太過喜慶有可能流于輕浮，太過嚴謹則可能顯得沉悶乏味，無法調動用戶的興趣。如何平衡這兩種調性，這是本項目的一個難點。
從以上這個出發點，我們梳理了這樣一個思路。
當然這只是初步的感覺，是浮在空中的調性，想要將理念落地，還必須將這些抽象的調性落實為具體的像素、色值、字體乃至整個版式。
以下是團隊成員進行的一些初步的嘗試
在后期實際投屏調試的過程中發現，絕大多數大屏都會有色彩不飽和、屏幕黯淡發灰的情況。所以在最終稿里我們把內容區域的亮度提高了一個量級。比如將大標題設為白色，數字翻牌器設為正黃色，輔助說明文字也改為白色。之所以選正黃色和白色，是因為這兩種色彩屬于安全色，能夠在絕大多數設備上原樣呈現，很少出現色差。同時黃色是整個色相輪中明度最高的顏色，能夠與深藍色的背景形成最大的對比度。
下圖中為基礎配色方案
下圖中為字體運用方案
在制作的過程中前端同學提議，地平線上的太陽可以隨著數值增長冉冉升起，當數據達到三萬億時太陽升到最高點。這一想法得到了大家的一致認可。因此后臺數據就和前臺的視覺產生了聯動性，它除了給觀眾一種心理上的暗示，也為主持人增加了一個噱頭。在此為前端小伙伴點贊。下面就是當數據到達三萬億之后的畫中畫界面。
在這三萬億數據的背后，是無數的剁手黨。所以三萬億不只是屏幕上的一串串數據，它更是形形色色的消費者。在這里更要為他們點一個大大的贊。值得一說的是，這張屏幕中的地球并不是單純的靜態圖片，它是一個調用了實際數據的3D模型，并且可以定位到縣一級行政坐標。在這里我們生成了一張點陣地圖作為球體的貼圖。
在我們擁有版權的字體庫中并沒有一款專門針對大屏顯示的數字字體，因此我們重新設計了一款數字字體，使其具有較高的可讀性和美觀度。
到此整個大屏的設計過程已經梳理完畢。由于項目時間倉促，本項目中依然有很多不完美之處，但每一次的歷練都是下一次成長的基礎。更多經驗分享敬請期待。
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、大屏設計、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、大平面設計服務
相關文章