夏麗雯

摘 要 交互動畫能夠提供更好的視覺上的用戶體驗，并可以起到引導(dǎo)和提示作用，移動終端中交互動畫受限于網(wǎng)絡(luò)、設(shè)備等，要為用戶提供自然、愉悅的操作體驗，就需要將視覺和觸覺進行科學(xué)結(jié)合。文章在分析移動終端視覺體驗和交互動畫的基礎(chǔ)上，結(jié)合交互動畫的設(shè)計技巧，探討了移動終端交互動畫的設(shè)計原則。

關(guān)鍵詞 視覺體驗；交互設(shè)計；交互動畫

中圖分類號 G2 文獻標識碼 A 文章編號 2096-0360（2018）13-0126-02

近年來，移動智能設(shè)備快速發(fā)展，各類配置、系統(tǒng)等被不斷優(yōu)化，移動終端的視覺體驗也有了更好發(fā)展，動畫被廣泛應(yīng)用在移動終端的界面設(shè)計中，其主要應(yīng)用形式有歡迎、跳轉(zhuǎn)、加載、反饋等，有效減少了用戶因等待引起的焦慮，并且使體驗更加流暢愉悅。交互動畫是動畫和交互設(shè)計結(jié)合產(chǎn)生的同時具有藝術(shù)美和設(shè)計性，并增加了人與物的互動性，極大程度地優(yōu)化了用戶體驗，提高了用戶在互動環(huán)節(jié)中的主動性。

1 移動終端視覺體驗和交互設(shè)計

視覺體驗是交互體驗的最初階段，在交互設(shè)計中有著重要地位，移動終端視覺體驗是其交互動畫設(shè)計的基礎(chǔ)，視覺體驗源于視覺元素，交互設(shè)計視覺元素包括色彩、圖像、文字等。移動終端是目前主流的物理設(shè)備，涉及到人們?nèi)粘Ｉ畹姆椒矫婷?，具有很好的交互性，是互動交流的重要平臺，能夠充分挖掘動畫作品中的藝術(shù)特征，強化觀賞體驗與情感交流，是交互動畫的重要載體。移動終端便于攜帶且使用情境復(fù)雜，用戶在使用設(shè)備時注意力集中狀態(tài)較差，由于用戶需要在有限時間內(nèi)瀏覽大量信息，此時用戶會選擇直奔主題或是直接退出，導(dǎo)致很多精心設(shè)計的細節(jié)及標題性文字會被忽略

掉[1]。因此設(shè)計師需要根據(jù)移動終端閱讀界面視覺特點，增加圖片、圖標等的使用，避免使用大量文字，人們識別圖像速度遠超文字，可以輕松看清圖片內(nèi)容和細節(jié)，在使用文字時盡量簡潔、清晰，減少閱讀困難，同時可以使用法“井”字型三等分方法平衡和穩(wěn)定界面元素，移動終端屏幕尺寸相對較小，界面元素豐富，科學(xué)的排列方式，可以避免界面雜亂無章，從而增加視覺吸引力。

2 交互動畫

1）交互動畫的特點。交互動畫是在創(chuàng)作中加入了交互設(shè)計，在播放時能夠支持事件響應(yīng)和交互功能，觀眾可對動畫進行控制或感應(yīng)播放環(huán)境，進而呈現(xiàn)出不一樣的動畫效果和內(nèi)容，增加了觀眾的參與度，使動畫變得更具趣味性[2]。隨著移動終端和網(wǎng)絡(luò)的廣泛應(yīng)用，交互動畫更加深入人們的生活，推動了新技術(shù)在藝術(shù)創(chuàng)作中的應(yīng)用。交互動畫促進了觀眾觀看動畫形式和習(xí)慣的改變，使觀眾能夠積極參與到交互環(huán)節(jié)中，增強情感帶入感，更好的體驗故事情節(jié)發(fā)展，使觀眾從被動欣賞轉(zhuǎn)變?yōu)橹鲃訁⑴c，符合當下時代發(fā)展趨勢。交互動畫最大特點就是動畫中融入了交互任務(wù)，在動畫情節(jié)創(chuàng)作完成后，需要考慮到交互環(huán)節(jié)的流暢性、引導(dǎo)性、娛樂性等，來滿足受眾需求。由于交互動畫可能存在較多的分支劇情，因此在設(shè)計時要考慮交互內(nèi)容對整部動畫的影響。移動終端交互動畫即用戶在使用App中進行交互產(chǎn)生的動畫，常見的有刷新、頁面跳轉(zhuǎn)、圖片縮放等，可提供更好的用戶體驗，提高用戶黏性，其動畫設(shè)計多較為微小，需要設(shè)計人員不斷改進來取得更好的視覺和體驗平衡。

