朱潔皓

（江蘇商貿(mào)職業(yè)學(xué)院，江蘇 南通 226011）

界面中的動(dòng)效設(shè)計(jì)使界面展示信息時(shí)更加易于理解，展示內(nèi)容更清晰，能及時(shí)地與用戶(hù)進(jìn)行交流并作出響應(yīng)，好的動(dòng)效設(shè)計(jì)能使用戶(hù)在操作界面時(shí)邏輯更清晰，使用更便捷，隨著人們情感體驗(yàn)精神需求的不斷提升，App 設(shè)計(jì)中對(duì)用戶(hù)情感的關(guān)注也逐漸成為設(shè)計(jì)優(yōu)良的評(píng)價(jià)標(biāo)準(zhǔn)，人們對(duì)動(dòng)效設(shè)計(jì)的情感化體驗(yàn)也展開(kāi)了設(shè)計(jì)與研究。

1 App 動(dòng)效的設(shè)計(jì)

1.1 動(dòng)效設(shè)計(jì)

動(dòng)效設(shè)計(jì)是一種以畫(huà)面為載體，將資訊輸入到界面設(shè)計(jì)中的一種重要的視覺(jué)表達(dá)方式。動(dòng)效設(shè)計(jì)在圖形設(shè)計(jì)的基礎(chǔ)上，添加了時(shí)間的概念，按照一定的物理法則，給使用者提供信息，讓用戶(hù)可以看到自己的動(dòng)作，可以對(duì)用戶(hù)的行為做出反應(yīng)，清楚地說(shuō)明界面設(shè)計(jì)中的互動(dòng)行為的起始和終止[1]。動(dòng)效設(shè)計(jì)的研究和實(shí)踐也在注重對(duì)用戶(hù)體驗(yàn)的產(chǎn)品優(yōu)化，動(dòng)態(tài)效果能夠在靜止的網(wǎng)頁(yè)上引起用戶(hù)的注意，更加清晰和有力地傳遞信息。

1.2 情感化設(shè)計(jì)

情感設(shè)計(jì)是由唐納德·諾曼在《設(shè)計(jì)心理學(xué)》一書(shū)中提出的。情感化設(shè)計(jì)分為本能層、行為層、反思層三個(gè)層次。隨著人們生活水平的提高，用戶(hù)對(duì)各類(lèi)產(chǎn)品的要求已不僅僅是功能的滿(mǎn)足，越來(lái)越多的用戶(hù)在滿(mǎn)足功能的基礎(chǔ)上，提出視覺(jué)美觀(guān)，個(gè)性化的本能層要求；操作邏輯清晰，產(chǎn)品易用的行為層要求；情感關(guān)懷、產(chǎn)生共鳴、價(jià)值感認(rèn)同，留下深刻印象的反思層要求[2]。隨著設(shè)計(jì)心理學(xué)的興起，人們?cè)絹?lái)越注重對(duì)用戶(hù)的情感體驗(yàn)，因此情感設(shè)計(jì)也得到了廣泛的重視，將人們的目光從功能滿(mǎn)足轉(zhuǎn)向了人性關(guān)懷，使其更貼近使用者。在圖像效果方面，情緒設(shè)計(jì)也是非常重要的，充滿(mǎn)感情的動(dòng)態(tài)效果能為使用者帶來(lái)更好的使用體驗(yàn)，為用戶(hù)提供了一個(gè)清晰的界面和愉快的使用體驗(yàn)，從而達(dá)到視覺(jué)美觀(guān)，邏輯引導(dǎo)清晰，反饋及時(shí)易懂等基本需求，提高使用愉悅感。

1.3 交互動(dòng)態(tài)效果的運(yùn)用

傳統(tǒng)信息的傳播是單向的，靜態(tài)的，隨著技術(shù)和網(wǎng)絡(luò)的發(fā)展，越來(lái)越多的交互功能被實(shí)現(xiàn)，信息的傳播實(shí)現(xiàn)了差異化，不同的用戶(hù)根據(jù)需要可以與產(chǎn)品之間進(jìn)行交互，選擇需要的信息來(lái)進(jìn)行展示，突出了信息傳遞的準(zhǔn)確性。交互需要在實(shí)現(xiàn)視覺(jué)設(shè)計(jì)時(shí)，更多地顧及使用者的感受與需要，改變了傳統(tǒng)的視覺(jué)傳播方式，即用戶(hù)在單向接受靜態(tài)信息時(shí)，根據(jù)使用者的習(xí)慣及視覺(jué)體驗(yàn)，讓用戶(hù)有一種身臨其境的感覺(jué)。交互帶個(gè)用戶(hù)的信息精準(zhǔn)度，與用戶(hù)交流中的情感依賴(lài)與共鳴，這是靜態(tài)的視覺(jué)展示無(wú)法實(shí)現(xiàn)的，為了使產(chǎn)品與用戶(hù)之間的黏性增加，使用戶(hù)與產(chǎn)品之間產(chǎn)生更多的共鳴，在實(shí)現(xiàn)產(chǎn)品基礎(chǔ)功能的前提下，深入研究和提升交互動(dòng)態(tài)效果的運(yùn)用是必要的。

