前言

在百度上搜索“天氣”，你會發(fā)現(xiàn)搜索結(jié)果的樣子煥然一新。

不同于以往扁平化的效果，新版卡片更注重“氛圍”，更強調(diào)視覺的縱深感；也從圖標(biāo)設(shè)計、展現(xiàn)效率多方面進(jìn)行了全新升級，下面將從視覺角度分析此次改版的設(shè)計思路。

用戶反饋分析

對比線上舊版設(shè)計，“提效降噪”、“強化感知”等想法映入腦中。但這是否代表改版的全部？答案是NO。對于用戶而言，天氣結(jié)果卡片不僅僅是工具，是與用戶生活息息相關(guān)的功能，更是能創(chuàng)造用戶對生活的熱愛和美好愿景的表達(dá)。

在這份想法的支持下，我們對天氣卡進(jìn)行一次重新審視：不僅對交互體驗進(jìn)行了深耕，還希望通過巧妙的設(shè)計手段，構(gòu)建一個能夠幫助用戶快速觀測氣象的產(chǎn)品。

用戶調(diào)研中收集到了一些用戶的反饋：怎么能一眼分辨今天是不是好天氣？現(xiàn)在出門下雨嗎？信息太多了不知道該看哪兒？

因此，如何強化氣象感知？以及如何提升信息獲取效率？成為首要解決的痛點，我們提煉出改版的關(guān)鍵詞：「營造微觀氣象的臨場感受」、「提升氣象信息的獲取效率」。

對于氣象感知的塑造，不僅是提供更精致的視覺效果和重點信息進(jìn)行強化，還需要貫穿功能與信息獲取效率，讓用戶在靠前的頭部結(jié)果就能得到快速且極致的滿足感。

營造微觀氣象的臨場感受

為什么要烘托臨場感？

在古代，人們通過云層變化、斗轉(zhuǎn)星移推測氣象；在信息時代，人們通過數(shù)據(jù)看日暖風(fēng)和；如今處于后疫情時代的我們，曾無數(shù)次想「看看外面的世界」，都以被迫放棄而告終。

正因如此，設(shè)計師希望傳達(dá)更加真實的天空情緒，去舒緩每一位需要自然風(fēng)光的旅人。

如何搭建一個更加具備臨場感的氛圍框架？我們嘗試了多種方案：扁平化設(shè)計、輕擬物設(shè)計、彌散漸變等現(xiàn)在流行的設(shè)計手法。

但這種同質(zhì)化的設(shè)計手法并不能直觀地讓用戶代入臨場感，于是我們腦暴出新的突破口：將微觀世界裝在手機里。

縱觀歷史可知，在14世紀(jì)寫實繪畫興起后，伴隨著透鏡技術(shù)的發(fā)現(xiàn)，繪畫大師們利用小孔成像的原理能夠?qū)L(fēng)景盡收“畫”底。

根據(jù)這一靈感，嘗試以透鏡映射的思路，通過數(shù)字化的設(shè)計手段把大氣的萬象變化映射在手機內(nèi)，形成精致迷人的“微觀世界”。

構(gòu)建映射氣象的框架

構(gòu)建微觀世界的方法，就像家里的生態(tài)魚缸，映射著海底某一角落，能在有限的空間里給人們海底世界美景的無限遐想。

根據(jù)上述推導(dǎo)，首先排除掉彌散光與扁平插畫的設(shè)計思路，專注設(shè)計沉浸感知強的天氣氛圍。同時還需要避免在信息過載情況下，細(xì)節(jié)化的天氣特效而產(chǎn)生冗余感。

重構(gòu)現(xiàn)有信息焦點以達(dá)到最大程度地透傳氣象感知，對整頁信息梳理后排除干擾視覺動線的信息，將天氣氛圍主視覺放置于視覺中心，通頂處理頭部效果，搭建出更具備臨場感的微觀天氣框架。

調(diào)制天空的顏色

在搭建好框架后，為還原真實的微觀場景效果且不影響整體用戶信息獲取，嘗試更系統(tǒng)的方式搭建天空的色彩體系，通過顏色的細(xì)微變化營造身臨其境的天空景觀，打通線上線下的統(tǒng)一認(rèn)知。

在全天的不同時刻可觀察出，天空中多以中飽和度和高明度的色調(diào)作為基礎(chǔ)色，少以高飽和度顏色呈現(xiàn)，不同的視線遠(yuǎn)近也會呈現(xiàn)由深到淺色的漸變關(guān)系。

但在區(qū)分不同天氣的自然形態(tài)差異時遇到了難點：如何正確表達(dá)晴、多云、陰、雨、霧霾？

在氣象行業(yè)標(biāo)準(zhǔn)中，以云的面積占據(jù)天空的百分比作為依據(jù)判別“晴天”、“多云”和“陰天”：云量在0%-10%為晴天；10%-30%為少云；30%-70%為多云；大于70%為陰天；晴朗指天空無云或云量小于10%的現(xiàn)象。

以天藍(lán)色作為最基礎(chǔ)的晴朗標(biāo)準(zhǔn)，通過陽光光斑、云層大小、云層薄厚、云種類等元素區(qū)分多云和晴天的關(guān)系：

陰天時水汽指標(biāo)直線上升，從色彩上以更低明度與飽和度的藍(lán)灰體現(xiàn)、云朵上選擇高層云并壓低云層位置，進(jìn)一步強調(diào)陰天的壓抑感。

霧霾在視覺感官上與陰天較難區(qū)分：都是能見度較低、光線陰暗特征。但霧霾下的空氣較為渾濁，因此在視覺上，用不帶色相的灰度變化，體現(xiàn)霧霾中不干凈的顆粒感。

