質(zhì)感運(yùn)動
在質(zhì)感設(shè)計(jì)中，用運(yùn)動描述空間關(guān)系、功能、和意圖，并賦予其美感。
內(nèi)容
一、為什么運(yùn)動很重要
二、物質(zhì)如何移動
三、一個(gè)好切換效果是什么樣的
四、動效的暗示
一、為什么運(yùn)動很重要？
運(yùn)動展現(xiàn)了一個(gè)應(yīng)用是如何組織的，及能用來做什么
運(yùn)動提供了：
- 視覺頁面之間給予引導(dǎo)聚焦點(diǎn)
- 提示用戶，完成一個(gè)動作將會引發(fā)什么
- 提示元素之間的層級關(guān)系和空間關(guān)系
- 把用戶注意力從幕后發(fā)生的時(shí)間上轉(zhuǎn)移開（例如讀取內(nèi)容或者加載下一頁面）
- 個(gè)性、時(shí)髦、愉快
二、物質(zhì)如何運(yùn)動？
質(zhì)感環(huán)境的靈感來源于現(xiàn)實(shí)世界中的力量，例如中立和摩擦。這些力體現(xiàn)在用戶的輸入影響屏幕上的元素，以及元素之間相互作用。
運(yùn)動中的物質(zhì)有一下特征：
- 有響應(yīng)
質(zhì)感物質(zhì)充滿了能量，能在用戶觸發(fā)的地方快速響應(yīng)用戶的輸入。
大型動畫在移動設(shè)備上一般300-400毫秒，小一些的動畫可以短到150-200毫秒。更長或更短會給人感覺拖沓或突兀。
墨水波紋從觸點(diǎn)立刻向外擴(kuò)散，肯定用戶的輸入。同時(shí)卡片上移，處于激活狀態(tài)。
展示新頁面和創(chuàng)造新頁面的元素或者動作之間的聯(lián)系
- 動作自然
質(zhì)感物質(zhì)展現(xiàn)現(xiàn)實(shí)世界中受力運(yùn)動的自然運(yùn)動。
在現(xiàn)實(shí)世界中，一個(gè)元素運(yùn)動速率的快速收到其本身重量和表面摩擦的影響，因此在質(zhì)感設(shè)計(jì)中物體不會驟啟動或驟停止。
質(zhì)感物體在現(xiàn)實(shí)世界中，受重力等外力影響，一般不會直線運(yùn)動，而是沿著弧線運(yùn)動。
質(zhì)感物質(zhì)在變形中也沿著弧線運(yùn)動。
- 有感知力
質(zhì)感物質(zhì)能夠感知周圍的環(huán)境，包括用戶和其他材料。質(zhì)感物質(zhì)能夠被原件吸引，能夠?qū)τ脩粢鈭D做出適當(dāng)?shù)姆答仭?br>
元件切換進(jìn)入視線，元件和周圍的環(huán)境根據(jù)彼此的關(guān)系編排運(yùn)動路線。
質(zhì)感物質(zhì)能將其他材料推出視線外
- 意圖明確
運(yùn)動中的材料在正確的時(shí)間將視線焦點(diǎn)引導(dǎo)到正確的點(diǎn)上。
切換效果幫助引導(dǎo)用戶到下一步交互。
運(yùn)動能夠傳達(dá)不同的信號，如一個(gè)動作是否行得通。
動畫效果能讓用戶聚焦到需要關(guān)注的元件上。
三、什么是個(gè)好的切換效果？
成功的動效設(shè)計(jì)擁有以下幾個(gè)特點(diǎn)
- 動效短平快
一個(gè)動效不應(yīng)該讓用戶等待過久。
動畫快，用戶無需等待動效結(jié)束。
許多元件運(yùn)動得磨蹭拖沓，拉長了動效的時(shí)長。
- 動效清晰
切換效果應(yīng)該是清晰、簡潔、連貫一致的。元件應(yīng)避免同時(shí)運(yùn)動幅度過大。
進(jìn)入下一場景時(shí)，保持一條簡潔的路線，其他元件作為群組編排動作。
- 動效連貫一致
根據(jù)速度、響應(yīng)力和意圖，材質(zhì)元件被統(tǒng)一在一起。應(yīng)用中所有定制化的動效體驗(yàn)應(yīng)在這個(gè)應(yīng)用中連貫統(tǒng)一。
這些應(yīng)用功能各不相同，但他們相似的動效體驗(yàn)給人感覺相互關(guān)聯(lián)。
四、動效的暗示意義
在以下兩個(gè)例子的比較中很容易看出上述動效規(guī)律的有點(diǎn)，其中一個(gè)app應(yīng)用了這些規(guī)律，而另一個(gè)app沒有使用。
正確做法：切換過程中，用戶被引導(dǎo)到下一界面。界面變形的過程傳達(dá)出彼此的層級關(guān)系。加載過程在幕后完成，以減小接收延遲的感受。
錯(cuò)誤做法：新界面與之前界面的關(guān)系不明晰，沒有切換過程，也沒有清晰的聚焦點(diǎn)。沒有傳達(dá)出任何層級的信息，展示旋轉(zhuǎn)圓圈讓加載過程更加明顯。
P.S. : 動效中的所有舉例都是動態(tài)的，在下不才沒能搬過來，擔(dān)心沒有例子的干文字不好理解，猶豫再三還是發(fā)了這篇的翻譯，請對照官網(wǎng)動效例子：P。
