劉佳琪

（武漢文理學(xué)院，湖北 武漢430080）

信息技術(shù)的發(fā)展為APP中界面設(shè)計(jì)提供了強(qiáng)大的動力和技術(shù)支持，伴隨著技術(shù)的發(fā)展與提高，移動端、網(wǎng)頁端設(shè)計(jì)也作出了相應(yīng)的順勢改變，其理念從功能至上到用戶至上，更注重細(xì)節(jié)的描繪，風(fēng)格從扁平化到3D立體化，顏色從純色到紋理化，展示形式從靜態(tài)到動靜結(jié)合。在一次次改變創(chuàng)新中，人機(jī)交互就成了一門值得所有設(shè)計(jì)者和程序員思考與研究的學(xué)問，UI設(shè)計(jì)由此孕育而來，新的設(shè)計(jì)潮流也就順勢應(yīng)運(yùn)而生。如今，用戶在數(shù)字空間里消費(fèi)越來越多的學(xué)習(xí)內(nèi)容，在碎片化的時(shí)間里獲取信息來源，導(dǎo)致用戶不太喜歡閱讀抓不到重點(diǎn)的內(nèi)容和看起來毫無規(guī)律可循的文本內(nèi)容，此時(shí)，微動畫的出現(xiàn)讓信息變得更為直白，界面變得更為自然。

1 微交互概述

微交互是指通常關(guān)注于單個(gè)事件或者單個(gè)任務(wù)，這些交互元素遍布于整個(gè)APP的各個(gè)角落[1]。這些微交互存在的目的是讓用戶感覺順暢、愉悅，設(shè)計(jì)師借此創(chuàng)造出吸引人或者令人高興的瞬間，或者說，讓用戶在這一刻感受到人性化。在應(yīng)該要做和即將發(fā)生的內(nèi)容處，利用動態(tài)效果引起用戶的注意，創(chuàng)建出流暢、輕視覺的轉(zhuǎn)場效果，達(dá)到可以指導(dǎo)用戶進(jìn)行復(fù)雜的操作，帶給用戶審美愉悅感的效果。在UI/UX設(shè)計(jì)中，很多設(shè)計(jì)都是可以遠(yuǎn)程操控和虛擬，微交互設(shè)計(jì)的機(jī)制起到重復(fù)、強(qiáng)調(diào)、情感設(shè)計(jì)的目的，讓用戶參與其中，感受其中的樂趣，成為該APP的忠實(shí)用戶，這三點(diǎn)正好與喬丹金字塔用戶體驗(yàn)維度模型將體驗(yàn)分為三個(gè)維度——功能性、提示性與愉悅性要求相一致[2]。

1.1 重復(fù)

重復(fù)作為微交互設(shè)計(jì)的基礎(chǔ)要求，通常只關(guān)注單個(gè)事件或任務(wù)，數(shù)字界面畢竟不是現(xiàn)實(shí)世界中真實(shí)的硬件機(jī)構(gòu)，用戶更多的借助交互過程中的即時(shí)視覺進(jìn)行反饋，讓用戶確定完成了此項(xiàng)操作，從操作中得到視覺上的“認(rèn)可”，從而強(qiáng)化了“確信感”，常見的案例通常是在按鈕的交互設(shè)計(jì)上，通過改變按鈕的顏色、外觀、虛實(shí)，達(dá)到完成動作捕捉的目的。用戶首次與微交互進(jìn)行交互時(shí)，心情和需求應(yīng)該不會與往后保持一致。隨著產(chǎn)品的不斷迭代升級，微交互也應(yīng)該作出相應(yīng)的改變與調(diào)整，此時(shí)重復(fù)的就只有功能、視覺方面需要作出改變，以便更好地吸引用戶持續(xù)使用。

1.2 強(qiáng)調(diào)

