前沿拓展：

微信頭像被壓縮

上傳頭像到微信上不被壓縮的辦法：

1、打開(kāi)對(duì)話，選擇傳照片；

2、選擇需要發(fā)送的照片，點(diǎn)擊要發(fā)送的照片的右上角的對(duì)號(hào)，變成綠色即為選中，左下角會(huì)顯示選中照片的數(shù)目。這時(shí)不著急發(fā)送，點(diǎn)擊左下角的預(yù)覽；

3、當(dāng)進(jìn)入了其中一張照片的預(yù)覽狀態(tài)，點(diǎn)擊左下角的原圖按鈕，前面的原點(diǎn)變成綠色，就表示選擇了發(fā)送原圖，隨后就回計(jì)算出圖片大小。點(diǎn)擊發(fā)送，所選的全部圖片都將以原圖發(fā)送；

4、發(fā)送完畢，對(duì)方收到圖片的時(shí)候就可以選擇下載原圖，直接接收的圖片也是經(jīng)過(guò)壓縮的，需要點(diǎn)一下原圖的按鈕。

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

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

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

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

一、微交互與用戶體驗(yàn)1. 有助于用戶留存

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

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

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

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

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

3. 提高直觀性和可用性

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

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

二、微交互的8種類型

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

1. 點(diǎn)擊效果

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

2. 長(zhǎng)按效果

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

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

3. 下拉刷新

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

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

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

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

4. 滾動(dòng)查看

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

5. 滑動(dòng)效果

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

6. 系統(tǒng)加載

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

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

7. 錯(cuò)誤反饋

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

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

結(jié)合微動(dòng)效，通過(guò)抬起輸入框的一角來(lái)顯示錯(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)擊的，還將無(wú)聊的按鈕轉(zhuǎn)化成一種小趣味帶給用戶。簡(jiǎn)單的動(dòng)態(tài)圖標(biāo)就能將按鈕的設(shè)計(jì)提升到一個(gè)新的水平，開(kāi)拓自己的想象力，你也能做出這樣的設(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視覺(jué)上的設(shè)計(jì)思考。

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

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

拓展知識(shí)：

微信頭像被壓縮

微信頭像不清楚，是因?yàn)槲⑿艑?duì)圖片進(jìn)行了壓縮上傳。
微信傳送圖片為了省流量，加快傳送速度，對(duì)上傳的圖片進(jìn)行了壓縮處理，所以看到上傳后的圖片有些模糊。
解決方法如下：
1、打開(kāi)并登陸微信；
2、進(jìn)入微信主界面點(diǎn)擊“我”，接著點(diǎn)擊頭像；
3、進(jìn)入個(gè)人信息界面，再點(diǎn)擊頭像；
4、接著就進(jìn)入了圖庫(kù)，選擇任意一張照片，點(diǎn)開(kāi)預(yù)覽；
5、這時(shí)就會(huì)看到屏幕下方位置有一個(gè)可選的“原圖”選項(xiàng)，點(diǎn)選后再上傳，這樣就會(huì)有一個(gè)清晰的頭像了。

本回答被網(wǎng)友采納