1 微交互的定義

微交互通常是指一些比較細節性的操作行為的反饋，通常是某單個事件或者交互行為。微交互可以是產品的部分功能或者就是產品本身，例如我們日常生活使用中的榨汁機，它提供一個功能，就是將我們放進的水果榨成鮮榨果汁，或者我們上完洗手間，把手伸到水龍頭下面的時候，水會自動的流出來，而不用按下任何的按鈕，這便是現實物理世界的一種微交互，因為他的設計是單個功能的動作，使水從水龍頭中流出。

所以微交互通常是專注于某個事件或某個單個任務，例如我們最常使用的點贊后的反饋就是一次微交互事件。

1.10 微交互誕生的背景

計算機科學家拉里·特斯勒（Larry Tesler）在為施樂Xerox電腦的文字處理軟件Gypsy設計程序時，突發奇想，給軟件Gypsy加入了鼠標操作和GUI圖形界面，這樣便大大的方便了Gypsy作為文字處理軟件的實用性與便捷性，于是在不斷體驗與嘗試的過程中，于是拉里·特斯勒在改版的時候，給Gypsy加入了復制、粘貼功能鍵。這些概念隨后成為了文本編輯與計算機操作系統用戶界面的基石之一。

拉里·特斯勒其實當初設計復制和粘貼的思路便是減少用戶操作的阻力，讓用戶在使用過程中不會被其他的事物所打斷，往后的數十年，拉里都為了這個目標在奮斗，所以“復制”和“粘貼”便是精心設計過的微交互，沒有任何提示和阻力，一氣呵成的便捷交互。

交互設計以及人機交互在不斷的發展的歷史，實際上就是微交互的歷史。今天，我們在桌面和筆記本電腦中、在移動設備中習以為常的那些交互方式， 都曾引發過微交互設計的革命。無論是保存文檔，還是把文件拖放文件夾，還是連接到Wi-Fi網絡，都曾經是精心設計的微交互。就連滾動和打開多個窗口這么“基本的”交互方式，也都要經過設計。技術在快速發展，不斷對微交互提出創新的要求。用戶習慣了拿來就用，他們只會關注更好的交互方式，或者是那些由于技術發展催生的、或強制必須使用的微交互方式。

所以，好的微交互就像“Ctrl+C””Ctrl+v”那樣方便，會改善我們的使用體驗。

1.20 移動端微交互應用場景的發展歷程

還是“復制”“粘貼”的例子，我們在功能機的時代，我們想要把一段文字從一個軟件復制到另外一個軟件上，我們通常要在兩個軟件不停止的去切換，然后通過記憶內容然后在來輸入，這樣的效率和精準度都不是很高，而且要是需要復制的內容過于龐大，想要完成便是一件讓人頭疼和心累的事情。

但是在進入移動智能機的時代，該功能的微交互便發生的天翻地覆的變化，第一步我們只需用長按需要復制的文字，調出復制按鈕，第二步，選中我們需要復制的文本內容，第三步便是切換到需要粘貼文字的APP，第四步，長按調出粘貼按鈕，選擇粘貼文字，這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準確度上都有了不小的飛躍。

但是隨著技術的革新和從業者對于用戶體驗的理解更加深刻，我們的操作追求更高效，更精準，于是，該場景的交互又迎來的一次技術的變革，為了跟上時代的發展與用戶的訴求，在2016年10月19日的錘子手機發布會上，它推出了兩個功能：“Big Bang”和“One Step”。“Big Bang”的功能是長按一段文字，可以根據算法自動將文字的內容分割獨立的詞語按鈕，只需點擊這些分割的按鈕就可以選擇想要的內容。而“一步”可以直接將所選內容拖動到其他目標應用程序中，而無需在應用程序之間切換。這兩個功能的結合，將之前需要四個步驟的功能簡化為只有兩個步驟：第一步是按下選擇內容；第二步，拖動到目標應用程序。

在2021年6月8日凌晨，一年一度的蘋果WWDC大會在線上正式舉行，ios帶來了類似于“big bang”的功能：live text，也宣告著這個小小復制粘貼功能又完成了一次新的進化，所以，無論是“live text”還是“Big Bang”，這兩個功能本質其實就是微交互的進化，只不過用了兩個不同的名字去代表而已。

1.30 為什么要重視微交互

微交互在的存在是為了讓用戶在體驗過程中感覺舒適和流暢。因為微交互它可能在產品中出現頻次會比較多，以至于很多用戶會忽視甚至感覺不到它的存在。

相信很多男生的夢想都是擁有一輛法拉利的車吧，法拉利的無論是在車外觀造型上的設計還是發動機的挑選，都是讓人心曠神怡，但是，無論這輛車多么優秀，一個車胎漏氣的法拉利都會破壞整個良好體驗中的氛圍。

所以在產品中的微交互絕大多數是微小且不會引起用戶的關注，但是它的存在確實讓產品有更加流暢且自然的用戶體驗。

通常微交互完整的可以達到以下三點目的：1.提高用戶的留存      2.放大品牌價值      3.提升可用性。

1.31 提高用戶的留存

設計師對于每一次微交互的設計，都是為了讓用戶自然且路徑清晰高效的完成任務，用戶在潛意識要確認對本次體驗的滿意度時，用戶自身會經歷一種對“時間忽視”的現象，即會忘記本次體驗所需要花費的時間，而會專注于當前的事情。

• 峰終定律

無論是正向的還是負向的，開始時與結束時的感覺，這就是峰終定律（Peak-End Rule）。這條定律基于潛意識總結體驗的特點：對一項事物的體驗之后，所能記住的就只是在峰與終時的體驗，而在過程中好與不好體驗的比重、好與不好體驗的時間長短，對記憶差不多沒有影響。

所以好的微交互應該注重于用戶的“峰終定律”體驗，如果處理得當，微交互會持續的刺激用戶大腦中的多巴胺的釋放，從而創造出小小的愉悅時刻。

這些會有助于改善用戶的體驗并提升用戶繼續使用我們的產品的可能性，有助于提升產品的留存率。

1.32 傳遞品牌記憶

微交互比較有價值的地方就是它有機會讓我們在用戶心智中建立品牌的影響，讓用戶對我們的品牌更有記憶力。

人們通常對品牌認知記憶最基礎便是圖形，但是品牌的傳遞的記憶點除了圖像還可以一段標志性的動作或者是一段旋律。

通常微交互傳遞品牌記憶有兩點：1.標志動作   2.標志聲音。

• （1）標志動作