強(qiáng)調(diào)作為微交互設(shè)計(jì)的細(xì)節(jié)之處，以幫助和刺激用戶的行為。在互聯(lián)網(wǎng)產(chǎn)品中往往可以通過視覺、聽覺、觸覺或是它們的組合來進(jìn)行反饋[3]。通常場景下，滿足三感即可給用戶留下深刻印象，微交互設(shè)計(jì)作為界面設(shè)計(jì)中的自然部分，所有的內(nèi)容都統(tǒng)一于一個(gè)主題，將所有微觀和宏觀的交互設(shè)計(jì)聯(lián)系在一起，將動畫化的對象不同狀態(tài)之間轉(zhuǎn)換，達(dá)到看起來平滑，傳達(dá)信息準(zhǔn)確的目的，常用的案例通常在提示彈窗中運(yùn)用，通過紅色的“大X”來警告錯(cuò)誤，清晰有力的副本與微交互相結(jié)合，產(chǎn)生更大的提示效果。通過強(qiáng)調(diào)告訴用戶做了什么，做錯(cuò)了什么，還需要做什么，正在做什么，結(jié)束了什么。

1.3 情感設(shè)計(jì)

真正的設(shè)計(jì)是要打動人的，它具有傳遞感情、勾起回憶、引起共鳴的作用，通過微交互設(shè)計(jì)中的小幽默、小驚喜，無論規(guī)模如何，都是將情緒反應(yīng)帶入用戶體驗(yàn)的一種肯定方式，用戶能更好地了解之前和當(dāng)前的狀態(tài)，使得應(yīng)用有了“情緒”并同時(shí)增加了必要的細(xì)節(jié)，建立起產(chǎn)品和用戶之間的情感紐帶。例如在MailChimp中創(chuàng)建和發(fā)送電子郵件的網(wǎng)絡(luò)服務(wù)，通過圖形化的語言展現(xiàn)發(fā)件人的緊張與慎重，為用戶在使用過程中增添了意想不到的幽默與積極性。微交互設(shè)計(jì)作為一種開放式互動經(jīng)濟(jì)形式，主要強(qiáng)調(diào)活動給用戶帶來獨(dú)特的審美體驗(yàn)，在產(chǎn)品設(shè)計(jì)中所占比例將會越來越大，設(shè)計(jì)出更多符合用戶心理需求的微交互設(shè)計(jì)，是未來微交互設(shè)計(jì)必然趨勢。

2 基于用戶體驗(yàn)的微交互設(shè)計(jì)設(shè)計(jì)原則

微交互設(shè)計(jì)最重要的因素是站在廣大用戶的角度上去思考產(chǎn)品，它們的存在是為了讓用戶擁有更好的用戶體驗(yàn)。在設(shè)計(jì)上通常只關(guān)注單個(gè)事件或任務(wù)，通過細(xì)節(jié)的處理將普通的移動端設(shè)計(jì)成功地引起用戶的注意。此時(shí)微交互設(shè)計(jì)不僅作為一種好玩、有趣的細(xì)節(jié)亮點(diǎn)，還成為引導(dǎo)新用戶使用的切入口。通過微交互四大模型——觸發(fā)、規(guī)則、反饋、模式和循環(huán)，達(dá)到引導(dǎo)用戶積極參與，顯示產(chǎn)品狀態(tài)，提供錯(cuò)誤提示，加強(qiáng)品牌形象的目的。提供完整反饋預(yù)防用戶出錯(cuò)，與產(chǎn)品無縫交互，增強(qiáng)用戶體驗(yàn)的效果。

2.1 一致性

