鄭曉東 馬超

【摘 要】隨著數(shù)字化時(shí)代的到來(lái)，智能手機(jī)已成為當(dāng)今社會(huì)人們社交和獲取信息的重要媒介，而手機(jī)APP也成為人們?cè)谑褂弥悄苁謾C(jī)時(shí)必不可少的工具。天氣APP作為一款生活服務(wù)類(lèi)軟件，在為用戶提供基本天氣信息的同時(shí)，功能也日趨完善。而動(dòng)畫(huà)作為APP中不可或缺的交互元素，其合理巧妙的設(shè)計(jì)可以提升APP的畫(huà)面效果和交互體驗(yàn)。本文對(duì)天氣APP中動(dòng)畫(huà)的應(yīng)用做了比較分析，總結(jié)了動(dòng)畫(huà)在天氣APP中的功能性，同時(shí)結(jié)合用戶體驗(yàn)以及產(chǎn)品特性探索出天氣APP中動(dòng)畫(huà)的設(shè)計(jì)方法與原則。

【關(guān)鍵詞】天氣APP;動(dòng)畫(huà);交互

中圖分類(lèi)號(hào)：J218.7? ? 文獻(xiàn)標(biāo)志碼：A? ? ? ? ? ? 文章編號(hào)：1007-0125（2019）03-0122-03

智能手機(jī)作為用戶使用互聯(lián)網(wǎng)服務(wù)的主要移動(dòng)終端，以其巨大優(yōu)勢(shì)逐漸成為消費(fèi)者獲取服務(wù)及產(chǎn)品的主要入口，不斷改變著人們的生活方式。天氣APP作為主要為用戶提供天氣信息的生活服務(wù)型手機(jī)應(yīng)用，其功能也隨著技術(shù)的發(fā)展得到了廣泛的拓展。如今的天氣APP更是集成了天氣信息、生活資訊、社交等功能為一體的綜合APP。功能的多樣性在一定程度上提高了操作的復(fù)雜性，而動(dòng)畫(huà)的巧妙運(yùn)用可以有效提升用戶的操作效率和使用體驗(yàn)。

一、天氣APP中動(dòng)畫(huà)的功能性

天氣APP中動(dòng)畫(huà)的設(shè)計(jì)需立足于APP的功能特性，其設(shè)計(jì)宗旨是提升用戶操作效率，降低用戶操作難度，增強(qiáng)信息的可視化程度。天氣APP功能性的擴(kuò)展對(duì)天氣APP中動(dòng)畫(huà)的設(shè)計(jì)提出了更高的要求，這就需要設(shè)計(jì)者將眾多的內(nèi)容更高效、生動(dòng)地展現(xiàn)給用戶，達(dá)到APP使用價(jià)值的最大化。

天氣APP中動(dòng)畫(huà)的功能性主要體現(xiàn)在三方面。第一，導(dǎo)向性功能。天氣APP的用戶構(gòu)成主要分為新手用戶，普通用戶和專(zhuān)家用戶，其中普通用戶占主要部分。對(duì)于新手用戶而言，其對(duì)APP的操作規(guī)則不夠熟悉，這就需要有引導(dǎo)性的動(dòng)畫(huà)指引其操作，例如軟件安裝過(guò)程中的引導(dǎo)過(guò)渡性動(dòng)畫(huà)。普通用戶對(duì)APP的操作有了基礎(chǔ)的了解，并能較為熟練的掌握APP的一系列功能。但隨著軟件的更新升級(jí)和新功能的加入，就需要及時(shí)提醒用戶更新升級(jí)。提示動(dòng)畫(huà)的巧妙運(yùn)用可以在不影響用戶正常操作的前提下及時(shí)提醒用戶探索發(fā)現(xiàn)新的功能。第二，提示性功能。在天氣APP中，極端天氣狀況的展示以及出行指南信息的推送需要區(qū)別于整體的靜態(tài)畫(huà)面，形成一定的視覺(jué)沖擊力，從而引起用戶的注意力，將重要信息及時(shí)明確的地傳達(dá)給用戶。第三，審美功能。一款優(yōu)秀的APP在具備強(qiáng)大功能同時(shí)也應(yīng)具有較高的藝術(shù)性。天氣APP中各類(lèi)天氣現(xiàn)象的表現(xiàn)方式影響著整體界面的視覺(jué)效果。巧妙的的動(dòng)畫(huà)可以將各類(lèi)天氣現(xiàn)象生動(dòng)有趣地展現(xiàn)在用戶面前，極大提升用戶的視覺(jué)享受和心理預(yù)期，使得APP更具魅力。

二、天氣APP中動(dòng)畫(huà)的設(shè)計(jì)表現(xiàn)