我記得有次看綜藝節目，里面請到了一個選秀的出來的團叫“R1SE”，在表演完一段唱跳后，在自我介紹后，他們表演了一段團隊的“團隊動作”，這個在外人看來這無疑是“社死”尷尬瞬間，但是在品牌傳播的角度，這種標志性的動作確實有有助于傳播，例如邁克爾杰克遜的招牌動作太空步是很經典的一個但有兩種，一種是倒滑，另一種是側滑，還有傾斜45°，無論是誰在去模仿，都很容易容易讓人想起邁克爾杰克遜，另外一個就是諾基亞的開機畫面的“手牽手的動作”，更是陪伴一代人的青春，所以無論是哪個說唱廠牌和選秀出來的團，都是設定自己的團的固定的動作，都是有助于讓自己的特點使粉絲產生記憶的聯想。

而在微交互的設計結構中，也是包含動作這一設定的。

• （2）標志聲音

我們在聽到“噔，等噔等噔”等時候，我們便會想起英特爾的廣告，所以每個手機品牌的都會給自己短信、系統通知和電話來電設計獨特的聲音，讓用戶在只在聽的階段，還沒掏出設備，便可以判斷是什么品牌手機。

在微交互的設計中，聲音也組成了微交互的一部分，所以合理的應用微交互有助于用戶對品牌多維度的記憶。

1.33 提升可用性

微交互的設計，包含了為用戶提供持續的反饋方式，當用戶在迅雷和百度云盤在下載成功時，除了提供的反饋，也會提供聲音的提示反饋，考慮的是一般下載大型文件的時候，我們不可能實時的等待在設備前面，我們只用通過聲音便可以知道是否下載完成了。大多數iPhone用戶遇到的一個常見的微觀交互是在鎖屏幕上輸入密碼。如果輸入了錯誤的密碼，則屏幕在清除密碼時會震動。在整個過程中，屏幕上不會出現任何文本來指示用戶出了什么問題，用戶也可以根據使用經驗來判斷當前進行到哪一步了，所以，因為這些細微的反饋細節，整個用戶體驗變得更加直觀和方便，讓用戶的可用性大大提升了。

1.40 微交互與動效的關系

我們需要了解的是微交互與動效還是有區別的。動效囊括的范圍比較廣泛，它可以與多個功能和頁面進行補充和解釋，而微交互則是只針對一個功能進行優化，所以針對一個功能的細小的動效可以算作是一次微交互，它是輔助用戶更好的對本次功能的操作。

1.50 微交互與交互的區別

交互設計是串聯起產品各個頁面與功能反饋的工作，如果缺少了某個交互環節可能會導致產品的BUG或其他負面情況，交互設計簡單的來說就是滿足了產品的可用性。然而微交互的存在是為了給產品提升易用性與好用性，能起到錦上添花的作用。

例如我們常用的點贊功能，用戶在點擊過后，一個線性的點贊圖標變為填充的紅色圖標，這是完成了一次交互行為的閉環，微交互則是讓本次點贊由線性變為填充的過程怎么更有趣，更有意思，更加讓用戶在本次點贊中得到滿足感。

1.60 微交互的應用場景

微交互的在產品中的應用場景也是比較廣泛，那些小的細節都可以提升用戶體驗，通常在不同的場景下也能體現出不同的細節。

微交互不是刻意的，而是被動發現問題的優化過程，當靜態設計不能滿足的時候，可以考慮動態的微交互設計，

所以，我們需要考慮如何滿足用戶的操作體驗，微交互是否幫產品的數據上有提升，設計角度上微交互是否有創意。

1.61 系統可見性

用戶只有知道當前系統狀態是怎樣的，用戶才能做出更改，也就是說消除評估和執行之間的鴻溝并弄清楚下一步需要做什么才能更好的完成任務。系統應該在合理的時間內通過適當的反饋讓用戶清楚了解正在發生的情況和目前的狀態，例如，開車時儀表盤的速度指示駕駛者減速還是加速，信息獲取的缺失一般代表著控制的缺失。

• （1）明確位置

無論是在現實還是在產品的使用狀態，對于迷失方向感都是一件讓人沒有安全感的事情，也對接下來的操作造成比較大的影響，所以我們可以通過微交互吸引用戶的注意力，讓用戶能合理的明確自己現在所在的位置。

• （2）反饋進度

每當用戶與系統交互時，他們都需要知道交互是否成功，如果因為各種原因，系統無法及時反饋，我們應該給與用戶進度的反饋，或者是用戶在進行某些任務的時候，我們應該分步驟給用戶，并在執行的過程中給與用戶當前的進度，來預估完成該任務還需要多久。

1.62 系統反饋

每當用戶和系統發生交互時，用戶需要知道操作是否成功。而這個反饋的過程適合的微交互可以增添用戶在使用過程中的趣味性，另外一種便是可以增強用戶在使用過程中的“確定性”，避免用戶在點擊后因為反饋不太明顯而誤以為沒有點擊的錯覺。

• （1）點擊后的反饋

按鈕是我們在使用APP中使用頻次最多的交互功能，根據場景的不同，我們需要反饋的樣式也是不一樣的，比如，我們的點贊后的反饋微交互應該是積極正向的，當這個按鈕的功能屬于功能形式的時候，我們的反饋應該是給與用戶明確的反饋，例如我們開關按鈕，讓用戶能明確當前按鈕的狀態。

• （2）引導視線

按鈕的能給與用戶除了功能方面的微交互的反饋外，還有一種是點擊用途的反饋，例如，我們常常使用的美團外賣，我們在選好我們想要的商品后，點擊后我們會看到商鋪成拋物線的進了購物車，這樣微交互的就是非常明確的告訴用戶你先選擇的東西可以去哪里找到。

1.63.系統狀態

系統的狀態從本質上講和溝通的透明度有關，系統狀態的可見性是指系統狀態傳達給用戶的程度，理想的情況是，系統應該始終在合理的時間內通過適當的反饋使用戶了解當前發生的情況。

• （1）當前的系統狀態

我們在生活中，要是當前手上事情比較忙碌，無法幫助別人去處理一些事情或者無法回音別人的消息的時候，我們應該告知對方，這是比較禮貌的一件事情。

所以當我們的系統正在加載中、或者在執行某項工作的時候，應該通過微交互的方式告知用戶，讓用戶知道我們的產品并沒有宕機，而是在工作中。加載時長在6-10秒的情況下，我們一般是通過這樣的微交互會采用循環加載的動畫去呈現，而需要等待10-15秒這樣的，或者更長的時間，循環加載的動畫也會給人一種宕機的錯覺，我們應該適當的給與用戶一個進度條，告知用戶當前處理的進度，可以使得用戶在焦慮不安中解放出來。

• （2）內容加載狀態