微交互作為界面設(shè)計(jì)的一個(gè)小分支，可以插入到界面中的各種地方，但在設(shè)計(jì)上需與界面整體風(fēng)格相一致，在主色、次色以及整體的色調(diào)、元素的尺寸大小和關(guān)系中保持一致，并且要足夠引人注目。微交互設(shè)計(jì)的動態(tài)效果不是無緣由的，是有一定的目的性，是代表一個(gè)品牌的形象定位。它們需要在主題的基礎(chǔ)上遵循規(guī)則和模式，正如語言有其調(diào)性，有其風(fēng)格，微交互設(shè)計(jì)也應(yīng)有其調(diào)性。例如微信在發(fā)送“生日快樂”文字信息的時(shí)候，雙方聊天界面都會有“蛋糕”掉落，通過這一微動態(tài)，在不影響畫面的整體效果的基礎(chǔ)上調(diào)動情感和感官的體驗(yàn)，在不給用戶帶來不和諧和陌生的感覺的基礎(chǔ)上，增加了畫面的趣味性。

2.2 功能性

微交互設(shè)計(jì)在界面設(shè)計(jì)中不是獨(dú)立的個(gè)體，而是存在于某個(gè)功能或某個(gè)應(yīng)用場景之下的，利用動態(tài)設(shè)計(jì)表達(dá)操作之后的反饋，達(dá)到用戶的使用目的，此時(shí)更適用KISS原則——微交互設(shè)計(jì)應(yīng)該是小而簡單的。微動態(tài)設(shè)計(jì)的存在并不影響整體的設(shè)計(jì)風(fēng)格，作為設(shè)計(jì)細(xì)節(jié)豐富頁面效果。比如在iOS系統(tǒng)中，用戶按住某一個(gè)應(yīng)用的圖表時(shí)，手機(jī)系統(tǒng)會作出輕微的振動響應(yīng)，通過振動提醒用戶，界面中圖標(biāo)的左上角“X”的出現(xiàn)，也是提醒用戶，可以做出下一步指令。當(dāng)然也通過振感提醒用戶，避免做出錯(cuò)誤的指令。通過微交互設(shè)計(jì)提供感官反饋，讓信息變得通俗易懂，使界面變得更加自然，輔助用戶完成頁面操作。

2.3 愉悅性

微交互設(shè)計(jì)除了建立在行為的基礎(chǔ)上，也需要在體驗(yàn)中產(chǎn)生共鳴?，F(xiàn)如今科技的進(jìn)步，基于語音的微交互也漸漸出現(xiàn)在我們面前，用戶開始期待移動端出現(xiàn)新的動畫、動效和移動交互。我們甚至?xí)ν蝗坏摹爸悄堋备械襟@訝，在環(huán)境、用戶研究和設(shè)計(jì)中重復(fù)使用。從蘋果公司開發(fā)的“Hey，Siri”，到現(xiàn)在小米公司開發(fā)的“小愛同學(xué)”，還有“Google Home”，在用戶說完“hey，Google”后，設(shè)備會顯示一個(gè)由四個(gè)點(diǎn)組成的動態(tài)畫面，通過一種視覺反饋，傳達(dá)給用戶設(shè)備正在運(yùn)行的狀態(tài)，利用動態(tài)效果避免重復(fù)工作，導(dǎo)致系統(tǒng)死鎖，用戶對產(chǎn)品產(chǎn)生厭煩的情緒。

3 基于用戶體驗(yàn)的微交互設(shè)計(jì)設(shè)計(jì)的方法

在經(jīng)典的尼爾森十大啟發(fā)式當(dāng)中，“系統(tǒng)狀態(tài)可見性”可以說是當(dāng)今交互設(shè)計(jì)領(lǐng)域中，最為重要的原則之一。讓用戶對產(chǎn)品擁有知情權(quán)和一定的控制權(quán)，可增加一定的信任度，這也是啟發(fā)式設(shè)計(jì)最為重要和吸引人的地方。微交互設(shè)計(jì)想要做到這一點(diǎn)就必須站在用戶體驗(yàn)的基礎(chǔ)上進(jìn)行創(chuàng)作，探索用戶、產(chǎn)品、環(huán)境之間的關(guān)系。

3.1 整合合理的組織信息

