△ Zajno Crew Dribbble頁面? ?Dribbble：https://dribbble.com/zajno

本文是優(yōu)設(shè)網(wǎng)對Zajno Crew工作室的訪談?wù)?。希望對想做好動效設(shè)計的設(shè)計師有幫助。

?優(yōu)設(shè)：能為我們介紹一下你們工作室么？您在 Zajno Crew 所扮演的角色。

Zajno Crew：

Zajno 是一個以質(zhì)量為導(dǎo)向、以設(shè)計為中心的國際設(shè)計工作室。我們是一個15人的小團(tuán)隊，我們喜歡稱自己為隊員，因為我們都是這里的朋友，喜歡一起工作、相處。

△ Call to Action: Save the Oceans

在 Zajno，我們通過利用解決問題的方法和精心設(shè)計的個性化體驗來創(chuàng)造數(shù)字產(chǎn)品。我們以用戶為中心的設(shè)計技術(shù)有助于生成結(jié)構(gòu)良好且高度可用的設(shè)計和開發(fā)解決方案。

△ Merry Christmas

我們堅信未來是數(shù)字化的，并努力實現(xiàn)這一目標(biāo)。我們幫助創(chuàng)業(yè)公司和老牌企業(yè)實現(xiàn)目標(biāo)，并通過提供自由創(chuàng)意獲得認(rèn)可。我們的工作就是將這些想法變?yōu)楝F(xiàn)實──從研究和規(guī)劃到定制設(shè)計和開發(fā)。

△ Zajno

數(shù)字產(chǎn)品已經(jīng)可以做到這么多，但隨著未來的到來，它們將會做得越來越多。因此，我們的目標(biāo)是不斷成長和不斷創(chuàng)新，使互聯(lián)網(wǎng)和這個世界變得更加美好。我們相信誠實、開放和熱情。

△ Igor Pavlinski

我是 Zajno 的動畫設(shè)計師，我很高興做我喜歡做的事。我為網(wǎng)站或應(yīng)用程序制作動畫 Logo，創(chuàng)建動畫插圖和各種內(nèi)容，以及處理視頻。因為動畫不僅是我的工作，也是我的愛好，我在工作之余也花了很多時間來與「它」相處。

?優(yōu)設(shè)：我們發(fā)現(xiàn)您為 Behance 做的動效圖標(biāo)非常有趣，能為我們講解一下您做動效的思路么？

Zajno Crew：

這個動效是 Zajno 在 Behance 上展示的動效 Logo 系列，我的任務(wù)是為 Behance 的 Logo 添加一些生命。

△ Animated Logo Collection 2017 on Behance

當(dāng)我開始制作品牌 Logo 的動畫時，我通常會做的第一件事是分析它的可塑性。通常，Logo 本身及其圖形已經(jīng)包含了角色、風(fēng)格以及動畫設(shè)計師需要提供適當(dāng)動畫所需的一切。這就是為什么這里最重要的任務(wù)是找到并感受角色并通過動畫展示它。Logo 圖形和 Logo 動畫之間應(yīng)該沒有沖突，良好的 Logo 動畫來自優(yōu)美的 Logo 圖形。

△ Logo Animation for a New Global Telecommunications Platform

當(dāng)我創(chuàng)建 Logo 動畫時，我通常不使用縮略圖或故事板，它并不總是適合我。但是，如果你只是作為動畫設(shè)計師開始并且您必須為 Logo 制作動畫，則最好遵循所有規(guī)則而不是跳過任何階段。

△ Zajno Logo Animation

之后，在獲得足夠的經(jīng)驗后，你可以直觀地將所有縮略圖保留在腦中。你可以放心地嘗試這種方式，使用不同的形式展示，你最終會得到一些不同的版本，你會選擇最好的。這就是它在這一點上的作用，這就是我創(chuàng)建你所指的 Logo 動畫的方式。

△ Logo Animation

順便說一下，找到合適的節(jié)奏也很重要，在動效設(shè)計中創(chuàng)造一個合適的節(jié)奏很重要。它本身可能會提供一種 Logo 動畫的好方法。

最后，但并非最不重要，始終記得應(yīng)用動畫12原則。

