編輯導(dǎo)語：你是不是也曾經(jīng)在使用某些產(chǎn)品的過程中，被其細(xì)微的交互設(shè)計(jì)細(xì)節(jié)所愉悅？這便是產(chǎn)品提升了用戶體驗(yàn)的一種表現(xiàn)。那么，你知道在產(chǎn)品設(shè)計(jì)中，有哪些常見的微交互類型，這些類型又可以怎么應(yīng)用嗎？本文做了相應(yīng)總結(jié)，一起來看一下吧。

在推崇極簡設(shè)計(jì)的當(dāng)下，“少即是多”是微交互最真實(shí)的狀態(tài)。

微交互是關(guān)于細(xì)節(jié)的設(shè)計(jì)，這些微小的互動(dòng)塑造用戶體驗(yàn)，讓參與其中的用戶感到產(chǎn)品中稀缺的樂趣。

那么微交互是如何改善用戶體驗(yàn)的呢？又包括哪些常見的類型呢？一起來看看吧~

一、微交互與用戶體驗(yàn)

1. 有助于用戶留存

微交互如果設(shè)計(jì)得當(dāng)，會(huì)給大腦帶來一定程度的刺激，從而讓用戶感受到片刻的愉悅。

這點(diǎn)像產(chǎn)品運(yùn)營中常提到的“啊哈時(shí)刻”，你的產(chǎn)品或服務(wù)讓用戶感到開心，而且與眾不同，在別的產(chǎn)品中提供不了這樣的服務(wù)，這就是你的產(chǎn)品持續(xù)增長的一點(diǎn)。

這些時(shí)刻都有助于改善體驗(yàn)，增加用戶繼續(xù)使用產(chǎn)品的可能性，同樣也有助于提升留存率，以及用戶的復(fù)用率。

2. 提升品牌個(gè)性和印象

微交互的好處在于，為我們提供了一個(gè)建立品牌個(gè)性的機(jī)會(huì)。例如，大家可以想想微博的點(diǎn)贊效果，彈出來的點(diǎn)贊動(dòng)效幫助微博塑造了獨(dú)一無二的個(gè)性，給用戶留下更深刻的印象。

3. 提高直觀性和可用性

微交互是向用戶提供持續(xù)反饋的一種方式，為用戶的操作提供清晰的指引和反饋。如果操作得當(dāng)，微交互可以提高可用性，整個(gè)過程也會(huì)變得更加直觀和互動(dòng)。

▲例如我們?cè)谠O(shè)置密碼過程中，輸入框會(huì)給出弱、中、強(qiáng)三個(gè)密碼等級(jí)的反饋，實(shí)時(shí)將密碼的復(fù)雜程度告知給用戶，簡明清晰。

二、微交互的8種類型

微交互在產(chǎn)品中的應(yīng)用越來越廣泛，而且隨著技術(shù)的進(jìn)步，微交互設(shè)計(jì)也有了更大的可能性。無論怎么變化，了解并運(yùn)用最基本的微交互始終很重要，常見的微交互類型包括：

1. 點(diǎn)擊效果

▲ Twitter的點(diǎn)贊效果是公認(rèn)的微交互優(yōu)秀案例。點(diǎn)贊彈出來的愛心動(dòng)效，給用戶帶來了意想不到的使用體驗(yàn)，讓用戶感到愉悅。在用戶使用產(chǎn)品的過程中，能給用戶帶來愉悅感是最理想的結(jié)果，國內(nèi)很多產(chǎn)品都借鑒了Twitter的這個(gè)設(shè)計(jì)。

2. 長按效果

▲ 長按Facebook的?圖標(biāo)，會(huì)彈出來一排帶有微動(dòng)效的emoji表情，用戶可以選擇適合自己心情的表情。雖然長按操作需要比單純的點(diǎn)擊付出更大的成本，但卻能帶給用戶加倍的快樂。

▲ 國內(nèi)的微博也很大程度上借鑒了Facebook的設(shè)計(jì)，通過長按點(diǎn)贊，生成有趣的表情動(dòng)畫來吸引用戶。

3. 下拉刷新