智能手機(jī)應(yīng)用的快速發(fā)展給動(dòng)畫(huà)的應(yīng)用提供了廣闊的空間，各類(lèi)動(dòng)畫(huà)已融入到APP設(shè)計(jì)當(dāng)中，成為提高APP品質(zhì)的重要因素。從安裝階段的引導(dǎo)性動(dòng)畫(huà)，到各個(gè)頁(yè)面層級(jí)中的信息傳遞動(dòng)畫(huà)，為用戶的操作增添了獨(dú)特的樂(lè)趣，實(shí)現(xiàn)了產(chǎn)品所追求的自然、流暢、友好的操作效果，滿足了用戶的心理訴求。在眾多國(guó)產(chǎn)天氣APP中，“墨跡天氣”作為用戶人數(shù)眾多、最具代表性的天氣APP，在功能性和設(shè)計(jì)性上都給用戶帶來(lái)了良好的體驗(yàn)。由Alexis Creuzot開(kāi)發(fā)的Nice Weather 2作為一款有著精美界面的天氣APP在App Store中具有非常高的人氣。本文選用“墨跡天氣”和Nice Weather 2這兩款國(guó)內(nèi)外最具代表性的天氣APP作為案例進(jìn)行分析研究，探究天氣APP中動(dòng)畫(huà)的表現(xiàn)形式與設(shè)計(jì)方法。

在墨跡天氣首頁(yè)中，動(dòng)畫(huà)主要表現(xiàn)在背景、角色和彈出的信息欄三方面。墨跡天氣的整體背景表現(xiàn)較為具象，以自然景色為主，并且背景以及角色可以根據(jù)時(shí)間流逝和天氣變化自動(dòng)呈現(xiàn)出不同的狀態(tài)（如圖1）例如在陽(yáng)光明媚的晴天，整體界面以廣闊的天空為背景，淡淡的云朵緩慢地在屏幕中飄動(dòng)，太陽(yáng)的光芒有節(jié)奏地閃爍著，到了夜晚，界面變幻為深邃的星空，閃爍的點(diǎn)點(diǎn)繁星與偶爾劃過(guò)夜空的流星給畫(huà)面增添了幾分樂(lè)趣。隨著天氣的變化，畫(huà)面中會(huì)下起雨水或飄起雪花，比起傳統(tǒng)的靜態(tài)圖標(biāo)，動(dòng)畫(huà)的運(yùn)用使得天氣現(xiàn)象的表現(xiàn)更為直觀生動(dòng)。墨跡天氣界面中動(dòng)畫(huà)場(chǎng)景的設(shè)計(jì)雖然采用了具象的表現(xiàn)手法，但都以干凈清爽的自然風(fēng)光為主，更利用突出重點(diǎn)信息，減少用戶的視覺(jué)負(fù)擔(dān)，同時(shí)也為角色留出一定的空間，達(dá)到視覺(jué)上的平衡。在首頁(yè)中，卡通角色的運(yùn)用為畫(huà)面表現(xiàn)增加了生氣，同時(shí)，角色不同的狀態(tài)也與天氣相呼應(yīng)，并承擔(dān)著提示性功能。例如在高溫狀態(tài)下，卡通形象會(huì)戴上墨鏡;當(dāng)天空下雨時(shí)角色會(huì)撐起一把小傘;隨著四季的變化和氣溫的升和降，角色身上的服飾也由短袖薄衫變?yōu)槊抟录訃硎痔?。角色身上呈現(xiàn)的變化緊貼用戶生活景象，與用戶形成心理上的互動(dòng)，在提升用戶好感的同時(shí)為用戶提供穿衣參考。

圖1 《墨跡天氣》界面不同狀態(tài)的動(dòng)畫(huà)效果

Nice Weather 2的用戶界面將極簡(jiǎn)主義的美感發(fā)揮得淋漓盡致，整體設(shè)計(jì)簡(jiǎn)潔而富有秩序感，重點(diǎn)信息一目了然，交互式的圖形溫度變化模式，讓用戶輕松了解天氣變化（如圖2）。Nice Weather 2的背景采用簡(jiǎn)潔的漸變色彩，同一色調(diào)之間的過(guò)渡自然平緩，既減輕了用戶的視覺(jué)負(fù)擔(dān)，又突出了線條勾勒的圖形元素，使得用戶可以快速獲取相關(guān)信息。同時(shí)，背景色彩的設(shè)計(jì)與當(dāng)前的天氣狀況緊密相關(guān)，并且隨著氣溫的變化而緩慢變化。例如，在高溫狀態(tài)下，整體背景采用紅色和橙色漸變，營(yíng)造出熾熱的氛圍;當(dāng)氣溫下降時(shí)，背景變幻為與之相呼應(yīng)的淡藍(lán)色，顯得靜謐清爽;而在陰天的狀態(tài)下，整體背景又變幻為灰藍(lán)色調(diào)，呈現(xiàn)出深沉灰暗的場(chǎng)景。設(shè)計(jì)者充分利用色彩的象征性和人的視覺(jué)特性將天氣狀態(tài)用簡(jiǎn)單的色彩表現(xiàn)出來(lái)。此外，Nice Weather 2首頁(yè)中包含了溫度、濕度、風(fēng)速和風(fēng)向四個(gè)主要數(shù)據(jù)信息，界面下方優(yōu)雅流動(dòng)的線條顯示著實(shí)時(shí)溫度，而且在數(shù)據(jù)發(fā)生變化時(shí)畫(huà)面會(huì)出現(xiàn)精細(xì)的動(dòng)畫(huà)效果，使得畫(huà)面更為生動(dòng)。例如，當(dāng)溫度變化時(shí)，溫度曲線會(huì)隨之發(fā)生變化，曲線的變化效果如流水般靈動(dòng)細(xì)膩，提升了整個(gè)界面的趣味性。

