響應(yīng)式交互

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

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

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

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

表層響應(yīng)

元素響應(yīng)

徑向響應(yīng)

表層響應(yīng)

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

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

最佳范例

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

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

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

元素響應(yīng)

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

最佳范例

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

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

(上圖)可取

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

(上圖)不可取

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

點(diǎn)擊浮動(dòng)

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

點(diǎn)擊浮動(dòng)

徑向響應(yīng)

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

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

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

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

原文：Responsive Interaction 翻譯：7heaven 校對(duì)：KongZhen I