2 情感化體驗(yàn)在動(dòng)效設(shè)計(jì)中的應(yīng)用分析

2.1 動(dòng)態(tài)效果的基本要素

在完成靜態(tài)界面添加動(dòng)態(tài)效果時(shí)，必須先掌握最基礎(chǔ)的可視化參數(shù)。動(dòng)效設(shè)計(jì)的中心思想是通過(guò)恰當(dāng)?shù)膭?dòng)畫(huà)，在合適的時(shí)機(jī)，以合適的速度來(lái)傳達(dá)觀(guān)念和訊息。動(dòng)效的設(shè)計(jì)應(yīng)該主要圍繞元素位移、縮放、不透明度變化、旋轉(zhuǎn)等基本屬性來(lái)進(jìn)行設(shè)計(jì)。當(dāng)基本的運(yùn)動(dòng)規(guī)則被確定后，再通過(guò)調(diào)整特定的屬性來(lái)達(dá)到精煉的效果。

在動(dòng)態(tài)效果設(shè)計(jì)中，動(dòng)態(tài)效果響應(yīng)的時(shí)間，和動(dòng)態(tài)效果的觸發(fā)點(diǎn)是需要根據(jù)產(chǎn)品進(jìn)行設(shè)計(jì)的。首先動(dòng)作效果必須有某種含義，在一些重要的場(chǎng)合，達(dá)到反饋、傳遞信息、引導(dǎo)任務(wù)、集中注意力的目的。不能隨意地堆疊，甚至是照搬模板。動(dòng)態(tài)效果比使用者的動(dòng)作要慢一些，有一些反應(yīng)的時(shí)間，便于使用者掌握使用的節(jié)拍。下一步是將預(yù)設(shè)值與啟動(dòng)值之間的間隔時(shí)間控制在最佳值。太短的動(dòng)態(tài)效果不但沒(méi)有傳遞出足夠的訊息，而且一閃而過(guò)讓使用者無(wú)法看清，引起誤解。動(dòng)態(tài)效果的響應(yīng)時(shí)間太久或等待的時(shí)候顯示比較單調(diào)，會(huì)讓用戶(hù)失去耐心，放棄等待。在動(dòng)態(tài)效果上，不同層次的函數(shù)在視覺(jué)上要有顯著的差別，同樣的動(dòng)作和效果，用時(shí)間來(lái)營(yíng)造有序和一致性，增加可讀性。在動(dòng)態(tài)的作用下，元素的變形，比如擠壓和拉伸，都是模仿物理的。在虛擬世界中引入了現(xiàn)實(shí)的物理法則，模擬了重力、摩擦力和慣性對(duì)運(yùn)動(dòng)目標(biāo)的變形，能提高活動(dòng)性。自然中沒(méi)有任何一種物質(zhì)是均勻的，也不會(huì)有什么東西會(huì)突然停下來(lái)，因此，很多界面的移動(dòng)、翻頁(yè)，都需要設(shè)置動(dòng)態(tài)曲線(xiàn)。

2.2 動(dòng)態(tài)效果的視覺(jué)沖擊性與功能性特征

以用戶(hù)體驗(yàn)為宗旨，分析使用者的操作習(xí)慣、用戶(hù)的喜好，軟件的使用情況和整個(gè)過(guò)程的架構(gòu)，在進(jìn)行動(dòng)態(tài)效果設(shè)計(jì)時(shí)，力求利用元素、色彩、流暢的動(dòng)態(tài)效果來(lái)創(chuàng)造舒適的效果，做好可視化的指導(dǎo)。這些信息是按照等級(jí)順序排列的，每個(gè)單元的布局可以有明顯的主次關(guān)系，有了視覺(jué)上的突出，讓使用者知道哪些地方值得注意，這是一個(gè)值得探索的地方。再進(jìn)一步發(fā)掘出合適的動(dòng)態(tài)植入時(shí)機(jī)，為用戶(hù)添加一些有創(chuàng)造性的點(diǎn)子。

