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

在 material design 中，應(yīng)用是響應(yīng)式的并且渴望用戶操作的：

• 觸摸，語音，鍵盤及鼠標(biāo)作為首要考慮的輸入方式。
• 雖然 UI 元素是有形的，但是他們被限制在屏幕里面（電腦或者移動設(shè)備的屏幕），視覺元素和動效能減少這種割裂，讓用戶能夠立即感知自己的操作。

響應(yīng)式交互把一個(gè)應(yīng)用從簡單展現(xiàn)用戶所請求的信息，提升至能與用戶產(chǎn)生更強(qiáng)烈、更具體化交互的工具。

表層響應(yīng)

元素響應(yīng)

徑向響應(yīng)

表層響應(yīng)

接收到輸入事件，如點(diǎn)擊屏幕，系統(tǒng)會立即在交互的觸點(diǎn)上繪制出一個(gè)可視化的圖形讓用戶感知到：如在點(diǎn)擊屏幕時(shí)、使用麥克風(fēng)時(shí)，或者鍵盤輸入時(shí)，會出現(xiàn)類似于墨水?dāng)U散那樣的視覺效果形狀。

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

最佳范例

在輸入事件對應(yīng)的位置上，例如：在手指的點(diǎn)擊位置或者講話的時(shí)候，屏幕上麥克風(fēng)的圖標(biāo)位置會出現(xiàn)一個(gè)擴(kuò)散的視覺元素。

觸控漣漪-點(diǎn)擊/釋放

觸控漣漪-拖進(jìn)/拖出

元素響應(yīng)

和表層響應(yīng)的觸控漣漪一樣，每個(gè)元素本身也能做出交互響應(yīng)，物體可以在觸控或點(diǎn)擊的時(shí)候浮起來，以表示該元素正處于激活狀態(tài)。用戶可以通過點(diǎn)擊、拖動來生成、改變元素或者直接對元素進(jìn)行處理。

最佳范例

以觸控點(diǎn)為原點(diǎn)展開新元素的動畫

當(dāng)用戶操作生成一個(gè)新元素時(shí)，元素的動畫應(yīng)該基于觸控點(diǎn)展開。

(上圖)可取

元素從觸控點(diǎn)展開時(shí)，通過視覺效果將元素與觸控點(diǎn)聯(lián)系起來。

(上圖)不可取

卡片元素從屏幕正中央出現(xiàn)，用戶無法把觸控點(diǎn)與卡片元素聯(lián)系起來。

點(diǎn)擊浮動

當(dāng)卡片元素或可分離元素被激活時(shí)，應(yīng)該浮起以表明正處于激活狀態(tài)。

點(diǎn)擊浮動

徑向響應(yīng)

所有的用戶交互行為中都會有一個(gè)中心點(diǎn)，他們想通過該中心點(diǎn)來達(dá)到自己的目的。

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

所有輸入都有中心點(diǎn)，漣漪效果應(yīng)從觸控點(diǎn)、語音時(shí)屏幕上的語音圖標(biāo)、鍵盤輸入時(shí)具體的按鍵點(diǎn)擊位置上展開。

這些輸入動作產(chǎn)生時(shí)都應(yīng)該在中心點(diǎn)形成一個(gè)視覺上的關(guān)聯(lián)，從中心點(diǎn)展開一連串動作產(chǎn)生的漣漪效果。

原文：Responsive Interaction 翻譯：7heaven 校對：KongZhen I