天氣App的界面設(shè)計(jì)研究

摘 要：隨著數(shù)字化時(shí)代的到來(lái)，智能手機(jī)已成為當(dāng)今社會(huì)中的人們社交和獲取信息的重要媒介，人們獲取天氣信息的渠道也越來(lái)越多。天氣App的出現(xiàn)極大地豐富了傳播天氣信息的方式，使人們擺脫了以往傳達(dá)天氣信息的過(guò)程中的時(shí)空限制。優(yōu)秀的界面設(shè)計(jì)可以提升App的易用性和影響力。本文比較分析了天氣App的界面設(shè)計(jì)案例，概括了天氣App界面設(shè)計(jì)的影響因素，同時(shí)結(jié)合用戶(hù)體驗(yàn)分析天氣App界面設(shè)計(jì)時(shí)需要注意的問(wèn)題。

關(guān)鍵詞：App；界面設(shè)計(jì)；天氣軟件

隨著智能手機(jī)的普及，手機(jī)App成為人們?nèi)粘Ｉ钪胁豢扇鄙俚膽?yīng)用，為人們的生活提供了巨大的便利。天氣App作為一款為人們提供天氣資訊的手機(jī)應(yīng)用，與人們的生活密切相關(guān)?，F(xiàn)在天氣App是集成天氣、生活資訊、社交等功能為一體的綜合App，這對(duì)其界面設(shè)計(jì)也提出了新要求。在新技術(shù)、新思潮、新審美的環(huán)境下，需要不斷優(yōu)化和創(chuàng)新天氣App的界面設(shè)計(jì)。

1 天氣App界面設(shè)計(jì)影響要素分析

1.1 功能性要素

天氣App的界面設(shè)計(jì)需立足于產(chǎn)品的功能性，產(chǎn)品的功能性確定了界面設(shè)計(jì)的基礎(chǔ)內(nèi)容及層級(jí)劃分，而界面設(shè)計(jì)的宗旨是讓用戶(hù)高效明確地獲取信息數(shù)據(jù)，提升產(chǎn)品的易用性。天氣App作為給用戶(hù)提供天氣信息的手機(jī)客戶(hù)端，隨著App產(chǎn)業(yè)的不斷發(fā)展和不斷加劇的競(jìng)爭(zhēng)，也在不斷擴(kuò)展其功能。除了提供天氣信息以外，還會(huì)隨時(shí)更新和提供“PM2.5”空氣指數(shù)，濕度，時(shí)間，推薦應(yīng)用，實(shí)景天氣，生活咨詢(xún)指數(shù)等。例如，“Weather Bug”下載量曾經(jīng)長(zhǎng)期在“Google Play”的天氣類(lèi)應(yīng)用程序中保持第一名，功能強(qiáng)大，同時(shí)集成了交互式的地圖以及衛(wèi)星云圖，還有獨(dú)家的天氣預(yù)警系統(tǒng)。它能提供比其他的應(yīng)用程序預(yù)警速度快了50%的惡劣天氣預(yù)警服務(wù)，一系列的功能讓人耳目一新。由于與人們的生活密切相關(guān)，天氣App普及的城市和用戶(hù)量很大，用戶(hù)群體龐大，廣告的效果十分顯著。通過(guò)在細(xì)節(jié)上做廣告，潛移默化地影響用戶(hù)的選擇。因此，進(jìn)一步擴(kuò)展了天氣App的功能，功能性的擴(kuò)展對(duì)界面設(shè)計(jì)產(chǎn)生了直接的影響，也對(duì)界面設(shè)計(jì)提出了更高的要求。功能性的擴(kuò)展意味著界面包含的內(nèi)容增多，這就需要設(shè)計(jì)者規(guī)劃分類(lèi)眾多的內(nèi)容，在有限的屏幕空間內(nèi)，優(yōu)化配置各區(qū)域的資源，利用不同的色彩、圖形來(lái)劃分區(qū)域與層級(jí)。

1.2 用戶(hù)體驗(yàn)要素

