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

一站式創(chuàng)新設(shè)計:天氣應(yīng)用驚艷登場前言如何使一個應(yīng)用在眾多同類競品中脫穎而出?作為全球最普遍的應(yīng)用之一：天氣,是為大家所再熟識不過的了,今日和大家一起聊聊我們?nèi)绾卧O(shè)計并完成這個與眾不同的天氣應(yīng)用.不久前,我們(騰訊用戶討論與體驗設(shè)計部,簡稱ＣDC）接到并開頭籌劃啟動這樣一個全新的天氣類設(shè)計項目,此前我們曾不止一次的進行過天氣類的設(shè)計，其中也包括現(xiàn)在廣為流傳的QＱ上的天氣類htｔp：／/ｗｗw.boｂ／design/hｊyｓ＂＼t＂＿blank"環(huán)境,而在用戶虛擬環(huán)境的因素考慮中,我們盼望傳達給用戶的隱喻信息并非在烈日當空的驕陽或大雨滂沱的雨地里,而是在HYPERLINＫ＂ｈtｔp://www.bobｄ.ｃn／design/hjｙｓ/sn＂\ｔ＂_bｌank”室內(nèi)，透過桌前或天花板的玻璃窗觀看到外界的氣象變化；在這個環(huán)境的基礎(chǔ)上,協(xié)作設(shè)計目標，我們確定了將明確的ＨYPERＬIＮK"httｐ：//wwｗ.bｏbｄ.cn/ｄesｉgｎ/hｊys/eｘ”＼t”_ｂlａnk”展現(xiàn)信息打在玻璃上使之成為整個環(huán)境的第一層、而玻璃介質(zhì)的設(shè)計為其次層，考慮到玻璃為透明介質(zhì),因此設(shè)計中增加了一部分光線的漫反射,目前的漫反射考慮了一些美觀因素取消了一些不必要的物體投影,否則用３D軟件模擬出的漫反射效果將會較大的擾亂玻璃窗后的主體世界過于喧賓奪主;玻璃窗的背后,則是一個真實的氣象環(huán)境模擬，也是最花費設(shè)計的一項工作.【圖２】天氣應(yīng)用的設(shè)計實現(xiàn)，上圖中的環(huán)境為第一版的晴天，但因顏色與HYPERLＩNK”ｈttp：/／www．bobd．cn/design／CＧ"\t＂_ｂｌaｎk"動畫效果等緣由未能收錄至第一版的天氣包中，我們也逐漸意識到設(shè)計是一個實踐與動態(tài)呈現(xiàn)的過程,靜態(tài)的畫面再優(yōu)雅但呈現(xiàn)出來就可能完全不是那么一回事，下面我們來回顧一下幾個最折騰的天氣設(shè)計的過程。天氣的設(shè)計【圖3】構(gòu)圖上，我們漸漸明確了從散點式，水平式到焦點式的過度，這個有助于平衡左邊的文字區(qū)域,也使焦點集中在某一個物體中。從而有機會可以虛化畫面其他部分,使畫面的變化更多.畫面更加平衡?！緢D4】顏色上,整個小Q天氣使用的顏色會偏冷色調(diào)。除沙塵暴天氣以外，基本上都在藍灰色調(diào)上，緣由在于取景主要以天空為主，以自然景色為主。雖然都是在藍色調(diào)上徘徊，但也少范圍地在冷色調(diào)的基礎(chǔ)上增加了一些暖色作為點綴,如在藍色的陰天里加入暖黃的光,以減弱冷色系給人帶來的冰冷感?！緢D５】霧天是我們第一個嘗試的天氣，也是探干脆最強的一個。取景造型上，可以看到從早期設(shè)計的鄉(xiāng)村街道到高樓大廈,從鋪滿霞光的公路到彌漫著HYＰEＲLIＮK”http://wwｗ．bｏｂ/ｄesｉgｎ/speｃial/China"\t”_ｂlａnk”中國風(fēng)的河道。設(shè)計過程中，我們都做了多番的對比和校正。最后使用了燈塔這個比較有代表性的元素。一來便利于聚焦視覺焦點。另外在冷色系里面添加黃色的暖光旨在增加平坦感.如大霧天的季節(jié)，總是接二連三的濕氣彌漫,溫度雖可能不低,但給人的感覺是陰冷的。在這個時候的場景取色上增加暖光,感覺將是較舒適的。【圖６】上半圖為晴天的向光的天氣展現(xiàn)，下半圖為背光的天氣。雖然有太陽的圖片更加直觀地感受到天晴的氛圍。但是由于一般情況，人眼被太陽直射都會感覺到不適.而背向陽光觀察事物的時候卻是清楚、舒適，因此下半圖的設(shè)計我們強調(diào)的是給人愉悅的感覺，在一輪反復(fù)驗證之后，下圖的方案被采納，并且也很快在用戶的反饋中得到了肯定的聲音.【圖7】在運動之中取巧,雖然動畫引擎格外強大，供應(yīng)了包括skyｂox等多種的運動模式，但是我們運用得最多的仍是平移。很多設(shè)計都是基于平移的基礎(chǔ)上進行的。緣由在于一個圖片在X和Y軸上的平移，占用的機器性能是最少的.SＫＹＢOＸ天穹這個設(shè)計的靈感來源于廣角的鏡頭拍攝效果以及當前格外流行的FPS（FirstPersｏｎＳｈｏｏtiｎｇ）第一人稱視角射擊游戲，其技術(shù)也借鑒了FPS的核心實現(xiàn)，從而制造出更真實流淌的天空效果,協(xié)作不同的氣象現(xiàn)象以準時間變化，我們盼望這是整個設(shè)計中最流光溢彩的亮點?！緢D8】ＳＫYBＯX天穹的設(shè)計有很強的應(yīng)用場景，甚至我們可以將ＳOＳＯ全景的資源從網(wǎng)絡(luò)上調(diào)用進來呈現(xiàn)該城市的地標HYPＥRLINK＂httｐ：//www.bobd。ｃn/ｄesign/ｈｊys/jｚ”＼t＂_blａnk＂建筑,這個瘋狂的想法還在實現(xiàn)中;上圖取自正在設(shè)計中的其次版高清皮膚。OｐeｎＧL＋ＸPlayer引擎與設(shè)計的融合“最逼真的效果應(yīng)是拍攝一段視頻并將之剪輯播放“，設(shè)計之初大家都如是認為,但與逼真的效果同樣需要考量的是用戶的機器硬件配置:任何一臺ＰＣ設(shè)備,在播放視頻時的消耗都是格外大的，我們并不盼望摧毀用戶的主機;同時，與ｉＰhonｅ等智能終端不同，Ｗindow基于其多進程的理念，因此其上的產(chǎn)品體驗大都為非獨占式的(大型游戲除外),也就是您幾乎不行能只在WINDOWＳ下只運行天氣這一個程序;除此以外,如果大量引入視頻,軟件的尺寸則會變得特別浩大，而產(chǎn)品在１M左右的預(yù)想也變?yōu)椴恍心?，最終我們堅決的放棄了這個念頭。OｐenGL作為當今主流的圖形ＡＰI之一,成為我們所采納的3Ｄ部分引擎展現(xiàn)接口，不僅僅由于其高性能的視覺圖形渲染特性,還有其格外好的跨平臺特點;而自行研發(fā)ＸＰl(wèi)ａyｅr的框架則是為了適應(yīng)Ｗiｎdｏws系統(tǒng)上進行更加平滑的視覺渲染所構(gòu)建的動畫引擎，通過這套引擎規(guī)章，我們可以讓設(shè)計師更加自由的創(chuàng)建并模擬天氣世界的各種物體,比如不斷升騰的霧氣.【圖9】霧是在HYPEＲＬＩNＫ”ｈttp：//www.bobd．cｎ／desiｇn／speciaｌ/Chinａ”\t”_blaｎk”中國大多數(shù)城市比較罕見的天氣現(xiàn)象，而對于霧的效果模擬也是設(shè)計團隊最早進行的嘗試,我們通過對大量真實霧天的圖片與視頻的觀察最終完成了霧的模擬；雨雪天氣在眾多自然界氣候現(xiàn)象里格外普遍，但因其隨機性較難模擬，通過對隨機粒子的貼圖與視角轉(zhuǎn)換，我們分別實現(xiàn)了從天窗降落的雨滴以及平鋪的雪花效果的模擬，當然,我們也在腳本過