中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：用戶在使用一款產(chǎn)品時(shí)，都希望能有良好的使用體驗(yàn)。出色的動(dòng)效，可以使頁(yè)面之間聯(lián)系更加緊密，整體體驗(yàn)更加流暢，減少用戶的負(fù)面情緒；同時(shí)，也可以增加產(chǎn)品的趣味性與品牌特色，讓用戶產(chǎn)生興趣并提高品牌認(rèn)知度。接下來(lái)，本文作者就帶我們?nèi)チ私鈩?dòng)效設(shè)計(jì)。

現(xiàn)如，今動(dòng)效設(shè)計(jì)在產(chǎn)品中的使用已經(jīng)十分普遍。

這也導(dǎo)致動(dòng)效設(shè)計(jì)由早期的「魅力型因素」逐漸成為「必要型因素」，越來(lái)越多的公司和團(tuán)隊(duì)已經(jīng)意識(shí)到動(dòng)效在產(chǎn)品用戶體驗(yàn)中的重要性，動(dòng)效也逐漸成為UI設(shè)計(jì)師的基本能力之一。

一、動(dòng)效是什么

動(dòng)效設(shè)計(jì)，顧名思義即動(dòng)態(tài)效果的設(shè)計(jì)，用戶界面上所有運(yùn)動(dòng)的效果，也可以視其為界面設(shè)計(jì)與動(dòng)態(tài)設(shè)計(jì)的結(jié)合。

而在Material design 設(shè)計(jì)規(guī)范中，將動(dòng)效設(shè)計(jì)這一章命名為「Animation」，意思是動(dòng)畫，活潑的意思。好的動(dòng)效設(shè)計(jì)可以幫助引導(dǎo)、取悅用戶，減少等待焦慮，是拉近用戶與產(chǎn)品之間距離的有效手段。

二、動(dòng)效分類

動(dòng)效的分類并沒有明確的界限，根據(jù)其作用大致可以分為3類：

1. 功能型動(dòng)效

此類動(dòng)效一般用于產(chǎn)品設(shè)計(jì)，通過(guò)動(dòng)態(tài)圖形向用戶傳遞信息，其中加載/刷新和進(jìn)度條應(yīng)該是我們平時(shí)接觸最多也是最早的動(dòng)效了，此類動(dòng)效最開始只是為了告知用戶產(chǎn)品的頁(yè)面狀態(tài)。

隨著社會(huì)上產(chǎn)品數(shù)量的快速增長(zhǎng)以及競(jìng)爭(zhēng)日益激烈，產(chǎn)品的有趣和差異化顯得愈發(fā)重要，于是便看到越來(lái)越多的產(chǎn)品將自己的品牌因素融入動(dòng)效當(dāng)中，設(shè)計(jì)也越來(lái)越生動(dòng)有趣。

除了加載、刷新和進(jìn)度外，功能型動(dòng)效還被廣泛的運(yùn)用在產(chǎn)品的其他各種狀態(tài)當(dāng)中，如信息報(bào)錯(cuò)、二維碼掃描等。雖然具體表現(xiàn)不同，但都是通過(guò)動(dòng)態(tài)形式幫助用戶理解和使用產(chǎn)品。

2. 交互型動(dòng)效

顧名思義，該類動(dòng)效的核心是“交互”，其主要的作用是幫助用戶理解界面的層級(jí)邏輯關(guān)系，讓產(chǎn)品的使用更加符合現(xiàn)實(shí)生活中的認(rèn)知習(xí)慣，從而降低使用成本，提升產(chǎn)品體驗(yàn)。

要注意的是此類動(dòng)效不能脫離用戶的認(rèn)知模型，只是單純的炫酷對(duì)于整個(gè)產(chǎn)品來(lái)說(shuō)是有害的。

其實(shí)交互型動(dòng)效是用戶在產(chǎn)品使用中接觸最多的一種動(dòng)效，因?yàn)楫a(chǎn)品的使用是通過(guò)不同產(chǎn)品元素串聯(lián)而完成的，而負(fù)責(zé)元素串聯(lián)的就是交互型動(dòng)效。

一般可分為「單頁(yè)面交互動(dòng)效」和「多頁(yè)面交互動(dòng)效」。

「單頁(yè)面交互動(dòng)效」：就是在當(dāng)前頁(yè)面發(fā)生的交互動(dòng)畫，比如tab切換、左滑刪除、二級(jí)菜單展開、返回頂部等等。

