微交互設計一定要知道的8種類型!
編輯導語:你是不是也曾經在使用某些產品的過程中,被其細微的交互設計細節所愉悅?這便是產品提升了用戶體驗的一種表現。那么,你知道在產品設計中,有哪些常見的微交互類型,這些類型又可以怎么應用嗎?本文做了相應總結,一起來看一下吧。
在推崇極簡設計的當下,“少即是多”是微交互最真實的狀態。
微交互是關于細節的設計,這些微小的互動塑造用戶體驗,讓參與其中的用戶感到產品中稀缺的樂趣。
那么微交互是如何改善用戶體驗的呢?又包括哪些常見的類型呢?一起來看看吧~
一、微交互與用戶體驗
1. 有助于用戶留存
微交互如果設計得當,會給大腦帶來一定程度的刺激,從而讓用戶感受到片刻的愉悅。
這點像產品運營中常提到的“啊哈時刻”,你的產品或服務讓用戶感到開心,而且與眾不同,在別的產品中提供不了這樣的服務,這就是你的產品持續增長的一點。
這些時刻都有助于改善體驗,增加用戶繼續使用產品的可能性,同樣也有助于提升留存率,以及用戶的復用率。
2. 提升品牌個性和印象
微交互的好處在于,為我們提供了一個建立品牌個性的機會。例如,大家可以想想微博的點贊效果,彈出來的點贊動效幫助微博塑造了獨一無二的個性,給用戶留下更深刻的印象。
3. 提高直觀性和可用性
微交互是向用戶提供持續反饋的一種方式,為用戶的操作提供清晰的指引和反饋。如果操作得當,微交互可以提高可用性,整個過程也會變得更加直觀和互動。
▲例如我們在設置密碼過程中,輸入框會給出弱、中、強三個密碼等級的反饋,實時將密碼的復雜程度告知給用戶,簡明清晰。
二、微交互的8種類型
微交互在產品中的應用越來越廣泛,而且隨著技術的進步,微交互設計也有了更大的可能性。無論怎么變化,了解并運用最基本的微交互始終很重要,常見的微交互類型包括:
1. 點擊效果
▲ Twitter的點贊效果是公認的微交互優秀案例。點贊彈出來的愛心動效,給用戶帶來了意想不到的使用體驗,讓用戶感到愉悅。在用戶使用產品的過程中,能給用戶帶來愉悅感是最理想的結果,國內很多產品都借鑒了Twitter的這個設計。
2. 長按效果
▲ 長按Facebook的?圖標,會彈出來一排帶有微動效的emoji表情,用戶可以選擇適合自己心情的表情。雖然長按操作需要比單純的點擊付出更大的成本,但卻能帶給用戶加倍的快樂。
▲ 國內的微博也很大程度上借鑒了Facebook的設計,通過長按點贊,生成有趣的表情動畫來吸引用戶。
3. 下拉刷新
下拉刷新大家很熟悉,作為一個相對頻繁的操作,很多產品都會在下拉刷新上大做文章,不管是設計樣式還是動畫效果,都在力爭做出自己家的特色。
▲ 在下拉刷新中融入品牌動畫是一個很有創意的想法。首先可以為用戶提供反饋,表明內容正在加載,另外還能借著加載的機會,曝光品牌形象。
用戶在等待加載的過程中,注意力通常會非常集中,因為他們想快速看到加載后的內容,在加載中融入品牌動畫會讓用戶對品牌的印象更深刻。
▲ 下拉加載出現的彩虹動畫效果,對用戶來說是一種很好的視覺享受,既能緩解用戶在加載過程中焦急的情緒,也能激發使用產品的積極性和探索欲望。
4. 滾動查看
▲ 當用戶上下滾動頁面時,頁面上的圖像會出現放大效果,當頁面停止滾動時圖像會逐漸縮小,而且圖像的大小效果都是根據用戶滾動頁面的速度而定的。這種細節的設計能讓產品看起來更具吸引力,改善用戶的使用體驗并創造樂趣。
5. 滑動效果
▲ 在郵箱類產品的收件箱列表中,將郵件從左往右滑的過程中會彈出收藏圖標,繼續向右滑動,郵件就會被收藏起來,同理從右往左滑彈出刪除圖標,繼續滑動郵件就會被刪除。
6. 系統加載
▲當用戶在谷歌助手中說“嘿谷歌”時,屏幕底部首先會出現四個上下波動的小點,作為接收反饋。當用戶開始說話時,四個小點會變成豎條的聲波效果,表明助手正在傾聽。
這樣的微交互設計既可以向用戶確認產品正在接收語音,又能將Google獨特的品牌融入其中。蘋果的Siri也有類似的功能,但聲波的設計樣式更具未來感和科技感。
7. 錯誤反饋
在登錄/注冊、填寫表單中會常用到錯誤反饋的設計,如何以一種微妙且不生硬的方式提醒用戶輸入的信息有問題,是件不容易的事。
因為當用戶信息滿滿地輸入信息后,卻被告知錯誤會特別沮喪,特別影響用戶心情。
▲結合微動效,通過抬起輸入框的一角來顯示錯誤信息,是很溫和的反饋方式,讓用戶以一種有趣的方式清晰地知道某些信息是錯的。
8. 鼠標懸停效果
▲當用戶將鼠標懸停在按鈕上時,左側的圖標會從文件夾圖標變為表單圖標。這樣的設計不僅表明按鈕是可點擊的,還將無聊的按鈕轉化成一種小趣味帶給用戶。簡單的動態圖標就能將按鈕的設計提升到一個新的水平,開拓自己的想象力,你也能做出這樣的設計。
最后
微交互,細節設計成就卓越產品。看了這么多的產品案例,對于微交互的認識是不是有了更多的想法和思考,歡迎一起交流。
#專欄作家#
作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
搞了一堆飛機稿
花里胡哨
Axure能做出這種效果么?
牛牛牛牛牛牛牛牛牛
覺得細節還是很重要的,對我來說可能兩款差不多的軟件,某一個的一個小設計很戳我怕,即使可能它并不是很好用,但是我還是會更加喜歡他
微交互是向用戶提供持續反饋的一種方式
羅永浩的交互設計很牛