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

（動圖比較多，可能需要時間加載。以下所列案例，均為本人所做。文中若有不妥之處，歡迎各位交流指正。）

引言

互聯(lián)網(wǎng)行業(yè)的發(fā)展十分迅速，各板塊的同類競品也越來越多，對于我們的工作來說，如何能在眾多相似的產(chǎn)品中打造品牌差異化，動效是其中一個能帶來點睛之筆的選擇方式。動效既能吸引用戶的注意并提高留存率，同時也能通過流暢的交互來優(yōu)化用戶體驗。

我們知道，智能手機出現(xiàn)后，物理鍵盤被慢慢取消，用戶能直接在手機屏幕上操作來實現(xiàn)人機互動。為了讓用戶第一時間明白哪里可以點擊，哪里是什么功能的入口，手機界面內(nèi)的元素會盡量做得和現(xiàn)實生活中對應(yīng)的物體一樣。同樣的，動效能讓虛擬界面的交互與現(xiàn)實中的物理運動規(guī)則相符，對應(yīng)現(xiàn)實生活中的操作習(xí)慣，符合用戶對運動效果的心理預(yù)期，不會顯得不自然或突兀，讓用戶能快速認知和理解。

Part 1

動效的意義

一、吸引注意

在一個界面中，運動的對象比靜止的對象更能吸引人的注意力，給用戶一種可交互的認知。

例如下方活動頁面中的分享按鈕，加上放大縮小的循環(huán)動效，會比靜止的按鈕更有一種“點我”的感覺，從而吸引用戶去點擊。

二、表示關(guān)聯(lián)

點擊按鈕或切換頁面后，下級頁面合理的出現(xiàn)方式，能讓用戶感知當(dāng)前所處層級，減少操作成本和理解成本。大多數(shù)產(chǎn)品的切入頁面是從右往左進入，覆蓋在原頁面之上，返回上級頁面是從左往右退出，頁面之間的層級感清晰。

例如下方的頁面，當(dāng)我們點擊按鈕進入詳情頁時，用動效來展開詳情頁，讓用戶能比較直觀地知道當(dāng)前展開的詳情頁是從哪一個入口進來的。

三、展示更多信息

寸土寸金的手機界面中，通過動效的切換可以在同一位置展示更多內(nèi)容。過多的文字信息會讓界面冗余，引起用戶反感。一些有時效性的活動信息，可以通過動效來展示。

例如在QQ音樂里，通過翻轉(zhuǎn)專輯封面的唱片來展示更多的廣告信息。下方二維碼左側(cè)的品牌信息也是通過這種方式來展示的。

四、傳遞情緒

例如下拉刷新，點贊等動效，加強了用戶與產(chǎn)品之間的互動性，一方面能夠減輕用戶等待的焦慮，同時也能讓用戶感覺到產(chǎn)品是有性格的。

五、差異化

好的動效和交互甚至能讓用戶在其他地方看到類似的效果時會第一時間想起用過的產(chǎn)品，強化用戶對產(chǎn)品品牌的感知。

例如在交友軟件上很經(jīng)典的右滑表喜歡左滑表不喜歡的交互動效，都是模仿國外的一個叫Tinder的交友軟件。好的交互會讓人覺得很自然，甚至在沒有意識到的情況下就進入下一步了。自然流暢的交互，背后其實是有很多深層次的思考的。

Part 2

UI動效的分類

UI方面的動效，大體上可以分為以下三類。

一、情感化動效

在一些小的細節(jié)方面，如下拉加載，點贊等交互中，加入動效可以帶來如彩蛋般的驚喜效果。

二、交互動效

頁面的合理轉(zhuǎn)場能展示出產(chǎn)品結(jié)構(gòu)和空間關(guān)系，告知用戶當(dāng)前所處層級，暗示潛在的交互行為或執(zhí)行后果；組件交互反饋能降低操作成本和理解成本。

三、綜合動效

在二維碼、運營活動圖、H5等內(nèi)容中加入動效，會有很好的視覺效果，給用戶新穎的感覺，但同時也相對復(fù)雜，落地難度較大。（比較復(fù)雜的動效，開發(fā)要還原到一模一樣，需要有效的溝通，涉及到現(xiàn)有的可用軟件及插件，也取決于開發(fā)人員的技術(shù)水平。）

以上的三種類別，我都會拿自己工作中或練習(xí)中做過的實際案例來逐一講解。

首先是情感化動效，這是實習(xí)僧APP的一個真實需求。在引導(dǎo)用戶注冊填寫基本信息時，因為內(nèi)容比較多，擔(dān)心用戶在這個過程中會產(chǎn)生焦慮而放棄填寫，希望通過一些趣味性的小東西來減緩用戶的焦慮，吸引用戶繼續(xù)填寫。因此在第一步性別的選擇上，我做了一個動效。

點擊選中其中一個小人，被選中的小人會有一個被點亮的效果，另一個小人則會扭過頭去看著他。點亮?xí)幸环N被選中的強調(diào)感，而扭頭這個小細節(jié)，是我從QQ移動端底部標簽欄里面得到的靈感。越是小的細節(jié)，越能體現(xiàn)出一個產(chǎn)品的用心程度。