在蘋果手機發布的時期，因為網速比較慢，在點開APP的時候，APP的內容都沒還加載好，所以喬布斯的解決方案是用啟動頁去遮擋下這一不完美的問題。

我們在APP在頁面的跳轉中，肯定也會遇到這樣的問題，就是用戶在點擊后，內容不能及時的加載出來，所以我們通用的解決方案是使用一種加載容器“界面骨架”來呈現，這種臨時用來展示的容易不僅可以緩解用戶在等待過程中的焦慮，也可以通過“界面骨架”去提前了解頁面的大體的結構，構建用戶的預期，讓用戶的視覺得到一個緩沖的時間。

1.64.觸發狀態

當用戶主動觸發的事件，我們的產品應該及時的給與用戶反饋，就像我們遇到熟人打招呼，要是打完招呼對方不回復，那也可以算是一件“社死”的時間了，所以觸發反饋事件中的微交互也是值得我們去考量的一件事情，它可以提升用戶對產品的友好度。

• （1）提醒預通知

一般正常的消息通知都是為了提醒用戶有事情需要處理，所以，我們采用有趣味的微交互能有效的吸引用戶的視線和信息的傳遞，已達到通知的目的。

• （2）預判用戶的輸入

在多數的APP 中，填寫表單信息的必不可少的步驟，比喻，比較常見的填寫注冊登陸的信息和一些比喻的資料的填寫，由于這些信息表單一般含的信息并不是很少，所以，我們需要在每一步的檢測用戶填寫的內容是否有問題，及時的提醒用戶更正，不然等用戶全部填寫完了在提醒用戶的情緒可能會“蚌埠住了”，所以通知我們在填寫密碼的時候，要是密碼過于簡單，我們需要提醒用戶需要添加哪些內容，郵箱的格式是不是正確的，等等。

2 微交互的構成

那怎樣才能做好“微交互”呢？丹·賽弗在他的著作《微交互：細節設計成就卓越產品》中，提出了好的微交互應該有的結構： 觸發器、規則、反饋、循環與模式 。我們一個個來講。

2.10 觸發器

觸發器，是啟動微交互的“扳機”，是微交互啟動的原點。要把識別“扳機”的成本，降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經典臺詞一樣“你過來呀”，簡單且易于識別。

觸發器一般是分為兩種，就像平時打游戲一樣，有主動技能和被動技能，觸發器也被分為手動觸發，即用戶主動去觸發的，被動觸發，即系統被動觸發的。

2.11 手動觸發器

手動觸發器一般是用戶自主的去點擊，所以我們盡量要去保證觸發器的識別性，以及用戶在點擊前的一些心里預期的管控。手動觸發器一般有三項設計原則：1.降低識別成本    2.對用戶的預期管控     3.考慮用戶的使用場景

• （1）降低識別成本

觸發器是微交互啟動的第一步，在使用場景下必須要讓用戶能識別出來，用戶才能去點擊，所以觸發器要足夠清晰明顯。

比如，我們在瀏覽和使用視頻屏網站或者視頻APP的時候，網頁或APP上的視頻中間都有個碩大的“播放”按鈕，比如，攝像機上的錄像鍵，總是最明顯的紅色；這些都是觸發器在提示用戶，應該點它，且外觀樣式都是采用通俗易懂的外觀樣式。

• （2）對用戶的預期管控

我們一般去一家陌生的商店的時候，有的商店會玻璃門，比較高級的是自動的，一般的店鋪都會是手動的，這時候，一般的手動的玻璃在門上都會貼上這個門是用推的形式開還是用拉的形式去關，這樣，我們便知道這樣去推或者拉門，是肯定可以把門打開的。

另外一種情況是要遵循用戶日常生活場景的認知，比如，我曾經使用過一款教育的產品，它有點類似與房子的home鍵是返回鍵，但是在絕大多數的APP里都是去首頁，所以，這項設計便是違反了用戶日常的認知，沒有對用戶的預期管控。

所以我們的觸發器需要讓用戶知道我點了之后會去到哪里，在形式的設計上需要明確，比如我們的微信或郵件APP的一角會顯示未讀郵件的數量，提示用戶在點擊后肯定有未讀的郵件或消息。

• （3）考慮用戶的使用場景

在我們平時工作和娛樂中使用的鍵盤，我們鍵盤的按鍵的大小都是根據用戶在日常使用場景的頻次和設計大小的，例如，用戶的最多的空格鍵，是最大的，其次是回車鍵，使用的最少的開關和其他的控制鍵是最小的，這都是考慮到我們生活中的使用場景去設計的。

我們在設計觸發器的時候也是一樣的，需要考慮到用戶在日常生活操作的具體情況來對觸發器的大小位置來進行設計擺放，盡量讓用戶操作起來比較合適。

所以我們APP的按鈕會根據使用頻次來確定圖標的大小的層級，方便用戶憑借第一反應力去點擊使用。

2.12 系統觸發器

系統觸發器的微交互一般需要用戶滿足了某些條件才會觸發的，例如我們平時在工作時間設置的起床鬧鐘，我們微信的朋友圈的更新提示，都是屬于系統觸發器，在滿足了某些系統設定的規則之后才會觸發的。

系統觸發器通常會讓用手動設置何時觸發，觸發的頻率狀況，比如，我最近想學習，不想被朋友圈的信息影響，我可以選擇關閉朋友圈紅點提示，比如，我的鬧鐘設置的是周一到周五的工作時間去響鈴，我周三晚上加班太晚了，第二天中午十二點去上班，這個時候我就可以單獨的選擇周四這天鬧鐘不響。

2.20  規則

規則，用來規定微交互的過程，是整個微交互的核心。好的規則，應該順乎人性、體貼方便。簡單的來說，規則就是要按套路出牌，不然就會讓用戶感覺到出其不意。

2.21  微交互的規則是什么

微交互的規則對于不是做程序員或者技術的用戶來說，是提示用戶，哪些能做哪些不能做，該怎么去做，且規則設定應該讓用戶一眼就可以看懂，就是日常生活中開燈的開關和門的推拉一樣簡單。

比如，蘋果手機之前“滑動解鎖屏幕”這便是微交互的規則，也是最基礎的規則。

所以，我們可以發現，規定的設定需要滿足兩點條件，1.名詞（通過什么去調整）即滑動條，2.動詞（用戶該怎么去做）滑動既可解鎖手機。

2.22  規則應該符合用戶認知

一般每個平臺的核心用戶都是不一樣的，使用的習慣也是不一樣，我們盡量了解用戶平時的習慣，去設定規則，我們都知道，像一般的電商都是有購物車的，都是為了方便用戶將選好的物品一起結算，而拼多多卻反其道而行之，它并沒有購物車，這便是針對用戶生活習性的不同而設定的。