「多頁(yè)面交互動(dòng)效」：就是不同頁(yè)面之間的交互動(dòng)畫，其實(shí)就是頁(yè)面的跳轉(zhuǎn)，根據(jù)不同的場(chǎng)景會(huì)使用到不同的跳轉(zhuǎn)樣式，好的跳轉(zhuǎn)動(dòng)畫能夠幫助用戶理解前后頁(yè)面的邏輯關(guān)系。

3. 展示型動(dòng)效

此類動(dòng)效的最大作用就是盡可能的為用戶制造視覺上的愉悅，營(yíng)造活動(dòng)氛圍，讓用戶覺得有趣生動(dòng)，使用的場(chǎng)景也十分廣泛，常見的如「品牌展示」、「運(yùn)營(yíng)活動(dòng)」、「H5營(yíng)銷」等。

1）品牌展示

將有趣的動(dòng)態(tài)圖形與品牌相結(jié)合，讓原本生硬的產(chǎn)品形象變得有趣生動(dòng)，拉近用戶與產(chǎn)品之間的距離。

2）運(yùn)營(yíng)活動(dòng)

動(dòng)效設(shè)計(jì)同樣也可以使用在運(yùn)營(yíng)設(shè)計(jì)中，作為業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化的重要入口，動(dòng)效可以極大的吸引用戶的注意力，從而提升業(yè)務(wù)數(shù)據(jù)。

H5營(yíng)銷

從2014年開始，H5因其豐富的表現(xiàn)形式便開始逐漸走紅，每年都會(huì)有很多火遍全網(wǎng)的H5活動(dòng)，如「網(wǎng)易云音樂(lè)聽歌報(bào)告」、「支付寶集五福」、「支付寶年度賬單」、「穿越故宮來(lái)看你」等等。

網(wǎng)易云音樂(lè)聽歌報(bào)告

支付寶五福

支付寶年度賬單

穿越故宮來(lái)看你

三、如何設(shè)計(jì)動(dòng)效

1. 結(jié)合產(chǎn)品去設(shè)計(jì)

不同的產(chǎn)品有屬于自己的產(chǎn)品調(diào)性，例如：

金融產(chǎn)品強(qiáng)調(diào)的是可靠理性，而手游類產(chǎn)品的重點(diǎn)則是炫酷有趣，二者的動(dòng)效設(shè)計(jì)自然也需要貼合各自的屬性，思路設(shè)計(jì)要符合提升的產(chǎn)品體驗(yàn)，要經(jīng)過(guò)細(xì)致思考不能盲目跟風(fēng)。

2. 了解動(dòng)畫的運(yùn)動(dòng)節(jié)奏

因?yàn)樽匀唤缰羞\(yùn)動(dòng)都不是線性的勻速運(yùn)動(dòng)，而是按照物理規(guī)律，呈現(xiàn)出的曲線的變速運(yùn)動(dòng)，這也是物體運(yùn)動(dòng)的基本常識(shí)和規(guī)律。

人們對(duì)于一個(gè)運(yùn)動(dòng)形式產(chǎn)生的情感反饋，大部分也來(lái)自于生活中看到的類似的運(yùn)動(dòng)形式。所以我們要符合物理規(guī)律，這樣才能準(zhǔn)確的專遞我們動(dòng)效設(shè)計(jì)的情感。當(dāng)然可以適當(dāng)根據(jù)需要夸張、精簡(jiǎn)。

3. 多看多思考

我們還需要多看一些優(yōu)秀的動(dòng)效設(shè)計(jì)作為積累，同時(shí)也需要對(duì)優(yōu)秀的動(dòng)效設(shè)計(jì)進(jìn)行深入思考，思考別人為什么這么設(shè)計(jì)，以及如何完成動(dòng)畫設(shè)計(jì)的。

要與自己對(duì)類似事物的想法進(jìn)行對(duì)比，找差距，補(bǔ)不足，這是經(jīng)驗(yàn)技巧積累的過(guò)程。同時(shí)要學(xué)會(huì)怎么去拆解別人復(fù)雜的動(dòng)效設(shè)計(jì)，從中總結(jié)經(jīng)驗(yàn)，最后通過(guò)合理的編排設(shè)計(jì)出自己的動(dòng)效設(shè)計(jì)作品。

4. 關(guān)注流行

就是要保持對(duì)于設(shè)計(jì)行業(yè)，或者說(shuō)是APP動(dòng)效設(shè)計(jì)領(lǐng)域的關(guān)注。了解當(dāng)下新的設(shè)計(jì)手法，設(shè)計(jì)趨勢(shì)以及設(shè)計(jì)工具，不要做一個(gè)落伍者。

四、動(dòng)效文件格式類型

常見的動(dòng)效文件格式有GIF、APNG/WEBP、序列幀/精靈圖、Lottle、SVGA。

1. GIF

GIF 圖格式應(yīng)該是設(shè)計(jì)師接觸過(guò)的最多的動(dòng)態(tài)格式了， 因其體積小而成像相對(duì)清晰，其在各個(gè)平臺(tái)的兼容性非常好，使得它的傳播性非常強(qiáng)。

當(dāng)然gif格式也存在很明顯的缺陷：

1. 對(duì)電腦的內(nèi)存和性能占用非常大（根據(jù) GIF 的時(shí)間尺寸的等情況會(huì)有不同的程度的影響），作為設(shè)計(jì)師常有的一個(gè)經(jīng)驗(yàn)是在網(wǎng)頁(yè)上多開幾個(gè) GIF 之后電腦風(fēng)扇就開始飚起來(lái)了。
2. 它是一個(gè)有損的文件格式，不論是色彩還是畫面質(zhì)感都會(huì)有一定程度的壓縮。
3. 對(duì)透明通道的支持非常有限，輸出結(jié)果會(huì)非常差，時(shí)常會(huì)有鋸齒或白邊的情況。以上是我們?cè)谳敵?GIF 格式的之前需要提前思考是否可以接受以上的問(wèn)題。

2. APNG/WEBP

這些格式是基于現(xiàn)有的 JPEG、PNG、GIF 格式的所衍生出來(lái)的。

APNG 格式在目前主流的所有瀏覽器上都可以完美支持，在移動(dòng)的設(shè)備上通過(guò)一些代碼框架也可以完美支持，它相比 GIF 支持的色彩范圍更廣，更清晰，并且占用更低的內(nèi)存，支持透明通道，有非常多的優(yōu)勢(shì)。

WEBP格式目前也基本兼容所有的主流瀏覽器，相同的效果，webp 格式要比 png 格式小出來(lái)大概一半的大小，同時(shí)它也兼容所有的安卓設(shè)備，像一些 ios 設(shè)備需要通過(guò)一定的方式才可以支持。

不過(guò)，相比來(lái)說(shuō)各方面的表現(xiàn)都是非常優(yōu)秀的。

3. 序列幀/精靈圖

1）序列幀

序列幀就是將動(dòng)動(dòng)效的所有畫面拆分開來(lái)，形成一系列靜態(tài)的png圖片，然后通過(guò)前端代碼來(lái)控制每張png圖片出現(xiàn)的間隔時(shí)間，而且實(shí)現(xiàn)連貫的動(dòng)畫效果。

序列幀是一個(gè)無(wú)損且低內(nèi)存的格式，但是它只能在客戶端環(huán)境中使用，不建議在 Web 環(huán)境中使用。

原因是序列幀一般都是隨著 App 程序包一起下載下來(lái)的，但是 Web 中每次進(jìn)入一個(gè)新的網(wǎng)頁(yè)都需要重新下載。

舉個(gè)例子如果一個(gè) 60 幀的動(dòng)畫就得重復(fù)向服務(wù)器請(qǐng)求 60 次，在這種高頻次的請(qǐng)求下很容易因?yàn)橐粋€(gè)小的問(wèn)題導(dǎo)致整個(gè)動(dòng)畫無(wú)法正常播放，為了避免這種錯(cuò)誤我們一般會(huì)這個(gè) 60 張圖合并為一個(gè)，并且通過(guò)代碼在指定時(shí)間內(nèi)顯示某一個(gè)區(qū)塊，所以這里我們引出另一種格式——精靈圖/雪碧圖。

2）精靈圖（又叫雪碧圖）

當(dāng)我們把所有序列合并在一張圖片上往往還是不夠的，我們還需要提供給開發(fā)具體哪個(gè)時(shí)間顯示哪一部分的具體參數(shù)。