用戶(hù)體驗(yàn)指產(chǎn)品或服務(wù)中用戶(hù)所能體驗(yàn)到的每個(gè)部分，其涉及用戶(hù)對(duì)該產(chǎn)品的認(rèn)知、尋找、分類(lèi)、安裝、服務(wù)、支持以及它升級(jí)的各個(gè)方面。用戶(hù)在特定的移動(dòng)環(huán)境下使用各種移動(dòng)終端設(shè)備下載并安裝各類(lèi)應(yīng)用的使用反饋，從用戶(hù)的角度反映出應(yīng)用的優(yōu)勢(shì)和劣勢(shì)。App客戶(hù)端的設(shè)計(jì)與其他的設(shè)計(jì)相比具有一定的特殊性，它的信息要清晰明確，依靠視覺(jué)進(jìn)行傳遞，同時(shí)可視的區(qū)域的尺寸受約于要傳遞的信息的數(shù)量。屏幕的大小比例、熱鍵、導(dǎo)航按鈕和菜單的結(jié)構(gòu)等方面的設(shè)計(jì)對(duì)用戶(hù)體驗(yàn)滿(mǎn)意程度有很大的影響，良好的用戶(hù)體驗(yàn)可以讓產(chǎn)品在未上線(xiàn)之前就基本具備用戶(hù)接受度。界面的設(shè)計(jì)影響到用戶(hù)的視線(xiàn)軌跡和操作軌跡，合理的界面設(shè)計(jì)可以引導(dǎo)和鼓勵(lì)用戶(hù)完成操作，給用戶(hù)提供良好的使用體驗(yàn)，提升用戶(hù)好感，培養(yǎng)用戶(hù)的忠實(shí)度。

2 天氣App界面設(shè)計(jì)風(fēng)格分析

2.1 具象與抽象

在Andriod版墨跡天氣主界面中（如圖1左），背景是寫(xiě)實(shí)天氣的圖片，隨著天氣和時(shí)間的變化進(jìn)行更換，選擇的是大氣、華麗圖片，也給整個(gè)界面帶來(lái)了炫麗的效果。界面采用獨(dú)特的流式滑動(dòng)布局，全新天氣趨勢(shì)模塊，畫(huà)面簡(jiǎn)潔明了。在天氣圖標(biāo)的設(shè)計(jì)上也采用了擬物化風(fēng)格，云和陽(yáng)光的造型都與現(xiàn)實(shí)中的真實(shí)事物相似。菜單欄的圖標(biāo)設(shè)計(jì)采用抽象化的設(shè)計(jì)思路，如天氣菜單欄的圖標(biāo)借鑒了中國(guó)傳統(tǒng)云紋圖樣，對(duì)云的形象做了高度的抽象概括，同時(shí)保留了云的基本形態(tài)。在Andriod版天氣通的界面設(shè)計(jì)中（如圖1右），背景也采用寫(xiě)實(shí)性的云的圖片，整體清淡簡(jiǎn)潔，利于用戶(hù)識(shí)別畫(huà)面中的信息。中間的方框顯示5天內(nèi)的天氣概況，方框上方則是今天的天氣詳情。在各類(lèi)天氣圖標(biāo)的設(shè)計(jì)上采用了抽象化的處理，將云、雨、雷電等氣象元素高度概括為識(shí)別性很強(qiáng)的簡(jiǎn)單圖形，結(jié)合區(qū)域方框的造型，提升了信息的識(shí)別度和界面的整潔性。

2.2 跳躍與沉穩(wěn)

