亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

新版MATERIAL DESIGN 官方動效指南(三)

作者:
分類: 觀點/經驗
2016-05-24
1693


運動

Material design 的動效會被類似真實世界中的力的影響,類似重力。

物體在屏幕內的運動

屏幕內物體在兩點之間的運動,是沿著一條自然、凹陷的弧線。屏幕上所有的運動都可以使用標準曲線。

弧線向上運動

在現(xiàn)實世界中,物體向上運動需要克服重力。元素在屏幕中向上運動,同樣也是需要克服一個加速度,較慢的向上運動。

25dx20160520

正確:當物體向上對角運動時,平緩開始上升,急劇停止在終點。

24dx20160520

錯誤:不要違反物理定律:當物體向上運動時無視重力,這樣會顯得不自然。

弧線向下運動

在現(xiàn)實世界中,物體下降會受到重力的加速度。在屏幕中,物體向下移動速度應該會更快一點。

23dx20160520

正確:當物體向下對角運動時,下降開始急劇,然后平緩停止。

22dx20160520

錯誤:不要違反物理定律:向下運動的時候別忘記了向下的重力。

非弧線運動

當物體沿著水平軸線或者垂直軸線運動時,請不要讓讓物體沿著弧線運動。這些運動時最簡單的,物體可以以一個比較快的速度運動。

21dx20160520

正確:保持單軸的直線運動。

20dx20160520

錯誤:在水平或垂直方向上,不要讓物體沿著不自然的弧線運動。

物體進入或退出屏幕時,也應該沿著單軸運動。

19dx20160520

正確:物體沿著直線路徑進入屏幕,可以很明確的看見進入點。

18dx20160520

錯誤:進入和離開屏幕時不要沿著弧線,這樣會讓人搞不清楚進入點到底在哪里。

物體進入和退出屏幕的運動

獨立運動

物體做為一個獨立的元素,進入退出屏幕不影響到屏幕上其他元素的位置。

進入屏幕

物體是以減速曲線(具體參見持續(xù)時間與緩動篇)進入屏幕,以最大速度進入,然后再慢慢減速。

永久離開屏幕

物體以加速曲線(具體參見持續(xù)時間與緩動篇)永久離開屏幕,在很短時間內快速離開屏幕,因為他們不會再重返屏幕,所以應該減少用戶對它的關注。

17dx20160520

正確:物體以減速曲線進入屏幕應該不要影響到屏幕上其他物體的位置。在移動設備上,這種運動通暢持續(xù)225ms左右。同樣的物體使用加速曲線永久離開屏幕,在移動設備上,大概持續(xù)195ms。

16dx20160520

錯誤:這兩種情況都不要使用標準曲線(具體參見持續(xù)時間與緩動篇)。物體進入屏幕時,緩慢加速的過程會吸引用戶不必要的注意力(用戶的注意力應該放在最后停留的點上)。物體離開屏幕時,緩慢的減速同樣是不必要的,因為物體運動的終點在屏幕外,是不可見的。

暫時離開屏幕

物體暫時離開屏幕應該使用急轉曲線(具體參見持續(xù)時間與緩動篇),出現(xiàn)點和消失點距離應該很近,這樣他們可以隨時回到屏幕。

15dx20160520

離開屏幕的物體從原路返回,離開時物體的運動應該使用急轉曲線,返回時使用減速曲線。在移動設備上,這個動畫通常會持續(xù)300ms左右。

14dx20160520

離開屏幕的物體從其他路徑返回或者永久離開屏幕時,離開時物體的運動應該使用加速曲線,如有返回,則使用減速曲線。

關聯(lián)運動

和屏幕上其他元素有聯(lián)動的進入或退出動畫,應該使用平滑的緩動曲線,這樣他們可以盡量減少干擾,避免太過搶眼,劇烈的運動。

標準曲線適用于關聯(lián)的多個物體進入退出屏幕。多個物體運動的標準曲線會比獨立物體的時間稍稍長一些。

13dx20160520

正確:浮動按鈕的運動會受到從下方進入的卡片的影響,浮動按鈕和卡片都應該使用標準曲線運動,保持平滑的開始和停止動畫。在移動設備上,這個動畫大概持續(xù)300ms。

12dx20160520

錯誤:浮動按鈕向上和向下的運動使用加速或減速曲線,會給人感覺非常突然的向上或者向下移動。這樣的動效讓人難以接受,體驗受到破壞。

材料的形變

材料設計下的物體可以很生動的展現(xiàn):疊加、分割、改變形狀和大小。

矩形的形變

物體改形狀和大小時,寬和高的運動曲線是非對稱的。這種變化是根據(jù)物體附近的內在或外在元素來進行改變的。