從眾多風(fēng)景氣象圖中，尋找出符合當(dāng)前天氣的主色調(diào)，根據(jù)主色調(diào)建立多氣象場景下的色彩體系，從不同維度表現(xiàn)天氣氛圍感知。

逐步調(diào)整出適合各氣象場景的主色調(diào)與衍生色關(guān)系，運用不同的色相喚醒人們對氣象場景的固有印記。

映射玻璃的質(zhì)感

如何在手機上表達(dá)“微觀世界”的概念？我們認(rèn)為制作透過手機屏幕玻璃而產(chǎn)生的氣象變化是設(shè)計發(fā)力點。

因此在設(shè)計雨天時，沒有直接使用AE粒子下雨的劣質(zhì)效果，而是選擇用湍流置換特效，模擬玻璃掛住水珠聚成流下的感覺。

在制作雪時為了能營造透過玻璃看雪的感覺，先將雪景圖片模糊，同時制作動態(tài)的遠(yuǎn)景模糊雪花，再將具象的雪花造型為中景渲染氛圍，最后補充上幾片會轉(zhuǎn)動的雪花作為前景點綴，模擬出透過玻璃看雪景的前、中、后三層景深關(guān)系。

除此以外，其余場景也有著設(shè)計的小心思：比如星星點點的夜空??；打雷時隱隱發(fā)光的烏云??；在沙塵暴吹動時熾熱的風(fēng)沙??，都在手機里呈現(xiàn)出栩栩如生的微觀世界。

玻璃質(zhì)感的圖標(biāo)風(fēng)格打磨

在腦暴圖標(biāo)設(shè)計方案時我們發(fā)現(xiàn)，一味地追求美容易忽視天氣圖標(biāo)的識別性問題，因此提煉出新圖標(biāo)設(shè)計的三個核心要點：

透射：以“微觀世界”這一關(guān)鍵詞，制作透鏡折射的效果凸顯主題。

形體：以iOS與Android等系統(tǒng)天氣圖標(biāo)為形態(tài)基礎(chǔ)，避免用戶在識別上出現(xiàn)分歧。

光影：以帶有百度品牌色且兼具氣象柔和顏色的光影塑造立體感。

提升氣象信息的獲取效率

天氣結(jié)果卡的核心本質(zhì)是專業(yè)高效的工具屬性，通過改版前的用戶調(diào)研與反饋數(shù)據(jù)可以發(fā)現(xiàn)，用戶整體對“信息冗余”、“不容易查找”的提及頻率很高。因此，為了用戶能夠快速準(zhǔn)確得到當(dāng)天天氣的相關(guān)指數(shù)，我們做出如下改變：

解鎖天空的秘密

將繁雜的信息重新排序，根據(jù)用戶行為和數(shù)據(jù)，區(qū)分內(nèi)容展現(xiàn)優(yōu)先級：溫度、緊急信息通知、當(dāng)天相關(guān)情況為最高優(yōu)先級，其次為：其余天氣信息、日出日落、穿衣出行洗車的生活指數(shù)等。

由此，提取氣溫、紫外線、風(fēng)力、降水量為專業(yè)指數(shù)的四大要素，并根據(jù)天氣狀況干預(yù)展現(xiàn)策略，例如：當(dāng)天下雨時則優(yōu)先展示降水量指標(biāo)，大風(fēng)時則優(yōu)先展示風(fēng)力等級。

而短時預(yù)報模塊為臨時預(yù)警內(nèi)容，僅在天氣不佳（下雨、下雪）時臨時置頂展現(xiàn)，能更及時地傳達(dá)當(dāng)前時段的極端環(huán)境情況（提示是否需要帶傘等）。

更人性化的信息排布

在競品調(diào)研中發(fā)現(xiàn)部分輕量級天氣產(chǎn)品以列表形式縱向排列多天信息，而部分專業(yè)天氣平臺則以趨勢形態(tài)展現(xiàn)未來天氣走向。

根據(jù)改版前的用戶習(xí)慣，保留了趨勢圖的專業(yè)展現(xiàn)效果，同時新增了列表態(tài)，兼顧一部分用戶以“Z”字形的瀏覽順序去瀏覽內(nèi)容。

多維度的產(chǎn)品體驗

另外，在本次改版中也覆蓋PC端天氣卡的重新設(shè)計，以確保多端使用場景下保持統(tǒng)一體驗。

結(jié)語

天氣改版上線后，最新的用戶調(diào)研中表明：新版體驗優(yōu)于舊版且氣象感知明顯，信息閱讀節(jié)奏與操作流程也得到了改善，同時在數(shù)據(jù)指標(biāo)上，整卡點擊交互提升較大。

這進(jìn)一步證明我們可以通過數(shù)字化手段去提高用戶對內(nèi)容的情緒感知，作為設(shè)計師也可以利用該方法對用戶的正面&負(fù)面情緒進(jìn)行激發(fā)和緩解，以此達(dá)到相應(yīng)的設(shè)計目的。

在錯綜復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品中，人們對于好設(shè)計的需求是豐富全面、多樣立體的，而不再是功能上的“滿足”。在設(shè)計中制作驚喜彩蛋，進(jìn)一步激發(fā)使用者心中的共鳴，提供情感上的慰藉。

最后，后疫情時期的大環(huán)境氛圍較壓抑，制作沉浸式天氣卡的初心，是我們希望用這樣的方式呈現(xiàn)微觀世界的美景，為每一位使用百度查詢天氣的用戶“解解悶”、“排排憂”，鼓勵人們對未來充滿期待，有一天能真實地探索世界的各個角落。