一站式創(chuàng)新設(shè)計(jì)：天氣應(yīng)用驚艷登場(chǎng)

如何使一個(gè)應(yīng)用在眾多同類(lèi)競(jìng)品中脫穎而出?作為全球最普遍的應(yīng)用之一：天氣，是為大家所再熟悉不過(guò)的了，今天和大家一起聊聊我們?nèi)绾卧O(shè)計(jì)并完成這個(gè)與眾不同的天氣應(yīng)用。

　　不久前，我們(騰訊用戶(hù)研究與體驗(yàn)設(shè)計(jì)部，簡(jiǎn)稱(chēng)CDC)接到并開(kāi)始籌劃啟動(dòng)這樣一個(gè)全新的天氣類(lèi)設(shè)計(jì)項(xiàng)目，此前我們?cè)恢挂淮蔚倪M(jìn)行過(guò)天氣類(lèi)的設(shè)計(jì)，其中也包括現(xiàn)在廣為流傳的QQ上的天氣類(lèi)圖標(biāo)。而今次的整個(gè)過(guò)程因采用了一站式的設(shè)計(jì)流程(既體驗(yàn)設(shè)計(jì)階段集成高保真原型/前端實(shí)現(xiàn)輸出)，使得我們擁有了更自由的創(chuàng)新與細(xì)節(jié)實(shí)現(xiàn)的機(jī)會(huì)，對(duì)于我們這樣一個(gè)以創(chuàng)新與設(shè)計(jì)見(jiàn)長(zhǎng)的團(tuán)隊(duì)來(lái)講，這樣的機(jī)會(huì)更能夠幾乎好的將設(shè)計(jì)與體驗(yàn)實(shí)現(xiàn)至極致。

　　于是在過(guò)去的六周時(shí)間里，整個(gè)團(tuán)隊(duì)通過(guò)非常高效的溝通與迭代使得設(shè)計(jì)不斷與原型進(jìn)行著融合，最終成為成品。

目錄

　　設(shè)計(jì)目標(biāo)

　　設(shè)計(jì)實(shí)現(xiàn)

　　天氣的設(shè)計(jì)

　　SKYBOX天穹系統(tǒng)

　　OpenGL+XPlayer引擎與設(shè)計(jì)的融合

設(shè)計(jì)目標(biāo)：創(chuàng)造體驗(yàn)峰值

　　人們是感性的，我們對(duì)一項(xiàng)事物的體驗(yàn)之后，所能記住的就只是在高峰時(shí)與結(jié)束時(shí)的體驗(yàn)(峰終理論)。而在過(guò)程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長(zhǎng)短，對(duì)記憶差不多沒(méi)有影響。

　　想要讓用戶(hù)對(duì)小Q天氣產(chǎn)生深刻的記憶，就要在主要任務(wù)中打造一個(gè)正面情感的峰值?？刺鞖忸A(yù)報(bào)核心目的就是看天氣狀態(tài)和溫度。所以，我們決定在天氣狀態(tài)上，模擬真實(shí)的大自然場(chǎng)景，做動(dòng)態(tài)天氣，來(lái)為用戶(hù)營(yíng)造愉悅的產(chǎn)品體驗(yàn)。其他基本任務(wù)，達(dá)到使用方便舒適就好，在界面排布上也為突出動(dòng)態(tài)天氣信息。

　　如下圖所示，我們預(yù)設(shè)了重中之重的峰值點(diǎn)——?jiǎng)討B(tài)天氣：

　　【圖1】體驗(yàn)峰值

設(shè)計(jì)實(shí)現(xiàn)：透過(guò)窗戶(hù)看真實(shí)世界

