優(yōu)設(shè)專訪！火遍追波的設(shè)計(jì)工作室Zajno Crew是如何設(shè)計(jì)動(dòng)效的？

@N可可洛N、@爆炒地瓜????：設(shè)計(jì)工作室 Zajno Crew，擁有一支年輕的設(shè)計(jì)團(tuán)隊(duì)，他們創(chuàng)新、大膽，大刀闊斧的展開工作，創(chuàng)立三年時(shí)間就在美國(guó)和烏克蘭先后創(chuàng)立分部，他們的設(shè)計(jì)作品在專業(yè)平臺(tái) Dribbble、Behance、CSS Design Awards 上備受好評(píng)，他們熱愛分享，分享案例效果圖的時(shí)候也能將設(shè)計(jì)背景、設(shè)計(jì)思路一一展示，強(qiáng)烈為大家推薦 Zajno Crew！

Dribbble：https://dribbble.com/zajno

△ Zajno Crew Dribbble頁(yè)面

?優(yōu)設(shè)：

能為我們介紹一下你們工作室么？您在 Zajno Crew 所扮演的角色。

Zajno Crew：

Zajno 是一個(gè)以質(zhì)量為導(dǎo)向、以設(shè)計(jì)為中心的國(guó)際設(shè)計(jì)工作室。我們是一個(gè)15人的小團(tuán)隊(duì)，我們喜歡稱自己為隊(duì)員，因?yàn)槲覀兌际沁@里的朋友，喜歡一起工作、相處。

△ Call to Action: Save the Oceans

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

△ Merry Christmas

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

△ Zajno

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

△ Igor Pavlinski

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

?優(yōu)設(shè)：

我們發(fā)現(xiàn)您為 Behance 做的動(dòng)效圖標(biāo)非常有趣，能為我們講解一下您做動(dòng)效的思路么？

Zajno Crew：

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

△ Animated Logo Collection 2017 on Behance

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

△ Logo Animation for a New Global Telecommunications Platform

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

△ Zajno Logo Animation

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

△ Logo Animation

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

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

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

從動(dòng)畫演變而來(lái)的動(dòng)效設(shè)計(jì)12原則，也值得一看 → 《12 條提高產(chǎn)品可用性的動(dòng)效設(shè)計(jì)原理（附案例）》

△ Google Brand System - Adam Grabovski

△ 「Logitech」- Nikita Melnikov

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

?優(yōu)設(shè)：

您的動(dòng)效非常流暢，能為我們展示您任何一個(gè)作品的軟件制作視頻么？

Zajno Crew：

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

△ Hero Section Interactive JS/CSS Animation

△ Hero Section Interactive JS/CSS Animation

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

△ 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è)公司，它想要展示公司的故事性、互動(dòng)性和趣味性，完成了研究和原型設(shè)計(jì)后，我們開始嘗試設(shè)計(jì)，嘗試不同的解決方案，直到我們找到滿足所有要求的解決方案。

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

△ A New Website for FinTech Startup

?優(yōu)設(shè)：

你覺得動(dòng)畫制作什么是最重要的？或者說該注意哪些內(nèi)容？

Zajno Crew：

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

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

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

今天我主要關(guān)注的是學(xué)習(xí)人物設(shè)計(jì)，因?yàn)樗匀皇俏蚁胍l(fā)展的技能之一。我從各種來(lái)源學(xué)到了很多技巧和竅門，我想和你分享一些。

△ S-curves or Line of Action

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

△ No Parallel Lines

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

△ Asymmetry

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

△ Silhouette

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

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

?優(yōu)設(shè)：

什么時(shí)候最高效？

Zajno Crew：

對(duì)我來(lái)說，下午1點(diǎn)到5點(diǎn)我覺得最高效！

?優(yōu)設(shè)：

您的典型一天是怎樣的？

Zajno Crew：

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

△ Product Page Animation for a Global Telecommunications Website

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

?優(yōu)設(shè)：

有計(jì)劃開設(shè)線上課程么？

Zajno Crew：

有的，我正在考慮開設(shè)個(gè)人課程的想法。 但是，我決定暫時(shí)不會(huì)開設(shè)，因?yàn)樗c其他許多人沒什么不同，現(xiàn)在有很多相當(dāng)不錯(cuò)的線上課程。

△ Social Network Feed App Experiment Animation

因此，在我擁有與世界分享真正有價(jià)值和獨(dú)特的東西之前，不會(huì)花費(fèi)太多的時(shí)間來(lái)做。只有我達(dá)到這一點(diǎn)，我將很樂意分享我的知識(shí)。

優(yōu)設(shè)：?

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

Zajno Crew：

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

△ Illustration for Make Good Project

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

優(yōu)設(shè)：?

我們非常感興趣您的辦公環(huán)境，能否為我們展示一下您的工作環(huán)境么？

Zajno Crew：

我們堅(jiān)持辦公室里的極簡(jiǎn)主義，它寬敞而清晰，我覺得是這樣：清晰的空間 - 清晰的頭腦，凌亂的空間 - 混亂的頭腦，與此同時(shí)，我們的辦公室非常綠色和舒適，因?yàn)槊總€(gè)人都有自己的一部分。我附上了我的工作場(chǎng)所，Zajno 團(tuán)隊(duì)和我的一些照片。

△ Zajno Crew

福利：Zajno 內(nèi)部的靈感網(wǎng)站https://grid.zajno.com，歡迎來(lái)挖寶！

非常感謝 Igor Pavlinski 給優(yōu)設(shè)小伙伴們帶來(lái)的這次精彩分享，喜歡他們的小伙伴可以通過以下鏈接獲得更多作品哦！

• 工作室網(wǎng)站：https://zajno.com
• Dribbble：https://dribbble.com/zajno

「設(shè)計(jì)師專訪，了解大牛都是如何開展設(shè)計(jì)的」

• 《優(yōu)設(shè)專訪！每天一張高質(zhì)量海報(bào)設(shè)計(jì)，他堅(jiān)持了三年》
• 《優(yōu)設(shè)專訪！紅遍國(guó)外各大靈感網(wǎng)站是一種什么樣的體驗(yàn)？》
• 《優(yōu)設(shè)專訪！被專業(yè)老師拒絕的他，為什么成為各大品牌的合作寵兒？》