很可惜 T 。T 您現(xiàn)在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請(qǐng)把文章發(fā)送到郵箱tougao@appcpx.com，一經(jīng)錄用會(huì)有專(zhuān)人和您聯(lián)系
咨詢(xún)?nèi)绾纬蔀榇河鹱髡哒?qǐng)聯(lián)系：鳥(niǎo)哥筆記小羽毛（ngbjxym）
UI設(shè)計(jì)中，好的動(dòng)效總能第一時(shí)間抓住用戶的注意力，通過(guò)多種形式的動(dòng)效能夠讓用戶與界面產(chǎn)生交互并確保良好的使用體驗(yàn)。
本次主要從動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度、緩動(dòng)類(lèi)型和動(dòng)效編排三方面，分析在設(shè)計(jì)UI動(dòng)效的過(guò)程中需要考慮的因素~
動(dòng)效設(shè)計(jì)中的持續(xù)時(shí)長(zhǎng)和速度是兩個(gè)密切相關(guān)的因素。在動(dòng)效設(shè)計(jì)中，需要確保動(dòng)效不要移動(dòng)得太快或太慢，從而影響可用性，破壞使用體驗(yàn)。
那么，動(dòng)畫(huà)的最佳時(shí)長(zhǎng)是多少呢？
一般來(lái)說(shuō)，標(biāo)準(zhǔn)的UI動(dòng)畫(huà)時(shí)長(zhǎng)應(yīng)該在200毫秒-500毫秒之間——這組數(shù)字是基于我們大腦的處理能力而得到的時(shí)長(zhǎng)區(qū)間。
小于100毫秒的動(dòng)畫(huà)是瞬時(shí)的，不會(huì)被用戶注意到；如果時(shí)長(zhǎng)大于1000毫秒(1s)，會(huì)讓用戶感到動(dòng)畫(huà)很緩慢，帶來(lái)一種拖沓的感覺(jué)。
同時(shí)，我們也要考慮其他可能影響動(dòng)畫(huà)速度的因素：
屏幕尺寸：由于手機(jī)和電腦有著不同物理尺寸的屏幕，尺寸的不同會(huì)影響動(dòng)效的速度，屏幕越小，運(yùn)動(dòng)路徑越短。對(duì)于移動(dòng)屏幕，動(dòng)效速度應(yīng)保持在200-300ms之間，平板電腦應(yīng)該保持在400-450ms之間；
web動(dòng)畫(huà)：在瀏覽網(wǎng)頁(yè)時(shí)，我們更習(xí)慣于網(wǎng)站的即時(shí)響應(yīng)效果，因此網(wǎng)站的動(dòng)畫(huà)速度也更快。因此對(duì)于網(wǎng)站來(lái)說(shuō)，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的時(shí)長(zhǎng)保持在150-200毫秒之間，更符合用戶的瀏覽習(xí)慣。
以上提到的區(qū)間是相對(duì)保準(zhǔn)的動(dòng)效時(shí)長(zhǎng)，并不是一成不變，具體的動(dòng)效時(shí)長(zhǎng)和速度需要根據(jù)具體的需求、場(chǎng)景，靈活分析。
現(xiàn)實(shí)中的物體由于受到重力、阻力等因素的影響，速度并不是恒定不變的。換句話說(shuō)，物體都會(huì)有加速、減速、平滑等不同的運(yùn)動(dòng)狀態(tài)。
為了使動(dòng)畫(huà)更真實(shí)，我們需通過(guò)緩動(dòng)來(lái)模擬出這些因素，讓界面中的元素運(yùn)動(dòng)的更自然，避免過(guò)于死板。
緩動(dòng)決定了元素在運(yùn)動(dòng)過(guò)程中速度的變化，常用的類(lèi)型包括：線性勻速、緩入、緩出、緩入緩出。
1) 線性勻速
當(dāng)元素沒(méi)有受到物理力的影響，速度保持恒定，就會(huì)發(fā)生線性勻速運(yùn)動(dòng)的效果。
線性勻速在改變?cè)匚恢玫脑O(shè)計(jì)中使用相對(duì)較少，更多是用在改變?cè)氐臓顟B(tài)、屬性（透明度變化）等不涉及元素位置改變的設(shè)計(jì)中。
2) 緩入
緩入對(duì)應(yīng)于元素的加速曲線，通常用于當(dāng)對(duì)象從靜止到加速離開(kāi)用戶視線的過(guò)程。例如一輛汽車(chē)駛出時(shí)，速度從0開(kāi)始逐漸增加，然后在駛出時(shí)達(dá)到最大值。
3) 緩出
緩出是緩入的對(duì)立面，用于屏幕上的對(duì)象從高峰值進(jìn)入，逐漸減速直到到達(dá)特定位置的過(guò)程。例如一個(gè)人從屏幕外全速進(jìn)入屏幕內(nèi)時(shí)，進(jìn)入畫(huà)面時(shí)的速度最高，然后逐漸減速到零。
4) 緩入緩出
緩入緩出也稱(chēng)為標(biāo)準(zhǔn)曲線，指對(duì)象從畫(huà)面的一個(gè)部分移動(dòng)到另一個(gè)部分，整個(gè)移動(dòng)過(guò)程中始終保持在幀中，通常用于為在同一界面中改變位置的元素創(chuàng)建動(dòng)畫(huà)。例如一個(gè)鐘擺，它的速度從峰值開(kāi)始，緩慢減速到0，然后再次加速，不斷在一個(gè)固定的位置區(qū)域循環(huán)。
需要注意的是，不對(duì)稱(chēng)標(biāo)準(zhǔn)曲線會(huì)使物體的運(yùn)動(dòng)變得更加自然。
在使用緩入緩出時(shí)，要強(qiáng)調(diào)減速而不是加速，因此減速的時(shí)間要比加速時(shí)間要長(zhǎng)。在這種情況下，用戶會(huì)更關(guān)注物體的后半段，從而更容易關(guān)注物體的新?tīng)顟B(tài)。
動(dòng)效編排是指對(duì)界面中不同的元素進(jìn)行統(tǒng)一、有序的編排，讓元素間更協(xié)調(diào)，通過(guò)更流暢的動(dòng)效來(lái)引導(dǎo)用戶的注意力。動(dòng)效編排包括平等互動(dòng)和從屬互動(dòng)。
1) 平等互動(dòng)
平等互動(dòng)指對(duì)象根據(jù)相同的規(guī)則移動(dòng)。
在這種情況下，界面中的元素會(huì)變得整齊有序。以界面中的卡片列表為例，平等的互動(dòng)編排保證卡片一個(gè)接一個(gè)，從上到下以一種協(xié)調(diào)的方式出現(xiàn)，能夠從上到下引導(dǎo)用戶的注意力。
如果不按照這種編排規(guī)則，界面中元素的出現(xiàn)順序會(huì)產(chǎn)生混亂，從而影響用戶的瀏覽。
在表格類(lèi)頁(yè)面中，元素的運(yùn)動(dòng)情況會(huì)更復(fù)雜。
在表格視圖中，應(yīng)該按照對(duì)角線的方式來(lái)引導(dǎo)用戶的關(guān)注點(diǎn)。如果使用水平方向的運(yùn)動(dòng)讓元素一個(gè)一個(gè)展示，會(huì)造成元素的加載時(shí)間過(guò)長(zhǎng)，用戶的瀏覽路線來(lái)回曲折，體驗(yàn)不流暢。
2) 從屬互動(dòng)
從屬互動(dòng)指界面中有有一個(gè)主體對(duì)象，用來(lái)吸引用戶的注意力，界面中的其他元素都從屬于這個(gè)主體對(duì)象。這樣的編排方式讓用戶的注意力更聚焦到界面中重要的元素上，保持元素的運(yùn)動(dòng)主次更清晰。
還需要注意元素的運(yùn)動(dòng)曲線。如果一個(gè)元素不成比例地改變大小，例如從一個(gè)正方形變成一個(gè)矩形，那么元素應(yīng)該沿著弧線移動(dòng)。
如果元素的大小按比例變化，元素應(yīng)該沿著直線運(yùn)動(dòng)。
此外，我們可以將曲線運(yùn)動(dòng)分為兩類(lèi)：垂直向外（水平開(kāi)始，垂直結(jié)束）、水平向外（垂直開(kāi)始，水平結(jié)束）。
例如如果頁(yè)面上下垂直滾動(dòng)，頁(yè)面中的元素應(yīng)該以垂直向外的方式展開(kāi)，先移動(dòng)到右側(cè)，然后向下運(yùn)動(dòng)。如果頁(yè)面是水平滑動(dòng)，元素則以水平向外的方式展開(kāi)。
另一個(gè)問(wèn)題是元素的運(yùn)動(dòng)路徑相交時(shí)，元素間應(yīng)該遵循物理定律，不能互相穿越。或者在元素移動(dòng)前將元素提升到最上層，讓動(dòng)效看起來(lái)更自然。
當(dāng)看到一個(gè)好看的動(dòng)效時(shí)，常常會(huì)有小伙伴問(wèn)到使用什么軟件做的。
目前有很多軟件可以進(jìn)行UI動(dòng)效設(shè)計(jì)，借著這次講解動(dòng)效的機(jī)會(huì)，我簡(jiǎn)單列舉三個(gè)自己用過(guò)并感覺(jué)還不錯(cuò)的軟件，僅供參考，建議大家可以去親自體驗(yàn)一下每款軟件。
ProtoPie
ProtoPie是一款輕量級(jí)的動(dòng)效軟件，將頁(yè)面原型、交互和動(dòng)畫(huà)整合到了一起，既可以直接在里面設(shè)計(jì)高保真的UI頁(yè)面，還能讓這些頁(yè)面快速動(dòng)起來(lái)。
ProtoPie操作頁(yè)面設(shè)計(jì)簡(jiǎn)潔，上手相對(duì)簡(jiǎn)單，沒(méi)用過(guò)的新手也能快速開(kāi)始。ProtoPie通常和Sketch搭配起來(lái)使用，先在Sketch里設(shè)計(jì)UI頁(yè)面，之后導(dǎo)入到ProtoPie中進(jìn)行動(dòng)效設(shè)計(jì)，效率賊高。
Principle
Principle也算輕量的動(dòng)效軟件，相對(duì)更成熟。Principle通常是和Axure搭配使用，產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師在設(shè)計(jì)界面原型和交互時(shí)用的比較多。需要注意的是，Principle只能在MAC系統(tǒng)中使用，可能對(duì)于不熟悉它的人來(lái)說(shuō)，剛上手使用可能會(huì)有一點(diǎn)點(diǎn)困難。
After Effects
AE作為一個(gè)老牌的設(shè)計(jì)工具，大家應(yīng)該都或多或少接觸過(guò)。AE功能非常強(qiáng)大，可以實(shí)現(xiàn)很多復(fù)雜的動(dòng)效效果，但操作起來(lái)相對(duì)復(fù)雜，學(xué)習(xí)成本也相對(duì)較高。
目前大部分的動(dòng)效都可以通過(guò)這三款軟件做出來(lái)，小伙伴們可以根據(jù)自己的需求，選擇適合自己的動(dòng)效軟件，從而提升設(shè)計(jì)效率。
以上就是UI動(dòng)效設(shè)計(jì)需要考慮的三要素，希望通過(guò)這些內(nèi)容能幫助你對(duì)動(dòng)效設(shè)計(jì)有更多的認(rèn)識(shí)和思考。
本文為作者獨(dú)立觀點(diǎn)，不代表鳥(niǎo)哥筆記立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
《鳥(niǎo)哥筆記版權(quán)及免責(zé)申明》 如對(duì)文章、圖片、字體等版權(quán)有疑問(wèn)，請(qǐng)點(diǎn)擊 反饋舉報(bào)
我們致力于提供一個(gè)高質(zhì)量?jī)?nèi)容的交流平臺(tái)。為落實(shí)國(guó)家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評(píng)論自律管理，為了保護(hù)用戶創(chuàng)造的內(nèi)容、維護(hù)開(kāi)放、真實(shí)、專(zhuān)業(yè)的平臺(tái)氛圍，我們團(tuán)隊(duì)將依據(jù)本公約中的條款對(duì)注冊(cè)用戶和發(fā)布在本平臺(tái)的內(nèi)容進(jìn)行管理。平臺(tái)鼓勵(lì)用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時(shí)也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國(guó)未成年人保護(hù)法》等法律法規(guī)，對(duì)以下違法、不良信息或存在危害的行為進(jìn)行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對(duì)憲法所確定的基本原則；
2)危害國(guó)家安全，泄露國(guó)家秘密，顛覆國(guó)家政權(quán)，破壞國(guó)家統(tǒng)一，損害國(guó)家榮譽(yù)和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽(yù)、榮譽(yù)；
4)宣揚(yáng)恐怖主義、極端主義或者煽動(dòng)實(shí)施恐怖活動(dòng)、極端主義活動(dòng)；
5)煽動(dòng)民族仇恨、民族歧視，破壞民族團(tuán)結(jié)；
6)破壞國(guó)家宗教政策，宣揚(yáng)邪教和封建迷信；
7)散布謠言，擾亂社會(huì)秩序，破壞社會(huì)穩(wěn)定；
8)宣揚(yáng)淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動(dòng)非法集會(huì)、結(jié)社、游行、示威、聚眾擾亂社會(huì)秩序；
10)侮辱或者誹謗他人，侵害他人名譽(yù)、隱私和其他合法權(quán)益；
11)通過(guò)網(wǎng)絡(luò)以文字、圖片、音視頻等形式，對(duì)未成年人實(shí)施侮辱、誹謗、威脅或者惡意損害未成年人形象進(jìn)行網(wǎng)絡(luò)欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻(xiàn)內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動(dòng)成果；
2)誹謗：捏造、散布虛假事實(shí)，損害他人名譽(yù)；
3)嘲諷：以比喻、夸張、侮辱性的手法對(duì)他人或其行為進(jìn)行揭露或描述，以此來(lái)激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對(duì)方對(duì)自己的言論作出回應(yīng)，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對(duì)方難堪；
6)謾罵：以不文明的語(yǔ)言對(duì)他人進(jìn)行負(fù)面評(píng)價(jià)；
7)歧視：煽動(dòng)人群歧視、地域歧視等，針對(duì)他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類(lèi)的攻擊；
8)威脅：許諾以不良的后果來(lái)迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗(yàn)、擾亂本網(wǎng)站秩序的內(nèi)容，或進(jìn)行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣(mài)產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個(gè)帳號(hào)多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個(gè)廣告帳號(hào)互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點(diǎn)擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當(dāng)曝光；
6)購(gòu)買(mǎi)或出售帳號(hào)之間虛假地互動(dòng)，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營(yíng)銷(xiāo)內(nèi)容，如通過(guò)偽造經(jīng)歷、冒充他人等方式進(jìn)行惡意營(yíng)銷(xiāo)；
8)使用特殊符號(hào)、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗(yàn)的細(xì)節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚(yáng)低俗、庸俗、媚俗內(nèi)容。
5. 不實(shí)信息，主要表現(xiàn)為：
1)可能存在事實(shí)性錯(cuò)誤或者造謠等內(nèi)容；
2)存在事實(shí)夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容；
3)偽造身份、冒充他人，通過(guò)頭像、用戶名等個(gè)人信息暗示自己具有特定身份，或與特定機(jī)構(gòu)或個(gè)人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測(cè)字、占卜、解夢(mèng)、化解厄運(yùn)、使用迷信方式治?。?br /> 2)求推薦算命看相大師；
3)針對(duì)具體風(fēng)水等問(wèn)題進(jìn)行求助或咨詢(xún)；
4)問(wèn)自己或他人的八字、六爻、星盤(pán)、手相、面相、五行缺失，包括通過(guò)占卜方法問(wèn)婚姻、前程、運(yùn)勢(shì)，東西寵物丟了能不能找回、取名改名等；
7. 文章標(biāo)題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來(lái)誘導(dǎo)用戶；
2)內(nèi)容與標(biāo)題之間存在嚴(yán)重不實(shí)或者原意扭曲；
3)使用夸張標(biāo)題，內(nèi)容與標(biāo)題嚴(yán)重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費(fèi)、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動(dòng)「飯圈」粉絲攀比炫富、奢靡享樂(lè)等行為
4)以號(hào)召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號(hào)」形式刷量控評(píng)等行為
5)通過(guò)「蹭熱點(diǎn)」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會(huì)公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的；
2)不當(dāng)評(píng)述自然災(zāi)害、重大事故等災(zāi)難的；
3)美化、粉飾侵略戰(zhàn)爭(zhēng)行為的；
4)法律、行政法規(guī)禁止，或可能對(duì)網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過(guò)主動(dòng)發(fā)現(xiàn)和接受用戶舉報(bào)兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺(tái)氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當(dāng)一個(gè)用戶發(fā)布違規(guī)內(nèi)容時(shí)，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴(yán)重程度，對(duì)帳號(hào)進(jìn)行禁言 1 天、7 天、15 天直至永久禁言或封停賬號(hào)的處罰。當(dāng)涉及欺凌未成年人、危害未成年人身心健康、通過(guò)作弊手段注冊(cè)、使用帳號(hào)，或者濫用多個(gè)帳號(hào)發(fā)布違規(guī)內(nèi)容時(shí)，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺(tái)管理經(jīng)驗(yàn)的不斷豐富，本網(wǎng)站出于維護(hù)本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對(duì)本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過(guò)「建議反饋」功能向本網(wǎng)站進(jìn)行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)