新四季網

微信互動設計方法論(原來可以這樣做)

2023-04-15 14:55:27 2

編輯導語:微交互是很常見的設計手段,目的是讓用戶感覺順暢、愉悅,設計師藉此創造出吸引人的瞬間,讓用戶在某一刻感到人性化。本文作者從視覺優化、內容呈現、功能改善、情感傳遞這四個方面,對微交互做了分類,希望能給你帶來幫助。

微交互,在現在已是很常見的設計手段。微交互存在的目的是讓用戶感覺順暢、愉悅,設計師藉此創造出吸引人的瞬間,讓用戶在某一刻感受到人性化。我從視覺優化、內容呈現、功能改善、情感傳遞這四個方面,對微交互做了分類,也為大家做微交互的設計提供一些思路和角度。

一、視覺優化類

1. 精巧的動畫

使用精巧的動畫效果豐富和活躍界面的視覺氛圍,給用戶帶來小驚喜和愉悅感。

例如京東的物流評價模塊,在打 5 星滿分時會有放煙花的效果出現:

2. 創新的呈現方式

使用新穎的展現形式,給用戶不同的呈現效果,出奇制勝。用戶在得物 APP 查看商品詳情頁時,可點擊產品圖 3D 瀏覽,360 度無死角查看產品的全貌:

3. 擬物化的設計思路

仿照現實世界中與物體的交互行為,將現實世界中的行為帶入到手機界面中,有趣而有共鳴感。微信讀書用了用戶下拉線來切換白天和黑色的閱讀模式,模擬了生活中關燈的形式,讓交互更真實有趣:

4. 設計技巧總結

對生活的熱愛和對小確幸的捕捉視覺效果的大膽嘗試,不拘一格形式來源於功能,效果服務於內容,誇張要有依據擬物化的設計思路,將手機界面與現實世界相連接應該與 APP 的整體風格相匹配,幫助產品建立品質感二、內容呈現類

1. 合理排布信息

根據用戶的行為習慣和使用需求,對頁面的信息進行人性化的排布,使用戶在使用時更高效、方便。

飛豬在選擇往返機票的時候,會將界面分成左右兩邊分別進行滾動操作,方便用戶對價格和時間做對比。比之前的單一頁面滾動操作方便很多:

2. 可視化信息

將文字信息使用可視化的方式表達出來,讓用戶更易讀、易操作。

哈囉單車在故障上報頁面直接將單車擬真拆解展示,易於辨認報修部件,只需選擇就能快速完成報修流程,避免文字描述不清的情況,極大簡化了上報的步驟:

3. 標記重要信息、提醒用戶

標記和強化用戶需要注意的內容,對用戶進行提醒。

釘釘日程:日程會標註當前的時間點,當把日程往下或往上滑出屏幕時,會有箭頭提示上或下有日程:

4. 隱藏不必要的信息

交互行為與內容呈現緊密相連,自然地隱藏掉不必要的信息,為用戶創造更流暢的交互體驗。

馬蜂窩 APP 的底部導航欄在用戶向下瀏覽時會自動收起,減少對主要內容的遮擋,讓用戶更通暢的瀏覽內容;在用戶向上瀏覽時自動張開,方便用戶使用其他功能:

5. 設計技巧總結

熟知用戶行為和習慣,以用戶為本一定程度上可視化信息,直觀易用自然地突出主體信息自然地標記重要信息自然地隱藏不必要的信息找到交互行為與內容之間的關聯性,讓交互與內容融會貫通三、功能改善類

1. 提升效率

優化產品功能的上的不足之處,讓產品更好用、更易用,節約用戶時間,提升效率。

蘋果 IOS 最新版本 13.3, 鍵盤英文輸入功能更新,滑動手指將字母連成詞,使鍵入更快速:

2. 偶爾調整功能,製造小驚喜

藉助節日、活動等時機部分開放功能的限制,讓用戶有種薅羊毛或被關照的驚喜感。

某年七夕節到來,微信將原本最高 200 元的紅包金額調整到了 520 元,算得上是一個驚喜又有人文關懷的產品細節:

3. 預測用戶行為

預測用戶的行為,或提前對用戶的下一步動作進行自然地引導,簡化用戶的操作動作和步驟,提供捷徑,或替用戶完成操作。

微信-朋友圈在閱讀朋友圈中途退出再次進入時,會在內容流中間出現一個「跳到還沒看的位置」,幫助用戶快速定位之前離開的位置:

