夏麗雯

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

關(guān)鍵詞 視覺(jué)體驗(yàn)；交互設(shè)計(jì)；交互動(dòng)畫

中圖分類號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2096-0360（2018）13-0126-02

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

1 移動(dòng)終端視覺(jué)體驗(yàn)和交互設(shè)計(jì)

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

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

2 交互動(dòng)畫

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

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

3 交互動(dòng)畫設(shè)計(jì)

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

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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