拼多多的主要戰略是以農村包圍城市，最開始的主要是還是流行在五環外的農村用戶，這些用戶和淘寶或其它平臺也不是重合的，可能是從來沒有用過電商APP的用戶，而在一些偏遠的地區，他們的超市是沒有購物車，如果加上購物車會增加用戶的教育成本，其次，我們都知道拼單都是講究及時性的，所以，在考慮到平臺用戶的用戶背景和用戶的使用場景，就沒有增加購物車。

所以，我們在設定微交互規則的時候，依照現行平臺已收集到的使用者的資料來設計，利用已知情境及行為來對現在的互動進行分析與調整。

2.23 給用戶提供選擇

在和異性聊天的時候，如果想和對象一直有話題的話，我們聊天盡量不要以陳述句結束，而是要給對象可以接的上的開放式的問題，讓對方能非常輕松的去接話。

所以，我們通過對用戶的了解和操作的場景，我們給用戶一個選項，并提示給使用者，來串連整個流程。所以，通常用系統默認項＞按場景出現項

(1) 系統默認選項

系統默認項和考慮場景的選項是相互關聯的，正常的情況，在有限的選項中為用戶提供默認項。而默認項應該是大部分用戶最常用的那個選項。

例如我們在退出或者刪除的時候需要二次確認，正常的會將確認放在我們比較好操作的位置且會高亮放大展示，一般的電商平臺上的產品也是種類繁多，所以一般的電商平臺都會有分類區，將不同的商品歸類為不同默認的選項，來供用戶選擇。

(2) 按場景出現的選項

按場景出現的選項我們將它分為兩種，一種是只在需要的時候出現，另外一種是只提供需要的選項。

• a. 在需要的時候出現

在日常的產品的設計中，有些功能不一定需要一直存在，所以我們需要考慮在用戶需要的時候在提供給用戶，或者是我們對的用戶在適當的時候在出現。

比如，我們在聽歌的時候，一般時候都會在手機放在一旁做別的時候或者閉上研究休息，只能只有覺得這個歌曲比較好聽以后想在KTV去唱的時候或者對歌曲有比較濃厚的興趣的時候，我們才會去查看歌曲，而網易云音樂也許是發現了這個洞察點，在我們看一會歌詞，在歌詞下面的地方，會出現K歌的話筒，如果用戶想練習下自己唱這個歌是什么樣的，便可以點進去直接唱，而不是默默的在屏幕上看著歌詞跟唱。

• b. 只提供必要的選項

我們大部分在中午的時候，都糾結中午吃什么這個問題，主要是糾結的點是外賣的選擇的太多了，要是公司提供食堂的話，在食堂限定的菜譜內去選擇，我想，大部分人中午也不會那么煩惱了。

所以在某些場景中，我們需要根據場景去給用戶提供選擇，提升用戶在使用中效率，比如，我們國內的搜索百度，主界面上只有搜索框和百度一下，簡潔明了，讓用戶一看就知道產品的主要功能，比如，當我們因為軟件連接上車上的藍牙后，便進去的車載的模式，因為開車的時候需要集中注意力去開車，所以車載模式下，很多不必要的功能便會被隱藏起來，只會提供必須的功能選項按鈕。

2.30 反饋

反饋，是向用戶說明規則。用戶并不知道你設計了什么規則，你要通過反饋友好地讓他知道。

你輸入字數太少，它顯示：需要6個以上字符；你輸入簡單單詞，它顯示：密碼太好猜了；符合要求，它會按照密碼的強度，逐級顯示：弱，不錯，強，很強！

其次是及時的反饋可以增加用戶的活躍度，蝦皮購物在前幾年時也用這個手法，讓用戶每天可以免費轉兩次，之后要轉轉盤時，需要付出「蝦幣」，我即使理性上知道這可能是蝦皮回收蝦幣的手法，而且游戲贏家絕對是蝦皮，還是付了幾枚蝦幣，為了多賭幾次「我就是那個幸運兒」。只能說當這些經典的實體體驗移到線上，其策略與目的還是能順利運作，從中學到的是，現今的數位產品透過借鏡過去「已被驗證成功的實體體驗」，在數位產品上拷貝并實現其預期效果。

吃角子老虎機善用回饋機制來「強化行為」，提供的不可預測性是游戲的一環。

但一般來說，我們會希望在微互動中提供一致的、對我們期望的行為的正向激勵，因此回饋的應該是「可預測」的。

同時，回饋本身就要可以解釋規則，如：按下按鈕（觸動觸發器）會發生什麼事（回饋），回饋需要告訴使用者可以對微互動「做什麼」。

2.31 反饋給與用戶安全感

我們給與用戶的反饋要盡量與用戶本次的操作的相關，比如，用戶下載文件，我們需要給與用戶的反饋信息是，已開始下載，下載的進度和下載完成，如果反饋在細節點，我們在下載的過程中可以提升用戶,”下載過程中會占用大量的帶寬，也許用影響您瀏覽網頁或者其他是上網操作”，反饋越是細節，用戶在體驗微交互的過程中的負面情緒就越少，提升用戶在使用過程中的確定性和安全感。

2.32 反饋具有主次性

微交互的反饋直觀也是比較重要的因素之一，可以讓用戶更好的理解規則，降低用戶的認知成本，我們反饋給用戶的信息應該都是準確且重要的，例如我們的消息提醒，一般都是在有幾條就提醒幾條消息，消息的傳遞需要做到少即是多，信息越是重要，反饋的層級就要越高。

2.40 循環與模式

循環與模式，我們可以將它理解為是規則的分支。比如，鬧鐘是你每天接觸的第一個“微交互”了吧。眼睛還沒睜開，鬧鐘就響了。你重重拍下去，這時就啟動了“再睡一會兒”這個分支的規則，也就是“模式”。如何設計這個分支，最合理呢？你可以讓它5分鐘后再響，如果再拍下去，就別叫醒他了。“你永遠叫不醒一個裝睡的人”。這樣合理嗎？

也許不合理。更合理的做法是，拍第一次，5分鐘后再響，拍第二次，3分鐘后再響，拍第三次，縮短為1分鐘。然后就一直響。因為你拍的次數越多，越有可能因為貪睡誤事。

循環與模式，就是一次性的或者循環的分支規則。

2.41 什么是模式

模式指的是：執行一種不常用的展示形式（在某些情況下可能會影響到微交互主要要達成的目的）比如，我們的APP中都會有設置功能，我們在修改默認的設置的時候，其實也是對APP的規則的一次修改，讓APP朝著我們想要的方向去展示。