　　基于創(chuàng)造體驗(yàn)峰值的設(shè)計(jì)目標(biāo)，在明確氣象信息的前提下設(shè)計(jì)動(dòng)態(tài)天氣給予用戶(hù)更強(qiáng)的視覺(jué)沖擊，從而更真實(shí)的還原當(dāng)前的氣候環(huán)境，而在用戶(hù)虛擬環(huán)境的因素考慮中，我們希望傳達(dá)給用戶(hù)的隱喻信息并非在烈日當(dāng)空的驕陽(yáng)或大雨滂沱的雨地里，而是在室內(nèi)，透過(guò)桌前或天花板的玻璃窗觀看到外界的氣象變化;在這個(gè)環(huán)境的基礎(chǔ)上，配合設(shè)計(jì)目標(biāo)，我們確定了將明確的展示信息打在玻璃上使之成為整個(gè)環(huán)境的第一層、而玻璃介質(zhì)的設(shè)計(jì)為第二層，考慮到玻璃為透明介質(zhì)，因此設(shè)計(jì)中增加了一部分光線的漫反射，目前的漫反射考慮了一些美觀因素取消了一些不必要的物體投影，否則用3D軟件模擬出的漫反射效果將會(huì)較大的擾亂玻璃窗后的主體世界過(guò)于喧賓奪主;玻璃窗的背后，則是一個(gè)真實(shí)的氣象環(huán)境模擬，也是最花費(fèi)設(shè)計(jì)的一項(xiàng)工作。

　　【圖2】天氣應(yīng)用的設(shè)計(jì)實(shí)現(xiàn)，上圖中的環(huán)境為第一版的晴天，但因顏色與動(dòng)畫(huà)效果等原因未能收錄至第一版的天氣包中，我們也逐漸意識(shí)到設(shè)計(jì)是一個(gè)實(shí)踐與動(dòng)態(tài)呈現(xiàn)的過(guò)程，靜態(tài)的畫(huà)面再優(yōu)雅但呈現(xiàn)出來(lái)就可能完全不是那么一回事，下面我們來(lái)回顧一下幾個(gè)最折騰的天氣設(shè)計(jì)的過(guò)程。天氣的設(shè)計(jì)

　　【圖3】構(gòu)圖上，我們慢慢明確了從散點(diǎn)式，水平式到焦點(diǎn)式的過(guò)度，這個(gè)有助于平衡左邊的文字區(qū)域，也使焦點(diǎn)集中在某一個(gè)物體中。從而有機(jī)會(huì)可以虛化畫(huà)面其他部分，使畫(huà)面的變化更多。畫(huà)面更加平衡。

　　【圖4】色彩上，整個(gè)小Q天氣使用的顏色會(huì)偏冷色調(diào)。除沙塵暴天氣以外，基本上都在藍(lán)灰色調(diào)上，原因在于取景主要以天空為主，以自然景色為主。雖然都是在藍(lán)色調(diào)上徘徊，但也少范圍地在冷色調(diào)的基礎(chǔ)上增加了一些暖色作為點(diǎn)綴，如在藍(lán)色的陰天里加入暖黃的光，以減弱冷色系給人帶來(lái)的冰冷感。

　　【圖5】霧天是我們第一個(gè)嘗試的天氣，也是探索性最強(qiáng)的一個(gè)。取景造型上，可以看到從早期設(shè)計(jì)的鄉(xiāng)村街道到高樓大廈，從鋪滿(mǎn)霞光的馬路到彌漫著中國(guó)風(fēng)的河道。設(shè)計(jì)過(guò)程中，我們都做了多番的對(duì)比和校正。最后使用了燈塔這個(gè)比較有代表性的元素。一來(lái)方便于聚焦視覺(jué)焦點(diǎn)。另外在冷色系里面添加黃色的暖光旨在增加溫暖感。如大霧天的季節(jié)，總是接二連三的濕氣彌漫，溫度雖可能不低，但給人的感覺(jué)是陰冷的。在這個(gè)時(shí)候的場(chǎng)景取色上增加暖光，感覺(jué)將是較舒適的。

　　【圖6】上半圖為晴天的向光的天氣展示，下半圖為背光的天氣。雖然有太陽(yáng)的圖片更加直觀地感受到天晴的氛圍。但是由于一般情況，人眼被太陽(yáng)直射都會(huì)感覺(jué)到不適。而背向陽(yáng)光觀察事物的時(shí)候卻是清晰、舒適，因此下半圖的設(shè)計(jì)我們強(qiáng)調(diào)的是給人愉悅的感覺(jué)，在一輪反復(fù)驗(yàn)證之后，下圖的方案被采用，并且也很快在用戶(hù)的反饋中得到了肯定的聲音。