通過(guò)對(duì)墨跡天氣和Nice Weather 2這兩款具有代表性的天氣APP中動(dòng)畫(huà)設(shè)計(jì)的對(duì)比分析可以看出，動(dòng)畫(huà)的巧妙運(yùn)用可以極大提升產(chǎn)品的用戶體驗(yàn)，給用戶的操作行為和心理帶來(lái)良好的感受。而具象與抽象這兩種不同的動(dòng)畫(huà)形式所呈現(xiàn)出的感官效果也有所差異，不論具象的再現(xiàn)還是抽象的表達(dá)，都應(yīng)立足于產(chǎn)品功能的實(shí)現(xiàn)，服務(wù)于信息的傳達(dá)。

圖2? Nice Weather 2界面不同狀態(tài)的動(dòng)畫(huà)效果

三、天氣APP中動(dòng)畫(huà)的設(shè)計(jì)原則

（一）創(chuàng)新性

天氣APP的創(chuàng)新性至關(guān)重要，創(chuàng)新是人類(lèi)所特有的創(chuàng)造性勞動(dòng)的體現(xiàn)，是人類(lèi)社會(huì)進(jìn)步的核心動(dòng)力和源泉。動(dòng)畫(huà)應(yīng)用于天氣APP中有利于更好地展現(xiàn)天氣動(dòng)態(tài)和提示信息，與傳統(tǒng)的天氣符號(hào)與靜態(tài)圖片相比，動(dòng)畫(huà)更能引起人們的關(guān)注，給人以更直觀的感受，一款具有精美動(dòng)畫(huà)效果的天氣APP明顯要比其他以傳統(tǒng)圖標(biāo)來(lái)展示天氣動(dòng)態(tài)的天氣APP更具吸引力。同時(shí)，動(dòng)畫(huà)的表現(xiàn)方式也應(yīng)順應(yīng)時(shí)代設(shè)計(jì)潮流，符合大眾審美需求。設(shè)計(jì)者應(yīng)利用新的設(shè)計(jì)理念，善于發(fā)掘傳統(tǒng)文化元素，結(jié)合當(dāng)下熱點(diǎn)形象，探索多樣化的信息表達(dá)方式，滿足用戶對(duì)于新事物的好奇和對(duì)未知的探索欲望這一人類(lèi)的天性，引發(fā)用戶獨(dú)特的趣味感受，在長(zhǎng)期的體驗(yàn)過(guò)程中給用戶不斷帶來(lái)新的操作感受，從而保證用戶粘度。

（二）統(tǒng)一性

天氣APP中動(dòng)畫(huà)的設(shè)計(jì)不能脫離于應(yīng)用整體的設(shè)計(jì)風(fēng)格，而應(yīng)該是統(tǒng)一且具有延續(xù)性的。這種統(tǒng)一性主要表現(xiàn)在整體界面中視覺(jué)效果的統(tǒng)一性和操作層級(jí)中表現(xiàn)形式的統(tǒng)一性。首先，動(dòng)畫(huà)的美術(shù)風(fēng)格需要和APP整體的界面設(shè)計(jì)風(fēng)格相統(tǒng)一，使得整體顯得有序規(guī)律。復(fù)雜多變的動(dòng)畫(huà)會(huì)使得頁(yè)面過(guò)于混亂，打破APP頁(yè)面的整體性，偏移用戶的視覺(jué)重點(diǎn)，影響重點(diǎn)信息的傳達(dá)，不利于用戶集中注意力進(jìn)行準(zhǔn)確有序的操作。其次，天氣APP不同層級(jí)之間動(dòng)畫(huà)表現(xiàn)形式需要統(tǒng)一，有規(guī)律。用戶在使用APP時(shí)往往要經(jīng)過(guò)多次操作才能獲取自身所需信息，因此，需要在各個(gè)層級(jí)之間建立統(tǒng)一的操作行為標(biāo)準(zhǔn)。同時(shí)，各個(gè)層級(jí)的動(dòng)畫(huà)也需服從于整個(gè)標(biāo)準(zhǔn)體系當(dāng)中，提升用戶操作的流暢度和熟練性，滿足用戶在做出行為后所要達(dá)到的心理預(yù)期。

