基于用戶體驗(yàn)的APP界面動(dòng)畫(huà)設(shè)計(jì)探究

于航

【摘 要】伴隨著科技進(jìn)步，手機(jī)、平板電腦等移動(dòng)設(shè)備的性能越來(lái)越強(qiáng)，人們對(duì)虛擬生活的品質(zhì)要求也在不斷提高，同時(shí)對(duì)移動(dòng)應(yīng)用程序的流暢性要求也越來(lái)越高。本文從APP界面動(dòng)畫(huà)的設(shè)計(jì)層面出發(fā)，采用了理論研究與實(shí)踐同步結(jié)合的創(chuàng)作方法，重點(diǎn)強(qiáng)調(diào)在界面動(dòng)畫(huà)設(shè)計(jì)中用戶體驗(yàn)至上的設(shè)計(jì)原則，并給出具體可行的建議，進(jìn)而更好地服務(wù)用戶。

【關(guān)鍵詞】APP；界面動(dòng)畫(huà)；用戶體驗(yàn)

中圖分類(lèi)號(hào)：J043 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1007-0125（2017）24-0126-02

新興媒體誕生促使傳統(tǒng)動(dòng)畫(huà)產(chǎn)業(yè)經(jīng)歷了全面改革，以網(wǎng)絡(luò)、移動(dòng)終端等為代表的新媒體動(dòng)畫(huà)應(yīng)運(yùn)而生，動(dòng)畫(huà)產(chǎn)業(yè)鏈迅速擴(kuò)大，社會(huì)影響顯著增強(qiáng)，在移動(dòng)終端上，利用和動(dòng)畫(huà)特效展現(xiàn)APP內(nèi)容，有利于促進(jìn)產(chǎn)品與用戶的溝通，促進(jìn)用戶對(duì)信息的理解。合理的界面動(dòng)畫(huà)設(shè)計(jì)也能充分調(diào)動(dòng)用戶的心理和生理反應(yīng)，增加產(chǎn)品的沉浸度，讓用戶在操作產(chǎn)品時(shí)注意力更加集中，完成任務(wù)的過(guò)程更加流暢。

界面動(dòng)畫(huà)設(shè)計(jì)是移動(dòng)應(yīng)用程序的重要組成部分，從屬于界面設(shè)計(jì)。經(jīng)過(guò)許多界面設(shè)計(jì)師的反復(fù)研究與推敲，移動(dòng)應(yīng)用程序界面設(shè)計(jì)需要遵循用戶心理學(xué)特點(diǎn)和他們對(duì)美的追求。在用戶進(jìn)行界面操作時(shí)，采用動(dòng)畫(huà)的形式可以給用戶帶來(lái)生動(dòng)的感官體驗(yàn)。動(dòng)畫(huà)在界面運(yùn)行時(shí)起到調(diào)和人機(jī)交互、承擔(dān)界面過(guò)渡的作用。

一、APP界面動(dòng)畫(huà)設(shè)計(jì)的心理學(xué)特點(diǎn)

界面動(dòng)畫(huà)研究可按心理學(xué)和美學(xué)兩個(gè)部分劃分。在心理學(xué)研究中，界面動(dòng)畫(huà)又承載了應(yīng)用程序這一“產(chǎn)品”的形象訴求、理性訴求和情感訴求。

德國(guó)著名哲學(xué)家E.施普蘭格爾把人格分為思想、情感、感覺(jué)、意志幾個(gè)方面，而這些正是心理學(xué)中人性的重要組成部分。移動(dòng)應(yīng)用程序作為虛擬產(chǎn)品，為了更好地反映用戶感受，必須將其價(jià)值體現(xiàn)在滿足用戶對(duì)該產(chǎn)品的形象訴求、理性訴求和情感訴求，帶給用戶內(nèi)心愉悅的操作體驗(yàn)。設(shè)計(jì)師應(yīng)該從“功能控”的思維中抽離出來(lái)，將主要精力放在用戶對(duì)產(chǎn)品的以上三點(diǎn)訴求上，達(dá)到功能與人性的統(tǒng)一，讓用戶覺(jué)得“有魅力”的產(chǎn)品更好用。將動(dòng)畫(huà)應(yīng)用于界面設(shè)計(jì)中，可以極大豐富受眾的感官，對(duì)受眾判斷、選擇等心理過(guò)程具有重要意義。