我們都用過股票軟件去看股票行情，在行情頁面剛進去的時候，我們是根據A股、港股、美股這樣的模式去瀏覽我們感興趣的企業股票，然后我們將我們看好的企業添加到自選里面的時候，我們下一次在打開軟件的時候，就可以在自選里看到我們感興趣的股票，這便執行一次模式，模式便是在循環與循環不一樣的展示形式，可能是用戶自己設定的或者是軟件提供的選擇。

2.42 無限模式與一次性模式

正常的模式是指將一些規定好的操作單獨拿出來到另外的空間根據用戶的喜好去定義，但是我們在模式中也會分兩種情況，一直是無限模式與一次性模式。

（1）無限模式

無限模式是指用戶要在某段時間內去使用一種狀態的時候才會選擇開始，例如，我們使用鍵盤打英文字母的時候，我們想要大寫和小寫都是可以去切換選擇的，只有我們的用戶在需要長時間的去使用大寫字母，才會按下鍵盤上的“Caps lock”去鎖定大寫狀態，這種模式的好處是，用戶不會忘記自己正在一個特殊模式中。

（2）一次性模式

一次性模式是用戶自主開啟，且執行一次便是結束，不再執行，比如我們用siri去喊一句“siri，幫我定一個早上8.的鬧鐘”，這時，sir會告訴我們定的是幾號上午還是下午的鬧鐘，這個鬧鐘在執行一次便會失效。

2.43 什么是循環

循環決定了微交互的持續時間重復的頻率，這個也和我們的規則的設定相關。

2.44 循環的分類

（1） 計數循環

即我們在給用戶反饋前需要來回檢查規定好的次數，發現了問題再給用戶反饋。例如，我們的微信在網絡不穩定的情況時，我們會看到微信會連續好幾次的出現刷新，然后才會給用戶網絡不好或者斷網的提示。

（2） 條件循環

即在滿足條件執行后，可以進行自行的內部條件，比如，當我們的房租在沒有到了交租的日子沒有交的時候，就會收到繳費的提醒，過幾天在不交就會在提醒一次，要是按時繳費了便不會在提醒。

（3）集合循環

即循環的核對數值，然后停止，和前面的計數循環有相似之處，例如我們短信系統，會對收到的信息進行系統的統計，然后發現有未讀的信息，便會在角標上記錄數值1.

（4）無窮循環

即循環開始后，除非人為的干預讓它停止或者系統出問題的時候才會停止，否則會一直的循環下去，就像永動機一樣。無窮循環分為兩種一種是開放循環，另外一種是封閉循環。

（5）開放循環和封閉循環

• 1）開放循環

即在滿足條件后，執行一次便結束，miui有個功能是可以設定手機每天早上什么開始，當每次到達這個時間后，我們原本處于關機狀態的手機便會開機，這個指令執行一次便不會在執行了。

• 2）封閉循環

是根據一定的環境或者其他的反饋可以進行自行的內部調整，比如，當我們手機開機后，我們的手機屏幕的亮點會根據環境光而去調節。

• 3）長循環

長循環可以理解為是一種陪伴用戶在使用我們產品時候記錄的一種微交互，使用的時間越長，這種記錄就越多，比喻我們軟件的搜索記錄和瀏覽記錄便是一種長循環。

• 4）漸進揭示或漸進減少

長循環的另外一種情況便是當用戶長期使用后對軟件越來越熟悉后，我們可以對有經驗的用戶開放更加進階的玩法比如一些快捷鍵，可以幫助用戶提升效率。

長循環的另外一種情況便是漸進較少，即當我們的用戶熟悉了我們的軟件后，有些界面上的說明解釋的提示可以適當的去掉，簡化界面，對用戶而言，干擾少了，也會提升使用的效率和交互的速度。

3 微交互的層次

微交互在產品中的應用場景也是比較豐富的，一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗，其次深入后是功能交互層的體驗，最后是體驗了一個容錯性比較好的心理上的愉悅，也就是情感層。

視覺層主要給予用戶感官層面的體驗，交互層是給予使用上的效率體驗，情感層主要是讓用戶體驗后心理上有滿足或者愉快的感受。

但是這些層面又不是絕對獨立的，每個微交互設計都能在上述三個層面中找到單獨或者組合，比如雙擊屏幕的反饋，就滿足了視覺層面、功能層面與情感層面的三層優化。

3.10 微交互視覺層的應用

在視覺層，考慮的轉場交互動作是否足夠流暢，視覺是否美觀，反饋交互是否有創意，是否加深品牌印象。

3.11相同的元素串聯轉場

推拉搖移是攝像中的術語。推指把鏡頭變焦到長焦端，使景物更近，拉則相反，把鏡頭變焦到廣角端，使景物顯得更遠，搖指鏡頭跟隨運動的物體做同方向的轉動，移指鏡頭跟隨動體做平行移動。這些手法都是經歷過前人的無數字的實踐所總結出來的道理。

我們在做交互轉場也是一樣，合適的轉場是讓產品添姿增色的重要手段之一，在iOS默認的轉場效果就是頁面從左往右去進場，但是想要在讓你交互轉場看起來比較舒服，就需要在細節上下功夫，其中比較常見的手法就是界面中有相同的元素的時候，讓他們將他們串聯起來，這樣的交互轉場會讓你產品看起來更舒適。

3.12 卡片推開周圍的元素

在安卓的Material Design提出Z軸的概念，在扁平化的界面上讓產品有三維的層次感（三維就是X軸（左右）、Y軸（上下）、Z軸（前后）組成的立體世界，而二維就是只有X和Y軸的平面世界。）我們知道手機的界面是一個平面和二維的空間，Material  Design通過一些二維的表現手段，比如投影和動態效果，來構建Z軸(前后)的概念。

在這個基礎上，我們可以在微交互上下功夫，例如當界面中的卡片比較多的話，我們想讓產品的體驗更具有層次感，我們可以通過卡片與周圍元素的變化產生關聯，營造微交互中的產品層次感。

3.13 降低認知難度

我們每個人在遇到自己不同的領域信息的時候，有些信息是用戶不易理解的，而我們所服務的產品可能是來自各個行業的，針對比較專業的知識的時候，我們應該專門針對這種場景處單獨的處理，降低用戶的認知難度。

比如，我們在早上上班經常會用到美團單車，因為是共享單車，所以有的車部分零件會出問題也是比較正常的，在騎行的用戶發現了車輛損壞的部位，卻無法辨認報修的部位，所以美團單車的處理是將整車拆解，將不同的部位標注出來，哪里有問題可以點擊直接報修。