IOS版的墨跡天氣（如圖2左），其最顯眼的要數(shù)屏幕中間的男孩了，他會(huì)根據(jù)天氣和溫度的不同更換服裝。為了保持畫(huà)面的一致性，背景的天氣圖片、包括未來(lái)四天的天氣預(yù)報(bào)和屏幕下方的圖標(biāo)也換成了卡通風(fēng)格。點(diǎn)擊右邊的預(yù)報(bào)時(shí)會(huì)調(diào)出詳情并附帶卡通男孩所需要的衣服，給用戶(hù)一種直觀(guān)的推薦出行服裝的認(rèn)識(shí)。整個(gè)界面設(shè)計(jì)給人以年輕、活潑的感覺(jué)，雖然畫(huà)面的整潔性有所降低，但卡通元素的應(yīng)用很大程度上提升了界面的趣味性。IOS版天氣通（如圖2右），它采用了和Andriod版完全不同的界面設(shè)計(jì)，背景選擇了加了濾鏡特效的圖片配上黑色調(diào)為主的玻璃效果顯得非常時(shí)尚。整個(gè)界面采用三段式構(gòu)圖，信息區(qū)域劃分明確，構(gòu)圖穩(wěn)定，圖形化元素較少，頁(yè)面下端的工具欄也變?yōu)榱俗煮w顯示，加大的菜單鍵可以有效地減少因?yàn)槠聊贿^(guò)小而造成的錯(cuò)誤操作，整體設(shè)計(jì)風(fēng)格沉穩(wěn)大氣，但缺少跳躍性。

2.3 簡(jiǎn)約與復(fù)雜

在眾多的天氣應(yīng)用程序中，Nice Weather 2（如圖3左）的曲線(xiàn)優(yōu)美脫穎，盡管現(xiàn)在的空氣狀況并不令人如意，但是從Nice Weather 2中或許能讓我們平復(fù)對(duì)天氣的不滿(mǎn)。Nice Weather2繼承了諸多前輩的優(yōu)良品質(zhì)，簡(jiǎn)約的界面風(fēng)格不失功能性。整個(gè)界面看似沒(méi)有太多的內(nèi)容，但天氣、日期、溫度、風(fēng)向以及方向等包含齊全，沒(méi)有一絲凌亂。無(wú)論是背景、天氣圖標(biāo)、字體，還是箭頭元素，Nice Weather 2都將簡(jiǎn)約做到了極致。圖標(biāo)、文字效果以及曲線(xiàn)填充區(qū)域都做了扁平化的處理，極大地釋放了用戶(hù)的視覺(jué)負(fù)擔(dān)，而這其中在實(shí)時(shí)溫度曲線(xiàn)的位置運(yùn)用到了動(dòng)畫(huà)的藝術(shù)表現(xiàn)方式，進(jìn)入界面曲線(xiàn)會(huì)根據(jù)實(shí)時(shí)溫度的變化而變化。這就更讓這款A(yù)pp在動(dòng)畫(huà)表現(xiàn)藝術(shù)這方面優(yōu)雅而不失靈動(dòng)。此外，界面背景色彩還會(huì)隨著氣溫的變化而出現(xiàn)冷暖色調(diào)的變化，簡(jiǎn)約中富有變化。

Weather Bug（如圖3右）下載量曾經(jīng)長(zhǎng)期在Google Play的天氣類(lèi)應(yīng)用程序中保持第一名。由于其功能強(qiáng)大，構(gòu)架復(fù)雜，其界面設(shè)計(jì)相對(duì)于Nice Weather 2的界面設(shè)計(jì)顯得相對(duì)復(fù)雜。界面整體也采用了分段式設(shè)計(jì)，對(duì)頁(yè)面內(nèi)容做了有效的區(qū)域劃分，避免了平過(guò)多的內(nèi)容影響用戶(hù)的信息選擇與獲取。頁(yè)面背景色采用統(tǒng)一的深灰色調(diào)，有效突出了信息內(nèi)容，關(guān)鍵的信息內(nèi)容采用鮮艷的黃色，讓用戶(hù)一眼就能從眾多字符中獲取關(guān)鍵的信息。在預(yù)報(bào)未來(lái)幾天天氣的區(qū)域加入了藍(lán)色方框元素，利用顏色和形狀在視覺(jué)上再一次優(yōu)化了區(qū)域識(shí)別。雖然Weather Bug構(gòu)架復(fù)雜、內(nèi)容龐大，但優(yōu)秀的界面設(shè)計(jì)使數(shù)據(jù)信息的傳輸變得清晰直觀(guān)、主次分明。