（一）形象訴求。品牌形象訴求是指以突出表現(xiàn)商品品牌形象為訴求目的的廣告形式?！肮鹆稚剿滋煜隆弊鳛閺V西著名的品牌形象，已經(jīng)被全世界旅游愛(ài)好者所熟知并認(rèn)可，移動(dòng)應(yīng)用程序《游廣西》作為這一形象的移動(dòng)終端表達(dá)，承載了“甲天下”的品牌價(jià)值?！队螐V西》圖標(biāo)以著名景點(diǎn)桂林象鼻山為主體，配以喀斯特地貌的山丘及溪水，便于識(shí)別、記憶，引導(dǎo)用戶思維聯(lián)想。

1.記憶性。美國(guó)心理學(xué)家G.米勒關(guān)于短期記憶的實(shí)驗(yàn)證明，人類(lèi)大腦對(duì)于無(wú)關(guān)聯(lián)、無(wú)規(guī)律的信息是有容量限制的?！队螐V西》界面動(dòng)畫(huà)基于手機(jī)、平板電腦屏幕為呈現(xiàn)終端，其動(dòng)畫(huà)形象需要從實(shí)際景觀中提煉、符號(hào)化，將元素分組、精簡(jiǎn)化，增加元素之間的關(guān)聯(lián)程度，加深用戶在體驗(yàn)時(shí)的印象。

2.聯(lián)想性。想象力是人類(lèi)進(jìn)步源泉，設(shè)計(jì)師在進(jìn)行界面動(dòng)畫(huà)設(shè)計(jì)時(shí)應(yīng)該充分認(rèn)識(shí)到這一規(guī)律，賦予設(shè)計(jì)作品帶給用戶產(chǎn)生想象的空間。在《游廣西》界面動(dòng)畫(huà)中，以多種符號(hào)化的形象元素加之節(jié)奏變化的動(dòng)態(tài)，激發(fā)受眾思維聯(lián)想。

《游廣西》登錄界面

（二）理性訴求。理性訴求定位于受眾的理智動(dòng)機(jī)，通過(guò)真實(shí)、準(zhǔn)確、公正地傳達(dá)企業(yè)、產(chǎn)品、服務(wù)的客觀情況，使受眾經(jīng)過(guò)概念、判斷、推理等思維過(guò)程，理智地作出決定。理性訴求體現(xiàn)在界面動(dòng)畫(huà)上就需要其按照設(shè)計(jì)規(guī)則，井然有序地呈現(xiàn)于終端屏幕，這就需要界面動(dòng)畫(huà)設(shè)計(jì)具有一定合理性，從而輔助用戶判斷和決定。

1.層次性。單一形象由局部過(guò)渡到整體，這樣的層次遞進(jìn)會(huì)引人入勝，趣味性強(qiáng)。當(dāng)動(dòng)畫(huà)形象為復(fù)數(shù)時(shí)，需要遞進(jìn)到下一步操作，可以采用堆疊動(dòng)畫(huà)；需要用戶在現(xiàn)有選項(xiàng)中選擇，采用羅列動(dòng)畫(huà)。

2.節(jié)奏性。界面動(dòng)畫(huà)與傳統(tǒng)動(dòng)畫(huà)一樣具有節(jié)奏的輕重緩急，通過(guò)改變動(dòng)畫(huà)節(jié)奏，可以使受眾感受到特定的韻律和情感。例如《游廣西》中的載入動(dòng)畫(huà)就是由靜止-運(yùn)動(dòng)-靜止-消失幾部分組成，加上漸變特效，可以產(chǎn)生柔和的節(jié)奏感。

《游廣西》載入動(dòng)畫(huà)

（三）情感訴求。無(wú)論設(shè)計(jì)何種產(chǎn)品，只有將人的情感注入其中，才能被用戶所接受。設(shè)計(jì)作品所富含的魅力，正體現(xiàn)于這些人性當(dāng)中。而界面動(dòng)畫(huà)同樣需要體現(xiàn)用戶的情感訴求，但由于其極少含有故事情節(jié)，因此主要通過(guò)各種形象、色彩和程序互動(dòng)來(lái)傳遞情感。例如，《游廣西》中的少數(shù)民族吉祥物頭像設(shè)計(jì)，通過(guò)廣西少數(shù)民族的卡通形象，拉近用戶與虛擬程序、廣西文化間的距離，給人以親和力。