2）移動終端交互動畫作用。交互動畫的作用主要是反饋提示和視覺引導(dǎo)，常見反饋提示為頁面跳轉(zhuǎn)、點擊按鈕變化等，視覺引導(dǎo)則多用于數(shù)據(jù)類頁面。在設(shè)計移動終端前，要先對常用的交互手勢進行了解和分析，移動交互動畫作用之一是對用戶的操作進行反饋提示，在設(shè)計動畫時需要結(jié)合不同的手勢應(yīng)用情況。點擊是觸屏設(shè)備常用的手勢，按鈕和輸入框均需要應(yīng)用這類手勢，其動畫設(shè)計要具有明顯的反饋效果，并且減少動畫時間對執(zhí)行效率的影響。雙擊手勢常用于圖片瀏覽中的快速縮放，在設(shè)計動畫時，一般將雙擊位置設(shè)為縮放中心點，圍繞雙擊地方進行縮放，通常不需要額外設(shè)計。拖動多用于界面元素的拖動，區(qū)域是任意的也可以是固定的，如界面App排列和整理，拖動動畫路徑要和手指移動軌跡保持一致，也可在用戶按住一個元素時給予反饋動畫。長按多用于刪除和彈出菜單，在不同的移動終端進行長按可喚出不同功能，如移動終端界面編輯和App卸載等，在進行動畫設(shè)計時常用進度條對所需長按時間進行提示?；瑒邮謩菘煞譃樽?、右、上、下不同方向滑動，滑動起始位置不同其效果可能會不同，上下滑動多用于需要多屏展示的內(nèi)容，如列表、文章等，左右滑動多用于切換頁面或操作，在設(shè)計時不需要進行動畫設(shè)計。雙指縮放一般用于界面縮放，和雙擊手勢相比，縮放應(yīng)用多范圍更廣，并且縮放更加直觀、精確，多用于游戲、地圖類型的App中。旋轉(zhuǎn)可實現(xiàn)某一元素的旋轉(zhuǎn)操作，常用在照片編輯操作中，在游戲中也有應(yīng)用。除這些常見手勢外，不同移動設(shè)備手勢設(shè)計也有差異，在設(shè)計交互動畫時，要充分考慮到交互手勢的運用，優(yōu)化動畫效果，提高用戶體驗[3]。

3 交互動畫設(shè)計

1）交互動畫設(shè)計技巧。在進行交互動畫設(shè)計時，要盡量將動畫的時間控制在0.3～1s，用戶在使用App時不會花大量時間去欣賞動畫，過長的動畫會造成用戶的不便，而過短的動畫會被用戶忽略，因此在設(shè)計時需要合理控制動畫的持續(xù)時間，使用戶不需要因為動畫花費時間等待，同時可以清楚感受到動畫。再有動畫的效果要符合用戶預(yù)期，使動畫可以被用戶預(yù)期到，如左右滑動手勢的動畫是菜單從左右滑出，減少用戶操作不便，在移動終端的交互動畫設(shè)計中，可根據(jù)其特點基于系統(tǒng)進行設(shè)計，在使用App時，用戶對系統(tǒng)自帶的動畫更加熟悉，在不同App中使用相似動畫，可以使用戶能夠更快的理解，減少學(xué)習(xí)成本，更便捷的使用軟件。在設(shè)計游戲中動畫時，可以進行獨立設(shè)計，因此在實際工作中需要根據(jù)情況進行靈活選擇，保證動畫可以提升用戶體驗[4]。

