前言

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

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

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

目錄

       設(shè)計目標

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

       天氣的設(shè)計

       SKYBOX天穹系統(tǒng)

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

設(shè)計目標：創(chuàng)造體驗峰值

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

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

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

【圖1】體驗峰值

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

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

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

天氣的設(shè)計

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

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

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

標簽： 創(chuàng)新設(shè)計 動畫引擎 小Q天氣 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。