logo

Microinteractions 微互動如何改善 UX 設計


Microinteractions微互動這幾年是很夯的名詞,其實它已經存在於我們的日常生活中,只是我們從來不會去注意它。簡單解釋M icrointeractions 就是裝置介面上小元件與使用者的互動,例如選單的觸按,收到通知等。好的 Microinteractions 會帶給使用者良好的體驗也進而帶來使用者的黏著度及深入度。

提出這個觀念的作者Dan Saffer在他的書中 (Microinteractions: Designing with Details) 歸納出四個主要的面向:1.Triggers 2.Rules 3.Feedback 4.Loops and Modes。這些分別代表
1.觸發 : 有使用者觸發及系統觸發兩種狀況。
2.規則 : 觸發之後的行為
3.反饋 : 當Microinteractions發生時帶給使用者聽或看或當下的感覺
4.迴圈及模式則是決定主要規則的制定,當狀態改變時會帶給Microinteractions微互動甚麼改變? 。

常見狀況會是如下 :
1.滑動 : 此為最常見的狀況,幾乎每個使用者皆會用到
2.輸入資料 : 舉例輸入帳號密碼時或對話框時
3.最新狀態 : 舉例使用者上傳檔案的即時狀態更新
4.按鈕動畫 : 按下之後的有趣變化

微互動雖然會帶給使用者愉悅的感受,但並不是愈多愈好,須放在適當的地方及場合,而且主要功能是要帶來幫助而不是造成反效果,舉個例子有時太多的動畫反而會讓人覺得厭煩。Microinteractions 微互動主要功能是讓使用者在操作該標的物時是減少錯誤並且是熱於參與其中的,有興趣了解的設計師也可以詳讀 Dan 的書作。

所有文章
PWA介紹 (Progressive Web App),優、缺點及範例介紹
由Google於2016年所提出的概念-漸進式網頁應用程式,意即由網頁來執行應用程式
Shopify 介紹
全世界最多人使用的開店平台究竟有甚麼魔力?
SQL Server Replication 資料庫同步服務
一個很好用卻常被忽略的工具
2021年網頁設計趨勢
想要了解國外設計師歸納的2021年網頁設計趨勢嗎
UX為什麼很重要?
從2015年進軍台灣的蝦皮如何打敗露天及奇摩而成為拍賣的盟主談起
Microinteractions微互動如何改善UX設計?
一位資深產品設計師於多年前提出的微互動觀點,發酵於近幾年並帶給UX界不少的發想及實作
企業E化不能等-從一則實例談起
最近讀到一則新聞,員工離職把硬碟格式化,結果造成公司業務大停擺
Adobe Animate介紹
十多年前網頁動畫獨領風騷的FLASH於2016年更名為Adobe Animate後,原軟體於2020年底將正式停止服務
Figma介紹
Figma這幾年在UX界爆紅,他的優勢在哪邊? 為何得到設計師的青睞?
LINE官方帳號(俗稱LINE2.0)整理包
LINE@生活圈已全面升級並改名為官方帳號
Google將於2020/9正式採用行動版內容優先索引
不具適合手機瀏覽的網站是該調整的時候了
擴增AR實境在APP的應用愈來愈多元
擴增實境時在APP上的應用由早期的2D已進步到3D的應用,其多元性及互動趣味更甚以往
Wireframe的優點
Wireframe俗稱線稿圖,好的Wireframe節省一半的製作時間及增強各部門的效率
程式碼也可以環保化
對人可以不用斤斤計較,但是對雲端服務就要斤斤計較,甚至是錙銖必較
實體 v.s. 網路
實體店面與網路銷售的困境與尷尬
LINE官方ID | @823yjemy
Discord | arshirerocks
contact
© 貝姆資訊有限公司 Arshire. EST 2004