然后是交互動效，這是我之前參加一個比賽做的界面。把交互過程用動效演示出來，能比單純的文字描述更直觀地表達每一次點擊的交互結(jié)果，在設(shè)計交流平臺上發(fā)布自己的作品的時，也會讓自己的作品更精致，更加有吸引力。

這里為了吸引眼球做了一些彈性效果，實際的界面動效需要盡可能簡潔，且不能持續(xù)時間太長。這其中有一部分是前面提到的頁面轉(zhuǎn)場，點擊進入后，新頁面的展開效果會很直觀地表明新開頁面是屬于哪一個入口；點擊報名按鈕，也就是剛剛提到的另一點，組件交互反饋，點擊后在當(dāng)前位置就能得到報名結(jié)果，降低了操作成本和理解成本。

另一個交互動效的案例，是給客戶做的一個真實的H5需求。通過播放動效，讓用戶在整個H5里面參與進來，根據(jù)提示做出相應(yīng)的動作來主導(dǎo)整個H5的向前推進。

最后是綜合動效，包含的動效形式比較多。

插畫動效，在插畫中加上一些循環(huán)的動效，可用于工作中的運營圖，如開屏，活動圖文等，也可以賦予自己的練習(xí)作品新的生命力。

動效二維碼，曾經(jīng)流行過一段時間，會比一般的靜態(tài)二維碼更有特色。這兩個是我在工作中給客戶定制的二維碼?？梢栽诙S碼周圍加上一些循環(huán)的小動效，或者通過處理后直接在二維碼上加入循環(huán)動效。

動態(tài)表情包，可以用逐幀動畫，也能用時間軸來實現(xiàn)。實際工作中的話可以用到IP的延展上，做一套產(chǎn)品IP形象的表情包，也是一種加強品牌化的方式。

Part 3

案例演示

接下來通過逐步演示一個之前有提到過的選擇小人動效，來對動效的制作進行詳細分解。（主要涉及到的是AE非?；A(chǔ)的操作知識，經(jīng)驗豐富的大佬們可以直接略過以下內(nèi)容了~）

在PSD中，先把所有圖層復(fù)制備份，并記得永遠要保留一個備份

選中后定格的畫面是靜止的，將所有圖層合并成一個圖層，作為選中后的畫面，圖層命名為「選中」

然后考慮選中之前包含哪些形式的動效

選中之前，畫面是灰色的，先給所有圖層去色；考慮一下有哪些部分是會涉及到動效的，將它們單獨分層，分別命名，并盡量保持為形狀圖層；將不動的部分合并成一個圖層，命名為「bg」

打開AE，右鍵項目面板，選擇導(dǎo)入-文件（或者直接雙擊項目面板）

選中需要導(dǎo)入的PSD文件，導(dǎo)入為一欄中選擇“合成-保持圖層大小”

點擊確認后，會出來一個彈框，在導(dǎo)入種類一欄中選擇“合成-保持圖層大小”

點擊確認后，項目面板里會出現(xiàn)一個合成，以及一個包含合成里面所有元素的文件夾

雙擊合成就能進入合成里面，下方會出現(xiàn)合成里的所有圖層

準備工作完成后，就可以開始著手動效部分了。首先考慮如何做出嘴巴從微笑到張開嘴大笑的效果

點擊圖層「嘴巴」，然后選擇鋼筆工具，沿著「嘴巴_閉」的形狀給「嘴巴」圖層畫一個蒙版，蒙版模式選擇“相加”，這樣嘴巴就會在蒙版的范圍內(nèi)顯示了

然后給嘴巴的兩種狀態(tài)的不透明度打關(guān)鍵幀，讓嘴巴從閉上的樣子切換到張開的樣子

選中圖層「嘴巴_閉」和「嘴巴」，按快捷T打開不透明度時間軸。第一幀，「嘴巴_閉」不透明度100%，「嘴巴」不透明度0%；第二幀，「嘴巴_閉」不透明度0%，「嘴巴」不透明度100%

接下來需要給「嘴巴」的蒙版路徑打關(guān)鍵幀，做出嘴巴慢慢張開的效果

選中嘴巴圖層，然后拖動蒙版路徑的錨點，把蒙版路徑拖動成嘴巴完全張開的形狀，需要盡量均勻分布錨點。播放時ae會自動將蒙版路徑的形狀從閉嘴過渡到張嘴

現(xiàn)實情況中，嘴巴張開，下巴也會跟著往下動，所以也需要給圖層「下巴」做一個移動的效果

選中圖層「下巴」，按快捷鍵P打開位置時間軸。先給下巴的初始位置打一個關(guān)鍵幀，下巴與嘴巴下方的距離是不變的，可以此為基準來細調(diào)下巴移動的距離，移動下巴的位置AE會自動記錄關(guān)鍵幀。移動的時間和嘴巴張開的時間一致，將下巴位置的關(guān)鍵幀與嘴巴蒙版路徑的關(guān)鍵幀對齊即可

