亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國推薦設(shè)計師 (詳情)
//百度統(tǒng)計 20220402 uicn

您的意見是我們 UI 中國進(jìn)步的動力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進(jìn)行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

提交需求

賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱危覀儠诘谝粫r間與您聯(lián)系!

0/20
0/200

設(shè)計大賽

  • 設(shè)計大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對UI中國的支持和信賴!
新版 Material Design 官方動效指南
0.0°
2016-05-11 自譯外文 規(guī)范/資料 原作者: Google 舉報 4326 63 33 0

Material Motion

在material design的世界中,動效用一種優(yōu)雅、流動的方式來描述空間關(guān)系、功能、和意向。


為什么說動效很重要?

動效可以向我們展示一個app是如何構(gòu)成和用途。


動效可以做到:

  • 不同視圖之間的焦點(diǎn)引導(dǎo)。
  • 當(dāng)用戶完成了一個手勢后,提示用戶將會發(fā)生什么。
  • 明確元素之間的層級和空間關(guān)系。
  • 當(dāng)程序在后臺運(yùn)行時,分散用戶的注意力(例如獲取內(nèi)容或載入下一個視圖)。
  • 潤色整個app:個性化、令人愉悅。


如何設(shè)計材料設(shè)計的動效?

材料設(shè)計的運(yùn)動吸取了一些真實(shí)世界的力學(xué)元素,例如重力和摩擦力。這些力反應(yīng)的是,用戶對屏幕操作的影響,以及這些元素是如何相互反饋的。


材料設(shè)計的運(yùn)動具有以下幾個特征:


一、響應(yīng)式的

材料設(shè)計的動效是充滿活力的。它能迅速精確響應(yīng)用戶用戶所觸發(fā)的內(nèi)容。


Image title

在移動設(shè)備上的長動畫大約是300-400ms,短動畫大概是150-200ms。過長的動畫讓人感覺遲鈍,過短的動畫讓人覺得難以看明白。


Image title

用戶觸摸屏幕時,通過漪漣動畫能使用戶確認(rèn)輸入??ㄆ仙硎驹摽ㄆ幱诩せ顮顟B(tài)。


Image title

顯示觸發(fā)元件或動作和創(chuàng)建出的新的卡片之間的聯(lián)系。


二、自然的

材料設(shè)計的動效通過模仿真實(shí)世界的力,而展現(xiàn)了自然的運(yùn)動過程。 


Image title


在真實(shí)的世界中,一個物體可以被重量、表面摩擦力影響很快的加速或減速。同樣的,材料設(shè)計的動效也是不會發(fā)生突然停止,或者突然啟動,都是會有一個加速度或者減速度。




Image title

真實(shí)世界中的力,例如重力,能使一個元素沿曲線運(yùn)動而非直線運(yùn)動。



Image title

右圖:材料設(shè)計的動效轉(zhuǎn)場是沿著一個弧線的。



三、可察覺的

材料設(shè)計的動效是可以被周圍環(huán)境察覺的,包括用戶和周圍其他的元素。它可以被物體吸引,并且恰當(dāng)?shù)幕貞?yīng)用戶的意圖。 


Image title

作為過渡元素,他們和他們周圍元素的運(yùn)動是精心安排的,可以通過這個過程看出他們之間的關(guān)系。


Image title

卡片可以推動其他卡片,讓他們給自己讓開路。


Image title

元素可能會吸引其他元素加入,當(dāng)他們相互接近時合為一體。



四、有引導(dǎo)意圖的

材料設(shè)計的動效能使焦點(diǎn)在對的時間聚焦在對的點(diǎn)。


Image title

 轉(zhuǎn)場動畫有助于引導(dǎo)用戶進(jìn)行下一步的交互。


Image title

運(yùn)動可以傳遞不同的信號,例如,一個操作是否不可用。


Image title

動畫能使用戶關(guān)注特定對象。





如何設(shè)計一個好的轉(zhuǎn)場動畫?


好的動效設(shè)計應(yīng)該遵從以下幾點(diǎn):


一、動效是很快的

一個交互動作不應(yīng)該讓用戶做不必要的等待。

Image title

正確:動畫一定要快,用戶無須等待動畫完成。


Image title

錯誤:很多元素磨磨蹭蹭很慢的運(yùn)動,另動畫時長延長。


二、動效是明確的

轉(zhuǎn)場動畫應(yīng)該明確,簡單,一致。應(yīng)該避免一次又太多的元素動效。


Image title

正確:保持清晰的路徑進(jìn)入下一個視圖,最好元件都編排成一個組。


Image title

錯誤:多個元素移動到不同的方向或者交叉路徑,會造成轉(zhuǎn)場動畫的混亂。


三、動效是統(tǒng)一的

材料設(shè)計的動效是由速度、響應(yīng)性、和意向所統(tǒng)一的。在app中的任何自定義動效體驗(yàn)都應(yīng)該貫穿整一個app。


Image title

即使這些app有著不同的功能,但是他們相似的動畫體驗(yàn)讓人感覺他們是有關(guān)聯(lián)的。




動效的意義

動效的好處可以從以下兩個例子中明顯看出:其中一個app遵從這些模式,而另一個沒有遵從。


Image title

正確:在轉(zhuǎn)場的過程總,用戶被引導(dǎo)到了下一個視圖。表層的轉(zhuǎn)場清晰的傳達(dá)出層級關(guān)系。loading的過程在后臺進(jìn)行,以減少延遲時間。


Image title

錯誤:轉(zhuǎn)場的發(fā)生點(diǎn)沒有一個清晰的焦點(diǎn),所以看不出來新的頁面和舊的頁面之間的聯(lián)系。沒有感覺到有任何層級的關(guān)系,loading用一個轉(zhuǎn)圈的半圓表現(xiàn)太明顯了,令人感到延遲感。




更新:2016-05-11

收藏

63人已收藏

  • 11

    作品

  • 218

    粉絲

  • 2

    關(guān)注

  • 持續(xù)時間和緩動 - MD 官方動效指南
  • Exceptional Situation
  • Google官方指南:iOS和Android的設(shè)計區(qū)別
  • LINE ICONS

    猜你喜歡

      2016-05-11 自譯外文 規(guī)范/資料 原作者: Google 舉報 4326 63 33 0

      新版 Material Design 官方動效指南

      0.0°

      你確定要舉報新版 Material Design 官方動效指南

      如果查出惡意舉報,十天內(nèi)禁止提交任何舉報申請。

      0/200

      上傳證據(jù): 超過10M的附件請使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對誰可見:

      全部設(shè)計師
      • 全部設(shè)計師
      • 推薦設(shè)計師和認(rèn)證設(shè)計師

      您確認(rèn)要推薦?

      該作品發(fā)布時間:2016年05月11日

      評分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      33
      63
      0

      賬號或密碼錯誤,請重新輸入

      賬號或密碼錯誤,請重新輸入

      登錄

      手機(jī)號

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯誤

      登錄
      第三方賬號登錄