• 擠壓與伸展（Squash and stretch）
• 預(yù)期動作（Anticipation）
• 演出方式（Staging）
• 接續(xù)動作與關(guān)鍵動作（Straight ahead action and pose to pose）
• 跟隨動作與重疊動作（Follow through and overlapping action）
• 漸快與漸慢（Slow in and slow out）
• 弧形（Arcs）
• 附屬動作（Secondary action）
• 時間控制（Timing）
• 夸張（Exaggeration）
• 純熟的手繪技巧（Solid drawing）
• 吸引力（Appeal）

△ Google Brand System – Adam Grabovski

△ 「Logitech」- Nikita Melnikov

至于靈感，迪士尼卡通片，從最低做起到成功的動畫設(shè)計師，都能夠激發(fā)我的靈感。我也是傳統(tǒng)手繪動畫的忠實粉絲，我甚至在案例中適當(dāng)應(yīng)用了一些這樣的技巧。我也會從其他動畫設(shè)計師的作品中汲取靈感，例如，在創(chuàng)建 Behance Logo 動畫之前，我受到了 Adam Grabovski 的Google Logo 動畫和 Nikita Melnikov 的 Logitech 標(biāo)志動畫的啟發(fā)。

?優(yōu)設(shè)：您的動效非常流暢，能為我們展示您任何一個作品的軟件制作視頻么？

Zajno Crew：

這是我們?yōu)?RocketSource 所做的設(shè)計，我同時使用了 JS/CSS 進(jìn)行交互動效設(shè)計：

△ Hero Section Interactive JS/CSS Animation

△ Hero Section Interactive JS/CSS Animation

這是另一個例子：它是一個專業(yè)文案公司網(wǎng)站的插圖。 我使用了 Anime.js 來實現(xiàn)的動畫：

△ SVG Illustration Animated with Anime.js

△ SVG Illustration Animated with Anime.js

這是我們?yōu)?fintech 初創(chuàng)公司 bZx 創(chuàng)建的網(wǎng)站。bZx 是一家專注于分散保證金交易的創(chuàng)業(yè)公司，它想要展示公司的故事性、互動性和趣味性，完成了研究和原型設(shè)計后，我們開始嘗試設(shè)計，嘗試不同的解決方案，直到我們找到滿足所有要求的解決方案。

設(shè)計準(zhǔn)備就緒，開發(fā)階段就開始了，這更具挑戰(zhàn)性。我們在頁面中只是用了 SVG 和編程動畫，舍棄了 gif/png 的圖片格式。還嘗試首次應(yīng)用響應(yīng)式布局，我們對呈現(xiàn)的效果非常滿意。我們最終得到了一個真正講故事的網(wǎng)站，由一個主題聯(lián)合起來，用動畫講述引人入勝的視覺故事。整個網(wǎng)站是由我們團(tuán)隊的 Sofy Dubinska 繪制了一個巨大的動畫插圖，由我制作并由我們的開發(fā)團(tuán)隊開發(fā)實現(xiàn)。

△ A New Website for FinTech Startup

?優(yōu)設(shè)：你覺得動畫制作什么是最重要的？或者說該注意哪些內(nèi)容？

Zajno Crew：

我是老迪斯尼動畫片的忠實粉絲，我一直想知道如何使用這種魔法。甚至想自己學(xué)會做。所以幾年前我對傳統(tǒng)的手繪動畫產(chǎn)生了興趣，一個想法打動了我，所以我只是打開 Photoshop 并開始直接繪制。

我當(dāng)時并不知道關(guān)鍵幀是什么？通道，那些是什么？我只想坐下來做這件事。對我來說唯一可靠的是緩入、緩出。好吧，既然我當(dāng)時已經(jīng)有過動畫設(shè)計方面的經(jīng)驗，那么不知道輕松進(jìn)出就有點奇怪?？偠灾一舜蠹s3個星期的時間來創(chuàng)建一個26秒的視頻。很長，是吧？嗯，我是一個新手，我對最終的結(jié)果一無所知，也不知道我會用什么顏色。換句話說，我犯了創(chuàng)建動畫時應(yīng)該避免的所有錯誤。然而，考慮到這是我的第一次嘗試，它最終并沒有那么糟糕。我盡我所能，掌握了那時的技能和知識。順便說一下，結(jié)果如下：

https://player.youku.com/embed/XMzk0NjYwOTExNg==

第一次嘗試，最好的事情是讓我意識到我所處的位置。這次經(jīng)歷之后我開始尋找一種方法來磨練我的技能。

