設(shè)計(jì)知識,講解四個(gè)常見的動效類型

2023-07-01 22:53:33 來源/作者: / 己有:1人學(xué)習(xí)過

這兩天有一款動效神器Hype 3特別受歡迎,借這股動效的勁頭,今天胡癡兒(騰訊用戶體驗(yàn)設(shè)計(jì)師)給同學(xué)們科普一下動效的類型

一、動效起源于什么?

iOS 6(視覺表層&信息的外觀)→ iOS 7(動效&信息的運(yùn)作方式)

二、動效是用來干什么的?表現(xiàn)視覺層級關(guān)系的是幾種UI元素之間的相互轉(zhuǎn)換

設(shè)計(jì)知識,講解四個(gè)常見的動效類型

三、動效如何分類?

設(shè)計(jì)知識,講解四個(gè)常見的動效類型

一個(gè)元素如何能夠填滿整個(gè)頁面?

如何引導(dǎo)用戶的視線?

一、Icon → Page

iOS 鏡頭運(yùn)動&焦點(diǎn)移動

設(shè)計(jì)知識,講解四個(gè)常見的動效類型

icon即APP&文件夾本身。

高級視圖 → 細(xì)節(jié)視圖

Z軸,鏡頭向icon圖層做相向運(yùn)動,視野縮小,視野中物體變大;XY軸,icon放大變成app&文件夾,切換為app界面&文件夾

設(shè)計(jì)知識,講解四個(gè)常見的動效類型

(iOS的視差效果&鏡頭運(yùn)動&空間深度)

APP的 icon → 全屏APP界面

APP的空間態(tài):

設(shè)計(jì)知識,講解四個(gè)常見的動效類型

啟動: