Material Design之交互響應(Responsive Interaction)
響應式交互能讓用戶信任,并且吸引他們。 當用戶操作一個美觀且符合常理的應用時,他們會感到滿意甚至很高興。那是一種經(jīng)過深思熟慮、有目的、非隨機的而且可以帶有輕微異想天開但不會讓人分心的交互。
在material design中,應用是響應式的并且渴望用戶操作的:
- 觸摸,語音,鍵盤及鼠標作為首要考慮的輸入方式。
- 雖然UI元素是有形的,但是他們被限制在屏幕里面(電腦或者移動設(shè)備的屏幕),視覺元素和動效能減少這種割裂,讓用戶能夠立即感知自己的操作。
響應式交互把一個應用從簡單展現(xiàn)用戶所請求的信息,提升至能與用戶產(chǎn)生更強烈、更具體化交互的工具。
表層響應
接收到輸入事件,如點擊屏幕,系統(tǒng)會立即在交互的觸點上繪制出一個可視化的圖形讓用戶感知到:如在點擊屏幕時、使用麥克風時,或者鍵盤輸入時,會出現(xiàn)類似于墨水擴散那樣的視覺效果形狀。
觸控漣漪是這種觸摸效果的核心視覺機制。在進行觸摸事件時,設(shè)備能清晰而及時地讓用戶感知觸摸按鈕和語音輸入時的變化。
***范例
在輸入事件對應的位置上,例如:在手指的點擊位置或者講話的時候,屏幕上麥克風的圖標位置會出現(xiàn)一個擴散的視覺元素。
觸控漣漪-點擊/釋放
觸控漣漪-拖進/拖出
元素響應
和表層響應的觸控漣漪一樣,每個元素本身也能做出交互響應,物體可以在觸控或點擊的時候浮起來,以表示該元素正處于激活狀態(tài)。用戶可以通過點擊、拖動來生成、改變元素或者直接對元素進行處理。
***范例
以觸控點為原點展開新元素的動畫
當用戶操作生成一個新元素時,元素的動畫應該基于觸控點展開。
要
元素從觸控點展開時,通過視覺效果將元素與觸控點聯(lián)系起來。
不要
卡片元素從屏幕正中央出現(xiàn),用戶無法把觸控點與卡片元素聯(lián)系起來。
點擊浮動
當卡片元素或可分離元素被激活時,應該浮起以表明正處于激活狀態(tài)。
點擊浮動
徑向響應
所有的用戶交互行為中都會有一個中心點,他們想通過該中心點來達到自己的目的。
作為用戶關(guān)注的中心點,應該繪制一個明顯的視覺效果來讓用戶清晰地感知自己的輸入(觸摸屏幕、語音輸入等)。在用戶的操作中心點應該形成一個像漣漪一樣逐漸發(fā)散開的徑向動效響應。
所有輸入都有中心點,漣漪效果應從觸控點、語音時屏幕上的語音圖標、鍵盤輸入時具體的按鍵點擊位置上展開。
這些輸入動作產(chǎn)生時都應該在中心點形成一個視覺上的關(guān)聯(lián),從中心點展開一連串動作產(chǎn)生的漣漪效果。