今天我主要關(guān)注的是學(xué)習(xí)人物設(shè)計，因為它仍然是我想要發(fā)展的技能之一。我從各種來源學(xué)到了很多技巧和竅門，我想和你分享一些。

△ S-curves or Line of Action

S 曲線或行動線。這個原則不僅用于人物設(shè)計，也適用于攝影，它有助于使人物的姿勢看起來更加自然。曲線穿過人物的身體，引導(dǎo)它的每一個動作。沒有這個曲線，人物的動作會像機器人那樣突兀而抽搐。眾所周知，人物應(yīng)該從一個姿勢自然的到另一個姿勢，這樣移動看起來很緊湊。

△ No Parallel Lines

沒有平行線。人體沒有平行的東西。幾乎所有部位都從狹窄變寬，反之亦然，就像前臂或腿一樣，臀部較寬，然后朝向腳踝縮小。棕櫚樹也是如此。它也適用于動物，以及其他生物。

△ Asymmetry

非對稱。創(chuàng)建人物時應(yīng)避免對稱。老迪士尼大師過去常常檢查對方的角色是否對稱。因為有時很難看出自己的錯誤。姿勢中不應(yīng)存在對稱的手臂/腿/手指位置。因為這會產(chǎn)生不自然的外觀。這樣的角色沒有三維感覺，它是平的，似乎它可以在任何一秒落下，就像紙板人一樣。

△ Silhouette

剪影。輪廓必須「可讀」。只有輪廓清晰，我們的眼睛才更容易捕捉到動作。剪影必須也是可識別的。例如，有人向你展示了米老鼠的輪廓，你會在第一次嘗試時猜到它，這個角色就不會有誤解。

整體性。角色必須是整體的，它不應(yīng)該過分關(guān)注的細(xì)節(jié)，保持設(shè)計和視覺上的平衡。每個形狀應(yīng)平滑地融入另一個形狀，創(chuàng)造一個完整、靈活的形象，應(yīng)始終牢記這些。即使我們沒有看到人物的肩膀，我們也必須在草圖中繪制它以確保手臂「從正確的位置生長」。以下是繪制和使用 S 曲線的一個很好的例子：

https://player.youku.com/embed/XMzk0NjYwMjIwOA==

?優(yōu)設(shè)：什么時候最高效？

Zajno Crew：對我來說，下午1點到5點我覺得最高效！

?優(yōu)設(shè)：您的典型一天是怎樣的？

Zajno Crew：一般早晨6點半到7點起床，吃完早餐會去健身（一周三次）或者學(xué)外語（一周兩次）。上午11點開始工作到下午7點。

△ Product Page Animation for a Global Telecommunications Website

回家之后我一般還會做些動畫聯(lián)系或者玩會 PlayStation、讀書，有時候會和家人一起看 Netflix。

?優(yōu)設(shè)：有計劃開設(shè)線上課程么？

Zajno Crew：有的，我正在考慮開設(shè)個人課程的想法。 但是，我決定暫時不會開設(shè)，因為它與其他許多人沒什么不同，現(xiàn)在有很多相當(dāng)不錯的線上課程。

△ Social Network Feed App Experiment Animation

因此，在我擁有與世界分享真正有價值和獨特的東西之前，不會花費太多的時間來做。只有我達(dá)到這一點，我將很樂意分享我的知識。

優(yōu)設(shè)：?有什么建議可以給正在新手設(shè)計師，或者有什么書籍、 網(wǎng)站推薦么？

Zajno Crew：就個人而言，我建議閱讀理查德·威廉姆斯寫的《動畫師生存手冊》和弗蘭克·托馬斯 / 奧利·約翰斯頓《生命的幻象：迪斯尼動畫造型設(shè)計》。

△ Illustration for Make Good Project

至于教程，Mt.Mograph 和ECAbrams 是我的最愛。

優(yōu)設(shè)：?我們非常感興趣您的辦公環(huán)境，能否為我們展示一下您的工作環(huán)境么？

Zajno Crew：我們堅持辦公室里的極簡主義，它寬敞而清晰，我覺得是這樣：清晰的空間 – 清晰的頭腦，凌亂的空間 – 混亂的頭腦，與此同時，我們的辦公室非常綠色和舒適，因為每個人都有自己的一部分。我附上了我的工作場所，Zajno 團(tuán)隊和我的一些照片。

△ Zajno Crew