所有的變化都是在屏幕上可見的,例如下面的幾個例子,使用了標準曲線(具體參見持續(xù)時間與緩動篇)。

寬和高的變化

當物體擴大或縮小時,使用對稱或非對成的寬高變化。

非對稱變化

是指寬度和高度以不同的速率變化。對于多個物體或位置的變化,使用非對稱變化再合適不過了。

11dx20160520

非對稱變化

物體的擴大:先改變寬,再改變高。物體的縮小:先改變高,再改變寬。

對稱變化是指寬度和高度以同樣的速率變化。適合用于單個元素沿著單一的軸線的運動。

10dx20160520

對稱變化

這種同時改變寬高,減少動畫細節(jié)的方式非常適合簡單的形狀變化。這種變化的持續(xù)時間會比非對稱變化稍短一些。

當一組物體的擴大不同步時,含有內容(如文字或圖像)的部分改變大小,是以恒定的比率來進行的,這樣可以防止不自然的拉伸。有關內容請查閱《動效的組合》部分內容。

9dx20160520

有些特殊內容(例如含有全屏寬度圖像)的變化是以恒定的比率進行的,承載它的容器(例如一個更大的卡片)的變化是不同步地沿著運動曲線進行的。

8dx20160520

含有出血內容(例如超過出血線的圖像)的容器是可以同步擴大的。

徑向形變

徑向變化是從用戶的觸摸點產生的對稱的、環(huán)形可視化的效果。通常用在圓形的物體上,讓圓形變成其他形狀。

7dx20160520

正確:徑向變化應該用在圓形的物體上,讓圓形物體變成方形,或者在觸摸點創(chuàng)建一個新的物體出來。

6dx20160520

錯誤:不要在兩個方形物體間的變化使用徑向變化。

5dx20160520

錯誤:高寬的擴展不要不同步(中間會變成一個橢圓)。

4dx20160520

錯誤:不要徑向變化復雜的形狀。

形變的變化中心點可以在物體改變前的位置,也可以在物體改變后的位置。

3dx20160520

在擴張的過程中,浮動按鈕的運動是沿著一個向下的弧線,最終變成一張卡片。

2dx20160520

變換的中心點保持在浮動按鈕的中心點,幅度不大的擴張。

合并 & 分割

合并

在材料設計中,物體可以和其他物體合并,也可以分割成很多塊。兩個物體相互接近時,邊緣相遇然后重疊,最后合二為一。

分割

物體分割成多個碎片,然后碎片開始分離運動。

陰影

分割開的物體的陰影不會被其他被分割物體所影響。

