logo
Home / Blog

Microinteractions微互動如何改善UX設計

Microinteractions微互動這幾年是很夯的名詞,其實它已經存在於我們的日常生活中,只是我們從來不會去注意它。簡單解釋Microinteractions就是裝置介面上小元件與使用者的互動,例如選單的觸按,收到通知等。好的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的書作。

← Adobe Animate介紹
Figma介紹 →
所有文章


2021年網頁設計趨勢

想要了解下國外設計師歸納的2021年網頁設計趨勢嗎?

PWA介紹(Progressive Web App)?

由Google於2016年所提出的概念-漸進式網頁應用程式,意即由網頁來執行應用程式

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. 網路

實體店面與網路銷售的困境與尷尬

CRM系統回歸以人為本的初衷

再龐大的CRM系統若缺乏對人的關懷也是令人失望的,從一通電話談起

 立 即 洽 詢  125 world