干貨丨微交互,原來可以這樣做!
編輯導(dǎo)語:微交互是很常見的設(shè)計手段,目的是讓用戶感覺順暢、愉悅,設(shè)計師借此創(chuàng)造出吸引人的瞬間,讓用戶在某一刻感到人性化。本文作者從視覺優(yōu)化、內(nèi)容呈現(xiàn)、功能改善、情感傳遞這四個方面,對微交互做了分類,希望能給你帶來幫助。
微交互,在現(xiàn)在已是很常見的設(shè)計手段。微交互存在的目的是讓用戶感覺順暢、愉悅,設(shè)計師借此創(chuàng)造出吸引人的瞬間,讓用戶在某一刻感受到人性化。我從視覺優(yōu)化、內(nèi)容呈現(xiàn)、功能改善、情感傳遞這四個方面,對微交互做了分類,也為大家做微交互的設(shè)計提供一些思路和角度。
一、視覺優(yōu)化類
1. 精巧的動畫
使用精巧的動畫效果豐富和活躍界面的視覺氛圍,給用戶帶來小驚喜和愉悅感。
例如京東的物流評價模塊,在打 5 星滿分時會有放煙花的效果出現(xiàn):
2. 創(chuàng)新的呈現(xiàn)方式
使用新穎的展現(xiàn)形式,給用戶不同的呈現(xiàn)效果,出奇制勝。用戶在得物 APP 查看商品詳情頁時,可點擊產(chǎn)品圖 3D 瀏覽,360 度無死角查看產(chǎn)品的全貌:
3. 擬物化的設(shè)計思路
仿照現(xiàn)實世界中與物體的交互行為,將現(xiàn)實世界中的行為帶入到手機界面中,有趣而有共鳴感。微信讀書用了用戶下拉線來切換白天和黑色的閱讀模式,模擬了生活中關(guān)燈的形式,讓交互更真實有趣:
4. 設(shè)計技巧總結(jié)
- 對生活的熱愛和對小確幸的捕捉
- 視覺效果的大膽嘗試,不拘一格
- 形式來源于功能,效果服務(wù)于內(nèi)容,夸張要有依據(jù)
- 擬物化的設(shè)計思路,將手機界面與現(xiàn)實世界相連接
- 應(yīng)該與 APP 的整體風(fēng)格相匹配,幫助產(chǎn)品建立品質(zhì)感
二、內(nèi)容呈現(xiàn)類
1. 合理排布信息
根據(jù)用戶的行為習(xí)慣和使用需求,對頁面的信息進行人性化的排布,使用戶在使用時更高效、方便。
飛豬在選擇往返機票的時候,會將界面分成左右兩邊分別進行滾動操作,方便用戶對價格和時間做對比。比之前的單一頁面滾動操作方便很多:
2. 可視化信息
將文字信息使用可視化的方式表達出來,讓用戶更易讀、易操作。
哈啰單車在故障上報頁面直接將單車擬真拆解展示,易于辨認報修部件,只需選擇就能快速完成報修流程,避免文字描述不清的情況,極大簡化了上報的步驟:
3. 標記重要信息、提醒用戶
標記和強化用戶需要注意的內(nèi)容,對用戶進行提醒。
釘釘日程:日程會標注當前的時間點,當把日程往下或往上滑出屏幕時,會有箭頭提示上或下有日程:
4. 隱藏不必要的信息
交互行為與內(nèi)容呈現(xiàn)緊密相連,自然地隱藏掉不必要的信息,為用戶創(chuàng)造更流暢的交互體驗。
馬蜂窩 APP 的底部導(dǎo)航欄在用戶向下瀏覽時會自動收起,減少對主要內(nèi)容的遮擋,讓用戶更通暢的瀏覽內(nèi)容;在用戶向上瀏覽時自動張開,方便用戶使用其他功能:
5. 設(shè)計技巧總結(jié)
- 熟知用戶行為和習(xí)慣,以用戶為本
- 一定程度上可視化信息,直觀易用
- 自然地突出主體信息
- 自然地標記重要信息
- 自然地隱藏不必要的信息
- 找到交互行為與內(nèi)容之間的關(guān)聯(lián)性,讓交互與內(nèi)容融會貫通
三、功能改善類
1. 提升效率
優(yōu)化產(chǎn)品功能的上的不足之處,讓產(chǎn)品更好用、更易用,節(jié)約用戶時間,提升效率。
蘋果 IOS 最新版本 13.3, 鍵盤英文輸入功能更新,滑動手指將字母連成詞,使鍵入更快速:
2. 偶爾調(diào)整功能,制造小驚喜
借助節(jié)日、活動等時機部分開放功能的限制,讓用戶有種薅羊毛或被關(guān)照的驚喜感。
某年七夕節(jié)到來,微信將原本最高 200 元的紅包金額調(diào)整到了 520 元,算得上是一個驚喜又有人文關(guān)懷的產(chǎn)品細節(jié):
3. 預(yù)測用戶行為
預(yù)測用戶的行為,或提前對用戶的下一步動作進行自然地引導(dǎo),簡化用戶的操作動作和步驟,提供捷徑,或替用戶完成操作。
微信-朋友圈在閱讀朋友圈中途退出再次進入時,會在內(nèi)容流中間出現(xiàn)一個“跳到還沒看的位置”,幫助用戶快速定位之前離開的位置:
4. 設(shè)計技巧總結(jié)
- 小而美的對功能進行持續(xù)優(yōu)化
- 節(jié)約用戶的時間,提升效率
- 節(jié)省用戶的精力,優(yōu)化交互流程,替用戶做不必要的操作步驟
- 洞察用戶的每一步動作的上下關(guān)聯(lián)動作,提供預(yù)判和引導(dǎo)
四、情感傳遞類
1. 給用戶適當?shù)奶嵝押完P(guān)愛
適當?shù)奶嵝眩ò[私提醒、天氣提醒、時間提醒等)讓用戶覺得自己時刻被關(guān)注、被惦記,傳達出人情味兒。
美團外賣針對用戶所在區(qū)域,提前推送天氣變化,提醒用戶提前下單:
2. 特殊日子搞事情
在節(jié)假日對界面的配色、元素做裝扮和替換,也可以在獨屬于用戶個人的特殊日子為用戶做界面更改,烘托氣氛、傳遞情感。
萬圣節(jié),美團的共享單車界面將一輛輛單車的 icon 變成了南瓜的形象,十分應(yīng)景地烘托出了節(jié)日氣氛。情感化的細節(jié)設(shè)計凸顯了產(chǎn)品的溫度與個性:
3. 創(chuàng)造儀式感
在用戶開始/完成某項任務(wù)的時候給用戶以鼓勵、激勵,讓用戶有儀式感,感受到被重視。
購買了得到 APP 的精英日課之后,會給用戶發(fā)一個入學(xué)通知書,讓用戶感覺到課程的專業(yè)性,銀子沒有白花:
4. 設(shè)計技巧總結(jié)
- 把用戶當朋友,傳遞關(guān)愛
- 適當?shù)?strong>夸張情感的表達方式
- 節(jié)日/用戶的特殊日子適當搞事情
- 對用戶適當提供個性化的服務(wù)和交互
- 創(chuàng)造儀式感、量化用戶行為,以激勵用戶
作者:元堯;微信公眾號:長弓小子。
本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
微信真會呀,但是目前還是只見過200的紅包,可能當時錯過了
文章內(nèi)容品質(zhì)好高呀,分點詳細,講解清晰,讓我有了對交互設(shè)計有了更多的認識。
看了恍然大悟!原來生活中的這些場景都是”微交互“,誰還不知道”長按點贊,就可以一鍵三聯(lián)!“
作者介紹的很詳細呀,從四個方面介紹了交互的方法,寫的很棒,很有用
作者從視覺優(yōu)化、內(nèi)容呈現(xiàn)、功能改善、情感傳遞這四方面對交互設(shè)計方法的分享非常干及專業(yè)。