@N可可洛N、@爆炒地瓜????：設計工作室 Zajno Crew，擁有一支年輕的設計團隊，他們創新、大膽，大刀闊斧的展開工作，創立三年時間就在美國和烏克蘭先后創立分部，他們的設計作品在專業平臺 Dribbble、Behance、CSS Design Awards 上備受好評，他們熱愛分享，分享案例效果圖的時候也能將設計背景、設計思路一一展示，強烈為大家推薦 Zajno Crew！
Dribbble：https://dribbble.com/zajno
△ Zajno Crew Dribbble頁面
?優設：
能為我們介紹一下你們工作室么？您在 Zajno Crew 所扮演的角色。
Zajno Crew：
Zajno 是一個以質量為導向、以設計為中心的國際設計工作室。我們是一個15人的小團隊，我們喜歡稱自己為隊員，因為我們都是這里的朋友，喜歡一起工作、相處。
△ Call to Action: Save the Oceans
在 Zajno，我們通過利用解決問題的方法和精心設計的個性化體驗來創造數字產品。我們以用戶為中心的設計技術有助于生成結構良好且高度可用的設計和開發解決方案。
△ Merry Christmas
我們堅信未來是數字化的，并努力實現這一目標。我們幫助創業公司和老牌企業實現目標，并通過提供自由創意獲得認可。我們的工作就是將這些想法變為現實──從研究和規劃到定制設計和開發。
△ Zajno
數字產品已經可以做到這么多，但隨著未來的到來，它們將會做得越來越多。因此，我們的目標是不斷成長和不斷創新，使互聯網和這個世界變得更加美好。我們相信誠實、開放和熱情。
△ Igor Pavlinski
我是 Zajno 的動畫設計師，我很高興做我喜歡做的事。我為網站或應用程序制作動畫 Logo，創建動畫插圖和各種內容，以及處理視頻。因為動畫不僅是我的工作，也是我的愛好，我在工作之余也花了很多時間來與「它」相處。
?優設：
我們發現您為 Behance 做的動效圖標非常有趣，能為我們講解一下您做動效的思路么？
Zajno Crew：
這個動效是 Zajno 在 Behance 上展示的動效 Logo 系列，我的任務是為 Behance 的 Logo 添加一些生命。
△ Animated Logo Collection 2017 on Behance
當我開始制作品牌 Logo 的動畫時，我通常會做的第一件事是分析它的可塑性。通常，Logo 本身及其圖形已經包含了角色、風格以及動畫設計師需要提供適當動畫所需的一切。這就是為什么這里最重要的任務是找到并感受角色并通過動畫展示它。Logo 圖形和 Logo 動畫之間應該沒有沖突，良好的 Logo 動畫來自優美的 Logo 圖形。
△ Logo Animation for a New Global Telecommunications Platform
當我創建 Logo 動畫時，我通常不使用縮略圖或故事板，它并不總是適合我。但是，如果你只是作為動畫設計師開始并且您必須為 Logo 制作動畫，則最好遵循所有規則而不是跳過任何階段。
△ Zajno Logo Animation
之后，在獲得足夠的經驗后，你可以直觀地將所有縮略圖保留在腦中。你可以放心地嘗試這種方式，使用不同的形式展示，你最終會得到一些不同的版本，你會選擇最好的。這就是它在這一點上的作用，這就是我創建你所指的 Logo 動畫的方式。
△ Logo Animation
順便說一下，找到合適的節奏也很重要，在動效設計中創造一個合適的節奏很重要。它本身可能會提供一種 Logo 動畫的好方法。
最后，但并非最不重要，始終記得應用動畫12原則。
- 擠壓與伸展（Squash and stretch）
- 預期動作（Anticipation）
- 演出方式（Staging）
- 接續動作與關鍵動作（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）
從動畫演變而來的動效設計12原則，也值得一看 → 《12 條提高產品可用性的動效設計原理（附案例）》
△ Google Brand System - Adam Grabovski
△ 「Logitech」- Nikita Melnikov
至于靈感，迪士尼卡通片，從最低做起到成功的動畫設計師，都能夠激發我的靈感。我也是傳統手繪動畫的忠實粉絲，我甚至在案例中適當應用了一些這樣的技巧。我也會從其他動畫設計師的作品中汲取靈感，例如，在創建 Behance Logo 動畫之前，我受到了 Adam Grabovski 的Google Logo 動畫和 Nikita Melnikov 的 Logitech 標志動畫的啟發。
?優設：
您的動效非常流暢，能為我們展示您任何一個作品的軟件制作視頻么？
Zajno Crew：
這是我們為 RocketSource 所做的設計，我同時使用了 JS/CSS 進行交互動效設計：
△ Hero Section Interactive JS/CSS Animation
△ Hero Section Interactive JS/CSS Animation
這是另一個例子：它是一個專業文案公司網站的插圖。 我使用了 Anime.js 來實現的動畫：
△ SVG Illustration Animated with Anime.js
△ SVG Illustration Animated with Anime.js
這是我們為 fintech 初創公司 bZx 創建的網站。bZx 是一家專注于分散保證金交易的創業公司，它想要展示公司的故事性、互動性和趣味性，完成了研究和原型設計后，我們開始嘗試設計，嘗試不同的解決方案，直到我們找到滿足所有要求的解決方案。
設計準備就緒，開發階段就開始了，這更具挑戰性。我們在頁面中只是用了 SVG 和編程動畫，舍棄了 gif/png 的圖片格式。還嘗試首次應用響應式布局，我們對呈現的效果非常滿意。我們最終得到了一個真正講故事的網站，由一個主題聯合起來，用動畫講述引人入勝的視覺故事。整個網站是由我們團隊的 Sofy Dubinska 繪制了一個巨大的動畫插圖，由我制作并由我們的開發團隊開發實現。
△ A New Website for FinTech Startup
?優設：
你覺得動畫制作什么是最重要的？或者說該注意哪些內容？
Zajno Crew：
我是老迪斯尼動畫片的忠實粉絲，我一直想知道如何使用這種魔法。甚至想自己學會做。所以幾年前我對傳統的手繪動畫產生了興趣，一個想法打動了我，所以我只是打開 Photoshop 并開始直接繪制。
我當時并不知道關鍵幀是什么？通道，那些是什么？我只想坐下來做這件事。對我來說唯一可靠的是緩入、緩出。好吧，既然我當時已經有過動畫設計方面的經驗，那么不知道輕松進出就有點奇怪。總而言之，我花了大約3個星期的時間來創建一個26秒的視頻。很長，是吧？嗯，我是一個新手，我對最終的結果一無所知，也不知道我會用什么顏色。換句話說，我犯了創建動畫時應該避免的所有錯誤。然而，考慮到這是我的第一次嘗試，它最終并沒有那么糟糕。我盡我所能，掌握了那時的技能和知識。順便說一下，結果如下：
第一次嘗試，最好的事情是讓我意識到我所處的位置。這次經歷之后我開始尋找一種方法來磨練我的技能。
今天我主要關注的是學習人物設計，因為它仍然是我想要發展的技能之一。我從各種來源學到了很多技巧和竅門，我想和你分享一些。
△ S-curves or Line of Action
S 曲線或行動線。這個原則不僅用于人物設計，也適用于攝影，它有助于使人物的姿勢看起來更加自然。曲線穿過人物的身體，引導它的每一個動作。沒有這個曲線，人物的動作會像機器人那樣突兀而抽搐。眾所周知，人物應該從一個姿勢自然的到另一個姿勢，這樣移動看起來很緊湊。
△ No Parallel Lines
沒有平行線。人體沒有平行的東西。幾乎所有部位都從狹窄變寬，反之亦然，就像前臂或腿一樣，臀部較寬，然后朝向腳踝縮小。棕櫚樹也是如此。它也適用于動物，以及其他生物。
△ Asymmetry
非對稱。創建人物時應避免對稱。老迪士尼大師過去常常檢查對方的角色是否對稱。因為有時很難看出自己的錯誤。姿勢中不應存在對稱的手臂/腿/手指位置。因為這會產生不自然的外觀。這樣的角色沒有三維感覺，它是平的，似乎它可以在任何一秒落下，就像紙板人一樣。
△ Silhouette
剪影。輪廓必須「可讀」。只有輪廓清晰，我們的眼睛才更容易捕捉到動作。剪影必須也是可識別的。例如，有人向你展示了米老鼠的輪廓，你會在第一次嘗試時猜到它，這個角色就不會有誤解。
整體性。角色必須是整體的，它不應該過分關注的細節，保持設計和視覺上的平衡。每個形狀應平滑地融入另一個形狀，創造一個完整、靈活的形象，應始終牢記這些。即使我們沒有看到人物的肩膀，我們也必須在草圖中繪制它以確保手臂「從正確的位置生長」。以下是繪制和使用 S 曲線的一個很好的例子：
?優設：
什么時候最高效？
Zajno Crew：
對我來說，下午1點到5點我覺得最高效！
?優設：
您的典型一天是怎樣的？
Zajno Crew：
一般早晨6點半到7點起床，吃完早餐會去健身（一周三次）或者學外語（一周兩次）。上午11點開始工作到下午7點。
△ Product Page Animation for a Global Telecommunications Website
回家之后我一般還會做些動畫聯系或者玩會 PlayStation、讀書，有時候會和家人一起看 Netflix。
?優設：
有計劃開設線上課程么？
Zajno Crew：
有的，我正在考慮開設個人課程的想法。 但是，我決定暫時不會開設，因為它與其他許多人沒什么不同，現在有很多相當不錯的線上課程。
△ Social Network Feed App Experiment Animation
因此，在我擁有與世界分享真正有價值和獨特的東西之前，不會花費太多的時間來做。只有我達到這一點，我將很樂意分享我的知識。
優設：?
有什么建議可以給正在新手設計師，或者有什么書籍、 網站推薦么？
Zajno Crew：
就個人而言，我建議閱讀理查德·威廉姆斯寫的《動畫師生存手冊》和弗蘭克·托馬斯 / 奧利·約翰斯頓《生命的幻象：迪斯尼動畫造型設計》。
△ Illustration for Make Good Project
至于教程，Mt.Mograph 和ECAbrams 是我的最愛。
優設：?
我們非常感興趣您的辦公環境，能否為我們展示一下您的工作環境么？
Zajno Crew：
我們堅持辦公室里的極簡主義，它寬敞而清晰，我覺得是這樣：清晰的空間 - 清晰的頭腦，凌亂的空間 - 混亂的頭腦，與此同時，我們的辦公室非常綠色和舒適，因為每個人都有自己的一部分。我附上了我的工作場所，Zajno 團隊和我的一些照片。
△ Zajno Crew
福利：Zajno 內部的靈感網站https://grid.zajno.com，歡迎來挖寶！
非常感謝 Igor Pavlinski 給優設小伙伴們帶來的這次精彩分享，喜歡他們的小伙伴可以通過以下鏈接獲得更多作品哦！
- 工作室網站：https://zajno.com
- Dribbble：https://dribbble.com/zajno
「設計師專訪，了解大牛都是如何開展設計的」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 6 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