超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

大屏ui設(shè)計(jì)系列之十三:阿里巴巴三萬(wàn)億大屏項(xiàng)目

2017-8-5    藍(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á)方式。

前一段參加ixdc大屏數(shù)據(jù)可視化設(shè)計(jì)的工作坊,聽(tīng)阿里的交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師講淘寶大屏設(shè)計(jì)的理念和過(guò)程,回來(lái)繼續(xù)收集一些資料做為學(xué)習(xí)和理解,

分享如下:

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

項(xiàng)目背景:

2016年3月,阿里巴巴中國(guó)零售交易市場(chǎng)2016財(cái)年商品交易即時(shí)總額即將突破三萬(wàn)億,這是阿里歷史性的一刻,也見(jiàn)證了消費(fèi)的力量, 為了記錄這一歷史時(shí)刻,三萬(wàn)億大屏項(xiàng)目應(yīng)運(yùn)而生。


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

c4c55733e2f16ac7252631b1de04.jpg

 對(duì)于頁(yè)面風(fēng)格,主要要求是要帶一點(diǎn)喜慶的氛圍。那么我們?cè)谟蒙暇筒荒芴^(guò)沉悶單調(diào)。另一方面由于這是一個(gè)數(shù)據(jù)大屏,那么數(shù)字就是當(dāng)之無(wú)愧的主角,從這個(gè)角度出發(fā),整個(gè)頁(yè)面的風(fēng)格還要透著嚴(yán)謹(jǐn)和專(zhuān)業(yè)。太過(guò)喜慶有可能流于輕浮,太過(guò)嚴(yán)謹(jǐn)則可能顯得沉悶乏味,無(wú)法調(diào)動(dòng)用戶的興趣。如何平衡這兩種調(diào)性,這是本項(xiàng)目的一個(gè)難點(diǎn)。

從以上這個(gè)出發(fā)點(diǎn),我們梳理了這樣一個(gè)思路。


547d5730398e32f8755a5212b9e5.jpg


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

 

以下是團(tuán)隊(duì)成員進(jìn)行的一些初步的嘗試



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



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

a94957303a0632f8755a52185743.jpg


下圖中為字體運(yùn)用方案

f1ad57303a9832f8755a5241d5a2.jpg

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



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



在我們擁有版權(quán)的字體庫(kù)中并沒(méi)有一款專(zhuān)門(mén)針對(duì)大屏顯示的數(shù)字字體,因此我們重新設(shè)計(jì)了一款數(shù)字字體,使其具有較高的可讀性和美觀度。

588757303bb232f8755a52b8c988.jpg

到此整個(gè)大屏的設(shè)計(jì)過(guò)程已經(jīng)梳理完畢。由于項(xiàng)目時(shí)間倉(cāng)促,本項(xiàng)目中依然有很多不完美之處,但每一次的歷練都是下一次成長(zhǎng)的基礎(chǔ)。更多經(jīng)驗(yàn)分享敬請(qǐng)期待。

藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、大屏設(shè)計(jì)、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

相關(guān)文章  


分享本文至:

日歷

鏈接

個(gè)人資料

存檔