同樣的場景也會常常發生在醫療的產品中，比如，我們發現身體哪里不舒服的時候，比較快速的可以通過了解APP來快速問診，但是通常我們不是醫學專業的，所以往往無法準確的說出自己身上哪來不舒服，或者往往只能模糊的說出，所以，我們可以通過將身體部分拆解劃分，方便用戶及時說出自己哪里不舒服。

3.14 專屬的元素動畫樣式

我們人天生都有好奇心，對新鮮的事物都有嘗試的心理，我們在微交互的設計中，也需要具有創新精神，讓用戶在視覺體驗層有與其他產品有不一樣的觀感，這樣有利于樹立我們產品的品牌感知。

比如，我們在點擊TAP時候的特殊的動畫呈現，點贊時候獨特的反饋，都會在視覺層面給用戶留下比較深刻的印象。

3.14 強化操作過程中的趣味性

下拉刷新是我們在產品中日常會使用的交互，現在的產品一般都不會使用默認的“菊花”的下拉刷新，一般會使用自己的IP或者更加有趣的MG動畫，都是為了讓用戶在使用我們的產品時候在視覺層有新的體驗，與其他的產品去拉開差距。

3.15 循環動畫強化產品氛圍

我們在酒吧857的時候，酒吧都會有氣氛組，來讓新來的客人比較快的融入到酒吧愉快的氛圍中，或者一般商業區就過節的時候，都會將街道和廣場裝扮與節日相符的燈光，都是為了讓客戶快速的融入到氣氛中。

我們在產品中也是，有到功能想吸引用戶的目光，或者想讓用戶快速的融入到某節日到氛圍中，都是可以通過循環都動畫去引導用戶。

3.20 微交互交互層的應用

通過控制轉場樣式，反饋樣式與反饋時間可提高交互效率，幫助用戶認知，提升產品數據。

3.21 交互行為主動聯動性

我們都知道，我們手機的屏幕空間是有限的，有時候的功能布局方面可能不是那么的合理，這個時候，我們的微交互就可以起作用了，比喻，我們手機上滑當時候，就可以將某些用戶比較常用的功能常駐在屏幕上方，當用戶想去操作的時候，不用在滑回去在去操作，在體驗上減少了用戶的操作步驟，提升了用戶在產品用戶過程中的舒適感。

3.22 合適的元素出現在適當的時機

我們經歷過這樣的時候，當陌生人來找我們做某些事情的時候，我們的第一反應力都是比較抗拒的，但是熟人的話我們可能會因為各種原因不可以拒絕。

產品設計中也是一樣，如果我們想讓用戶去應用商店去給我們的產品一個好評，肯定是不能一上來就給用戶引導去評價，這樣會極有可能會導致差評的，但是，我們可以利用用戶“啊哈時刻”去提升用戶的好評動機，例如，當用戶覺得某內容不錯的時候點贊了，收藏了，我們這個時候讓用戶去好評，這樣好評的幾率會大點，起碼不會引起用戶的逆反心理。

所以，當我們想要用戶去為我們做某些事情的時候，一定需要找準時機，結合微交互，提升用戶去完成某件事情的意愿。例如，當用戶在瀏覽商品的時候，我們可以給用戶發放優惠券，我們想讓用戶去分享我們的內容的時候，可以在用戶在快看完的時候，出現分享按鈕，都是可以通過微交互去讓用戶幫我們去做某些事情，以達我們想要的結果。

我們的知道豆瓣是一個社區內的產品，它是希望用戶在豆瓣來發表自己的想法的，所以，當用戶看到評論區的時候，它用將評論區給展開放大，吸引用戶的注意力，從而加大用戶互動的意愿。

3.23 提升用戶使用效率

一個產品能否讓用戶高效的操作和使用，是產品好不好的指標之一，產品通過用戶在使用過程中的高效體驗，能讓用戶通過一些不經意的小能有“哇”感覺，能讓用戶感受到產品團隊的良苦用心和匠人精神。

 （1）方便用戶的操作

我們都在電商產品買東西的時候退過貨或者發過快遞，每次通過APP填寫的那一堆地址都很讓人頭疼，我們在別的APP上復制了地址，打開菜鳥裹裹APP，系統能自動識別剪貼版上內容，自動跳轉頁面進入寄件頁，將信息拆解為收件人姓名、電話、地址等默認填入，可補全信息或直接提交寄件需求，無需手動錄入或一欄一欄的填寫內容。這是將用戶在進入APP前的行為做保留解析，當打開APP時，為用戶預先多想一步，直接提供可能所需的功能，讓用戶減去層層點擊進入功能頁面的步驟，高效完成目的性。

我們去一個陌生的地方旅游也是一樣，每次找酒店住處都是一件讓人比較心累的時候，飛豬APP在在地圖找房的的基礎上，通手指在地圖上畫圈來定位，方便了用戶自定義找房的用戶訴求，給用戶體驗上的新鮮感。

 （2）減少兩次操作

我們在日常工作和生活中，我們都不喜歡返工和重復的工作，所以，我們在設計軟件的交互過程中，也是盡量讓用戶不要做重復的工作，避免引起用戶焦慮的情緒，為用戶提升使用效率。

比如，我們在微信給別人聊天的時候，可以因為各種的場景和其他因素，我們可能會給朋友發消息的時候會發錯消息，在輸入錯后，我們可以針對單條的信息進行撤回和修改，便可以再次再次發送，不需要再次全部重新輸入，因為大部分用戶打錯字可能只是個別的字會錯，只需要單獨修改那幾個字就可以了。

另外還有一種情況是我們大部分的軟件都是采用信息流的布局，用戶在滑動很遠之后在想在回來的時候，也是一件讓用戶比較痛苦的事情，所以大部分的軟件會支持一鍵返回頂部，像微信的就是雙擊頂部就可以返回，大部分的軟件都是會用戶滑動到第二屏的時候，會出現返回頂部的按鈕。

（3）為不方便而設計

因為現在的手機大部分都是觸摸屏，當用戶輸入內容出錯的時候，需要修改的時候，手指無法精準的操作光標移動，所以我們可以在設計操作上幫助用戶去解決這個痛點，盡量為用戶在操作中提供方便。

比如，夸克瀏覽器設計一個滑塊來解決這個痛點，方便了用在文字輸入中需要精準修改的問題，大部分的的文字輸入工具也是同樣的解決方案。

3.24 預判用戶的操作

我們在看港劇的時候，一般都會看到這樣的劇情，警察在行動的時候，因為場景比較特殊，一般是不能說話交流的，因為怕打草驚蛇。所以，一般在行動的時候，行動的隊員們只需要相互打打手勢，交流一下眼神，大家都都心領神會了。

所以，我們在產品設計的過程中，也需要了解用戶的心理活動，所以好的微交互不僅僅需要滿足用戶當年的操作，更加需要能預測用戶的下一步的操作，這樣才可以更加高效的輔助用戶完成操作任務。