4. 設計技巧總結

小而美的對功能進行持續優化節約用戶的時間,提升效率節省用戶的精力,優化交互流程,替用戶做不必要的操作步驟洞察用戶的每一步動作的上下關聯動作,提供預判和引導四、情感傳遞類

1. 給用戶適當的提醒和關愛

適當的提醒(包括隱私提醒、天氣提醒、時間提醒等)讓用戶覺得自己時刻被關注、被惦記,傳達出人情味兒。

美團外賣針對用戶所在區域,提前推送天氣變化,提醒用戶提前下單:

2. 特殊日子搞事情

在節假日對界面的配色、元素做裝扮和替換,也可以在獨屬於用戶個人的特殊日子為用戶做界面更改,烘託氣氛、傳遞情感。

萬聖節,美團的共享單車界面將一輛輛單車的 icon 變成了南瓜的形象,十分應景地烘託出了節日氣氛。情感化的細節設計凸顯了產品的溫度與個性:

3. 創造儀式感

在用戶開始/完成某項任務的時候給用戶以鼓勵、激勵,讓用戶有儀式感,感受到被重視。

購買了得到 APP 的精英日課之後,會給用戶發一個入學通知書,讓用戶感覺到課程的專業性,銀子沒有白花:

4. 設計技巧總結

把用戶當朋友,傳遞關愛適當的誇張情感的表達方式節日/用戶的特殊日子適當搞事情對用戶適當提供個性化的服務和交互創造儀式感、量化用戶行為,以激勵用戶

作者:元堯;長弓小子。

本文由@ 元堯 原創發布於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議。

,
同类文章
葬禮的夢想

葬禮的夢想

夢見葬禮,我得到了這個夢想,五個要素的五個要素,水火只好,主要名字在外面,職業生涯良好,一切都應該對待他人治療誠意,由於小,吉利的冬天夢想,秋天的夢是不吉利的
找到手機是什麼意思?

找到手機是什麼意思?

找到手機是什麼意思?五次選舉的五個要素是兩名士兵的跡象。與他溝通很好。這是非常財富,它擅長運作,職業是仙人的標誌。單身男人有這個夢想,主要生活可以有人幫忙
我不怎麼想?

我不怎麼想?

我做了什麼意味著看到米飯烹飪?我得到了這個夢想,五線的主要土壤,但是Tu Ke水是錢的跡象,職業生涯更加真誠。他真誠地誠實。這是豐富的,這是夏瑞的巨星
夢想你的意思是什麼?

夢想你的意思是什麼?

你是什​​麼意思夢想的夢想?夢想,主要木材的五個要素,水的跡象,主營業務,主營業務,案子應該抓住魅力,不能疏忽,春天夢想的吉利夢想夏天的夢想不幸。詢問學者夢想
拯救夢想

拯救夢想

拯救夢想什麼意思?你夢想著拯救人嗎?拯救人們的夢想有一個現實,也有夢想的主觀想像力,請參閱週宮官方網站拯救人民夢想的詳細解釋。夢想著敵人被拯救出來
2022愛方向和生日是在[質量個性]中

2022愛方向和生日是在[質量個性]中

[救生員]有人說,在出生88天之前,胎兒已經知道哪天的出生,如何有優質的個性,將走在什麼樣的愛情之旅,將與生活生活有什么生活。今天
夢想切割剪裁

夢想切割剪裁

夢想切割剪裁什麼意思?你夢想切你的手是好的嗎?夢想切割手工切割手有一個真正的影響和反應,也有夢想的主觀想像力。請參閱官方網站夢想的細節,以削減手
夢想著親人死了

夢想著親人死了

夢想著親人死了什麼意思?你夢想夢想你的親人死嗎?夢想有一個現實的影響和反應,還有夢想的主觀想像力,請參閱夢想世界夢想死亡的親屬的詳細解釋
夢想搶劫

夢想搶劫

夢想搶劫什麼意思?你夢想搶劫嗎?夢想著搶劫有一個現實的影響和反應,也有夢想的主觀想像力,請參閱週恭吉夢官方網站的詳細解釋。夢想搶劫
夢想缺乏缺乏紊亂

夢想缺乏缺乏紊亂

夢想缺乏缺乏紊亂什麼意思?你夢想缺乏異常藥物嗎?夢想缺乏現實世界的影響和現實,還有夢想的主觀想像,請看官方網站的夢想組織缺乏異常藥物。我覺得有些東西缺失了