下拉刷新大家很熟悉，作為一個(gè)相對(duì)頻繁的操作，很多產(chǎn)品都會(huì)在下拉刷新上大做文章，不管是設(shè)計(jì)樣式還是動(dòng)畫效果，都在力爭做出自己家的特色。

▲ 在下拉刷新中融入品牌動(dòng)畫是一個(gè)很有創(chuàng)意的想法。首先可以為用戶提供反饋，表明內(nèi)容正在加載，另外還能借著加載的機(jī)會(huì)，曝光品牌形象。

用戶在等待加載的過程中，注意力通常會(huì)非常集中，因?yàn)樗麄兿肟焖倏吹郊虞d后的內(nèi)容，在加載中融入品牌動(dòng)畫會(huì)讓用戶對(duì)品牌的印象更深刻。

▲ 下拉加載出現(xiàn)的彩虹動(dòng)畫效果，對(duì)用戶來說是一種很好的視覺享受，既能緩解用戶在加載過程中焦急的情緒，也能激發(fā)使用產(chǎn)品的積極性和探索欲望。

4. 滾動(dòng)查看

▲ 當(dāng)用戶上下滾動(dòng)頁面時(shí)，頁面上的圖像會(huì)出現(xiàn)放大效果，當(dāng)頁面停止?jié)L動(dòng)時(shí)圖像會(huì)逐漸縮小，而且圖像的大小效果都是根據(jù)用戶滾動(dòng)頁面的速度而定的。這種細(xì)節(jié)的設(shè)計(jì)能讓產(chǎn)品看起來更具吸引力，改善用戶的使用體驗(yàn)并創(chuàng)造樂趣。

5. 滑動(dòng)效果

▲ 在郵箱類產(chǎn)品的收件箱列表中，將郵件從左往右滑的過程中會(huì)彈出收藏圖標(biāo)，繼續(xù)向右滑動(dòng)，郵件就會(huì)被收藏起來，同理從右往左滑彈出刪除圖標(biāo)，繼續(xù)滑動(dòng)郵件就會(huì)被刪除。

6. 系統(tǒng)加載

▲當(dāng)用戶在谷歌助手中說“嘿谷歌”時(shí)，屏幕底部首先會(huì)出現(xiàn)四個(gè)上下波動(dòng)的小點(diǎn)，作為接收反饋。當(dāng)用戶開始說話時(shí)，四個(gè)小點(diǎn)會(huì)變成豎條的聲波效果，表明助手正在傾聽。

這樣的微交互設(shè)計(jì)既可以向用戶確認(rèn)產(chǎn)品正在接收語音，又能將Google獨(dú)特的品牌融入其中。蘋果的Siri也有類似的功能，但聲波的設(shè)計(jì)樣式更具未來感和科技感。

7. 錯(cuò)誤反饋

在登錄/注冊(cè)、填寫表單中會(huì)常用到錯(cuò)誤反饋的設(shè)計(jì)，如何以一種微妙且不生硬的方式提醒用戶輸入的信息有問題，是件不容易的事。

因?yàn)楫?dāng)用戶信息滿滿地輸入信息后，卻被告知錯(cuò)誤會(huì)特別沮喪，特別影響用戶心情。

▲結(jié)合微動(dòng)效，通過抬起輸入框的一角來顯示錯(cuò)誤信息，是很溫和的反饋方式，讓用戶以一種有趣的方式清晰地知道某些信息是錯(cuò)的。

8. 鼠標(biāo)懸停效果

▲當(dāng)用戶將鼠標(biāo)懸停在按鈕上時(shí)，左側(cè)的圖標(biāo)會(huì)從文件夾圖標(biāo)變?yōu)楸韱螆D標(biāo)。這樣的設(shè)計(jì)不僅表明按鈕是可點(diǎn)擊的，還將無聊的按鈕轉(zhuǎn)化成一種小趣味帶給用戶。簡單的動(dòng)態(tài)圖標(biāo)就能將按鈕的設(shè)計(jì)提升到一個(gè)新的水平，開拓自己的想象力，你也能做出這樣的設(shè)計(jì)。

最后

微交互，細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品。看了這么多的產(chǎn)品案例，對(duì)于微交互的認(rèn)識(shí)是不是有了更多的想法和思考，歡迎一起交流。

#專欄作家#

作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。