好的微交互設(shè)計用戶無感知，那些看似微不足道的微交互瞬間，承載著產(chǎn)品設(shè)計者對用戶的關(guān)愛。

產(chǎn)品能不能用、好不好用，是衡量產(chǎn)品微交互好壞的標準。產(chǎn)品能用，勉強可以達到及格線，然而用戶卻不想用。產(chǎn)品好用，以人為本，必然會受到用戶的喜愛。

Dan Saffer 在其書《微交互》中，給微交互的定義如下：

微交互，就是產(chǎn)品中涉及一種使用場景的交互，只體現(xiàn)為一種功能，只完成一件事情。微交互可以是啟動應(yīng)用，也可以是啟動設(shè)備，更常見的則是伴隨或內(nèi)置于另一個更大的功能。修改設(shè)置、同步數(shù)據(jù)或設(shè)備、設(shè)定鬧鐘、更換密碼、打開家用電器、登錄、設(shè)置狀態(tài)消息、收藏或標注“喜歡”……這些都是微交互。微交互，就是把產(chǎn)品細節(jié)做好！

還記得那些糟糕的微交互設(shè)計嗎？

• 一個滿是按鈕的遙控器，令人眼花繚亂，使人無從下手；
• 一個糟糕的篩選框，沒有全選選項，只能默默的一個一個的把所有選項都勾選上；
• 一個需要填寫非常多信息的注冊長表單，寫了一半網(wǎng)絡(luò)閃斷無感知，用戶繼續(xù)填寫長表單，提交時發(fā)現(xiàn)填寫好的內(nèi)容全沒了……

這些不友好的微交互在我們的生活中隨處可見，產(chǎn)品設(shè)計者忽略了產(chǎn)品的細節(jié)設(shè)計。如果不是存在不得不用的情況，用戶肯定不愿意與此類產(chǎn)品再有交集的。

圖1：糟糕的微交互設(shè)計 VS 友好的微交互設(shè)計

友好的用戶體驗這個詞時常掛在產(chǎn)品經(jīng)理、設(shè)計師和工程師的嘴邊，產(chǎn)品研發(fā)團隊，應(yīng)該如何摳產(chǎn)品細節(jié)，達到真正的對用戶友好的產(chǎn)品體驗?zāi)兀?/p>

一、微交互設(shè)計

高效而有趣的微交互，涉及觸發(fā)器、規(guī)則、反饋、循環(huán)和模式：觸發(fā)器啟動微交互、規(guī)則規(guī)定微交互的工作過程、反饋向用戶說明規(guī)則、循環(huán)與模式是影響微交互的元規(guī)則。

圖2：微交互結(jié)構(gòu)，來源于?Dan Saffer 《微交互》

下面用兩個案例來說明，如何使用微交互結(jié)構(gòu)方法設(shè)計微交互。

案例一

微交互的目標是用戶使用短信驗證碼的方式登錄某APP

短信驗證碼的交互方式、技術(shù)實現(xiàn)均很成熟，基本上所有的APP都有這個功能，然而這么成熟的交互體驗，還是存在一些被忽視的交互細節(jié)問題。

微交互規(guī)則

1. 打開APP登錄頁面，輸入手機號碼，點擊【發(fā)送驗證碼】按鈕（觸發(fā)器）

2. 復(fù)制收到的短信驗證碼，將驗證碼粘貼到驗證碼框內(nèi)（觸發(fā)器）

• 需要注意的交互細節(jié)問題1：有些APP的驗證碼短信文案沒有將驗證碼編寫在短信正文的前面，這樣會存在短信正文第一行驗證碼顯示不全的情況，需要打開短信，查看短信詳情，才能查看完整信息。
• 需要注意的交互細節(jié)問題2：驗證碼的輸入框，有些APP設(shè)計成6個格子，或是6個橫線，此類設(shè)計粘貼驗證碼時，可能會遇到不能粘貼或是粘貼錯誤的問題，不如通欄的輸入框便捷。

3. 驗證碼如正確，則登錄成功，進入首頁；驗證碼如錯誤，則在驗證碼框下提示驗證碼錯誤（反饋）

4. 驗證碼60s后失效，驗證碼框內(nèi)有倒計時（循環(huán)）

