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

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

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

目錄

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

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

　　天氣的設(shè)計

　　SKYBOX天穹系統(tǒng)

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

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

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

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

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

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

設(shè)計實(shí)現(xiàn)：透過窗戶看真實(shí)世界

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

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

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

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

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

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

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

SKYBOX天穹

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

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

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

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

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

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

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

文章名稱：一站式創(chuàng)新設(shè)計：天氣應(yīng)用驚艷登場
當(dāng)前鏈接：http://jinyejixie.com/news12/163662.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、App開發(fā)、靜態(tài)網(wǎng)站

廣告

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