2019-8-20 資深UI設計者
在我們平時的設計工作中，經(jīng)常會需要做一些有動感的畫面，去體現(xiàn)某些產(chǎn)品所具有的運動屬性，比如汽車的速度感、球鞋的運動感等等?？墒怯捎谳d體或是成本的原因，導致客戶沒辦法投入動態(tài)畫面的制作，所以就要求我們只能在靜態(tài)的平面中去創(chuàng)造動感，讓原本不會動的畫面看上去好像也能動起來，這就是今天要為大家?guī)淼膬?nèi)容。
我們先來看一組照片，這些貓的圖片明明都是靜態(tài)的，可是為什么我們看到這些照片的時候，卻能夠明顯的感覺到貓在跳躍的動感呢，這個主要是因為我們的心理作用。
正如佛教里所講的，不是風在動，也不是云在動，而是心在動。那些看上去帶有動感的圖片并不是真的在動，也不是屏幕在動，而是我們的心理作用。
所以我們做設計的時候，就可以很好的利用這一心理作用，去實現(xiàn)一些具有動感的畫面。既然要做動感的畫面，我們需要先了解，關于運動在物理學中的定義。
物理學中的運動，必須具備兩個要素，分別是速度和能量。
那我們就可以總結出兩種畫面中的動勢，第一種就是具備速度和方向的動勢，比如畫面中這兩張圖片，我們可以很明顯地感覺到，圖片中的主體是正在運動的，并且具有很快地速度和明確的運動方向。
第二種就是靜止的，但具有強烈能量的動勢。比如畫面中這兩張圖片都沒有在動，可是我們也能夠感覺到它的動感。如果說前一種動勢更注重于刻畫運動的速度感，那么第二種則更加注重刻畫一觸即發(fā)的能量感。
那么，我們在平面中應該如何去創(chuàng)造動感呢？其實很簡單，因為張力在畫面中不平衡時，便會產(chǎn)生動感。
所謂張力就是畫面中元素向外擴張的心理作用力。
這么解釋可能有些抽象，我們可以將張力與萬有引力進行類比。萬有引力就是，任意兩個物體具有通過連線方向上的力相互吸引。而我們可以將張力定義為畫面中任意兩個元素，通過連線方向上的力相互吸引。也就是說畫面中的任意元素都有相互吸引的力。
比如我們在一個畫面中的上下左右各放一個圓點，然后在畫面的正中間放一個較大的點，中間這個點由于均衡地受到上下左右吸引力的作用，所以它所受到的張力是平衡的。
當我們將中間這個大點往上移動，大點受到的張力平衡就會被打破，產(chǎn)生了要往下墜的動勢。
根據(jù)萬有引力定律公式，物體所受的吸引力和質(zhì)量是成正比的。
所以我們同樣可以類比到張力中來，畫面中打破平衡的那個元素的質(zhì)量和面積越大，所帶來的動感就會越強烈。
看完了剛才所講的這些，相信大家現(xiàn)在心里大概都會想起一句話，就是聽過很多道理，依然過不好這一生。的確，聽了這么多的理論公式，難免會越聽越懵。而且我們在做設計的時候，也不可能去測量畫面中每一個元素的大小、間距、方向，也不可能把每一個元素之間的張力進行量化，然后再用公式去計算出動感的大小強弱。那大家肯定還會繼續(xù)追問了，那么到底該如何去制造動感呢？
這里我總結了三點產(chǎn)生動感的原因，分別是基于生活經(jīng)驗與心理認知、誘導視線移動，以及非平衡狀態(tài)下產(chǎn)生的視覺沖擊。
我們先來看基于生活經(jīng)驗與心理認知，每個人在成長的過程中都會碰到許多人和事，并且對不同的事物會總結出一套規(guī)律和認知，也可以說是刻板印象，所以我們就能感覺到一件事物是運動的還是靜止的。
比如這兩個小人，雖然只是一個輪廓，但是我們卻能感覺到左邊的人是站立的，靜止的，而右邊的人正在走路，是運動中的。
這樣的例子很多，例如書本是靜，車子是動。
樹懶是靜，猴子是動的。
另外由于人類擁有一種組織傾向，所以當我們看到某一個運動的瞬間時，會自動腦補中出他運動的過程。比如這張靜態(tài)圖片，相信很多人看到時都會腦補出那個視頻。
但是這里有一個問題，就是不同的人他的生活經(jīng)驗是不同的，對于事物的認知和理解也就不同，可能對于一部分人來說這是具有動感的，而對另一部分人來說卻是靜止的。比如剛才那個打籃球的圖片，如果是沒看過視頻的人，當然就腦補不出他的動感了。所以對于這種刻板印象的利用，我們需要根據(jù)受眾的具體特征具體分析，千萬不要盲目使用。
接下來我們來講講第二種情況，誘導視線移動。由于運動是相對的，所以我們在看東西的時候，視線移動也可以理解為是物體相對視線發(fā)生了移動。
比如我們在看報紙的時候，從左上角往右下角看，在我們眼睛里出現(xiàn)的畫面是這樣的，從而便產(chǎn)生了好像報紙在動的動感。
最簡單移動的案例就是箭頭，例如這是一條水平的直線，我們會認為他是靜止的，而當我們在一端加上箭頭之后，我們的眼睛就會隨著箭頭所指方向移動，從而產(chǎn)生動感。
這兩個都是通過一些指向性的圖形進行引導視線移動的作品。
接下來我們來說一下第三種情況，非平衡狀態(tài)下產(chǎn)生的視覺沖擊。
比如在天平的兩端各放一只豬，那么這個天平就是處于一個平衡的狀態(tài)。
當我們在其中一邊再加一只豬時，天平就會失去平衡，重量更大的一邊會往下倒，直到找到一個新的平衡。
而我們的大腦其實也和天平相似，當我們看到一些不平衡的畫面時，我們就會有把它轉換為平衡狀態(tài)的傾向，所以動感的產(chǎn)生，也就是大腦腦補不平衡到平衡的這個運動過程。
我們在半空中放一塊石頭，由于這塊石頭受到重力的作用，處于一個不平衡的狀態(tài)，所以我們認為他有向下掉的趨勢，直到與地面接觸找到新的平衡狀態(tài)。
如果我們把石頭換成一個氣球，那么情況就相反了，由于氣球受到重力作用的同時也受到了更大的浮力，所以氣球會有往上飄的趨勢。
舉一個更加能說明的例子，其實我們大多數(shù)人或多或少會有一些強迫癥，比如看到這種一只鉛筆沒對齊的畫面就會很難受，特別想把它懟回去。
所以我們就會腦補出這只鉛筆往左移動的過程，從而產(chǎn)生了動感。
這兩個海報都是通過創(chuàng)造一些不平衡的場景帶來刺激感，從而產(chǎn)生動感。例如顛倒的房子和懸空的蒸籠。
經(jīng)過前面的講解，相信大家應該對動感是如何產(chǎn)生的，有了一定的認識，但是，我們剛剛只是從理論的角度去講解了動感是如何產(chǎn)生的，運用到實際的設計中可能還是會一頭霧水。那接下來的部分就是真正的干貨環(huán)節(jié)了，去給大家講一些比較實用的制造動感的技巧。
這里總結了 9 個小技巧，我們一個個來看。
我們在前面提到了當我們看到某一個運動瞬間時，我們就會腦補出整個運動過程。那我們就可以反過來，從運動過程中捕捉某一個瞬間，用這一個瞬間來表達平面中的動感。
這里可以分為兩種情況，一個是捕捉運動剛開始的瞬間，強調(diào)運動剛開始的那種能量感。
這是兩個捕捉運動開始瞬間的例子，兩名運動員都穿好了裝備，雖然還沒開始動，但是卻能感受到一觸即發(fā)的緊張感。
第二種就是捕捉運動過程的某一瞬間，這種方式帶來的動感會比上一種強烈得多。
例如這兩個例子都是捕捉了運動員正在運動中的瞬間。
這種方式所傳達的動感強弱是由運動物體的動作姿態(tài)所決定的，所以我們需要認真比較每一瞬間的動作，選出最適合的一幀。
第二種技巧是傾斜構圖，一般橫線和豎線都會給我們一種穩(wěn)定平衡的感覺，而斜線相對于橫線和豎線來說，則會給我們帶來強烈的不平衡感。
例如這些圖片，無論是邁克爾·杰克遜的經(jīng)典舞蹈動作，還是比薩斜塔，都給我們帶來一種不安定、危險、不平衡的視覺沖擊。通過這種不平衡感從而產(chǎn)生動感。
我們觀察這些線，會發(fā)現(xiàn) 45° 時的斜線相對于橫線和豎線的傾斜角度最大，所以 45° 傾斜時不平衡感最強，動感也最強烈。
漫畫中的傾斜構圖
在漫畫作品中經(jīng)常會將劇情畫在傾斜的格子中，目的是為了彌補漫畫紙質(zhì)作品的缺陷，強化漫畫內(nèi)容的動感。
電影中的傾斜鏡頭
在電影中也會故意用到傾斜的鏡頭，由于電影本身就是動態(tài)的，所以運用傾斜鏡頭一般是用來強調(diào)危機感、動蕩不安的漂泊感等等。
攝影中的傾斜鏡頭
攝影作品中也會用到傾斜視角，這兩張都是通過傾斜視角強化速度感的例子。
文字傾斜
那么我們看看傾斜在設計中是如何使用的，首先可以是文字傾斜，這兩個海報的人物主體都是豎直的，通過文字傾斜來增加動感。
主體傾斜
這兩張海報則是保持文字水平排列，將主體進行傾斜處理從而帶出動感。
疊加傾斜色塊
我們也可以將文字和主體都水平或者豎直放置，然后添加傾斜的色塊強化動感。
畫面整體傾斜
這種是將包括主體和文字在內(nèi)的畫面整體進行同一角度傾斜處理。
多角度傾斜
最后這種是難度比較高的，畫面中出現(xiàn)了多個角度的傾斜對比，畫面十分靈活且動感十足。
接下來看看第三種傾斜技巧，錯位。什么是錯位呢？就像這輛小車一樣，他在運動的過程中，身后會產(chǎn)生的一些虛影錯位，使得畫面中的一部分被破壞了，視覺需要在腦子里想象補充這一被破壞的部分，使畫面還原為原本的樣貌，從而產(chǎn)生運動感。
重復
錯位這種技巧我們也可以分為幾種類型，首先第一種就是重復，通過重復的手法去模擬物體的運動軌跡，讓人腦補運動的過程，從而產(chǎn)生動感。
模糊
第二種就是通過將背景或者是主體進行模糊，從而傳達動感。第一張圖片是通過模糊主體身后的背景去產(chǎn)生動感，而第二張則是通過模糊文字的外輪廓從而產(chǎn)生一種收放的動感。
錯開
第三種是錯開，就是將畫面的某一個部分進行錯開處理，讓畫面遭到破壞，需要人腦去修補這部分的破壞，從而產(chǎn)生運動感。
其他
除了上面三種還有許多別的類型，例如通過車輛行駛濺起的水花，融化往下低落的液體等等，都可以造成對畫面的破壞，從而制造動感。
對于集中與發(fā)散我們可以分為兩種，第一種是這種通過線條繪制的發(fā)射或是集中圖案，從一個中心向某一方向或四周擴展，或者是四周向一個中心集中的線條圖案，盯著看會出現(xiàn)一種光耀感，通過光學效果產(chǎn)生視覺幻想，從而產(chǎn)生視覺動感。
而第二種則是通過物體或圖形的疏密節(jié)奏變化，從而產(chǎn)生出類似擴散或是集中的效果，這種效果會令我們聯(lián)想到河流或是煙霧擴散的情形，從而產(chǎn)生了動感。
當擴散的圖案配合上透視的效果，會使得動感變得更加的強烈。
背景
對于這種集中發(fā)散的圖形，我們可以將它作為背景來烘托動感和氛圍。
文字
也可以將文字編排成發(fā)射狀，模擬出那種噴口而出的效果。
主體
或者是將圖形作為主體去表達特殊的主題。
以透視作為發(fā)散
這兩個海報是比較特別的例子，將放射狀與透視相結合，體現(xiàn)了很強烈的動感。
接下來講講關于螺旋的技巧，因螺旋發(fā)展或內(nèi)收形成的曲線，會讓人聯(lián)想到水的旋渦形，視覺上就形成動感，且螺旋曲線的旋轉曲度越大，動感就會越強。
另外，密集的螺旋曲線也能給人帶來一種集中或者是發(fā)散的效果，從而也能帶來一定的動感。
這兩張海報是將螺旋曲線作為主體使用，來表達其特定主題。
這張海報個人比較喜歡，非常靈活地將畫面中的文字和圖片沿著螺旋曲線排布，加上大小的變化，讓畫面產(chǎn)生了一種集中的動感。
這張海報則是將螺旋線作為背景，并將文字放在螺旋曲線間排列。
第六種技巧是波狀曲線的使用。因為曲線的來回反復扭曲，會令人聯(lián)想起翻滾的海浪。
而且由于曲線本身就具有不平衡的張力，他會有一種向直線轉變的趨勢，所以波狀曲線特別適合用來表達動感。
波狀曲線的曲度越大，他所產(chǎn)生的動感就會越強烈。
對于波狀曲線，我們可以將其用來作為主體或者是背景進而表達動感。
也可以通過將文字做成這種扭曲的效果，從而產(chǎn)生一種文字在扭動的動態(tài)感。
第七種技巧則是對色彩的使用。因為色彩有前進感和后退感，所以我們可以利用這一點來制造動感。其中最容易理解的就是使用色彩的漸變，沿著色彩逐漸變化的方向，來誘導人們的視線移動，從而產(chǎn)生視覺上的動感。
這兩個都是利用不同色彩的漸變來引導視線移動，從而產(chǎn)生動感。
我們在前面講過運動是需要能量的，而象征高溫的暖色調(diào)比象征低溫的冷色調(diào)更具備能量感，所以暖色調(diào)比冷色調(diào)更適合表達動感。
這是一張日本新干線的海報，雖然用的是靜止的列車作為主體，可是鮮紅的背景卻能很好地傳達出列車的能量感。如果我們將紅色的畫面換成藍色的話，那種能量感瞬間就沒了，多了些科技的屬性，畫面變得冷靜克制了。
接下來是重心偏移。一般我們編排版面時都會注意版面重心的均衡，將畫面整體的重心放在畫面中間?？墒窃谒茉靹痈挟嬅鏁r，我們卻可以將畫面的重心偏離視覺中心，使畫面形成一種不平衡感，從而產(chǎn)生動感。
我們來看看這兩個海報，都是通過將畫面的重心全都放在畫面的一側，從而產(chǎn)生了一種很強烈的不平衡感。
另外，由于視覺重力的原因，當畫面重心偏上時，能很好地塑造出往下墜的動感?，F(xiàn)在畫面中的這兩個作品都是將重心放在了畫面的上方，我們能感受到畫面中的主體會有一種往下掉的趨勢。
最后一種是蒙太奇的手法。前面我們說過人類天生具有一種組織傾向，當我們看到運動的瞬間狀態(tài)時，我們便能腦補出運動的過程。所以通過蒙太奇的手法，將一些不同時刻或狀態(tài)的圖片放在一起，便能使畫面產(chǎn)生動感。蒙太奇手法比起單純使用一張運動瞬間圖片，能承載更長時間的運動和更多的運動內(nèi)容。例如畫面中的這兩個動作，把他們放一起之后我們就可以聯(lián)想到這個小哥從熱身到起跑的過程。
其實漫畫運用的就是蒙太奇原理，通過幾個關鍵的情景，去傳達一個完整的劇情。
這些都是運用蒙太奇手法的作品。
以上就是今天的理論部分，接下來我們進入案例實操的環(huán)節(jié)，這次我給大家?guī)砹怂膫€案例，分別運用到了傾斜、重心偏移、發(fā)散與集中，以及蒙太奇的手法去塑造動感。希望通過這些案例的演示，能夠讓大家更好地理解今天的內(nèi)容，下面我們就來進入案例的部分。
案例一
首先確定好畫面的頁邊距，并且將畫面橫向分為 6 份。
然后將主體，也就是科比的形象，放在畫面正中間，橫向占中間四欄。
接著在科比的下方疊加一個紅色的傾斜色塊，強化科比傾斜的體態(tài)和動感。
從球鞋的名字中提取出關鍵詞疊在科比下層，并將球鞋的中文名放在英文下方。
將球鞋與介紹性文字做成文字組的形式放在畫面下方 。
由于主標題英文被遮擋了一部分，缺失了一些可讀性，所以我們將球鞋的英文名做一個重復放在左上角，并在右上角添加 logo。接下來我們在背景上疊加一個籃球場的場景。
并將畫面的四周涂上黑色的漸變，強化主體形象。
由于現(xiàn)在畫面和主體都有一些偏暗了，所以我們對整體畫面進行稍微調(diào)亮，那么這個案例就完成了。
案例二
這個案例同樣也是一雙運動鞋，但是我們這次利用重心偏移的技巧去塑造動感。
同樣的確定頁邊距，并將畫面橫向分為四欄，將主體放在畫面左上角占上方兩欄。
然后從球鞋的名字中提取出相關英文放到版面頂部，并置于主體下方。
因為我們要做一個重心偏移的版面，所以我們接下來將所有的介紹性文字按照主體的負空間排列在版面上方。
為了防止重心的過度偏移，同時和左上角的球鞋做一個對角線的呼應，所以我們在版面的右下方放置價格以及球鞋的型號等信息。
然后吸取球鞋的顏色做一個色彩上的呼應。這一張球鞋的海報就完成了。
案例三
這個案例我們來做一個放射光線的海報，這個海報內(nèi)容是一款果汁軟糖的促銷海報。
首先確定好頁邊距。
然后我們從這款軟糖的包裝上提取出一個圖形作為畫面主體。然后將軟糖的名字和介紹文案放到這個圖形中。
把圖形按照黃金比例和網(wǎng)格放到畫面中間。
在主體圖形后面疊加放射線條，底下留出一部分空間放置產(chǎn)品圖片及其他信息。
將產(chǎn)品圖片和促銷信息以居中對齊形式排列在畫面下方。
然后我們可以在放射線上添加一些表情愉悅的人物圖片，去強化吃了這款軟糖會很開心的這個動態(tài)過程。
還可以在畫面周圍添加一些可愛的小圖形去烘托氛圍。
最后加上 logo，這個軟糖的促銷海報就完成了。
我們也可以將這個海報做成不同的配色，每一款產(chǎn)品對應一個配色。
案例四
這是一個藝術展的海報，我們通過蒙太奇的手法來表現(xiàn)。
由于展覽主題是過去、現(xiàn)在和中間的一切，所以我們將畫面分成三份，并用運動過程中的三個不同動作來代表著三個階段。
由于第一張圖片的底色偏亮了，所以我們將它摳出來，做一個與另外兩個圖片的相同背景。
將主題和時間這兩個比較重要的信息放在畫面的左上角。
其余信息排列在右下角。那么這個案例就完成了，也是非常簡單的，利用的就是蒙太奇的手法。
本期教程到這里就結束了，我們來簡單地總結一下今天的內(nèi)容。首先我們了解了動感是畫面張力不平衡所造成的，以及強調(diào)速度感和強調(diào)能量感的兩種動勢。接下來我們講解了三種產(chǎn)生動感的原因，分別為基于生活經(jīng)驗與心理認知、引導視線移動以及不平衡狀態(tài)下帶來的視覺沖擊。最后我們總結了 9 點實用的小技巧，分別為捕捉動態(tài)瞬間、傾斜、錯位、集中與發(fā)散、螺旋、波狀曲線、色彩、重心偏移、蒙太奇。希望大家能夠掌握好這些方法，讓原本靜態(tài)的畫面也能帶來全新的動感。
文章來源：優(yōu)設