（1） 預防用戶的錯誤操作

我們的交互無論做的多么滴水不漏，也無法可以避免用戶在操作的過程中發生各種失誤的情況，所以，我們應該根據用戶最常會做出失誤的場景提前去糾正用戶的操作，為用戶去節省時間。

例如，我們在通常的使用中會有很多帶有自己習慣的操作，我們最常用支付寶給別人轉賬的時候，常常會將自己轉賬金額輸入到聊天框，所以每次當支付寶檢測到用戶只是單獨輸入了數字的時候，會用小的提示框去提示用戶是不是要轉賬，將用戶的錯誤提前告知。

（2） 根據使用歷史預判

其實用戶的操作使用歷史有很多用途，一種是方便我們對用戶的操作的習慣的了解，方便我們去改善用戶的操作體驗，另外一種用戶就是我們通過儲存用戶平時操作和觀看歷史，方便給用戶推薦相關興趣愛好的信息。

因為現在互聯網的迅速發展，基本上每個不同類目都會有各自的APP，每個APP都會有自己的賬戶，為了方便用戶記憶和統一管理，所以大部分的APP都會接入第三方的登錄方式，但是第三方登錄的賬戶也是一般是兩種到三種，所以會導致用戶會忘記自己上次登錄的是哪個賬戶，所以我們軟件需要幫用戶記住上次的采用的是哪個登錄方式，通過微交互的形式來在用戶登錄的時候提示和告知用戶。

3.25 為用戶使用場景設計

產品在日常的使用的過程中，用戶會遇到各種各樣的使用場景，我們體驗設計師需要針對用戶經常在使用產品的過程中的不便去優化，這些小的微交互在用戶使用過程中能增加生活的“小確幸”，讓我們的產品能給予用戶一絲絲溫暖。

（1）站在用戶的角度思考

在我們平時設計交互流程的時候，一般是保證了交互流程能夠跑通，一般不會出現什么大的問題，但是，我們還可以從另外的角度去思考，是不是能做的更好，更深的一層。

掃碼付款已經深入我們日常的生活，通常我們在超市買完東西讓收銀員去收款的時候，我們需要將手機轉過去讓收銀員去掃，這樣的使用場景在有時候拿的東西比較多的時候是極其不便的。支付寶在用戶打開付款碼的時候，只用輕輕將手機向下傾斜，二維碼和收款的字體也會隨之翻過去，方便對方去查看，因為收款和付款在支付寶的使用過程中也是比較常用的，這一設計便是考慮了用戶在收付款中的不便的微交互設計。

（2）考慮場景提供選擇

我們用戶通常在做出某些操作，肯定會有下一步的操作的，我們應該考慮到用戶某些場景的高頻操作，給用戶提供選擇，縮短用戶在使用過程的操作路徑。

我們平時在截圖的時候，一般除了發送給朋友去觀看，其次便是在使用過程中遇到問題需要咨詢，所以我們在用戶截圖后，可以為用戶展示分享或者咨詢的入口，為用戶高頻操作提供使用方便。

我們在日常截圖在再到微信準備發送圖片的時候，微信會將最新的截圖以小窗的形式求提醒用戶是否要發送，這都是基于用戶的高頻操作后提供選擇的最好的例子。

3.25 進場告知用戶隱藏的功能和操作

我們做設計的時候可能經常會遇到一些無理的要求，例如，這個功能需要強化，但是又不能去干擾用戶，每次遇到這種需求，我們設計師往往都是比較痛苦的時候，例如當用戶沒有開通會員的時候，我們想給用戶去展示會員的一些特權和首次開通的優惠，但是，用戶要是沒有開通，我們是沒辦法很好的去展示的，這個時候，我們可以通過微交互，在進場的時候，將隱藏的信息展開，然后過收起來，這樣用戶即看到信息，又不會影響接下來的操作。還有就是當我們上新某些功能的時候，想讓用戶去快速的去了解這個功能，這個時候我們可以通過演示動畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。

3.26 元素跟隨頁面的形態改變

我們的產品在操作的時候難免會出現各種狀態，為了讓每個狀態出現的時候都比較符合用戶的操作的習慣，這個時候我們需要考慮用戶的場景來改變頁面的布局，例如快手它的戰略是一個內容分享的社區，它注重的是用戶與主播之間的溝通，所以，正常的軟件，當視頻在播放的時候想看評論，這個時候的步驟都只能側中一個，但是，快手它考慮到用戶的體驗，當用戶在上滑的時候，為了不打斷用戶繼續觀看視頻，視頻內容會慢慢變小，然后固定，這個時候用戶可以在看視頻的時候也可以查看評論，方便用戶與主播之間的溝通，強化了內容社區的氛圍。

3.27 照顧邊緣場景

一個產品它的交互是否比較好，我們看的是它是不是能滿足用戶大部分的使用的場景，所以，有的時候，當靜態的交互無法去滿足用戶的一些比較特殊的場景的時候， 我們這個時候就可以考慮微交互的設計，讓產品的交互體驗能覆蓋的場景比較全面。

例如，當我們在微信通訊錄想根據用戶的首字母去查找人的時候，一般左邊的字母都會做的比較小，無法精準的查看到我們現在看到哪個字母，所以，當我們的手去點的時候，到了某個字母的時候會放大。再比如，我們因為開會將手機調成靜音或者音量關了的時候，我們去播放微信的語音或者看視頻，這個時候，APP會提升我們音量未開之類的，這都是考慮到極端的場景，讓用戶的體驗更加順暢。

3.30 微交互情感層的應用

通過趣味幽默化的轉場與反饋動畫可以降低產品的負面體驗或者讓用戶產生愉悅感。

3.31 幽默拉近用戶

當我們看到有趣的東西的時候總是想和身邊的人去分享我們的喜悅，這是比較底層的邏輯，我們的APP產品也是這樣的，當我們想讓用戶持續去體驗我們的產品或者想要用戶去主動的分享我們的產品，那么，我們可以將產品做的有趣一點。

比如，轉轉在登陸的時候為了吸引用戶的注意力，它會在用戶登錄的時候做一個比較有趣的小動畫，也消除用戶在多一步操作時候的負面的情緒。

3.32 同理心場景

用戶在使用產品的時候，總有會各種各樣的問題和情緒，我們需要通過視覺緩解用戶的情緒，通過設計喚起用戶同理心，解決用戶與平臺之間的矛盾。

我們美團和餓了么點外賣的時候，訂單超時配送是最讓人心煩的事情，特別是遇到極端的情況，訂單超時也是常發生的，所以，設計時需要在視覺、內容來換起用戶的共情心理，從而緩解用戶低谷的情緒，通過設計給用戶帶來溫暖，降低用戶的差評與投訴。