我們可以直接通過(guò) AE 插件 CSS Sprite Exporter(By Bigxixi) 直接快速的輸出開發(fā)所需的代碼和精靈圖：

Lottie：

Lottie 可以說(shuō)是近幾年在動(dòng)畫輸出方面不得不提的一個(gè)格式，它由 Airbnb 推出，并且迅速在國(guó)內(nèi)外各種大小廠快速推廣開來(lái)，目前已經(jīng)是一個(gè)非常普遍常用的格式。它在 AE 中的插件叫 Bodymovin，它的原理是把各種矢量元素以及位圖圖層以及他們的效果關(guān)鍵節(jié)點(diǎn)打包行成一個(gè) json 格式的文行。

開發(fā)人員拿到 Bodymovin 輸出的 json 格式是無(wú)法直接使用的，它需要在代碼中加入 Airbnb 提供的 Lottie 第三方庫(kù)來(lái)讀取播放，相當(dāng)于 lottie 文件在我們各個(gè)端口設(shè)備上的播放器的作用。

ps：

1. 由于lottie不支持ae表達(dá)式，可以用插件（Easy Bake）將表達(dá)式轉(zhuǎn)為關(guān)鍵幀，這樣問(wèn)題就解決了；
2. ae軟件因?yàn)闈h化的原因，會(huì)導(dǎo)致Bodymovin插件對(duì)其中的某些屬性不支持，比如ae中如果存在顏色漸變，導(dǎo)出來(lái)的json文件所有的漸變會(huì)變?yōu)楹诎诐u變。

解決的辦法有兩個(gè)：一個(gè)是使用英文版ae軟件；第二個(gè)是將屬性「漸變填充1」重命名改為「Gradient Fill1」（后面的數(shù)字需與漢化版的保持一致）。

SVGA：

針對(duì) Lottie 對(duì)緩動(dòng)曲線解析差帶來(lái)的性能問(wèn)題和穩(wěn)定性問(wèn)題，我們會(huì)有第二種備選方案是 SVGA，不管是導(dǎo)出之后的內(nèi)存占用，還是在各個(gè)端的表現(xiàn)穩(wěn)定性都會(huì)好很多。

但是它的內(nèi)存占用會(huì)比 Lottie 稍高，并且支持的特性也會(huì)比 Lottie 少一些。

SVGA 與 Lottie 最本質(zhì)的區(qū)別在于代碼對(duì)動(dòng)畫過(guò)程記錄的方式， Lottie基本上是按照我們?cè)?ae 當(dāng)中的關(guān)鍵幀及緩動(dòng)的結(jié)合形式去記錄動(dòng)畫；而 SVGA 則是通過(guò)記錄我們每一個(gè)圖層每一個(gè)時(shí)間上的動(dòng)畫狀態(tài)，從而省去對(duì)緩動(dòng)值的計(jì)算。

跟序列幀的邏輯非常相似，但是因?yàn)樗乃夭目梢詮?fù)用，所以會(huì)比序列幀占用更低的內(nèi)存。

基于實(shí)現(xiàn)方式，它會(huì)比 Lottie 穩(wěn)定很多，相應(yīng)的，它所支持的特性也要比 ?Lottie 少很多。

四、動(dòng)效制作軟件

動(dòng)效制作的軟件其實(shí)非常多，這里只介紹一些自己接觸過(guò)的主流動(dòng)效軟件：

1. AE

AE是時(shí)間軸動(dòng)效軟件，不支持交互操作，但幾乎可以制作任何你想要的動(dòng)畫效果，但操作相對(duì)復(fù)雜時(shí)間成本較高。

2. Principle

Principle是可交互的動(dòng)效軟件，主要用于交互動(dòng)效Dome制作，可以制作出較為復(fù)雜效果的交互動(dòng)效，操作難度相對(duì)較低。

3. Origami

Origami是一款以代碼思維進(jìn)行動(dòng)效制作的軟件，學(xué)習(xí)門檻較高，但可以實(shí)現(xiàn)與開發(fā)的無(wú)縫對(duì)接。

4. C4D

C4D主要針對(duì)三維動(dòng)畫效果的制作，學(xué)習(xí)門檻較高。

作者：WOWdesign，研究設(shè)計(jì)價(jià)值最大化，涉及用戶體驗(yàn)、品牌體驗(yàn)、空間體驗(yàn)。

本文由 @agoodesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議