全栈工程师?
嗯.....目前并不是!

設計微交互,創建出色用戶體驗方案

我們可以看到,大多數成功的交互設計都是以一種簡便、直接了當的方式來協助用戶完成產品體驗。微交互就是這樣,通過一些微小的交互操作就能實現功能,好的微交互設計將會給用戶帶來良好的產品體驗。

很多人把微交互簡單的理解為做個動效,實質上,我們通常見到的那些動效只是微交互構成中的一部分,屬於反饋層面的視覺表達。

微交互既不是一個酷炫動效也不是一個龐大產品功能,他是產品功能中通過一些微小的交互操作實現功能的細節,這些細節帶給用戶的是方便和便捷,能更好的提升用戶體驗。

總的來說,微交互給用戶帶來好的用戶體驗主要是這幾方面:

  • 在用戶操作時清晰表達當前狀態。
  • 給用戶提供愉悅輕鬆的反饋。
  • 用戶毫無察覺的情況下進行了交互動作完成了功能操作,實現了用戶目標。
  • 操作結束后看到自己的操作結果。

接下來,介紹構成一個完整的微交互4個部分,以及如何在微交互4個構成里,設計好的用戶體驗方案。

一、微交互的4個構成部分

觸發器、規則、反饋、循環與模式這四個部分是設計和分解微交互的一種方式。

觸發器啟動微交互、規則規定微交互的工作過程、反饋向用戶說明規則、循環與模式是影響微交互的元規則。

如何設計微交互創建出色用戶體驗方案

1. 什麼是觸發器

觸發器是啟動微交互的物理控件,當觸發控件后可以啟動下一步交互操作。

我們常見的觸發器是由用戶主動去觸發的物理控件,比如:控件、按鈕、任務欄、圖標等。

要讓人知道功能如何操作,微交互的觸發器就要設計得吸引人、讓人明白這個操作功能。在設計中也要理解用戶要幹什麼,讓觸發器的位置跟用戶需求相吻合。

除了用戶主動觸發的物理控件外,還有一些是系統觸發的,無需用戶接入,只需要滿足條件就會自動觸發。比如系統錯誤、收到數據觸等。

2. 什麼是微交互規則

每款遊戲背後就是一套遊戲玩法,同樣每個微交互也是一組被設計的規則。

微交互中的規則是:在任務過程中規定“用戶什麼可以做?”“什麼可以不做?”“按照什麼順序做?”

這個規則反映的是:業務邏輯、用戶使用邏輯

舉個電商購物例子:把一件商品加入購物車的微交互,最初規則就是單擊“購物車”圖標,商品就被添加到“購物車”中,購物車tabbar圖標也相應出現數字。但在設計規則中,要考慮用戶是否購買過,如果購買過商品旁邊購物車圖標改為了“數字加減”,當再次加入則業務邏輯限制出現提示。

3. 什麼是微交互反饋

以最簡單的按鈕常見兩種反饋為例:

  1. 按鈕狀態變化—表明用戶幹了什麼(按了按鈕)
  2. 按了后發生什麼(跳轉下一頁或者結果發生等等)

反饋的目的是:幫助用戶理解微交互的操作,通過一些反饋的狀態告訴用戶“剛才做了什麼?”,“到了什麼階段?”,“可以幹什麼?”
,“結束時,什麼不能幹”。

反饋的方式也取決於微交互的規則設計、硬件設備、數據接收等。

例如,下載文件:下載過程中有進度條的顯示,顯示文件多大,當前下載速度(數據顯示),剩餘多久時間完成。

如何設計微交互創建出色用戶體驗方案

4. 什麼是循環與模式

以iphone鬧鐘為例:用戶目標是指定時間鬧鈴,鬧鈴什麼時候會響,提示用戶設置鬧鈴是模式。循環就是多久再響一次,長循環就是用戶重複設置鬧鈴的提示。

模式是規則的一個分支,最主要目的就是執行一種不常見的動作。

常見的模式就是:設置,用戶可以在其中指定一些有關微交互的選項。

循環的核心就是:確定微交互的持續時間,也是擴展微交互的生命周期,循環的參數是用戶體驗的最佳方式,循環由規則指明。

二、如何設計微交互創建出色用戶體驗方案

1. 設計微交互之前的思考

明確用戶操作微交互的目標:

設計一個優秀的微交互體驗方案,首先要了解用戶,知道用戶要達到什麼目的,經歷哪些步驟,不同情況下的操作環境。

比如:用戶要給朋友轉賬,這是用戶的目標。轉賬數額是否充足、朋友賬號的顯示是否正確、轉賬成功與否屬於操作中的微交互的步驟與不同情況。

設計清晰的規則—微交互邏輯圖:

在了解完用戶的目標后,接下來就要分析:用戶經過多少步驟從初始達到目標?會有多少種情況?

還是以微交互主要構成部分拆分:

如何設計微交互創建出色用戶體驗方案

  1. 觸發器如何被觸發?
  2. 操作期間用戶可以進行什麼行為?
  3. 交互發生的順序和時間?
  4. 使用數據及來源?
  5. 簡潔的配置及參數?
  6. 什麼反饋?
  7. 處於什麼模式?
  8. 是否重複,多久重複?
  9. 微交互結束髮生什麼?

約束條件:設計微交互規則中考慮業務、環境、技術的約束——例如:電商中秒殺、滿減業務的邏輯,會導致微交互的狀態不一樣。

設計規則:規則隨着條件的的增加,操作越複雜,運用邏輯關係圖會更清晰。

——舉個例子:

