圖標(biāo)設(shè)計(jì)九大統(tǒng)一性：1、大小統(tǒng)一 2、圓角統(tǒng)一 3、語言統(tǒng)一 4、粗細(xì)統(tǒng)一 5、疏密統(tǒng)一 6、間距統(tǒng)一
7、比例統(tǒng)一 8、正負(fù)形統(tǒng)一 9、角度統(tǒng)一

在中世紀(jì)的古老大陸上，有一個(gè)名為瑟蘭迪爾的王國。這里處處彌漫著古典的韻味，宏偉的城堡訴說著往昔的輝煌，寧靜的小鎮(zhèn)與廣袤的田野相映成趣。然而，當(dāng)那顆神秘而璀璨的天狼星在夜空中出現(xiàn)時(shí)，一場可怕的異變悄然降臨。

今天和大家聊聊顏色系統(tǒng)，在做一套新產(chǎn)品的色彩體系時(shí)，大家常常需要解決一個(gè)問題，那就是顏色梯度，也就是色卡制作。如何從品牌色開始建立一套科學(xué)的調(diào)色板？這篇文章嘗試解決這個(gè)問題。

無論你是一位需要從 0-1 制定色彩系統(tǒng)的品牌設(shè)計(jì)師，還是在一個(gè)已有設(shè)計(jì)系統(tǒng)的產(chǎn)品設(shè)計(jì)師，都需要掌握如何更加專業(yè)的創(chuàng)建設(shè)計(jì)系統(tǒng)中的顏色梯度。

我們在平常的 UI 設(shè)計(jì)工作中，經(jīng)常需要通過 AE 來做一些小動(dòng)效，比如生長、毛玻璃等效果，這樣有利于刺激用戶去點(diǎn)擊，增強(qiáng)趣味感，從而提升轉(zhuǎn)化，助力業(yè)務(wù)達(dá)成等目標(biāo)。其中有一些動(dòng)效技巧經(jīng)常能用到，也是我經(jīng)常反復(fù)去查看的知識點(diǎn)，在此整理了一波分享給大家，希望能幫助大家在工作中更加得心應(yīng)手。

小荷健康用戶等級體系設(shè)計(jì)項(xiàng)目總結(jié)復(fù)盤

作者：許波bobobo來源：站酷網(wǎng)



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

1.亮色與重色的比例

我們在設(shè)定界面風(fēng)格的時(shí)候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個(gè)最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會(huì)導(dǎo)致非常的刺眼，比如像瑞文同學(xué)的這個(gè)顏色設(shè)定：

就是過于明亮了，其實(shí)當(dāng)我們的顏色過于明亮?xí)r，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標(biāo)的做法一樣，減少亮部顏色，直接增加黑色：

這樣就不會(huì)那么刺眼了，當(dāng)我們明白了底層原理之后，再去優(yōu)化配色，我們看前后的變化：

這樣就會(huì)比之前舒服很多，當(dāng)然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續(xù)加大，但不管哪一種，都會(huì)比之前全是亮色要好很多！

2.這個(gè)改動(dòng)可愛了太多

小A同學(xué)是一個(gè)非常有潛力的同學(xué)，但是最開始交上來的吉祥物作業(yè)，也不是很理想，效果如下：

話不多說，我們就改動(dòng)一個(gè)點(diǎn)，五官緊湊，看看前后效果對比：

可愛的程度完全不在一個(gè)檔次，我們再看看小A同學(xué)后面的延展效果：

比之前強(qiáng)了很多很多倍，就是因?yàn)橐粋€(gè)五官緊湊。

3.對顏色的敏銳度

我們在做練習(xí)的時(shí)候，很重要的一個(gè)鍛煉點(diǎn)就是視覺敏銳度，能夠敏銳的發(fā)現(xiàn)哪里不舒服，這個(gè)真的很重要。

而視覺敏銳度里面就有一個(gè)維度是顏色，比如我們在看下面一兜糖同學(xué)做的質(zhì)感圖標(biāo)作業(yè)：