2）移動終端交互動畫設(shè)計原則。（1）動畫功能一致性：動畫既可提供更好的視覺方面的用戶體驗，也可起到提示和引導(dǎo)作用。在同一App中，相同功能的動畫要保持一致性，用戶在使用中會對相似的操作更加熟悉，在掌握應(yīng)用的使用后對相似的動畫就會易理解，同時動畫的一致性會使軟件整體更加的整潔有序。（2）動畫添加合理性：隨著網(wǎng)速和配置性能的提升，移動終端中應(yīng)用的用戶體驗也在不斷提升，在發(fā)展了App同時也降低了用戶的耐心，對一些需要耗費時間加載的App，可以設(shè)計簡單有趣的動畫分散注意力，減少用戶對等待時間的關(guān)注，如頁面加載、頁面刷新等。（3）動畫設(shè)計簡潔性：在移動終端交互動畫設(shè)計中，并不是動畫越多效果越好，從用戶角度來將App的流暢度很重要，過多動畫應(yīng)用會耗費較多的資源，影響應(yīng)用的整體效率。在設(shè)計時需要平衡性能，結(jié)合用戶體驗進行多方面思考。（4）動畫設(shè)計時效性：現(xiàn)代生活對時效性有很高的要求，從開發(fā)角度來看，動畫設(shè)計需要編制大量代碼，在工作中常會因為產(chǎn)品上線時間要求，對動畫進行壓縮，刪去對功能影響不大的動畫，同時減弱動態(tài)效果還可以節(jié)省設(shè)備電量，提高移動終端系統(tǒng)流暢度。（5）動畫設(shè)計科學(xué)性：交互動畫設(shè)計主要目的是提升用戶體驗，在進行設(shè)計時要盡可能的模擬真實世界，使動畫更加形象。同時要注意動畫的視覺連貫性，在明確引導(dǎo)用戶同時，使用戶能夠直觀感受到動畫過程，如頁面跳轉(zhuǎn)銜接，平衡新入元素、淡出元素和通用元素，使用戶能夠清晰感受到其中的關(guān)聯(lián)。（6）動畫設(shè)計層次性：交互動畫設(shè)計中元素的出現(xiàn)和消失非常常見，在設(shè)計動畫時要對元素的運動和順序進行充分的思考，以實現(xiàn)對用戶更好的引導(dǎo)。在設(shè)計元素時，要避免出現(xiàn)和消失同時發(fā)生，同時也要減少先后順序的明顯性，使整個動畫流暢、自然。元素運動設(shè)計要設(shè)置一個統(tǒng)一的焦點，使元素運動有層次性，避免混亂不連貫的情況[5]。

4 結(jié)束語

移動終端中交互動畫設(shè)計能夠有效提升界面的視覺效果，交互動畫設(shè)計在移動終端中應(yīng)用廣泛，在進行設(shè)計時需要結(jié)合視覺體驗、設(shè)計技巧等，根據(jù)交互動畫設(shè)計原則對整體設(shè)計進行合理控制調(diào)整，優(yōu)化整體設(shè)計，使用戶能夠獲得更好的操作體驗和情感體驗。

參考文獻

[1]孫傳祥.基于自然交互方式的移動終端產(chǎn)品交互設(shè)計研究[D].濟南：山東大學(xué)，2012.

[2]張嬡.基于移動智能終端閱讀類App的視覺體驗設(shè)計研究[D].北京：北京工業(yè)大學(xué)，2016.

[3]韓雪.基于手持移動終端的交互式動畫設(shè)計研究[D].天津：天津大學(xué)，2014.

[4]孫唯特.基于移動智能終端的交互式動畫分析[J].藝術(shù)科技，2015（11）：77.

[5]黃方聞.動靜之美 Sketch移動UI與交互動畫設(shè)計詳解[M].北京：人民郵電出版社，2016.