前言

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

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

于是在過去的六周時(shí)間里，整個(gè)團(tuán)隊(duì)通過非常高效的溝通與迭代使得設(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)（峰終理論）。而在過程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長(zhǎng)短，對(duì)記憶差不多沒有影響。

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

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

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

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

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

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

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

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

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

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

標(biāo)簽： 創(chuàng)新設(shè)計(jì) 動(dòng)畫引擎 小Q天氣 

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