我們應(yīng)該快速的看出，第一個(gè)圖標(biāo)顏色不是很和諧，沒有后面兩個(gè)那么舒服，主要是那個(gè)藍(lán)色有點(diǎn)臟，我們看優(yōu)化后的三個(gè)圖標(biāo)：

就比之前要統(tǒng)一舒服很多。

當(dāng)我們的練習(xí)達(dá)到一定量時(shí)，敏銳度自然就會(huì)提高很多，所以一定要多去練習(xí)，把敏銳度這一塊提高上來。

4.綠色好難配??！

這是潘子同學(xué)的疑惑點(diǎn)：

他感覺綠色好難啊，第一次交上來的作業(yè)如下：

先不說造型問題，就光說顏色，就有點(diǎn)單薄，也有點(diǎn)太亮了，還有就是顏色比較正。

其實(shí)我們在配綠色的時(shí)候，只要把綠色加一點(diǎn)藍(lán)色，或者加一點(diǎn)黃色就會(huì)讓顏色好看很多。

后來潘子同學(xué)把顏色進(jìn)行了優(yōu)化：

這樣就比之前還要多了。

還有包括檸檬同學(xué)用的綠色:

也是比較好看的。

這回再用綠色的時(shí)候，大家清楚怎么好看了吧！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：菜心輕量文    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司               

動(dòng)效是用戶體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對性的人群。而After Effects作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛，不論是UI、運(yùn)營還是多媒體類型的設(shè)計(jì)都能滿足，無疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。

——————————

Part 1. 便捷靈活-不容錯(cuò)過的精品插件

工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過的精品插件。

1.1 文件導(dǎo)入

AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。

Overlord：AI與AE互導(dǎo)

Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對本身不適合用于繪制圖形的AE來說，無疑是補(bǔ)上了一個(gè)短板。

最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說是非常方便了。

官網(wǎng)鏈接：https://www.battleaxe.co/overlord

AEUX：Sketch導(dǎo)入AE

如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。

官網(wǎng)鏈接：https://aeux.io/

1.2 使用過程

——————————

Motion Tools：常用功能合輯

如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對象等。這里演示幾個(gè)常用功能。

快速調(diào)整速度緩動(dòng)曲線：

不用再通過輸入表達(dá)式，做出操控便捷又靈活的回彈效果：

錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：

官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/

Auto Crop：預(yù)合成裁切

新轉(zhuǎn)成的預(yù)合成尺寸總是占滿畫布，不方便做動(dòng)畫且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。

官網(wǎng)鏈接：https://aescripts.com/auto-crop

Auto Sway：飄動(dòng)效果

Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來。

官網(wǎng)鏈接：https://aescripts.com/autosway

Trapcode Particular：粒子效果

AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多運(yùn)營或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。

除了運(yùn)營設(shè)計(jì)，粒子在很多UI場景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場景。

官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite

1.3 高品質(zhì)導(dǎo)出

Bodymovin：Lottie格式輸出

Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。

QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺哦。

官網(wǎng)鏈接：https://aescripts.com/bodymovin/

PAG：完整的動(dòng)畫工作流

PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫工作流，在動(dòng)畫導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。

另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開發(fā)之間，從創(chuàng)作到素材交付上線的流程。

官網(wǎng)鏈接：https://pag.io/

Gifgun：導(dǎo)出小巧高清的Gif圖

Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁瀏覽、文檔編輯等許多場景，還是需要使用Gif來演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。

Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。

官網(wǎng)鏈接：https://aescripts.com/gifgun/

Aftercodecs：導(dǎo)出小巧高清的MP4

AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說，還損失畫質(zhì)。

Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過這款軟件本身體積較大，每次打開都要運(yùn)行很久。

這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。

官網(wǎng)鏈接：https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷鍵

2.1 實(shí)用小技巧

小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見的一些問題，以及對應(yīng)比較高效的解決方案。

用空對象調(diào)整元素

當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對象就可以解決這一問題。