案例二

不同的租戶關(guān)心的篩選項目不一樣，微交互的目標是租戶可以選擇自己關(guān)心的篩選項，保存為自己的篩選器，這樣就不用每次都勾選一遍所需的篩選條件了。

微交互規(guī)則：

1. 打開信息列表頁面（觸發(fā)器）

2. 點擊【設(shè)置】按鈕，選擇并保存所需的篩選項（規(guī)則）

設(shè)計思路：多租戶場景下，不同租戶關(guān)心的篩選項多，如果全部展示在一個頁面上的話，頁面上的無效信息太多，租戶使用效率也低。把篩選項做成租戶按需配置，可以滿足租戶個性化的需求。

3. 在對應(yīng)的篩選項中選擇所需的選項，保存過濾器（規(guī)則）

4. 下次進入頁面時，打開上次打開的過濾器（循環(huán)）

5. 當(dāng)保存多個過濾器時，可選擇需要的過濾器（規(guī)則）

6. 選中過濾器（觸發(fā)器），列表中展示對應(yīng)的信息（反饋）

二、微交互可用性測試

微交互可用性測試是一個投入成本小，收入極大的產(chǎn)品體驗優(yōu)化方法，可以發(fā)現(xiàn)大約85%的可用性問題。

2.1 方案準備

制作任務(wù)卡片：

• 主持人任務(wù)卡片、用戶任務(wù)卡片。
• 主持人任務(wù)卡片包含：測試任務(wù)描述、需要提問的問題、需要記錄的點。
• 用戶任務(wù)卡片：測試任務(wù)描述，用戶可以根據(jù)卡片提示，自助完成任務(wù)。

確定可以量化的可用性度量指標：

1. 任務(wù)成功率：完成微交互的用戶有百分之幾？
2. 任務(wù)時間：用戶完成微交互的總持續(xù)時間？
3. 錯誤：系統(tǒng)出錯的次數(shù)、用戶錯誤的數(shù)量
4. 效率：測量用戶完成微交互的難易程度
5. 步驟數(shù)：步驟的多少可以評價產(chǎn)品易用性

產(chǎn)品靜態(tài)原型、產(chǎn)品動態(tài)原型：產(chǎn)品靜態(tài)原型可以節(jié)約開發(fā)成本，但是用戶使用不直觀；產(chǎn)品動態(tài)原型，用戶使用直觀，但需要一些開發(fā)資源。不同的團隊可以根據(jù)自身的情況去考慮。

主持人、記錄員、測試場地、設(shè)備、網(wǎng)絡(luò)、獎品等準備。

2.2 目標用戶招募

根據(jù)Jakob Nielsen的研究，有5位用戶參與測試，即可以發(fā)現(xiàn)大約85%的可用性問題。同理，微交互可用性測試的用戶不在于多，而在于精。

2.3 預(yù)測試

可用性測試負責(zé)人，需要確認方案準備階段及目標用戶招募工作階段的工作均已完成，尤其是產(chǎn)品原型是否可用。預(yù)測試可以提前發(fā)現(xiàn)問題，提前解決。

2.4 正式測試

主持人向用戶介紹本次測試的要求及注意事項，用戶在主持人的指引下完成操作、回答問題，記錄員根據(jù)卡片要求，記錄用戶操作情況。

2.5 數(shù)據(jù)分析及結(jié)果呈現(xiàn)

分析在測試過程中，記錄下來的所有問題，分析用戶任務(wù)完成率、操作時間、步驟數(shù)、效率等數(shù)據(jù)，

發(fā)現(xiàn)可用性問題及可以優(yōu)化的點。

三、優(yōu)秀的微交互案例收集

熟讀唐詩300首，不會作詩也會吟。持之以恒的多多體驗產(chǎn)品，記錄其他產(chǎn)品的優(yōu)秀微交互設(shè)計，整理和豐富自己的微交互素材庫，對比同類微交互的優(yōu)缺點，積累一段時間后，如果遇到同類微交互設(shè)計任務(wù)時，可以做到信手拈來。

下面展示幾組筆者平時收集的優(yōu)秀的微交互：

3.1 減少操作步驟、點擊次數(shù)，提升效率