設想一個音頻播放器的例子,我們需要一個清晰可完成的目標——成功播放音頻內容。

在構思中,做一個規則判斷:用戶來到頁面是否要繼續上次的音頻?

然後,針對規則做出方案,最後的目標是:用戶成功播放音頻內容。

在下圖中的細化設計,隨着規則增加,邏輯圖越複雜,但最終設計規則會讓用戶越來越接近最終的目標。

2. 微交互其他構成部分的設計

觸發器的設計:

觸發器的設計需要引人注目、放在明顯的位置、以較少的信息傳達觸發器是幹什麼的,同時有清晰狀態展示。

  • 用戶心智:符合大多數用戶的操作習慣,降低用戶的理解成本,比如:一個購物車圖標,一個標籤能讓用戶直接明白意圖。
  • 展示數據:在激活觸發器前,思考什麼信息展示對用戶最有價值,比如:未讀信息的數字展示、進展數據等。

如何設計微交互創建出色用戶體驗方案

反饋的設計:

A. 製造情感化的個性氛圍:在一些app中會賦予擬人化語氣,比如“又忘記密碼啦,真衰”;根據產品特性建立一套有性格特徵的反饋個性——冷酷、蘿莉可愛、溫柔等

B. 利用視覺、聽覺、觸覺或者它們的組合提升吸引力。

視覺方法:利用趣味動畫來吸引注意,有利於激發用戶交互的興趣。

如何設計微交互創建出色用戶體驗方案

增加手勢、聲音、觸覺方法:強化用戶動作,比如按壓、聲音、觸摸、震動等。

知乎APP“贊”功能點擊後手機震動

C. 操作中反饋提升用戶掌控感:讓用戶看到自己的操作結果、用戶預防錯誤、讓用戶看到交互進程,以及,減少反饋信息複雜度。

讓用戶看到自己的操作結果:給予用戶的信息輸入進行視覺化呈現,並提供反饋。

如何設計微交互創建出色用戶體驗方案

用戶預防錯誤:例如錯誤情況、限制數量等,幫助用戶將操作錯誤率降到最低。

讓用戶看到交互進程:用戶使用產品時,能看到進程,及時獲得信息。

如何設計微交互創建出色用戶體驗方案

Less is more,減少反饋信息複雜度,直接傳達操作:減少動畫形式過度、信息的複雜度、重複性。

設計規則解決複雜性——化繁為簡:

微交互的目標正是幫助用戶從繁瑣的任務流中解脫出來,減少額外步驟,用最少步驟完成用戶目標。

  • 解決最核心的複雜性:找到複雜性出現在什麼地方,用戶在什麼地方最容易出錯,用戶可以控制哪些內容,用戶在什麼時候可以去修改這些內容。
  • 快速計算、數據記憶等幫用戶節省操作:比如:登錄中最容易出錯的地方是密碼忘記,用戶掌握着密碼的輸入權限修改權限,利用記錄密碼則是簡化登錄密碼的操作。
  • 較少的選項和默認項:給用戶選擇越多,規則就越多,規則少微交互就越容易理解,因此給用戶少的選擇,幫用戶提供一些默認項是一個化繁為簡的辦法。

模式、循環的算法設計:

  • 順序:各個步驟的先後順序,哪個在前,哪個在後,有沒有條件。
  • 決定:通常都是“如果……就……”的形式。
  • 重複:循環步驟,例如:搜索字段輸入時,每輸入一個新字段就更新一次結果。
  • 變量:變量是容器,是算法的巨大威力來源。搜索結果、經過步驟都是變量,變量可以是數值字符或邏輯值。

小結:細節成就卓越

總的來說,微交互雖然在操作過程中感知很微小,但在用戶體驗過程中,微交互卻是不可缺少的重要環節,這也是我經常提到的細節成就卓越。

微交互中最終還是為了幫助用戶輔助實現某些功能,以產品任務為單位,進行的多個交互的組合,會涉及不同使用場景、規則、模式、數據算法等,最終只為讓用戶在毫無知覺的情況下完成交互操作,實現功能操作,完成用戶目標。

寫在最後:不可被忽略的技術發展與更新

我們發現:現在習以為常的交互方式,都曾經歷過一次次的迭代更新。隨着新技術的快速發展,不斷推進微交互的創新,帶來的是更簡單便捷的操作,比如:手機鎖屏解鎖操作:隨着手機觸屏技術、指紋、人臉識別先進科技,解鎖屏幕越來越快捷,甚至沒有感覺就通過人臉識別解開了。

隨着觸摸屏、傳感器、語音和手勢技術不斷成熟,這些新技術與新的交互手段進一步促進微交互的發展。

如今,隨着5G網絡的到來,將會推動更多的創新微交互,而這些微交互創新體驗涉及的控制、規則、模式、算法等遠比開關燈抽象得多。

參考文獻:

《微交互:細節成就卓越》 作者:Dan Saffer

#專欄作家#

Hellen,微信公眾號:詠舍,人人都是產品經理專欄作家。八年設計經驗,藝術設計學碩士畢業,專註互聯網金融用戶體驗設計、及自我管理與提升。

本文原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《設計微交互,創建出色用戶體驗方案》
文章链接:https://www.pmbear.com/%e8%a8%ad%e8%a8%88%e5%be%ae%e4%ba%a4%e4%ba%92%ef%bc%8c%e5%89%b5%e5%bb%ba%e5%87%ba%e8%89%b2%e7%94%a8%e6%88%b6%e9%ab%94%e9%a9%97%e6%96%b9%e6%a1%88/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们