1dx20160520
0
1
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          中文字幕一区二区三区视频| 欧美日韩精品免费观看视频| 中文字幕中文字幕在线一区| 日韩一区二区三区四区| 色综合天天综合| 国产成人综合视频| 国产精品99久久久久久有的能看| 麻豆专区一区二区三区四区五区| 日本视频一区二区| 日韩综合在线视频| 日韩国产精品91| 青青草国产精品97视觉盛宴| 日韩专区中文字幕一区二区| 日产国产欧美视频一区精品| 免费高清在线视频一区·| 日韩av中文字幕一区二区| 麻豆精品一区二区综合av| 久久国产三级精品| 国产乱人伦偷精品视频不卡 | 国产精品嫩草影院av蜜臀| 欧美xxxx在线观看| 久久久国产精华| 国产精品 日产精品 欧美精品| 国产宾馆实践打屁股91| 97se狠狠狠综合亚洲狠狠| 91国偷自产一区二区三区观看| 亚洲福利电影网| 亚洲国产aⅴ成人精品无吗| 肉肉av福利一精品导航| 国产原创一区二区| gogo大胆日本视频一区| 欧美视频在线播放| 精品国产1区二区| 国产精品丝袜久久久久久app| 有码一区二区三区| 久久国产精品99精品国产 | 亚洲人成精品久久久久| 午夜精品爽啪视频| 国产成人在线电影| 欧美色图免费看| 美女精品一区二区| 色综合久久天天| 91麻豆精品国产91久久久更新时间 | 日本不卡123| 国产精品视频你懂的| 亚洲国产成人av网| 风间由美中文字幕在线看视频国产欧美| 99视频热这里只有精品免费| 日韩欧美一级二级三级久久久| 中文字幕一区二区三区在线播放 | 99re这里只有精品视频首页| 免费日韩伦理电影| 一本久久精品一区二区| 亚洲精品一区在线观看| 亚洲图片欧美视频| 97久久精品人人爽人人爽蜜臀 | gogo大胆日本视频一区| 日韩欧美一区二区视频| 亚洲午夜精品网| 亚洲一区在线观看网站| 黄色日韩三级电影| 91精品国产高清一区二区三区蜜臀| 色婷婷综合久久久中文一区二区 | 日本精品一区二区三区高清| 亚洲久本草在线中文字幕| 国产精品2024| 91免费视频网址| 五月综合激情婷婷六月色窝| 国产亚洲va综合人人澡精品| 欧美日韩国产精品成人| 国产美女av一区二区三区| 亚洲男同1069视频| 国产女人18水真多18精品一级做| 欧洲在线/亚洲| 成人av集中营| 亚洲精品福利视频网站| 欧美日韩精品欧美日韩精品| 国产精品1区2区3区| 三级在线观看一区二区| 亚洲欧美日本在线| 中文字幕不卡一区| 欧美亚洲动漫精品| 国产精品一区不卡| 久久97超碰色| 日日欢夜夜爽一区| 在线电影国产精品| 91免费精品国自产拍在线不卡| 国产一区三区三区| 91福利在线看| 国产成人午夜视频| 欧美国产精品久久| 99久久久无码国产精品| 成人av免费观看| 99久久精品情趣| 欧美久久高跟鞋激| 久久精品在这里| 亚洲第四色夜色| 国产一区二区在线视频| 91麻豆高清视频| 日韩欧美色电影| 国产精品久久久久影院老司| 国产精品久久久久影院色老大| 中文字幕亚洲在| 喷白浆一区二区| 91网站黄www| 久久久蜜桃精品| 日韩av一区二区三区四区| 丁香桃色午夜亚洲一区二区三区| 色嗨嗨av一区二区三区| 久久久久久久久蜜桃| 色噜噜狠狠成人中文综合| 欧美一区二区三区免费| 欧美高清在线一区| 欧美一区二区视频在线观看| 日本一区二区不卡视频| 精品一区二区久久| 91精品婷婷国产综合久久性色| 亚洲精品自拍动漫在线| 免费在线观看精品| 国产精品每日更新| 另类调教123区| 日韩欧美国产不卡| 亚洲bt欧美bt精品| 欧美浪妇xxxx高跟鞋交| 洋洋av久久久久久久一区| 99精品久久久久久| 樱花草国产18久久久久| 色噜噜夜夜夜综合网| 亚洲一级二级三级在线免费观看| 亚洲激情在线激情| www.综合网.com| 亚洲高清中文字幕| 欧美成人aa大片| 99re66热这里只有精品3直播 | 国产一本一道久久香蕉| 久久综合九色欧美综合狠狠| 国产99精品国产| 日韩一区有码在线| 欧美另类videos死尸| 精品无码三级在线观看视频| 中文字幕不卡一区| 欧美丝袜丝交足nylons| 国产一区二区三区观看| 亚洲影视在线播放| 久久久久久久性| 日韩三区在线观看| 91同城在线观看| 看电影不卡的网站| 亚洲成人动漫精品| 国产精品国产三级国产普通话99 | 91精品国产91久久久久久一区二区| 日韩福利视频网| 综合久久国产九一剧情麻豆| 欧美一区二区人人喊爽| 色噜噜夜夜夜综合网| 国产精品一线二线三线| 日韩二区在线观看| 欧美日韩在线三区| 不卡的av电影| 粉嫩av一区二区三区| 青青草原综合久久大伊人精品| thepron国产精品| 九九视频精品免费| 国产乱码一区二区三区| 狠狠狠色丁香婷婷综合激情| 麻豆专区一区二区三区四区五区| 午夜久久久影院| 国产精品国产a级| 国产三级精品三级| 国产精品美女久久久久久| 日韩一区中文字幕| 日韩精品电影一区亚洲| 免费看日韩a级影片| 国产麻豆91精品| 色妹子一区二区| 欧美日韩国产精选| 国产日韩欧美不卡在线| 亚洲欧美日韩国产成人精品影院| 偷偷要91色婷婷| 99久久伊人网影院| 欧美精品一区二区三区蜜桃视频| 国产精品久久久久永久免费观看 | 成人av电影在线播放| 欧美系列日韩一区| 欧美一区二区性放荡片| 亚洲欧美成人一区二区三区| 精品在线一区二区三区| 欧洲在线/亚洲| 亚洲欧洲日韩女同| 国产自产2019最新不卡| 欧美日本在线视频| 亚洲激情网站免费观看| 国产一本一道久久香蕉| 欧美国产日韩一二三区| 极品销魂美女一区二区三区| 欧洲一区在线电影| 欧美亚洲一区三区| 一区二区三区色| 91美女精品福利| 亚洲欧美区自拍先锋|