京東快遞小程序

復(fù)制寄件人/收件人的一大串信息，可以自動填入姓名、手機號碼、地址信息到對應(yīng)的橫線（Amazing），復(fù)制粘貼兩步操作，不需要來回的倒騰。

其他APP，需要在兩個應(yīng)用中不斷的切換，復(fù)制粘貼對應(yīng)的姓名、手機號碼、地址等字段信息。

幕布APP

我司程序員小哥推薦的一款思維導(dǎo)圖APP，僅需兩步，【輸入主標題，多分支標題】【一鍵生成思維導(dǎo)圖】，即可完成思維導(dǎo)圖；編輯模式下，可以直接修改文本完成多處修改，十分便捷。

思維導(dǎo)圖在筆者的記憶中，在PC上的操作是，【輸入主標題】【右擊】【新增同級/下級分支標題】，每次只能創(chuàng)建一個分支標題，需要創(chuàng)建多次，編輯多次，交互不太友好。

3.2 技術(shù)的發(fā)展，提升微交互體驗

APP本機號碼一鍵登錄

僅需點擊【一鍵登錄】，即可完成登錄/注冊，免驗證，神操作，超便捷，完美解決了過去繁瑣注冊/登錄流程中的大量用戶流失問題。目前已經(jīng)有很多APP支持本機號碼一鍵登錄了，如：京東、知乎、簡書、中國移動掌上營業(yè)廳等。

移動認證是中移互聯(lián)網(wǎng)有限公司于2017年11月24日發(fā)布 ，運用運營商自身的數(shù)據(jù)網(wǎng)絡(luò)認證能力解決企業(yè)用戶賬號使用和用戶數(shù)據(jù)管理的解決方案。

貝殼APP 360全景圖 VR看房：

房子內(nèi)部360全景圖，VR看房，身臨其境；真房源，真實房子圖片。

用戶足不出戶出戶可以在線挑選中意的房子，降低了看房、選房的成本，節(jié)約了買房者、賣房者、房產(chǎn)中介的時間。

3.3 游戲化微交互設(shè)計，打造心流式體驗

滬江開心詞場APP

我司市場妹子推薦，英語的學(xué)習(xí)可以通過游戲的方式，先選擇單詞本，選擇關(guān)卡，自己先快速學(xué)完，然后就可以進入在線對戰(zhàn)模式了，搶答的方式，誰對的又多又快，就是誰贏。

贏的時候特別有快感，想要贏更多，贏更多，就需要學(xué)更多；輸?shù)臅r候會被啟發(fā)起斗志，認真學(xué)習(xí)單詞，下一次一定能贏回來。在不知不覺中，以游戲的方式，學(xué)會了很多單詞。這種心流式的體驗，有趣，單詞學(xué)習(xí)吸收快，記得牢。

微信APP表情包制作

我司測試妹子推薦，微信表情包制作流程特別簡單，點擊【開始錄制表情】【添加文字】，即可完成表情包制作。個性化定制用戶的專屬表情包，用戶玩起來都感覺不到時間的流逝，有一款自己的表情，或是自己家人、寶寶的表情，真是一件好玩的事情，將這些有趣的表情發(fā)給親戚朋友時，又可以拉近雙方的距離。

結(jié)語

好的產(chǎn)品需要打磨，但不一定需要費時費力的去做，產(chǎn)品研發(fā)團隊每一個人都應(yīng)該有用戶體驗意識，將提升用戶體驗貫穿于產(chǎn)品開發(fā)的全過程。好的微交互設(shè)計用戶無感知，那些看似微不足道的微交互瞬間，承載著產(chǎn)品設(shè)計者對用戶的關(guān)愛。

引文來源

《微交互》，【美】Dan Saffer 著，人民郵電出版社，2013.

移動認證：https://baike.baidu.com/item/移動認證/22415022?fr=aladdin

#專欄作家#

沈子硯，公眾號：UXHub，人人都是產(chǎn)品經(jīng)理專欄作家。江南大學(xué)設(shè)計學(xué)院碩士，專注于產(chǎn)品設(shè)計、產(chǎn)品體驗、產(chǎn)品運營。

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

題圖來自 Unsplash，基于 CC0 協(xié)議