Jakob Nielsen提出了關(guān)于界面設(shè)計(jì)狀態(tài)的啟發(fā)，“系統(tǒng)應(yīng)當(dāng)在合理的時(shí)間里，通過合適的反饋來保持告知用戶將要發(fā)生的事情[4]?！备鶕?jù)用戶畫像了解用戶的行為習(xí)慣以及使用需求，對頁面進(jìn)行針對性的、人性化的設(shè)計(jì)，讓用戶使用起來更為方便高效。當(dāng)信息特別煩瑣時(shí)，可考慮信息圖表的形式將數(shù)據(jù)可視化，將重點(diǎn)數(shù)據(jù)進(jìn)行強(qiáng)化設(shè)計(jì)，對用戶而言不僅把握了趨勢，也把握了重點(diǎn)，找到交互行為和內(nèi)容之間的關(guān)聯(lián)性，節(jié)約用戶時(shí)間，提升效率，為用戶創(chuàng)造更為流暢的交互體驗(yàn)。

3.2 打造有意義的轉(zhuǎn)場

微交互動畫最基礎(chǔ)的應(yīng)用是轉(zhuǎn)場。一般的動畫內(nèi)容僅僅會從一個(gè)狀態(tài)到另一個(gè)狀態(tài)，優(yōu)秀的動畫則是通過動畫展現(xiàn)頁面的連續(xù)性，通過共享內(nèi)容建立起兩種狀態(tài)。著名的魔術(shù)師Dariel Fitzkee曾說：“魔法既身藏于細(xì)節(jié)，又體現(xiàn)于表演?！苯换ピO(shè)計(jì)也是如此。最好的交互設(shè)計(jì)往往沒有被用戶注意到，用戶已然習(xí)慣它們的存在，無縫銜接著用戶與應(yīng)用程序，為了更好地服務(wù)用戶，每一個(gè)微交互設(shè)計(jì)都必須融入到整體設(shè)計(jì)當(dāng)中，給用戶帶來樂趣和新奇點(diǎn)，不和諧和陌生的感覺會引發(fā)用戶反感情緒。借助節(jié)日、活動等契機(jī)，預(yù)測用戶行為，持續(xù)優(yōu)化功能。在特殊的日子制造出符合用戶需求的小驚喜，在不影響用戶使用的基礎(chǔ)上，對界面進(jìn)行相應(yīng)的顏色或元素替換，烘托氣氛。給用戶適當(dāng)?shù)奶嵝?，通過細(xì)微的動畫更能使用戶集中注意力，傳遞出產(chǎn)品的人情味。

3.3 人性化設(shè)計(jì)

交互設(shè)計(jì)作為人與人、機(jī)器、系統(tǒng)和環(huán)境等交互行為的外在行為設(shè)計(jì)，通過揣摩用戶，針對其用戶畫像的心理特征，設(shè)計(jì)出符合用戶認(rèn)知的模型[5]。而“微交互”設(shè)計(jì)的特性之一在于不斷地節(jié)省用戶時(shí)間，讓產(chǎn)品更容易讓用戶接受。在用戶體驗(yàn)的“短平快”效應(yīng)中，從小細(xì)節(jié)處入手，更具有人性化地協(xié)助用戶更好地完成任務(wù)。

4 總結(jié)

微交互設(shè)計(jì)必須滿足長期使用的原則，避免用戶長期使用后產(chǎn)生厭煩的情緒。這就要求設(shè)計(jì)者在制作微交互設(shè)計(jì)時(shí)，首先要了解用戶，理清邏輯，將其前后邏輯步驟進(jìn)行串聯(lián)，了解不同情境下的操作順序，站在用戶角度上去思考，將復(fù)雜的應(yīng)用數(shù)據(jù)和功能簡化為相互聯(lián)系的微交互設(shè)計(jì)。充當(dāng)產(chǎn)品與用戶相互溝通的橋梁，刺激不感興趣的用戶成為自己的忠實(shí)用戶。