前段時間在逛B站時無意刷到了大神Guoen關于「動效設計語言」的分享（https://www.bilibili.com/video/BV1qJ411v7jW），他通過自己對生活的觀察和工作的總結，領悟出「用現(xiàn)象傳達感覺，用感覺塑造氣質」的核心理念，并從「自然現(xiàn)象」、「文明現(xiàn)象」、「心理感知現(xiàn)象」幾個方面作了解釋；之后又在知乎上看了他的專欄「動效干貨」（https://zhuanlan.zhihu.com/p/31350812），進一步感受到了大神在設計思維上的過人之處，看完猶如醍醐灌頂，獲益匪淺。但細想他所提及的切入點和案例可能比較高深，有一部分在我自己所涉及到的領域不大用得到，于是現(xiàn)在我在他所提煉的設計語言理論基礎上，結合自己對設計的理解和對生活的觀察，總結一些我的「動態(tài)設計語言」。
我所理解的設計語言是：我們在平時所看到的現(xiàn)象會傳達一種感覺，我們把這種感覺組織成設計語言，之后再通過這種設計語言來模擬想要的效果，用這種效果再現(xiàn)之前所體會到的那種感覺。下面從以下這五大塊內容來闡述：
===========多圖警告===========
一. 物質
1.聚合&破碎
聚合會有產(chǎn)生、匯聚、重塑的感覺，
破碎會有破滅、結束、消失的感覺；
聚合通常可以用在一些比較高端、神圣的物品生成的效果中，例如游戲動漫中某些神器、光武的合成效果（案例來源：https://www.bilibili.com/video/BV1gb411873S?from=search&seid=13420209012272590921）；
破碎可以產(chǎn)生消散、湮滅的效果，例如復聯(lián)中滅霸打了響指之后半數(shù)生靈的湮滅（案例來源：https://www.bilibili.com/video/BV1Sp411d7mf?from=search&seid=70666432352534953），還有小時候看的「鐵甲小寶」中收集到假的和平星會化為粉末飄散等等。
2.透明度
通過透明度的變化，可以讓一個單獨的個體在一個群組中突顯出來或者隱退下去；
很多時候讓一個物體突然發(fā)生變化是很生硬的，這時候有種很好的操作是先讓物體隱退下去，讓其發(fā)生變化后再突顯回來，這時候就很巧妙的讓一種生硬的突變轉換為一種舒適的漸變。生活中一個很常見的例子就是舞臺劇中途需要轉場時，會先讓燈光暗下去，這時候完成場景和道具的調整后再亮起燈光；
當透明度交替變化時就可以產(chǎn)生閃爍提醒的作用，透明度閃爍通常用于暗示該物體即將消失，例如「植物大戰(zhàn)僵尸」中掉下的陽光一段時間沒有點擊收取就會消失，消失前的透明度交替變化就在提醒玩家去點擊，除此之外還可以用在一些游戲中能量、金幣等的消失提醒上。
3.發(fā)光
Guoen的理論中提到，發(fā)光可以產(chǎn)生升級、被賦予的感覺；
這種發(fā)光效果通?？梢栽趧勇⒂螒虻纳夁M化中感受到。升級和進化通常伴隨對象的變化，包括造型、顏色等，這時的發(fā)光就可以有和透明度隱退一樣的優(yōu)勢：發(fā)光過程中的變化可以避免造型、顏色等的突變，從而轉變?yōu)閮H有外形輪廓的漸變；
在一片黑暗中的光芒還可以產(chǎn)生指引、方向感。
4.折射&反射
物體的折射可以帶來神秘未知、多變、科幻的感覺，因為物體內部和外部的世界存在一定差異，會在視覺上造成錯覺；
水滴中折射出的微觀世界與我們肉眼中的現(xiàn)實世界有很大區(qū)別 這種差異讓人對接下去將發(fā)生的事情充滿期待與好奇，并一直看下去（案例來源：https://www.bilibili.com/video/BV1D7411B71R）。
而物體的反射則有些區(qū)別，單一的鏡面反射可以表現(xiàn)出科技感、質感，常見的手段就是掃光；
而復雜反射也可以表現(xiàn)神秘未知、夢幻多變的感覺，例如萬花筒；
事實上透明物體既可以發(fā)生折射又可以發(fā)生反射，具體就要看物體本身的折射率。反射主要用來呈現(xiàn)物體表面的質感，而折射主要用來展示物體內部或背后內容的特征。
二. 動作
1.形變
物體的形變可以展現(xiàn)出彈性、輕松、可愛的感覺，duang～duang的；
當物體的形變搭配上位移則可以彰顯出力量感、速度感，xiu～xiu的；
Guoen之前提到一個關鍵點：物體越軟就越幼稚可愛，相反越硬就越成熟穩(wěn)重。這一點很重要，在后面的許多設計語言中都會涉及到。
2.縮放
物體可以通過放大和縮小來出現(xiàn)和消失；
通過交替縮放則可以起到強調突出的作用；
Ps：很多人會將「縮放」和「呼吸」相混淆，實際上兩者并不一樣。個人認為，縮放和呼吸確實有交集，但是只有動作頻率趨緊生物呼吸的縮放可以稱之為「呼吸」，其他不在一個頻率上的都僅為「縮放」，人如果按常見的縮放頻率呼吸會很容易頭暈缺氧～
3.呼吸
既然提到了呼吸，就來聊聊呼吸。個人認為只要是頻率接近生物呼吸的動作都可以稱之為呼吸，因此除了縮放，還可以是位移、旋轉、透明度變化等等，呼吸效果可以產(chǎn)生規(guī)律性、持續(xù)循環(huán)的感覺，增加對象的生命力和生動性，有的時候呼吸也可以產(chǎn)生比較弱的提示；
觀察后可以發(fā)現(xiàn)，垂直方向上的位移呼吸可以產(chǎn)生懸浮的效果，而生活中常見的鐘擺其實就是旋轉的呼吸，平時在動漫、游戲中的呼吸則更為常見，例如王者榮耀中選擇英雄的界面中，每一個英雄都不是死死站著不動的，而是伴隨正常呼吸而產(chǎn)生的身體起伏和衣角、披風的擺動。
4.旋轉
旋轉可以表現(xiàn)不同的感覺，通過調整物體旋轉的幅度、頻率、旋轉中心、衰減阻力等可以產(chǎn)生不同的效果，例如快頻、有節(jié)奏的旋轉可以產(chǎn)生強調、招呼的感覺；
如果調低旋轉中心，適當降低轉動頻率，并加入一定能量衰減，則讓旋轉產(chǎn)生搖擺、不穩(wěn)定、調皮的感覺。
5.翻轉
翻轉也可以表現(xiàn)不同的感覺，例如一張卡牌在翻轉后立即以相反的方向原路翻回，可以表現(xiàn)一種對立，內心os可能是我不要翻過去！
例如手游「植物大戰(zhàn)僵尸2」中的一個翻牌小游戲，通過翻牌可以將圖案相同的卡牌對應的僵尸消除掉，而如果圖案不相同，則卡牌會立即翻回，表示這次翻牌失??；
如果卡牌以正常的速度進行規(guī)律翻轉，且正反面有明顯區(qū)別，則可以表現(xiàn)出對比，讓人感受到翻轉后所產(chǎn)生的不同；
如果卡牌在翻轉前較為普通、視覺較弱，而在翻轉后呈現(xiàn)較強的視覺效果，則可以在對比的基礎上，突出一種揭秘、展示的感覺；
例如卡牌游戲「爐石」中翻出牌以后，通過酷炫的光效告訴你這是一張很棒的牌，這就是典型的揭秘展示。
6.抖動
物體的抖動也可以產(chǎn)生不同的感覺，當對一個物體進行一個動作，然后物體被動產(chǎn)生抖動，可以產(chǎn)生一種不穩(wěn)定、刺激的感覺；
例如iPhone桌面長按app圖標后，圖標會開始抖動，同時圖標左上角出現(xiàn)刪除icon，這時就在告知用戶此時的圖標進入一種不穩(wěn)定狀態(tài)，此時點叉后會刪除這個app哦；
而當對一個物體進行一個動作后，物體主動產(chǎn)生抖動，可以產(chǎn)生一種錯誤、提醒、突顯的感覺；
例如iPhone的輸密界面，在輸錯密碼的時候，代表隱藏密碼的圓點就會抖動幾下，提醒用戶密碼錯誤，這是一種高效的反饋方式，比在上方顯示「密碼錯誤」幾個字更有用更有趣更直觀；
當一個物體先進行抖動，然后作出其他動作時，這種抖動則可以產(chǎn)生一種緊張、蓄力、預告的感覺；
例如手游「跑跑卡丁車」，在比賽開始倒計時即將結束時，選手的卡丁車會開始抖動，除了表現(xiàn)緊張的氛圍、產(chǎn)生卡丁車正在蓄力準備起跑的感覺以外，這一抖動還可以起到提醒可能正在發(fā)愣的玩家的作用。
7.跳動
物體的跳動可以表現(xiàn)出活潑、招呼、提醒的感覺，同時物體的跳動如果搭配本身的形變效果可以進一步呈現(xiàn)物體的軟硬程度，重復一下剛才的關鍵點：物體越軟就越幼稚可愛，相反越硬就越成熟穩(wěn)重；
例如蘋果電腦桌面的Dock欄的應用啟動效果，相應圖標會彈跳幾下，這種不帶任何形變的跳動不僅可以感受到這個圖標在跟你打招呼說「我正在啟動哦」，還可以感受到蘋果品牌所透露出的成熟穩(wěn)重。
三. 力學
1.緩動
緩動是我們平時在動效設計中常用的技巧，它可以讓動效顯得更逼真更生動，可這是為什么呢？因為現(xiàn)實世界中就到處存在這緩動現(xiàn)象，例如汽車由靜止啟動前進時，由于阻力和慣性的影響，不能立即加速到預期的車速，因此會慢慢加速，當汽車在高速狀態(tài)下剎車停下來時，也是因為阻力和慣性，它不能瞬間剎下車來，需要漸漸慢下來直到停止。
因此緩動呈現(xiàn)的是物體速度變化的快慢，即加速度。緩動可以分為緩入和緩出，緩入表現(xiàn)出啟動、預備的感覺，緩出表現(xiàn)出疲勞、消耗的感覺；
2.蓄力
蓄力字面意思即物體為之后的動作蓄積力量，蓄力可以有多種形式，之前提到的動作抖動就是常見的蓄力，通常用在物體爆炸前；在一些游戲、動漫中經(jīng)?？梢钥吹揭恍┛鋸埖牟环衔锢碓淼男盍π问?，例如動畫片「貓和老鼠」中湯姆在起跑前會在原地快速地跑幾下，雖然沒有發(fā)生位移，但是觀眾可以隱約感覺到它蓄勢待發(fā)，等會一定會跑的飛快；
這里我要提煉一種特殊的蓄力方式，我將其稱之為「反向預動」：當我們掄起錘子準備砸墻時，不會從當前位置開始砸，而是會往相反方向掄，再使勁向前砸去；我們對比急行跳遠和立定跳遠，前者由于可以通過助跑蓄積更多的動能，因此往往比后者跳的更遠；總結一下反向預動本質就是為了積累更多的加速空間，一個人或一個物體的力量有限，所以運動的加速度也很有限，但是如果有更多加速空間，就可以在運動的起始位置具有更大能量和更快速度。
反向預動可以彰顯物體的力量感和速度感，同時由于反向預動具有方向性，因此我們可以通過這一蓄力動作預判出物體接下來的動作，反向預動也可以用在位移、旋轉、縮放等各種動作中，但是通常會用在結束離場時；
3.慣性過沖
慣性過沖可以說與反向預動正好相反，也可以用在位移、旋轉、縮放等各種動作中，表示物體運動時用力過猛收不住，通常用在進場開始時，可以產(chǎn)生能量過大、有趣的感覺；
重復的慣性過沖可以產(chǎn)生回彈效果，但是這種來回慣性過沖的幅度需要逐漸衰減；
4.阻力
摩擦力就是一種典型的阻力，但是除此之外還有很多種阻力形式，但是它們都在對抗物體的運動，從而造成物體的運動效果不符合我們的主觀預期；阻力可以產(chǎn)生固執(zhí)、粘性、殘留的感覺；
當下許多app都會通過下拉頁面的形式來刷新，在這種下拉動作中通常會加入一定阻力，讓人感覺越往下拉，越拉不動，這個效果可以及時給用戶的下拉動作一個反饋，并且增加動作動效的生動性；
很久之前手機版QQ就出現(xiàn)了一個「去除小紅點」的設計，對眾多具有強迫癥的用戶來說就是福音，用戶可以把小紅點拖出去，松手后小紅點就會伴隨著一陣煙霧消失了，這個動效加入了一定的阻力和粘性效果，這樣設計的主要原因是小紅點這個UI元素的面積太小了，用戶拖動時幾乎無法看到這個小紅點，因此加入阻力和粘性效果可以在拖動過程中增加小紅點的展示面積，讓用戶可以獲得這一動作的反饋，這樣還可以避免用戶誤操作意外拖動導致去除小紅點。
四. 相對運動
1.碰撞
碰撞是指兩個以上的物體以一定速度相遇，并按照各自的物理特性做出反應的過程。碰撞可以傳達出對立、抗爭、矛盾的感覺，例如這樣的碰撞就可以說毀滅性的超強對抗，這種沖擊是直擊人心的，讓人心跳加速、呼吸急促...
當然跟之前Guoen所提出的一樣，碰撞在不同物體的軟硬特性上也會呈現(xiàn)一定規(guī)律：「越軟越輕松，越硬越緊張」，可以想象拿兩個玻璃杯砸在一起，即便是不考慮會不會碎，這種硬質物體的碰撞也會讓你的心咯噔一下，相反將兩個抱枕扔一起，不論多大力都不會讓你為此擔心；
單純的碰撞就足以表現(xiàn)出一種對抗性，若以此為鋪墊再搭配一些爆炸效果則可以呈現(xiàn)出較之更甚的視覺沖擊感。
2.聯(lián)動
聯(lián)動是指若干個體按照一定順序、節(jié)奏完成同一動作，整體就會形成具有韻律感的聯(lián)動效應，這時的每一個體不再是脫離整體單獨存在的了。個體之間的聯(lián)動可以呈現(xiàn)出相互關聯(lián)、相互跟隨以及節(jié)奏和律動；
很多時候聯(lián)動可以傳達出循環(huán)、順序的感覺，如果用在loading動效中可以很好地緩解焦慮；
我們在游戲、動漫中經(jīng)常會看到這樣的現(xiàn)象：一個人或一個物體向上飛起，但是下落時卻不是整體一起下落，往往是人先落下，然后這個人的附屬品如圍巾、帽子再按照一定順序依次下落，物體則可能會分為多個部分，按照從上到下的順序依次掉下，這樣的聯(lián)動除了傳遞出很強的順序性，還可以讓原本單一的個體增加許多細節(jié)和生動性；
其實除了動效設計，聯(lián)動這一設計語言可以在生活中找到很多影子，例如千手觀音；
例如音樂噴泉；
以上生活中的例子都可以讓人忍不住看入迷，如果這兩個例子都是視覺上的聯(lián)動，那么還有比如人們在無聊、焦慮的時候常常會不自覺的在桌子上用四個手指按順序輕敲桌面，這種讓人癡迷的聯(lián)動則是觸覺上的；還有比如看到一把吉他，不論是否專門學習過的人，都會忍不住依次撥動6根琴弦，琴箱中傳出的6道琴聲一樣可以在聽覺上給人舒適感，因此聯(lián)動之所以適合做loading動效來緩解焦慮就是因為它可以從多感官上給人一種連續(xù)、規(guī)律的舒適感和律動感。
3.速度差
上文中的聯(lián)動產(chǎn)生的原因是時間差，不同個體只是在不同時間按照相同的速度頻率做了相同的一個動作而已，如果讓不同的個體在同一時間按照不同的速度做同一個動作，則又會產(chǎn)生完全不一樣的感覺。
當在一個黑暗的屋子內點燃一根蠟燭，讓手指從蠟燭旁邊劃過，就會在墻壁上照出手指的影子，這時候蠟燭就讓手指和影子產(chǎn)生了速度差，手指動的慢，影子動的快，這種速度差可以稱之為「影動速度差」，影動速度差的產(chǎn)生是由于光的直線傳播；
當離你不同遠近的兩個人朝著同一方向以同一速度走去，在你看來他們的動作也具有速度差，離你遠的人走的慢，離你近的人走的快，這是由于近大遠小的透視原理造成的，因此這種速度差可以稱之為「透視速度差」；
這兩種速度差不論是何種物理原理造成的，本質都是因為不同物體有著遠近不同的層次，因此速度差都可以在原本扁平的視覺環(huán)境中產(chǎn)生較強的層次感和視差感受（案例來自Dribbble）。
4.聚散
聚散包含兩個過程：當若個個體由原本聚在一起分散到一個適合的間距，或由這個適合間距聚到一起，這個過程可以理解為展開和收起，這個過程通?？梢杂糜诤喕曈X信息、節(jié)約畫面空間；
這一過程的聚散可以用在一些懸浮按鈕的展開收起中；
另一個過程是當若干個個體由一個適合的間距，分散到視線范圍以外，或由視線外聚到這個適合的間距，這個過程可以理解為散開和聚攏，這個過程中的散開可以表現(xiàn)退散、消散的感覺，聚攏則可以表現(xiàn)呈現(xiàn)、注意的感覺；
這一過程通常用在一系列元素的出現(xiàn)和消失，例如iOS解鎖后的桌面動效；
5.快慢動作
快動作和慢動作是我們在影視作品中常見的技巧，就像「速度與激情」中一個飛速的相遇總能吊足觀眾的胃口；
實際上快動作和慢動作在表達上具有不同的效果，慢動作刻意地降低了畫面速率，給觀眾留足了時間去仔細品讀和關注，這段時間也會讓觀眾對接下來即將發(fā)生的事充滿期待；
而快動作則恰恰相反，讓某一段動作快速播放，這一段動作就會顯得格外刺激、有節(jié)奏感，當然與慢動作進行對比就會顯得更容易忽視；
通過快慢動作的合理分配可以更好的調動觀眾觀賞畫面的目光，例如在我們常見的大轉盤游戲中，當按下按鈕時轉盤會飛速旋轉，這時會讓觀眾相對忽視前面所轉過的內容，并產(chǎn)生刺激感、興奮感；當轉盤轉動的能量即將耗盡時轉盤逐漸慢下來，這時觀眾就會格外關注轉盤內容，并對可能轉到的位置充滿期待，合理安排動畫的快慢節(jié)奏，既可以減少動畫時間的浪費，又可以確保觀眾全程保持關注和積極性。
五. 生物行為
1.凝視
當一個物體的動作根據(jù)另一個物體的位移變化時，就會產(chǎn)生一種凝視效果，這種動作可以是旋轉、聚散甚至微弱的位移，凝視可以產(chǎn)生持續(xù)關注的感覺；
手機QQ在前幾天上線一個標簽欄的情感化設計，當用戶按住標簽欄任意icon的同時往上滑動，所有標簽欄中的icon都會產(chǎn)生凝視觸點的效果，而且這種凝視帶有擬人化，通過icon中五官、形態(tài)以及輕微偏移來傳達；
此外，這種凝視現(xiàn)象在游戲中也很常見，例如熱門手游「陰陽師」中，當一個式神前進向對手發(fā)起進攻時，隊伍中的其他式神都會將臉轉向他，并保持持續(xù)的凝視，這種效果在原本就有角色的游戲中可以傳遞很強的情感化，仿佛在告訴隊友「兄弟你大膽上前干吧 我們都在后面支持你！」，在這樣的隊伍中可以感受到很強的團隊凝聚力；相反地，如果我們拿出另一款手游進行對比，例如「夢幻西游」中的隊伍就不夠團結了，每個角色都自顧自上前戰(zhàn)斗，仿佛在說「你打你的 干我屁事」；
凝視可以表現(xiàn)持續(xù)的關注，但是對凝視進行適當?shù)耐卣咕涂梢詡鬟f出不同的感受，例如Readme和B站的登錄界面中，分別有貓頭鷹和BILIBILI娘凝視著你的登錄操作，但是到了輸入密碼的環(huán)節(jié)（即激活密碼輸入框時），原本凝視你的角色就會自覺地捂住眼睛。凝視本身是關注用戶的情感體現(xiàn)，但是在輸密等比較私密的操作中，用戶反而不希望被關注，盡管就算他們繼續(xù)凝視你輸密也不會造成密碼泄漏，但是這種情感化的設計可以增加用戶在心理上的安全感信任感，以及對產(chǎn)品的好感。
2.試探
試探是指一個物體從原本一個掩體后或者畫面外進入畫面中的現(xiàn)象，單純這樣的線性行為會顯得平淡枯燥，因此通常會在此基礎上加入更多細節(jié)上的動作設計。當物體進入畫面后，附加一些旋轉、抖動等動作時，可以傳達出吸引、招呼和調皮的感覺，例如我們常見的打地鼠游戲，地鼠鉆出洞來就是在招惹你吸引你的注意；
我們可以在常見的一些桌面寵物、營銷浮標入口中看到這種調皮可愛的試探現(xiàn)象（由于找不到QQ寵物的案例，暫時拿只瑞星小獅子做示例，一樣調皮可愛）；
當物體進入畫面的速度十分緩慢，離開畫面的速度很快時，就可以傳達出小心、謹慎的感覺，例如槍戰(zhàn)片、FPS游戲中，角色會先躲在掩體后面，為探查情況或反擊敵人需要探出身體，這時候不確定外面的情況必須小心翼翼地慢慢探出身，當發(fā)現(xiàn)敵人時或敵人對你進行攻擊時，你為了活命必然以迅雷不及掩耳盜鈴之勢縮回到掩體后面，這一串動作就充分表現(xiàn)出小心、謹慎的試探行為，而且凡是滿足「慢出快進」的動作都可以傳遞這種感覺；
3.躲避
很多時候當兩個不相關的物體相遇時會自動排斥，就像磁鐵的同性相斥，這種躲避行為在告訴你這樣的操作是錯誤的或者不合適的，當然有的時候這種躲避單純是為了給位移騰出空位；
躲避行為可以是通過保持一定間距的位移來實現(xiàn)，也可以通過縮放等形式；
我們在手機桌面上移動App圖標時就經(jīng)常會看到這種躲避行為，這并不是因為錯誤產(chǎn)生的，而是為了給移動圖標騰出空位；
4.吸引
與躲避相對應，當兩個相關的物體靠近時就會自動吸引，就像磁鐵的異性相斥，這種吸引的行為就會暗示你這兩個元素是有關系的，可以傳達引力、相關、預操作的感覺；
除了位移也可以通過縮放來體現(xiàn)；
例如錘子Smartism系統(tǒng)中的One Step，用戶可以將一個應用中的某些內容拖動到另一個應用中，這個快捷操作中為了提高操作效率、降低誤操作的可能，在拖動內容靠近目標App的圖標時，這個圖標會放大，暗示這個動作將會把拖動的內容與相應的應該產(chǎn)生關聯(lián)；
生物行為中的躲避和吸引總結一下就是：「避免相關的 就算相遇了也要躲開；希望相關的 就算還未相遇也要靠近」。
以上 就是我在看了Guoen的理論后自己總結的動態(tài)設計語言，部分內容是在Guoen的基礎上發(fā)散開的，部分內容是自己在生活中感受到記錄下的。不論是Guoen總結的還是我所歸納的，設計語言的內容其實不是關鍵，每個人對生活的感悟和提煉都會有所不同，而且生活那么豐富，從中總結歸納設計語言肯定不可能總結的完，最重要的是學習這種提煉設計語言的思維：我們在平時所看到的現(xiàn)象會傳達一種感覺，我們把這種感覺組織成設計語言，之后再通過這種設計語言來模擬想要的效果，用這種效果再現(xiàn)之前所體會到的那種感覺。我們在生活中、玩游戲時、看劇時多加注意，任何讓你心動的感覺、讓你內心震撼的感覺，都要記下來，思考這個瞬間為什么能讓你產(chǎn)生這種感覺，抓住核心，以后再將它用在設計中。