視覺(jué)上的震撼與功能的結(jié)合并不矛盾，并且是一種包含的關(guān)系，并且在視覺(jué)經(jīng)驗(yàn)中也包括了功能的展示，也是一種提升體驗(yàn)的方式。動(dòng)態(tài)效果設(shè)計(jì)能清楚地向使用者展示App 的運(yùn)行過(guò)程，例如點(diǎn)擊一個(gè)圖標(biāo)就可以完成網(wǎng)頁(yè)的跳躍，它會(huì)不斷地變小，然后變大，這是一個(gè)準(zhǔn)備。若動(dòng)作幅度較大，則會(huì)有較小的反彈。位移的改變不是一條直線(xiàn)，但在動(dòng)態(tài)效果設(shè)計(jì)中，遵循自然法則和邏輯，除非那些法則有特別的含義被破壞。

2.3 利用動(dòng)態(tài)效果提升用戶(hù)體驗(yàn)的原則性

動(dòng)效發(fā)生在使用者的動(dòng)作之后，作出回應(yīng)，具有自我解釋力，它能緩解使用者的耐心和焦躁，讓使用者有一種安全感和互動(dòng)的感覺(jué)。動(dòng)態(tài)效用表現(xiàn)在轉(zhuǎn)場(chǎng)過(guò)渡和資訊層次上，能讓使用者理清思路，更好地了解整體和局部的關(guān)系，讓新的消息和界面不會(huì)突然地冒出來(lái)。至于下一層會(huì)有什么，前饋效應(yīng)具有強(qiáng)烈的提示作用，為將要發(fā)生的事情做好準(zhǔn)備，提高使用效率和便利性，優(yōu)化操作體驗(yàn)。

良好的動(dòng)態(tài)效果能夠?qū)⒉煌墓δ軈^(qū)分開(kāi)來(lái)，也可以把沒(méi)有規(guī)則的數(shù)據(jù)整理起來(lái)，通過(guò)軟件界面架構(gòu)的連接，加強(qiáng)邏輯關(guān)系，提高認(rèn)識(shí)的有效性，方便使用者在交互過(guò)程中不出戲，準(zhǔn)確的查找需要的資料。對(duì)點(diǎn)擊后的反應(yīng)進(jìn)行及時(shí)的反饋，能夠消除使用者的焦躁感，減少負(fù)擔(dān)，最大限度地減少信息轉(zhuǎn)換間隙所造成的焦慮和困惑，提高使用的便利性。要善于運(yùn)用減法的強(qiáng)弱，刪除不必要的，讓它更適合于核心功能，協(xié)助用戶(hù)使用、理解和記憶，擁有最佳的操作體驗(yàn)[3]。舉個(gè)例子，在加載過(guò)程中，增加了動(dòng)態(tài)功能，導(dǎo)致了時(shí)間感的扭曲，通過(guò)加載動(dòng)畫(huà)的視覺(jué)效果，使觀(guān)眾有一種等待時(shí)間不長(zhǎng)的感覺(jué)，從而降低了耐心的消磨，加強(qiáng)互動(dòng)的體驗(yàn)。

3 常見(jiàn)動(dòng)效的情感表達(dá)方法

3.1 轉(zhuǎn)場(chǎng)動(dòng)效

轉(zhuǎn)場(chǎng)動(dòng)效應(yīng)用在頁(yè)面的切換和功能的轉(zhuǎn)換，有不少應(yīng)用在頁(yè)面切換時(shí)沒(méi)有動(dòng)效，是直接的跳轉(zhuǎn)，在用戶(hù)觀(guān)看時(shí)，會(huì)有卡頓的感覺(jué)，顯得比較生硬，界面缺少友好性；在頁(yè)面切換中加入一些動(dòng)效可以使頁(yè)面看起來(lái)更加流暢，提升觀(guān)看的舒適度，同時(shí)，應(yīng)用一些不同的動(dòng)效，也能幫助用戶(hù)理清應(yīng)用頁(yè)面的層級(jí)關(guān)系。例如，在很多應(yīng)用中，進(jìn)入應(yīng)用會(huì)用由小到大的動(dòng)效，退出則用由大到小的動(dòng)效；進(jìn)入某項(xiàng)功能的子層級(jí)，常用向左滑動(dòng)的動(dòng)效，退回上一層級(jí)常用向右滑動(dòng)的動(dòng)效；動(dòng)效的加入能使用戶(hù)的操作邏輯更清晰。

轉(zhuǎn)場(chǎng)動(dòng)效的設(shè)計(jì)中，需要使用“緩動(dòng)”來(lái)讓動(dòng)效的表達(dá)更符合實(shí)際的情況和用戶(hù)的期望，在生活中，動(dòng)作的轉(zhuǎn)換一定不是勻速的運(yùn)動(dòng)，常會(huì)出現(xiàn)加速或減速的變化，在動(dòng)效的設(shè)計(jì)時(shí)，要根據(jù)實(shí)際的應(yīng)用場(chǎng)景，選擇緩動(dòng)的變化曲線(xiàn)，以符合應(yīng)用的場(chǎng)景。

3.2 展示動(dòng)效

展示動(dòng)效應(yīng)用在需要重點(diǎn)展示的信息中，通過(guò)一些動(dòng)態(tài)效果的添加，幫助用戶(hù)理解信息內(nèi)容，并獲得信息中的情感。例如，在天氣App 中，常會(huì)見(jiàn)到根據(jù)不同的天氣狀態(tài)，會(huì)有不同的展示動(dòng)效，以更加直觀(guān)地提示用戶(hù)天氣的變化，在觀(guān)看信息時(shí)，能通過(guò)動(dòng)效直接的獲取，節(jié)省閱讀的時(shí)間，也提升了產(chǎn)品的易用性。但由于設(shè)備屏幕的尺寸有限，在需要展示較多信息的時(shí)候，還可以通過(guò)縮放、翻轉(zhuǎn)、折疊化等動(dòng)效，來(lái)對(duì)信息進(jìn)行更為豐富的展示，動(dòng)過(guò)動(dòng)效的添加，可以將信息以漸進(jìn)的方式進(jìn)行展示，提升用戶(hù)認(rèn)識(shí)的同時(shí)，也能表達(dá)出信息之間的層級(jí)關(guān)系，幫助用戶(hù)理解信息邏輯，提升使用體驗(yàn)。

在展示動(dòng)效的設(shè)計(jì)中，常使用“堆疊”的方法來(lái)進(jìn)行信息的分層展示，體現(xiàn)出信息間的連續(xù)性與邏輯關(guān)系，在“堆疊”切換的過(guò)程中，運(yùn)用縮放、模糊效果，模擬生活中近大遠(yuǎn)小、近實(shí)遠(yuǎn)虛的透視效果。常用“維度變化”的方法體現(xiàn)信息的翻轉(zhuǎn)和折疊，當(dāng)新的信息產(chǎn)生或消失時(shí)，運(yùn)用維度變化，做出翻轉(zhuǎn)、折疊的效果，展示出信息的敘事、連續(xù)性和邏輯關(guān)系。

3.3 引導(dǎo)動(dòng)效

引導(dǎo)動(dòng)效的應(yīng)用往往是希望引起用戶(hù)的注意力，根據(jù)一般視覺(jué)注意的規(guī)律，人眼總是會(huì)先注意到運(yùn)動(dòng)的元素，通過(guò)抓取用戶(hù)注意，引導(dǎo)用戶(hù)點(diǎn)擊，進(jìn)入到目標(biāo)場(chǎng)景。例如，很多App 的導(dǎo)航中都會(huì)有“+”按鈕，點(diǎn)擊常會(huì)出現(xiàn)更多選項(xiàng)，在出現(xiàn)的過(guò)程中根據(jù)產(chǎn)品使用合適的動(dòng)效，能給用戶(hù)帶來(lái)清晰的思路，快速找到需要點(diǎn)擊的按鈕。

在引導(dǎo)動(dòng)效中，常使用“鏡頭平移與縮放”的方法，對(duì)界面元素進(jìn)行展示，并保持過(guò)程的連續(xù)性和空間變化，這種動(dòng)效可以暗示觀(guān)察者視角的變化，也可以暗示靜止的視角下對(duì)象改變位置。通過(guò)連續(xù)性和敘述來(lái)支持可用性，幫助用戶(hù)在界面對(duì)象和目的地之間無(wú)縫轉(zhuǎn)換。還可以結(jié)合“維度變化”來(lái)引導(dǎo)更多的空間，更直觀(guān)地向用戶(hù)傳達(dá)與當(dāng)前信息相關(guān)聯(lián)的上一層與地下一層的內(nèi)容，幫助用戶(hù)更好的搭建產(chǎn)品邏輯結(jié)構(gòu)。

3.4 加載動(dòng)效

加載動(dòng)效應(yīng)用在由于網(wǎng)絡(luò)原因或數(shù)據(jù)流量較大時(shí)，不能及時(shí)呈現(xiàn)內(nèi)容時(shí)，有一定等待時(shí)間，在等待的同時(shí)，運(yùn)用動(dòng)效，讓用戶(hù)了解加載的進(jìn)度，同時(shí)緩解等待時(shí)的焦躁、無(wú)聊等負(fù)面情緒，以提升產(chǎn)品的體驗(yàn)感。