《游廣西》主界面

二、APP界面動(dòng)畫(huà)設(shè)計(jì)的美學(xué)特點(diǎn)

當(dāng)今現(xiàn)代，移動(dòng)應(yīng)用程序界面動(dòng)畫(huà)設(shè)計(jì)具有其獨(dú)特的美學(xué)意義，此意義不單純停留在視覺(jué)美的層面，還表現(xiàn)于這些設(shè)計(jì)帶給用戶對(duì)美的體驗(yàn)與回味。

（一）構(gòu)成美。界面動(dòng)畫(huà)的構(gòu)成美可以理解為：構(gòu)建用戶操作界面過(guò)程中，通過(guò)精密計(jì)算與設(shè)計(jì)，分割圖形界面，安置動(dòng)畫(huà)元素自身及其整體中所有圖形成分，獲得極高的視覺(jué)動(dòng)態(tài)平衡和無(wú)數(shù)的設(shè)計(jì)可能性，創(chuàng)造出視覺(jué)上高度清晰的設(shè)計(jì)。

具有美感的界面動(dòng)畫(huà)給用戶的感覺(jué)應(yīng)是有序的、張弛有度的，巧妙引入界面動(dòng)畫(huà)常常能讓平淡的界面和枯燥的操作變得更有意思。比如使用非對(duì)稱動(dòng)畫(huà)形象或元素，改變動(dòng)畫(huà)圖形的形狀，增加一些活躍性、趣味性強(qiáng)的元素來(lái)改變用戶注視習(xí)慣等方法。

（二）色彩美。界面動(dòng)畫(huà)的色彩美可以理解為：從用戶對(duì)色彩的直覺(jué)和心理效果出發(fā)，用科學(xué)的分析方法，把復(fù)雜的色彩現(xiàn)象還原為基本要素，利用色彩在空間、量與質(zhì)上的可變幻性，按照一定的規(guī)律去組合，再創(chuàng)造出適用于界面動(dòng)畫(huà)的美的色彩效果。界面動(dòng)畫(huà)的情感傾向跟色彩有著直接關(guān)系，要讓用戶能夠感受到色彩之美，設(shè)計(jì)者應(yīng)該懂得用戶對(duì)色彩的心理感受和認(rèn)知特征，這樣才能更好地把握視覺(jué)界面的色彩美。

然而，界面動(dòng)畫(huà)不同于日常的照片或者平面藝術(shù)作品，它承擔(dān)一定功能作用。因此，界面動(dòng)畫(huà)對(duì)色彩有特殊的要求，既要具備高度的一致性，又要滿足用戶的審美。根據(jù)色彩的色相、明度和飽和度而變化搭配方式，可以使界面動(dòng)畫(huà)豐富而和諧。

三、APP界面動(dòng)畫(huà)的人性化設(shè)計(jì)建議

移動(dòng)應(yīng)用程序已經(jīng)成為現(xiàn)代人生活方式中不可分割的一部分，便捷性和高效性是其主要原因。人們?cè)絹?lái)越重視移動(dòng)應(yīng)用程序中的體驗(yàn)感，人與虛擬界面的交互朝著人性化、友好化的方向飛速發(fā)展，“時(shí)刻為用戶著想”成為界面動(dòng)畫(huà)設(shè)計(jì)的首要考慮因素。所以，在設(shè)計(jì)APP界面動(dòng)畫(huà)時(shí)，必須合理考量用戶的心理、生理各項(xiàng)需求。

