響應式交互

響應式交互能讓用戶信任,并且吸引他們。 當用戶操作一個美觀且符合常理的應用時,他們會感到滿意甚至很高興。那是一種經過深思熟慮、有目的、非隨機的而且可以帶有輕微異想天開但不會讓人分心的交互。

在material design中,應用是響應式的并且渴望用戶操作的:

響應式交互把一個應用從簡單展現用戶所請求的信息,提升至能與用戶產生更強烈、更具體化交互的工具。

表層響應

元素響應

徑向響應

表層響應

接收到輸入事件,如點擊屏幕,系統會立即在交互的觸點上繪制出一個可視化的圖形讓用戶感知到:如在點擊屏幕時、使用麥克風時,或者鍵盤輸入時,會出現類似于墨水擴散那樣的視覺效果形狀。

觸控漣漪是這種觸摸效果的核心視覺機制。在進行觸摸事件時,設備能清晰而及時地讓用戶感知觸摸按鈕和語音輸入時的變化。

最佳范例

在輸入事件對應的位置上,例如:在手指的點擊位置或者講話的時候,屏幕上麥克風的圖標位置會出現一個擴散的視覺元素。

觸控漣漪-點擊/釋放

觸控漣漪-拖進/拖出

元素響應

和表層響應的觸控漣漪一樣,每個元素本身也能做出交互響應,物體可以在觸控或點擊的時候浮起來,以表示該元素正處于激活狀態。用戶可以通過點擊、拖動來生成、改變元素或者直接對元素進行處理。

最佳范例

以觸控點為原點展開新元素的動畫

當用戶操作生成一個新元素時,元素的動畫應該基于觸控點展開。


元素從觸控點展開時,通過視覺效果將元素與觸控點聯系起來。

不要
卡片元素從屏幕正中央出現,用戶無法把觸控點與卡片元素聯系起來。

點擊浮動

當卡片元素或可分離元素被激活時,應該浮起以表明正處于激活狀態。

點擊浮動

徑向響應

所有的用戶交互行為中都會有一個中心點,他們想通過該中心點來達到自己的目的。

作為用戶關注的中心點,應該繪制一個明顯的視覺效果來讓用戶清晰地感知自己的輸入(觸摸屏幕、語音輸入等)。在用戶的操作中心點應該形成一個像漣漪一樣逐漸發散開的徑向動效響應。

所有輸入都有中心點,漣漪效果應從觸控點、語音時屏幕上的語音圖標、鍵盤輸入時具體的按鍵點擊位置上展開。

這些輸入動作產生時都應該在中心點形成一個視覺上的關聯,從中心點展開一連串動作產生的漣漪效果。

原文:Responsive Interaction 翻譯:7heaven 校對:KongZhen

两码中特期期