2023-1-9 ui設計分享達人
正如題目所說：細節決定成敗，微交互就是利用細節提升產品體驗和設立品牌標志。
直到今天，人機交互已經有很長時間的發展。從例如烤面包機的簡單產品到銀行應用程序類的復雜數字產品，我們每天進行上百次的交互。這些交互轉化為產品的可用性，最終轉化成用戶滿意度、信任度和產品整體體驗。
在過去的二十年里，設計師們一直在關注這些交互（按鈕、滾動、長按等）。從電腦大屏幕到移動設備、智能手表以及現在的可折疊設備，交互也在不斷地發展。本文研究了微交互的結構及其與交互模型的關系，審美體驗的不同驅動力，以及我們如何通過改變微交互的元素來優化體驗。最后，我們討論了自下而上的產品構建方法。
自燈泡、收音機、門鈴等電氣設備出現以來，微交互一直存在于我們的生活。微交互和技術共同出現、發展。在我們的日常生活中充滿了與周圍物體的微交互，例如使用烤面包機、解鎖手機、將手機切換到靜音模式、控制音量等。
從簡單的按下按鈕到搖動手腕激活智能手表，微交互隨著技術的進步而不斷發展。像復制文本或移動文件這類我們如今習以為常的、無形之中的微交互，都曾是新穎的微交互。觀察微交互有助于設計師改進產品。
有趣的是，設計師將現實生活場景投射到產品來建立微交互，如剪切-粘貼、放大-縮小等。這些細節不僅提高了產品的可用性，也通過直觀的互動降低用戶學習難度。
我們如何準確定義什么是微交互，什么是交互？
論文《開啟移動微交互》（Ashbrook，2010）將微交互定義為“接觸設備開始到完成的時間不超過4秒的互動”。而《微交互》一書（Saffer，2013）將其定義為：“微交互是圍繞著單個用例的產品使用場景——它們有一個主要任務?！闭麄€應用程序或產品可能只是一個微交互，例如，天氣應用程序（圖1.1）或烤面包機，因為它們只關注一件事。
圖1.1 天氣應用程序能被看作是一個微交互，因為它只顯示天氣。
圖1.2 LinkedIn 的“喜歡”按鈕由兩個微交互組成，（a）當你長按“喜歡”按鈕時，它會打開一個空間展示多個表情符號以供選擇（b）你選擇表情符號發送給帖子。
一個功能可以由多個微交互構成，例如LinkedIn的“喜歡”按鈕（圖1.2），人們可以對帖子發送不同的表情符號。因此，微交互是一個功能模塊，或者是整個產品。與產品互動時，微交互也許能幫助用戶了解做什么，如何做，后續是怎樣。精心設計的微交互使產品變得直觀，優化了產品的用戶體驗。
當微交互打造了與品牌產生共鳴的特殊體驗時，它化身為了品牌標志。專業術語稱之為“標志性時刻——產品或服務中給人留下持久而難忘印象的突出互動”（Janhagen, Leitch & Judelson, 2020）。
Facebook的“喜歡”按鈕是它的標志性時刻。微交互并不僅僅局限于視覺，它們可以是聲音、觸覺、實體硬件或手勢交互。Snapchat的通知作為產品的標志性時刻是因其獨特的聲音。同樣地，iPhone有一個中心按鈕作為蘋果的標志，它有多個微交互方式。
微交互通常首選（Narvhus, J.M. 2016）：
我們將在之后的章節中研究一些微交互案例。
在進入交互模型之前，我們將嘗試研究心智和心智表征，以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器：感知處理器、認知處理器和運動處理器是如何工作以理解周圍世界。
認知處理器與長期記憶和工作記憶一起工作，從現有的知識中提取物體、感覺、行動等的表征，以理解來自知覺處理器的輸入。一旦認知處理器完成處理，它就會向運動處理器發出信號，以特定方式對特定情況采取行動。心智表征是現實世界中事物如何運作的心智模型或理解。
唐-諾曼的七個行為階段（諾曼，2013）（圖2）是一種更清晰的心智學形式，解釋了人類如何與物體互動以實現目標。目標可能是打開一盞燈或在移動應用程序上進行在線交易。讓我們把手機解鎖的簡單目標分解成七個行動階段。
在這個循環的每個階段，都有一個輸入->處理->輸出的過程。在宏觀層面上，我們也在遵循同樣的過程來達到我們的目標。我們可以從行動模型的七個階段推導出互動周期（Norman, 2013）（圖3）。
交互周期包括執行過程和評估過程，前者是行動所需信息差，后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距，使產品變得直觀?，F在讓我們看看微交互的基礎結構，了解它們如何幫助消除信息差。
微交互之所以強大，不僅僅是因為它們的細微交互差別或迷你尺寸，還因為它們構建的方式。微交互的結構包括四個部分（圖4）（Saffer，2013）：開啟微交互的觸發器，決定微交互如何運作的規則，以及影響微互動的元規則——闡明規則、循環和模式的反饋。
觸發器可以由用戶觸發，例如點擊圖標、填寫表格等，觸發器也可以由系統產生，例如低電量提示框，通知用戶電池電量不足。
讓我們以Duo應用中驗證用戶的微交互為例。
現在當我們解構微交互并理解其結構時，微交互的結構支持行動七階段理論，最終幫助消除執行和評估之間的鴻溝。精心設計的觸發器便于用戶進行計劃->指定->執行行動，精心設計的規則和反饋便于用戶進行感知->解釋->對比結果確認完成目標。我們將在下一節中談論觸發器、規則和反饋的設計，以了解微交互如何有效構建所需的用戶體驗。
我們回看心智部分，認知處理器不僅包含了不同事物如何工作的心智模型，并且隨著我們在日常生活中對新物體的體驗而不斷地發展。從這些心智模型中，設計師可以創建概念模型。作為關于產品和功能運作的高級計劃，概念模型一旦被建立就能被轉化為行動模型的七個階段，從而幫助我們創建對用戶來說很直觀的微交互。這是一種自下而上的方法，用于建立交互 -> 功能 -> 產品。
在上一節中，我們談到了交互模型和微交互的結構，并探討了它們如何攜手使產品變得直觀好用?，F在我們將關注動態審美體驗，以及微交互如何在產品的微觀層面建立體驗。
審美體驗的韻律之舞有一個內在的、動態的結構。杜威指出了體驗建立的相關過程，如累積、保存、緊張張力和預期，來指稱體驗的內部動態（McCarthy & Wright, 2004）。
完整的用戶體驗是這些動態的集合，它可以根據用戶過往經驗和知識認知而變化。過往經驗和任何審美經驗都取決于上下文：用戶的過往和能力，人工制品的技術，以及互動發生的任一物理、社會空間（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。當我們與物體/產品互動時，觸覺、嗅覺、視覺和聽覺都會喚起體驗。
在過去的幾十年里，設計師們一直在關注這些觸發奇跡的交互。交互不應該僅僅是傳達內容和完成任務，它應該引人思考，并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態微交互案例。
1）積累：指伴隨著體驗時間展開的積聚。我認為谷歌支付作為微交互建立了用戶體驗，并包含非常優秀的展開界面和支付完成音效。
這個之所以判定為其微交互，是因為它只專注于一件事，而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成（圖6）。動畫和音效帶來了一步步徐徐展開的體驗感受。
2）留存：指保留一些過往事物的趨勢，不論體驗還是內容。文本或信息的保存對優秀用戶體驗來說確實是必要的，畢竟這樣能減少認知負擔。在網站和應用程序上填寫表格時，許多微交互都保留了之前的填寫信息。
這類微交互的一個非常簡單的例子是，當你復制一個鏈接并試圖將其輸入網絡瀏覽器時，瀏覽器會顯示直接粘貼鏈接的選項，甚至顯示你復制的內容（圖7）。我們在這此觀察到與微交互的結構不同的是重點更多地放在了交互的反饋上，它傳達的狀態是：你復制的內容已保存，并可以用來搜索網頁瀏覽器。這是一個展示了我們如何調整微交互側重點來優化體驗的優秀案例。
3）張力：指體驗內和參與體驗的人之間的關聯。這是社交媒體和流媒體平臺使用的一種技術，當用戶期待在短時間內快速閱覽內容時，用戶不斷下滑來反復觸發刷新的微交互（圖8.） 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足，讓用戶在想快速瀏覽內容時耐心等待。
這個特殊的微交互的重點是方式：即在內容加載之前顯示一個加載器。
4）預期：它包含兩個時間階段。第一階段是用戶在交互中開始期待，第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵（圖9）。
這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發生，即使期望沒有發生。若是期望發生，那期待就是值得的。支付完成后，用戶進入刮刮卡獎勵界面，對刮獎產生期待，點擊卡片進行刮獎。刮獎微交互的重點是動作的觸發上，兼具有趣性和參與感，觸發本來可以只是一個點擊按鈕，但他們設計了一個刮擦動作作為觸發。
上文提到的各種例子可看出：通過調整微交互的元素來優化體驗。微交互小而強的原因在于：它們是產品的差異化細節。好的微交互能讓產品提升一個等級。
我們認識了精心設計的微交互在創造美好體驗方面的力量，現在讓我們來探討一下，如果糟糕的微交互可能會引發什么問題。
我想到的案例是手機通知。并不是說通知很糟糕，而是它設計得如此之好，以至于它有違用戶的意愿。通知是由系統發起的觸發器，它僅顯示部分信息來吸引用戶點擊。
每個人都會遇到這樣的情況：明明只是想看看時間，但在看到通知時點擊進入信息，無聲無息之中半個小時就耗費了。這不僅僅耗費了時間，更嚴重的是人們在駕駛時也會分心看通知。
另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設計的微互動，是 Facebook 的標志，但沒有人意識到一個微互動可以對人們的生活產生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數，因為它對用戶行為產生了負面影響。上面的例子也顯示出：小事情可以產生大影響。
微交互也會令人討厭，例如，在填寫表單最后點擊提交時，彈出一個對話框（圖10），說表單填寫中存在錯誤。這里的觸發器是提交按鈕，規則是顯示一個對話框，反饋是靜態文本——“有填寫有誤”。
這里的微交互形式是錯誤的，如果填寫有誤，提示應該在出錯點附近。而且這里的反饋是糟糕的靜態文本，對用戶沒有任何用處，因為它沒有說明出錯的位置和類型。因此，微交互的使用和場景真的很重要。
縱觀全文，我們探討了什么是微交互，以及如何創建符合交互模型的微交互來消除執行和評估之間的差距。接下來，我們研究了動態審美體驗，以及我們如何在產品的微觀層面上用微交互創造美好體驗。
設計師有幾種方法來創建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個產品看成是一個微交互，如果你想增加另一個功能，那么就把它看成是另一個只包含一個微交互的產品。
我相信谷歌支付是以這種方式創建的，因為它是從支付開始，且只專注于支付，后來才引入了獎勵和其他內容。
微交互有助于建立一個品牌標志和提升用戶體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。
作者：三分設
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司