（三）趣味性

在眾多天氣APP中過(guò)于單調(diào)無(wú)趣的APP不可能引起足夠的關(guān)注量，這也直接影響到APP的下載量和用戶粘度。而動(dòng)畫(huà)元素的巧妙運(yùn)用可以極大提升APP的視覺(jué)效果和操作的趣味性。動(dòng)畫(huà)在色彩表現(xiàn)，角色設(shè)計(jì)，場(chǎng)景造型，動(dòng)作設(shè)計(jì)以及特效方面形式多樣，趣味十足。表現(xiàn)新穎，富有趣味性的動(dòng)畫(huà)更能引起用戶的關(guān)注，激發(fā)用戶的操作興趣，從而保證APP強(qiáng)大的生命力。例如在墨跡天氣中，當(dāng)下雨的天氣狀況下，手機(jī)屏幕上會(huì)不斷出現(xiàn)凝結(jié)的水珠，然后慢慢消失，同時(shí)還會(huì)偶爾出現(xiàn)水滴打在屏幕上的景象，效果十分逼真。這樣富有趣味性的動(dòng)畫(huà)能夠讓用戶直觀了解到現(xiàn)在的天氣狀況，并將用戶帶入到整體天氣環(huán)境中，提升用戶使用APP的全方位感受。趣味化的表達(dá)使得用戶查看天氣資訊不再變得枯燥無(wú)味，而是充滿樂(lè)趣。

（四）實(shí)用性

在天氣APP中，動(dòng)畫(huà)的運(yùn)用目的是為了使產(chǎn)品更加便于操作，一切的動(dòng)畫(huà)效果都應(yīng)服從于功能的實(shí)現(xiàn)。天氣APP中動(dòng)畫(huà)的實(shí)用性原則的核心主要表現(xiàn)在信息的可視化和操作的易用性兩方面。動(dòng)畫(huà)的設(shè)計(jì)首先要立足于信息的傳達(dá)。動(dòng)畫(huà)形式的變化以及風(fēng)格的表現(xiàn)都應(yīng)從信息的可視化出發(fā)，立足于產(chǎn)品定位和功能特性，將天氣現(xiàn)象以及信息資訊直觀展現(xiàn)在用戶面前。此外，在用戶操作體驗(yàn)上，也需遵循實(shí)用性原則。用戶可以通過(guò)動(dòng)畫(huà)的提示及時(shí)了解產(chǎn)品新的功能特性和操作方式。用戶的每一次操作都有及時(shí)的反饋，當(dāng)用戶出現(xiàn)誤操作時(shí)，需要有及時(shí)醒目的動(dòng)畫(huà)提醒，并加以引導(dǎo)，幫助用戶正確操作，快速獲取自身所需信息。

三、結(jié)語(yǔ)

天氣APP作為主要提供天氣資訊功能的應(yīng)用程序，在發(fā)展過(guò)程中功能不斷得到拓展，隨之而來(lái)的是APP操作層級(jí)的增多和操作復(fù)雜性的提升。動(dòng)畫(huà)作為一款A(yù)PP不可或缺的視覺(jué)元素，在天氣APP中發(fā)揮著導(dǎo)向性、提示性和審美性的功能。產(chǎn)品功能的拓展為動(dòng)畫(huà)的表現(xiàn)提供了廣闊空間。不同風(fēng)格形式的動(dòng)畫(huà)可以營(yíng)造不同的操作氛圍，提升天氣APP的用戶體驗(yàn)。而動(dòng)畫(huà)的形式需服從于功能，因此，天氣APP中動(dòng)畫(huà)的運(yùn)用需立足于創(chuàng)新性、統(tǒng)一性、趣味性和實(shí)用性的原則，以此提升產(chǎn)品的用戶體驗(yàn)，保證產(chǎn)品的吸引力，最大程度地實(shí)現(xiàn)產(chǎn)品的價(jià)值。

參考文獻(xiàn)：

[1]劉永翔.基于產(chǎn)品可用性的人機(jī)界面交互設(shè)計(jì)研究[J].包裝工程，2008，29（4）：81-83.

[2]夏穎翀.功能性動(dòng)畫(huà)發(fā)展和教育研究[J].裝飾，2011（02）：129-130.

[3]丘美玲.基于APP的交互動(dòng)畫(huà)設(shè)計(jì)與應(yīng)用[J].設(shè)計(jì)，2015（09）：127-128.

[4]詹姆斯·加瑞特.用戶體驗(yàn)要素[M].范曉燕譯.北京：機(jī)械工業(yè)出版社，2011.