无码一区二区三区中文字幕

大屏ui設(shè)計系列之十三:阿里巴巴三萬億大屏項目

2017-8-5 藍藍設(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ù)可視化的表達方式。

前一段參加ixdc大屏數(shù)據(jù)可視化設(shè)計的工作坊，聽阿里的交互設(shè)計師和視覺設(shè)計師講淘寶大屏設(shè)計的理念和過程，回來繼續(xù)收集一些資料做為學(xué)習(xí)和理解，
分享如下：

，

原文鏈接：http://www.zcool.com.cn/article/ZNDA1MDM2.html

項目背景：

2016年3月，阿里巴巴中國零售交易市場2016財年商品交易即時總額即將突破三萬億，這是阿里歷史性的一刻，也見證了消費的力量，為了記錄這一歷史時刻，三萬億大屏項目應(yīng)運而生。

我們先看一下最終的上線效果

對于頁面風(fēng)格，主要要求是要帶一點喜慶的氛圍。那么我們在用色上就不能太過沉悶單調(diào)。另一方面由于這是一個數(shù)據(jù)大屏，那么數(shù)字就是當(dāng)之無愧的主角，從這個角度出發(fā)，整個頁面的風(fēng)格還要透著嚴(yán)謹(jǐn)和專業(yè)。太過喜慶有可能流于輕浮，太過嚴(yán)謹(jǐn)則可能顯得沉悶乏味，無法調(diào)動用戶的興趣。如何平衡這兩種調(diào)性，這是本項目的一個難點。

從以上這個出發(fā)點，我們梳理了這樣一個思路。

當(dāng)然這只是初步的感覺，是浮在空中的調(diào)性，想要將理念落地，還必須將這些抽象的調(diào)性落實為具體的像素、色值、字體乃至整個版式。

以下是團隊成員進行的一些初步的嘗試

在后期實際投屏調(diào)試的過程中發(fā)現(xiàn)，絕大多數(shù)大屏都會有色彩不飽和、屏幕黯淡發(fā)灰的情況。所以在最終稿里我們把內(nèi)容區(qū)域的亮度提高了一個量級。比如將大標(biāo)題設(shè)為白色，數(shù)字翻牌器設(shè)為正黃色，輔助說明文字也改為白色。之所以選正黃色和白色，是因為這兩種色彩屬于安全色，能夠在絕大多數(shù)設(shè)備上原樣呈現(xiàn)，很少出現(xiàn)色差。同時黃色是整個色相輪中明度最高的顏色，能夠與深藍色的背景形成最大的對比度。

下圖中為基礎(chǔ)配色方案

下圖中為字體運用方案

在制作的過程中前端同學(xué)提議，地平線上的太陽可以隨著數(shù)值增長冉冉升起，當(dāng)數(shù)據(jù)達到三萬億時太陽升到最高點。這一想法得到了大家的一致認(rèn)可。因此后臺數(shù)據(jù)就和前臺的視覺產(chǎn)生了聯(lián)動性，它除了給觀眾一種心理上的暗示，也為主持人增加了一個噱頭。在此為前端小伙伴點贊。下面就是當(dāng)數(shù)據(jù)到達三萬億之后的畫中畫界面。

在這三萬億數(shù)據(jù)的背后，是無數(shù)的剁手黨。所以三萬億不只是屏幕上的一串串?dāng)?shù)據(jù)，它更是形形色色的消費者。在這里更要為他們點一個大大的贊。值得一說的是，這張屏幕中的地球并不是單純的靜態(tài)圖片，它是一個調(diào)用了實際數(shù)據(jù)的3D模型，并且可以定位到縣一級行政坐標(biāo)。在這里我們生成了一張點陣地圖作為球體的貼圖。