（一）界面動(dòng)畫(huà)設(shè)計(jì)應(yīng)該是基于用戶的心理訴求，而不是現(xiàn)成模板。界面動(dòng)畫(huà)的設(shè)計(jì)是與界面架構(gòu)密不可分的，設(shè)計(jì)師在設(shè)計(jì)界面動(dòng)畫(huà)時(shí)應(yīng)該善于換位思考，著重展現(xiàn)用戶的心理訴求，而不是一味地給用戶灌輸或強(qiáng)行引導(dǎo)，應(yīng)該把后臺(tái)復(fù)雜的程序簡(jiǎn)單化，用日常互動(dòng)的方式完成操作。其實(shí)，這就要求設(shè)計(jì)師將原始數(shù)據(jù)架構(gòu)跟生活結(jié)合，抓準(zhǔn)用戶的生活操作模式，這樣才能做出人性化的界面動(dòng)畫(huà)。例如《游廣西》中的美食、美景搖出來(lái)，隨機(jī)化地推薦項(xiàng)目可以給予用戶探索未知事物的喜悅。

（二）提供彈出式反饋動(dòng)畫(huà)，不打斷任務(wù)操作。我們?cè)谑褂肁PP時(shí)會(huì)經(jīng)常遇到這樣的問(wèn)題，在進(jìn)行某項(xiàng)操作時(shí)會(huì)被突如其來(lái)的選項(xiàng)打斷，嚴(yán)重影響操作流暢性。例如，我們?cè)诎l(fā)信息或看電子材料的時(shí)候經(jīng)常會(huì)被后臺(tái)未關(guān)閉的程序打擾，從而強(qiáng)制打斷我們的思路，轉(zhuǎn)而切換到另一個(gè)程序。這就使得原本善意的操作提醒變得不人性化。在《游廣西》中，我們引入模態(tài)彈出框的方式，就是俗稱的氣泡彈出動(dòng)畫(huà)。這種軟性提醒不會(huì)打斷正在進(jìn)行的操作，而是浮動(dòng)于操作層之上的互動(dòng)提醒，這樣用戶既能收到提醒消息，又不會(huì)因思路被打斷而苦惱。

（三）界面動(dòng)畫(huà)需要掩護(hù)程序響應(yīng)時(shí)間。APP設(shè)計(jì)的核心理念就是將用戶的體驗(yàn)便捷化、高效化，這是也成為界面動(dòng)畫(huà)必須考慮的因素。然而，與之相矛盾的是，用戶對(duì)信息量的需求也同時(shí)迅速增長(zhǎng)，這就要求移動(dòng)應(yīng)用程序需要不斷優(yōu)化和完善，要讓用戶在獲取龐大信息的同時(shí)，減少碎片時(shí)間，讓他們覺(jué)得程序原本就應(yīng)該是這么運(yùn)行的。這時(shí)，界面動(dòng)畫(huà)又可以擔(dān)任掩護(hù)角色，簡(jiǎn)短的載入動(dòng)畫(huà)可以減少用戶枯燥的等待，提升操作時(shí)的流暢程度。所以，設(shè)計(jì)師需要制定一套方案引導(dǎo)用戶完成對(duì)軟件的學(xué)習(xí)和熟悉，而不是向用戶展現(xiàn)一個(gè)枯燥的等待界面。當(dāng)然，這些也必須是軟性的，不能強(qiáng)加給用戶額外的操作。

《游廣西》內(nèi)容界面

參考文獻(xiàn)：

[1]數(shù)碼藝術(shù)雜志2006合訂本[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用雜志社，2006.

[2]黑格爾.美學(xué)》第三卷上[M].商務(wù)印書(shū)館，1979.

[3]黑格爾.美學(xué)》第三卷下[M].商務(wù)印書(shū)館，1981.

[4]Susan Weinschenk.設(shè)計(jì)師要懂心理學(xué)[M].人民郵電出版社，2013.

[5]騰訊公司用戶研究與體驗(yàn)設(shè)計(jì)部.在你身邊，為你設(shè)計(jì)：騰訊的用戶體驗(yàn)設(shè)計(jì)之道[M].電子工業(yè)出版社，2013.

[6]Jon Kolko.交互設(shè)計(jì)沉思錄：頂尖設(shè)計(jì)專(zhuān)家JON KOLKO的經(jīng)驗(yàn)與心得 第三卷[M].機(jī)械工業(yè)出版社，2012.

[7]傅小貞，胡甲超，鄭元攏.移動(dòng)設(shè)計(jì)[M].電子工業(yè)出版社，2013.