　　【圖7】在運(yùn)動(dòng)之中取巧，雖然動(dòng)畫(huà)引擎非常強(qiáng)大，提供了包括skybox等多種的運(yùn)動(dòng)模式，但是我們運(yùn)用得最多的仍是平移。許多設(shè)計(jì)都是基于平移的基礎(chǔ)上進(jìn)行的。原因在于一個(gè)圖片在X和Y軸上的平移，占用的機(jī)器性能是最少的。

SKYBOX天穹

　　這個(gè)設(shè)計(jì)的靈感來(lái)源于廣角的鏡頭拍攝效果以及當(dāng)前非常流行的FPS(First Person Shooting)第一人稱(chēng)視角射擊游戲，其技術(shù)也借鑒了FPS的核心實(shí)現(xiàn)，從而創(chuàng)造出更真實(shí)流動(dòng)的天空效果，配合不同的氣象現(xiàn)象以及時(shí)間變化，我們希望這是整個(gè)設(shè)計(jì)中最流光溢彩的亮點(diǎn)。

　　【圖8】SKYBOX天穹的設(shè)計(jì)有很強(qiáng)的應(yīng)用場(chǎng)景，甚至我們可以將SOSO全景的資源從網(wǎng)絡(luò)上調(diào)用進(jìn)來(lái)呈現(xiàn)該城市的地標(biāo)建筑，這個(gè)瘋狂的想法還在實(shí)現(xiàn)中;上圖取自正在設(shè)計(jì)中的第二版高清皮膚。

OpenGL+XPlayer引擎與設(shè)計(jì)的融合

　　“最逼真的效果應(yīng)是拍攝一段視頻并將之剪輯播放“，設(shè)計(jì)之初大家都如是認(rèn)為，但與逼真的效果同樣需要考量的是用戶(hù)的機(jī)器硬件配置：任何一臺(tái)PC設(shè)備，在播放視頻時(shí)的消耗都是非常大的，我們并不希望摧毀用戶(hù)的主機(jī);同時(shí)，與iPhone等智能終端不同，Window基于其多進(jìn)程的理念，因此其上的產(chǎn)品體驗(yàn)大都為非獨(dú)占式的(大型游戲除外)，也就是您幾乎不可能只在WINDOWS下只運(yùn)行天氣這一個(gè)程序;除此以外，如果大量引入視頻，軟件的尺寸則會(huì)變得異常龐大，而產(chǎn)品在1M左右的預(yù)想也變?yōu)椴豢赡?，最終我們堅(jiān)決的放棄了這個(gè)念頭。

　　OpenGL作為當(dāng)今主流的圖形API之一，成為我們所采用的3D部分引擎展現(xiàn)接口，不僅僅因?yàn)槠涓咝阅艿囊曈X(jué)圖形渲染特性，還有其非常好的跨平臺(tái)特點(diǎn);而自行研發(fā)XPlayer的框架則是為了適應(yīng)Windows系統(tǒng)上進(jìn)行更加平滑的視覺(jué)渲染所構(gòu)建的動(dòng)畫(huà)引擎，通過(guò)這套引擎規(guī)則，我們可以讓設(shè)計(jì)師更加自由的創(chuàng)建并模擬天氣世界的各種物體，比如不斷升騰的霧氣。

　　【圖9】霧是在中國(guó)大多數(shù)城市比較罕見(jiàn)的天氣現(xiàn)象，而對(duì)于霧的效果模擬也是設(shè)計(jì)團(tuán)隊(duì)最早進(jìn)行的嘗試，我們通過(guò)對(duì)大量真實(shí)霧天的圖片與視頻的觀察最終完成了霧的模擬;

　　雨雪天氣在眾多自然界氣候現(xiàn)象里非常普遍，但因其隨機(jī)性較難模擬，通過(guò)對(duì)隨機(jī)粒子的貼圖與視角轉(zhuǎn)換，我們分別實(shí)現(xiàn)了從天窗降落的雨滴以及平鋪的雪花效果的模擬，當(dāng)然，我們也在腳本過(guò)程中加入了風(fēng)的隨機(jī)因素來(lái)更好的展現(xiàn)該粒子自然的效果;

標(biāo)題名稱(chēng)：一站式創(chuàng)新設(shè)計(jì)：天氣應(yīng)用驚艷登場(chǎng)
URL鏈接：http://muchs.cn/news/163662.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、建站公司、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)