Sketch+principle聯動製作可交互可愛動物肖像

使用工具:sketch、principle

需要的網站:

PrincipleUX: 心之所向 至美設計principleux.com

做這個設計之前其實我也沒有把握可以真正做好,因為這可能算是正式做principle+sketch作品的前幾個,做這個之前先是在principleux上看到這個模版,再一點一點學做的,自己在做的過程中發現設計類軟體還是要動手實際操作,哈哈希望可以做的更好。

這是原作者畫的他的狗狗:Google

這是我自己畫的我和我對象的狗狗:桂圓

小傢伙睡覺咯

設計來源於生活,高於生活,但是忠於生活,設計畢竟不是藝術,接下來進入正題

首先在sketch中把小動物畫好,這點很基礎,可以是各種風格,不過扁平化加上一點點光影的效果是最適合用來製作動效的,不僅有立體感,而且有很多細節,看起來真的十分賞心悅目。

在做的過程中要建好畫板並且對圖層進行分組管理,這真的很重要,因為設計工作通常不是一個人來完成,而是團隊合作,所以注意基本的禮儀當然是很有必要的。

2013新版 - 40條網頁設計師需了解的Photoshop禮儀hao.uisdc.com圖標

畫完以後調整了細節,把principle打開,點擊import

直接從sketch中導入(分組的重要性再次體現)

接下來就是漫長的調整過程了,稍後我會把源文件上傳,但是我主要會把我在製作中踩過的坑告訴大家,這個裡的調整不是常用的animate而是principle里另外一個非常非常有用的功能:driver

其實在principle的學習中還是強烈推薦大家去在principle光中把幾個教學視頻看過了,這樣很容易幫你了解principle里所有的功能:

Principle - Animated Designprincipleformac.com圖標

這裡是driver的詳細教程:

https://youtu.be/VLnh439EXiIyoutu.be

在principle中要在所有圖層上方放置一個空白的scroll交互圖層

這裡以上圖為例子給大家講一講driver里各部件的含義(個人理解)

scroll下面的部件就是要調整和交互的部件

scroll右邊的scroll Y就是上下方向滑動交互

而center Y就是上下交互時圖層各組件的相對位置

(強烈建議大家在跟著教程製作的時候參考我的driver相對位置,不過不需要生搬硬套,一切以自己畫面效果為參考)

到了這一步,基本上就算完工了

感謝大家,看到這裡不妨留個贊再走吧~

工程文件鏈接:

https://pan.baidu.com/s/1mkd1Vyopan.baidu.com

密碼: 7g3i


推薦閱讀:

Google 設計團隊發布 Sketch2AE,解決 Sketch 文件導入 AE 問題
用PS十倍無損壓縮GIF動效圖
動效乾貨——貝塞爾曲線插值器原理(進階準備)
那些創意十足的Loading動效原型合集(一鍵復用!)
[Framer] 添加 SVG 圖層,讓工程師追著打的效果成為現實

TAG:交互动效 | Sketch | Principle |