3 天氣App界面設(shè)計(jì)趨勢(shì)分析

傳統(tǒng)的天氣預(yù)報(bào)形式毫無(wú)新意，天氣App作為智能的“生活助理”為人們?nèi)粘Ｉ钐峁┝烁嗟谋憷?，讓天氣預(yù)報(bào)變得更加有格調(diào)。盡管每一款系統(tǒng)都有自己內(nèi)置的天氣應(yīng)用軟件，但是第三方的設(shè)計(jì)師推動(dòng)了天氣App的發(fā)展，讓天氣應(yīng)用程序能夠和用戶(hù)的應(yīng)用環(huán)境有所聯(lián)系。總體來(lái)講，未來(lái)天氣App界面設(shè)計(jì)呈現(xiàn)出以下趨：第一，簡(jiǎn)約化設(shè)計(jì)，包括扁平化設(shè)計(jì)風(fēng)格、極簡(jiǎn)主義、抽象畫(huà)、符號(hào)化的畫(huà)面元素設(shè)計(jì)，按鈕和選項(xiàng)更少，有效降低用戶(hù)的認(rèn)知障礙，讓“信息”本身重新作為核心凸顯出來(lái)；第二，響應(yīng)式頁(yè)面設(shè)計(jì)，讓天氣App頁(yè)面自動(dòng)響應(yīng)不同的系統(tǒng)平臺(tái)，屏幕尺寸以及屏幕定向等設(shè)備環(huán)境，提升其推廣和覆蓋能力；第三，輔助應(yīng)用動(dòng)畫(huà)元素，利用豐富的動(dòng)畫(huà)效果刺激用戶(hù)的感官，更好地引導(dǎo)客戶(hù)行為，提升界面的趣味性和吸引力；第四，人性化的設(shè)計(jì)，要更加注重用戶(hù)的體驗(yàn)，簡(jiǎn)化使用操作，實(shí)現(xiàn)用戶(hù)訴求，培養(yǎng)用戶(hù)黏度，給用戶(hù)創(chuàng)造良好的用戶(hù)體驗(yàn)。

4 結(jié)語(yǔ)

在經(jīng)濟(jì)與科技高速發(fā)展的時(shí)代，各類(lèi)App競(jìng)爭(zhēng)日趨白熱化，一款A(yù)pp要想在眾多App中脫穎而出并能長(zhǎng)期立足，其界面設(shè)計(jì)作為能直觀(guān)展現(xiàn)App特性的視覺(jué)元素，對(duì)吸引用戶(hù)，引導(dǎo)用戶(hù)，留住用戶(hù)起著至關(guān)重要的作用。另外，新技術(shù)和新觀(guān)念不斷沖擊人們的感官，在天氣App的界面設(shè)計(jì)中，應(yīng)立足于產(chǎn)品特性，從用戶(hù)體驗(yàn)要素出發(fā)，應(yīng)用新觀(guān)念和新技術(shù)緊隨時(shí)代潮流，細(xì)分產(chǎn)品受眾，進(jìn)行多樣化設(shè)計(jì)，從而為用戶(hù)提供更好的產(chǎn)品體驗(yàn)，更好地實(shí)現(xiàn)產(chǎn)品的價(jià)值。

參考文獻(xiàn)：

[1] 柳沙.設(shè)計(jì)藝術(shù)心理學(xué)[M].清華大學(xué)出版社，2006.

[2] 馬志強(qiáng)，蔣曉.基于用戶(hù)體驗(yàn)的智能手機(jī)網(wǎng)站界面設(shè)計(jì)探討[J].包裝工程，2012（16）.

[3] 徐耀華.基于用戶(hù)體驗(yàn)的智能手機(jī)交互設(shè)計(jì)[J].現(xiàn)代商貿(mào)工業(yè)，2011（06）.

作者簡(jiǎn)介：鄭曉東，男，山西長(zhǎng)治人，江南大學(xué)數(shù)字媒體學(xué)院碩士研究生，研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)及理論。