鄭曉東 馬超

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

【關(guān)鍵詞】天氣APP;動畫;交互

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

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

一、天氣APP中動畫的功能性

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

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

二、天氣APP中動畫的設(shè)計表現(xiàn)

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

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

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

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

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

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

三、天氣APP中動畫的設(shè)計原則

（一）創(chuàng)新性

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

（二）統(tǒng)一性

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

（三）趣味性

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

（四）實用性

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

三、結(jié)語

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

參考文獻(xiàn)：

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

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

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

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