整體拉伸關(guān)鍵幀

關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。

快速定位圖層中心錨點(diǎn)

新建形狀層的定位錨點(diǎn)總是不對齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對位到圖層中心。

還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對齊圖層中心啦。

中英文AE快速切換

AE的很多插件和表達(dá)式對中文版本不兼容，包括很多教程也都是國外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對2018以上的版本都適用。

以macOS系統(tǒng)為例，在以下路徑找到：

前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

將“application.xml”這個(gè)文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。

Windows也是同理，對應(yīng)路徑為：

C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml

然后將“application.xml”這個(gè)文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。

之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。

視頻素材循環(huán)

新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。

2.2 高效快捷鍵

雖然AE的全部快捷鍵可以寫滿長長一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺了。

以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：

而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開不相關(guān)的屬性：

這對于一個(gè)工程里需要用到成百上千次的k幀操作來說，著實(shí)可以省下不少時(shí)間，可以說是不得不用的一個(gè)快捷操作。

秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測好用哦！

因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對應(yīng) Windows 的 Alt ； Command 對應(yīng) Windows 的 Control 。

五大基礎(chǔ)變換屬性

在對應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開或收起對應(yīng)屬性。

位置：P（Position）

縮放：S（Scale）

旋轉(zhuǎn)：R（Rotation）

不透明度：T（Transparency）

錨點(diǎn)：A（Anchor）

常用工具選擇

選擇工具：V

形狀工具：Q

鋼筆工具：P

攝像機(jī)工具：C

關(guān)鍵幀操作

快速添加關(guān)鍵幀：Option + Shift + “ * ”（ * = 對應(yīng)屬性快捷鍵）

向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭

向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭

向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭

向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭

緩動(dòng)關(guān)鍵幀：F9

時(shí)間指針操作

定位到上一可見關(guān)鍵幀：J

定位到下一可見關(guān)鍵幀：K

定位到圖層入點(diǎn)：I

定位到圖層出點(diǎn)：O

設(shè)置當(dāng)前為工作區(qū)開始：B

設(shè)置當(dāng)前為工作區(qū)結(jié)束： N

圖層操作

將圖層拆分 ：Shift + Command + D

裁去時(shí)間線左側(cè)圖層：Option + [

裁去時(shí)間線右側(cè)圖層：Option + ]

設(shè)置當(dāng)前為入點(diǎn)： [

設(shè)置當(dāng)前為出點(diǎn)： ]

復(fù)制圖層：Command + D

其他常用操作

展開/收起帶關(guān)鍵幀的屬性：U

展開/收起所有屬性：UU

展開/收起遮罩屬性：M

展開/收起音頻屬性：L

轉(zhuǎn)為預(yù)合成：Shift + Command + C

圖像自適應(yīng)合成寬高：Shift + Option + F

After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

Part 3 .實(shí)際落地-動(dòng)效輸出與標(biāo)注

設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對接開發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。

3.1 播放型動(dòng)效輸出

播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿足觸發(fā)條件后播放出來，過程中并不會(huì)有影響效果的元素。

例如常見的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。

播放型動(dòng)效有以下幾種比較常見的輸出格式：

Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場景，是可以優(yōu)先考慮的動(dòng)圖格式。

3.2 交互型動(dòng)效標(biāo)注

交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶的頭像、名稱等。

比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設(shè)計(jì)師輸出的。

這種動(dòng)效需要開發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線速率等）還原出來。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開發(fā)更好的明確下來。

一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面，

觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長按等；

對象：發(fā)生變換的對象，例如按鈕、列表、文字等；

屬性：具體變換的屬性，例如位移、縮放、不透明度等；

參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從0到1；

時(shí)長：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；

曲線：變換的速率曲線，描述在固定的時(shí)長范圍內(nèi)，速度是如何變化的；

以上圖的支付面板首次切換過程為例，我們的標(biāo)注文檔是這樣的：

第一步定義好頁面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元素

第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：騰訊ISUX團(tuán)隊(duì)    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司