基于移動終端的交互式動畫設計探討

夏麗雯

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

關鍵詞 視覺體驗；交互設計；交互動畫

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

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

1 移動終端視覺體驗和交互設計

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

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

2 交互動畫

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

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

3 交互動畫設計

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

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

4 結束語

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

參考文獻

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

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

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

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

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