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

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

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

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

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

1.1 功能性要素

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

1.2 用戶體驗要素

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

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

2.1 具象與抽象

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

2.2 跳躍與沉穩(wěn)

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

2.3 簡約與復(fù)雜

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

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

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

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

4 結(jié)語

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

參考文獻：

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

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

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

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