Sketch+principle聯動製作可交互可愛動物肖像
使用工具：sketch、principle
需要的網站：
PrincipleUX: 心之所向 至美設計做這個設計之前其實我也沒有把握可以真正做好，因為這可能算是正式做principle+sketch作品的前幾個，做這個之前先是在principleux上看到這個模版，再一點一點學做的，自己在做的過程中發現設計類軟體還是要動手實際操作，哈哈希望可以做的更好。
設計來源於生活，高於生活，但是忠於生活，設計畢竟不是藝術，接下來進入正題
首先在sketch中把小動物畫好，這點很基礎，可以是各種風格，不過扁平化加上一點點光影的效果是最適合用來製作動效的，不僅有立體感，而且有很多細節，看起來真的十分賞心悅目。
在做的過程中要建好畫板並且對圖層進行分組管理，這真的很重要，因為設計工作通常不是一個人來完成，而是團隊合作，所以注意基本的禮儀當然是很有必要的。
2013新版 - 40條網頁設計師需了解的Photoshop禮儀
畫完以後調整了細節，把principle打開，點擊import
直接從sketch中導入（分組的重要性再次體現）
接下來就是漫長的調整過程了，稍後我會把源文件上傳，但是我主要會把我在製作中踩過的坑告訴大家，這個裡的調整不是常用的animate而是principle里另外一個非常非常有用的功能：driver
其實在principle的學習中還是強烈推薦大家去在principle光中把幾個教學視頻看過了，這樣很容易幫你了解principle里所有的功能：
Principle - Animated Design
這裡是driver的詳細教程：
https://youtu.be/VLnh439EXiI
這裡以上圖為例子給大家講一講driver里各部件的含義（個人理解）
scroll下面的部件就是要調整和交互的部件
scroll右邊的scroll Y就是上下方向滑動交互
而center Y就是上下交互時圖層各組件的相對位置
（強烈建議大家在跟著教程製作的時候參考我的driver相對位置，不過不需要生搬硬套，一切以自己畫面效果為參考）
到了這一步，基本上就算完工了
感謝大家，看到這裡不妨留個贊再走吧～
工程文件鏈接:
https://pan.baidu.com/s/1mkd1Vyo密碼: 7g3i
推薦閱讀：
※Google 設計團隊發布 Sketch2AE，解決 Sketch 文件導入 AE 問題
※用PS十倍無損壓縮GIF動效圖
※動效乾貨——貝塞爾曲線插值器原理（進階準備）
※那些創意十足的Loading動效原型合集（一鍵復用！）
※[Framer] 添加 SVG 圖層，讓工程師追著打的效果成為現實