前沿拓展：

微信頭像被壓縮

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

1、打開對話，選擇傳照片；

2、選擇需要發(fā)送的照片，點(diǎn)擊要發(fā)送的照片的右上角的對號，變成綠色即為選中，左下角會顯示選中照片的數(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ā)送完畢，對方收到圖片的時(shí)候就可以選擇下載原圖，直接接收的圖片也是經(jīng)過壓縮的，需要點(diǎn)一下原圖的按鈕。

編輯導(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ì)，這些微小的互動塑造用戶體驗(yàn)，讓參與其中的用戶感到產(chǎn)品中稀缺的樂趣。

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

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

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

這點(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. 提升品牌個性和印象

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

3. 提高直觀性和可用性

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

例如我們在設(shè)置密碼過程中，輸入框會給出弱、中、強(qiáng)三個密碼等級的反饋，實(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)贊彈出來的愛心動效，給用戶帶來了意想不到的使用體驗(yàn)，讓用戶感到愉悅。在用戶使用產(chǎn)品的過程中，能給用戶帶來愉悅感是最理想的結(jié)果，國內(nèi)很多產(chǎn)品都借鑒了Twitter的這個設(shè)計(jì)。

2. 長按效果

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

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

3. 下拉刷新

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

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

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

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

4. 滾動查看

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

5. 滑動效果

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

6. 系統(tǒng)加載

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

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

7. 錯誤反饋

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

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

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

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

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

最后

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

#專欄作家#

作者：Clippp，微信公眾號：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é)議。

拓展知識：

微信頭像被壓縮

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

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