嘴巴張開時臉也應(yīng)該跟著動，所以需要給圖層「臉」的蒙版路徑打關(guān)鍵幀（在PS里的形狀圖層，導(dǎo)入AE后會自動生成形狀蒙版）

先在嘴巴張開的時間點給「臉」的蒙版路徑打一個關(guān)鍵幀，然后往前選到嘴巴閉上的時間點，選中圖層「臉」，拖動蒙版路徑最下面的錨點，讓臉的形狀稍微變小一些，拖動錨點AE會自動記錄關(guān)鍵幀

只是張開嘴巴，顯得有點死板，可以再加一個眨眼睛的效果

在這之前需要選中圖層「眼睛左」，點擊向后平移工具并勾選對齊，把圖層的錨點移動到眼睛中心的位置，然后對圖層「眼睛右」進行同樣的操作

選中兩個眼睛圖層，按快捷鍵S打開縮放時間軸，將縮放的鏈接取消，在嘴巴閉上的時間點給縮放打一個關(guān)鍵幀；往前選一個時間點，將兩個眼睛圖層的上下縮放比例變成0%（同時選中兩個圖層時，變化其中一個圖層的屬性數(shù)值，另一個圖層也會跟著變）；最后在嘴巴張開的時間點，將兩個眼睛圖層的上下縮放比例變成100%

眨眼時眉毛也應(yīng)該跟著動，雖然只需要移動一兩個像素，但就是這種很小的細節(jié)可以讓整個動效更自然和精致

眉毛移動的關(guān)鍵幀位置，和眼睛縮放的關(guān)鍵幀位置是對齊的。選中兩個眉毛圖層，在嘴巴閉上的時間點給眉毛的初始位置打上關(guān)鍵幀，眨眼時眉毛會往下動，所以在眼睛閉上的時間點將眉毛的位置向下移動，最后再往后到睜開眼睛的時間點，將眉毛移動回原位

在張開嘴巴的時間點，給圖層「選中」打上不透明度從0%到100%的關(guān)鍵幀，就有點亮的效果了

下一步要做一個小人回到未選中狀態(tài)并扭過頭去的效果

首先將時間線往后移到適當(dāng)位置，給圖層「選中」打上不透明度從100%到0%的關(guān)鍵幀

然后在「選中」不透明度為0%的時間點，再給「嘴巴」的蒙版路徑、「下巴」的位置、「臉」的蒙版路徑打上關(guān)鍵幀

然后將時間線往后移到適當(dāng)位置，把「嘴巴」的蒙版路徑、「下巴」的位置、「臉」的蒙版路徑的初始關(guān)鍵幀復(fù)制粘貼到當(dāng)前時間點，并給「嘴巴_閉」打上不透明度從0%到100%的關(guān)鍵幀，給「嘴巴」打上不透明度從100%到0%的關(guān)鍵幀

接著來做扭頭的效果

扭頭時，臉上的所有元素都要動。將時間線移到「選中」不透明度為0%的時間點，選中眉毛、眼睛、鼻子、腮紅、嘴巴、下巴、耳朵的所有圖層，給這些圖層的當(dāng)前位置打上關(guān)鍵幀，再往后到閉上嘴巴的時間點，將這些圖層統(tǒng)一往左移動到適當(dāng)?shù)奈恢?，就有扭頭的效果了

扭頭時頭發(fā)也應(yīng)該跟著動，和之前眨眼睛眉毛動一樣，加上一點小細節(jié)會讓整個動效更自然和精致

先在「選中」不透明度為0%的時間點給圖層「頭發(fā)」的蒙版路徑打一個關(guān)鍵幀，再往后到扭過頭的時間點，適當(dāng)調(diào)整「頭發(fā)」的蒙版路徑的錨點

最后，為了做出循環(huán)運動的效果，需要將所有的圖層都回到第一幀的位置和狀態(tài)

先給所有圖層的當(dāng)前狀態(tài)再打一次關(guān)鍵幀，將時間線往后移到適當(dāng)位置，把所有圖層的第一幀復(fù)制粘貼到時間線末尾

整個動效就完成了，播放一下看看效果，有不滿意的地方還可以再調(diào)整一下細節(jié)

其實動效在一開始不是UI設(shè)計師的必要技能，AE最初也是用來做影視特效的。在設(shè)計領(lǐng)域中，有專門的動效設(shè)計師，相對于專業(yè)做動效的設(shè)計師，本文中的內(nèi)容只是很皮毛很基礎(chǔ)的東西。

隨著互聯(lián)網(wǎng)行業(yè)的快速發(fā)展，要求我們必須擁有多方面的技能，才能更好完成自己的工作。有時候換個角度看問題，從其他領(lǐng)域獲得靈感，也許會發(fā)現(xiàn)新的解決問題的方法。不要局限自己的思維，如果你能很從容解決目前工作中提出的需求或遇到的問題，要警惕自己陷入了舒適區(qū)。

希望大家都能學(xué)會T型發(fā)展自己的知識領(lǐng)域，用更多的技能來包裝自己的作品，提升自己的競爭力。畢竟，不斷學(xué)習(xí)是永遠沒有錯的~

感謝你的閱讀，歡迎交流指正~