在加載動(dòng)效的設(shè)計(jì)中，常用“變形”的方法，當(dāng)加載進(jìn)程結(jié)束時(shí)，可以進(jìn)行形態(tài)的變化，以提示對(duì)象效用發(fā)生的變化，以創(chuàng)建連續(xù)的產(chǎn)品敘事流程，變形是提升可用性動(dòng)效中最明顯和最具穿透力的?！爸底儭钡姆椒ㄒ矔r(shí)在加載動(dòng)效中常用的方法，運(yùn)用數(shù)值的變化來(lái)提示加載的進(jìn)度，在實(shí)際的設(shè)計(jì)案例中，數(shù)值的變化可以用一些與產(chǎn)品相關(guān)的動(dòng)態(tài)圖形來(lái)展示，例如旅行類(lèi)產(chǎn)品中運(yùn)用奔跑的小人；飲品點(diǎn)單產(chǎn)品中運(yùn)用逐漸注滿(mǎn)水的杯子等，提升用戶(hù)對(duì)產(chǎn)品的印象，提升親和力，增進(jìn)個(gè)性化的情感。

3.5 反饋動(dòng)效

反饋動(dòng)效運(yùn)用在當(dāng)用戶(hù)與產(chǎn)品產(chǎn)生點(diǎn)擊、滑動(dòng)、縮放、拖拽等交互時(shí)，產(chǎn)生的視覺(jué)或聽(tīng)覺(jué)或觸覺(jué)的動(dòng)態(tài)反饋，以向用戶(hù)反饋交互的結(jié)果，幫助客戶(hù)了解交互過(guò)程中所處的狀態(tài)，給用戶(hù)帶來(lái)安全感，讓用戶(hù)清楚地了解目前處在什么狀態(tài)，當(dāng)前發(fā)生了什么事情。例如在眾多產(chǎn)品的密碼輸入頁(yè)面，用綠色代表安全性高或登錄成功，紅色代表安全性低或錯(cuò)誤，很多時(shí)候還會(huì)加入音效或震動(dòng)，通過(guò)多種感知來(lái)反饋當(dāng)前的狀態(tài)，以及時(shí)的提示用戶(hù)交互操作的狀態(tài)。在生活中如果去按下按鈕，你能感受到按下時(shí)的力度和按鈕的阻力，但這些是在點(diǎn)擊屏幕的時(shí)候所無(wú)法接收到的反饋，所以就需要通過(guò)一些視覺(jué)、聽(tīng)覺(jué)或觸覺(jué)的方式來(lái)及時(shí)將交互的結(jié)果反饋給用戶(hù)[4]。

在反饋動(dòng)效中，常會(huì)用到“生成”的方法，這種動(dòng)畫(huà)能展示出通過(guò)操作而發(fā)生的新的事件，以及前后事件之間的關(guān)系?！吧伞笨梢砸龑?dǎo)用戶(hù)從交互前的信息轉(zhuǎn)向交互后的信息，反饋信息之間的關(guān)系，提示進(jìn)一步的操作，增強(qiáng)用戶(hù)信任度，提升產(chǎn)品安全感。

通過(guò)以上常見(jiàn)動(dòng)效的情感表達(dá)方法，可以幫助我們?cè)趧?dòng)效設(shè)計(jì)中更為準(zhǔn)確地表達(dá)情感，提升產(chǎn)品的人性化體驗(yàn)，增強(qiáng)客戶(hù)的黏度。在實(shí)際案例的設(shè)計(jì)中，可以根據(jù)不同產(chǎn)品的具體情況，進(jìn)行各種表達(dá)方法的組合，來(lái)衍生出各類(lèi)復(fù)雜并變化豐富的動(dòng)效，提升產(chǎn)品可用性，提升情感體驗(yàn)。

4 結(jié)語(yǔ)

隨著設(shè)計(jì)對(duì)情感化的重視，App 的情感設(shè)計(jì)也在逐步提升，而在App 界面中，動(dòng)效是最容易引起用戶(hù)注意，并與用戶(hù)產(chǎn)生交流最多的因素。本文通過(guò)對(duì)App 動(dòng)效的分析和情感化設(shè)計(jì)的研究，總結(jié)常見(jiàn)動(dòng)效的情感表達(dá)方法，希望能給App 動(dòng)效設(shè)計(jì)提供一定的參考。但App 的種類(lèi)形式多樣，針對(duì)不同產(chǎn)品的情感化設(shè)計(jì)研究還需再進(jìn)一步深入。