3.34 為特定場景增加儀式感

我們之所以喜歡去線下看演唱會和LIVE，一是可以和自己喜歡“愛豆”親密接觸，其次就是一種氛圍感覺，而一般在線上看直播缺少這種氛圍的儀式感，隨著全球的疫情加劇，我們很多線下的活動和LIVE都不能開展，大部分都只能退而求其次在到線上去開展。所以，在大環境的趨勢下，我們線上活動是越來越多了，我們需要將以前線上的思維轉換，為線上觀看體驗增加儀式感和場景的氛圍。

愛奇藝的電視劇在播放到一些比較“甜”場景的時候，都會在交互上下一些功夫，例如，當劇情放到有親親的情節的時候，會出現“心動震動”的彩蛋交互，提升用戶在沉浸體驗過程中的儀式感，讓用戶能更加能貼心的感受到心動時刻。

3.35 轉場加載占位符

我們在日常的APP使用中，總會遇到像信號不好的情況，這個時候，我們心里是比較著急的，特別是比較緊急的情況，負面的情緒是比較大的，我們需要將這點考慮進去，為了避免用戶在等待時候的焦慮感和負面的情況，我們一般會使用加載的占位符和加載的進度條，讓用戶知道我們的軟件是在工作中，而且是在賣力的工作中，這樣，可以緩解用戶的負面情緒。

3.36 產品的儀式感

對于我們來說，儀式感是很重要的，比如結婚紀念日要去慶祝一下，生日的時候一定要和朋友去high一下，這都是來自我們生活的中的儀式感。

儀式感在產品中也很重要，他可以提升我們用戶的幸福感，例如微信在給朋友發送生日快樂的時候，屏幕中會掉下蛋糕，在過年的時候發送新年快樂，屏幕中也會掉落紅包，微信將我們日常生活中所需要的儀式感搬到了產品中，通過微交互來提升我們日常的幸福感。

3.37 3D touch判斷用戶的情緒

我們人都是感情動物，讓微交互滿足人們的日常的情緒需求也是很不錯的角度，例如facebook的點贊功能可以通過人點擊的力度大小去判斷人當天的情緒，例如，點擊的力度越大，說明你的心情比較好，或者對那個觀點比較贊同，如果你點擊的比較輕，說明的你心情不怎么好。

4 微交互實際案例的思考

交互是保證這個功能的流程能走的通，用起來沒有問題，而微交互則是讓用戶用起來更順手，是解決了交互做不到的事情。

4.10 評價內容增加流量曝光入口，信息層級優化

例如我們的需求是要在看房的列表處新增精選房源的功能，提升我們房源列表的點擊率，讓用戶不用點進去就可以預判大致的其他用戶對這個房源的評價，但是，產品方可能會考慮的一個問題是如果只展示一條房源精選的評價，可能會讓用戶以為我們是故意只放一條在上面，有故意哄騙用戶進去的嫌疑。所以從產品的角度，會考慮多放幾條，讓用戶感覺產品是好評如潮，且展示的不是刻意挑選的。

所以我們在最初給的設計方案可能是在列表上可以展示多條評精選評論，但是這種情況會導致在靜態層面會出現一些視覺上的問題，有的列表有精選的評論，有的不夠三條的展示，會導致列表也看起來不是很整齊，用戶在閱讀上的體驗就會非常的不好。

這個時候，在不改變產品經理的需求的框架下，我們需要通過微交互的角度去思考，在經歷過與產品和開發的反復碰撞下，我們發現，在不改變列表的結構下，我們需要通過微交互來解決列表不統一的情況。

首先，先要確定我們列表信息展示的位置，然后精選的評論信息在一個合適的位置上下去滾動，這樣不僅僅決解決了列表高度的不統一的視覺問題，也可以通過動態元素提高產品的視覺層面的活躍度，吸引用戶的視覺注意力。

4.20 細化產品的分類，提升轉換率

在之前的版本中，頂部的TAP欄是可以切換房源、詳情的選項，而在這次的新版本中加入了房源相關的功能，并把分小區和推薦功能一起放到首屏。這樣在首屏，便把房源拆分為安居房，人才房，普通房，年付四個tab。滑到頁面第二屏，一級到tab房源，詳情，小區和推薦并慢慢的出來了，二級tab安居房，人才房，普通房，年付置于一級tab下方。

所以，這樣頁面就出現了比較影響體驗的雙tab，且雙tab一直處于頂部，占用頁面的高度資源，影響用戶去瀏覽頁面。

設計切入點

雙tab的形式在靜態視覺層面已經是無法在優化了，因為考慮以微交互的形式去解決當前的版本的所存在的視覺問題。

商品的tab作為當前頁面的名稱是可以不需要一直顯示的，因此考慮將“安居房”，“人才房”，“普通房”，“年付”滑動到屏幕頂部時合并收納進“房源”的tab內，這樣處理即滿足了用戶需要發現改功能的需求，又滿足了不占用頁面過多空間的需求。

用戶無法感知tab間的收起

由于需要用戶滑動至屏幕頂部時將雙tab合并，所以需要讓用戶100%的了解當前消失的tab何去何從，方便下次使用該功能時能方便且快速的找到。然后問題是，當用戶滑動頁面比較快的時候，tab的收起很難引起用戶的注意力，這樣對用戶的體驗是很差的。

方案：增加首屏雙TAB之間的差異化，增加合并動畫

方案1：運用「斗轉星移」法，在用戶滑動頁面至二屏時，將“安居房”，“人才房”，“普通房”，“年付”作為關鍵聯動元素，整體收攏至頂部Tab欄，并最后出現下拉小三角，告訴用戶，原先的四個類目已經統一被收攏到一個類目中。這個收攏的動作雖然在動效表現層上，動靜大了些，但是對新版本功能傳遞，避免用戶誤操作有良好的效果。

最終方案

最后我們在“安居房”，“人才房”，“普通房”，“年付”文字上部加入了圖標， 增加用戶對新功能Tab的感知，讓一級Tab與二級Tab差異更加顯性化。

實現價值

幫助產品強化新功能認知，幫助用戶理清兩個層級間的關系，避免用戶誤操作、誤下單。

5 總結

成功產品的設計細節是必須在每個層面的體現，細節不僅僅讓用戶更加堅定的選擇了我們，也可以讓我們在競爭中脫穎而出，而微交互恰恰就是那個四兩撥千斤的設計亮點。

原文地址：站酷

作者： Endings

轉載請注明：學UI網 ? 一篇文章看懂交互中的細節-微交互