用 Sketch 3、Principle App 和 Flinto 製作 UI 動畫

Contents

學習使用 Sketch、Flinto、Principle、Marvel 和 Invision Craft 外掛製作 UI 動畫和微互動原型

從這 8.5 小時的課程，你會學到

了解 Sketch 的基礎知識和一些高級技巧
為行動設備和 Web 創作逼真的原型
使用 Flinto 創作 UI 動畫和微互動
使用 Priciple 創作 UI 動畫和微互動
使用 Marvel App 製作簡單的原型

需求

基本設計技能（非強制性）
擁有最新的操作系統的Mac是必須的(Sketch 只在Mac上運行)
取得 Sketch 3（30天試用）
取得 Flinto Mac版（15天試用）
取得 Principle（15天試用）

說明

更新 2017 年 6 月- 組建嵌套 ( Nested Symbols )

用 Nested Symbols 創建一個按鍵系統( Button System )
用 Nested Symbols 創建一個左導覽列 ( Left Bar Navigation )

更新 2016 年 12 月 27 日- 新專案！

用 Flinto 與 Sketch 創建一個 on-boarding( 幫助使用者更好的理解和使用產品，形成第一印象 ) 視差動畫
於 Sketch 畫聖誕老公公 ( 為特別的假日 )
Sketch 最好用的按鍵捷徑
我偏好的實用 Sketch 外掛!

更新 2016 年 7 月 11 日 – 新內容！

如何在 Flinto 添加 Hover 效果 – 將鼠標移到其上方 / 將鼠標滑開 ( 對 Web 設計原型很好用 )
用 Flinto 創建一個視差( Parallax ) UI 動畫

更新 2016 年 7 月 5 日 – 新內容！

添加一個彈嫩 Mac 的 Principle 章節
12 部影片 (超過 1小時內容）
如何創建人物動畫
用 Principle 做出視差( Parallax )效果
拖拉與放下(Drag And Drop) 互動
持續互動，如換頁( Paging )、滾動( Scrolling )、拖拉( Dragging )

更新 2016 年 6 月 18 日 – 新內容！

添加了一個談論 Mac 的 Flinto 的章節。
9 部影片（超過 1小時內容）
連接層 (Layers)、複雜的轉換(Transitions)
用戶界面卡片流動動畫(Cards Flow Animation)
將聲音添加到你的原型（還有更多）

介紹

你好，我叫 Pablo Stanley。我從事設計師工作近18年 – 且和不同的創業公司合作了很長一段時間。我想教你如何應用我每天使用的工具，我也將讓你熟習作為產品設計師的工作流程和處理程序。

在本課程中，你將學習如何使用 Sketch 3 設計 Web 和行動產品。我們還將學習如何使用行業中最新的工具，如Flinto、Principle、Marvel App 和 Invision 的 Craft Plugin，塑模整個流程和微互動。還有關於這門課最酷的部分？我們將學習如何製作出細膩的UI動畫以及如何將它們應用於你的專案。

本課程設計分出各個部分，讓你可以根據你的技能水平跳著學。你將能夠學習如何使用這些工具，從頭開始製作自己的設計。我們還將通過更多的進階專案來學習。

那麼，為什麼 Sketch？

Sketch 3是專注於用戶界面和用戶體驗設計的設計工具。由於它的簡單性，很容易理解; 任何只有一點點或甚至完全沒有受過訓練的人都可以學會。它適用於多種行動設備的設計，也適用於響應式網頁設計，以簡單的方式產生作品，並能與開發人員很好地合作。它只花費Adobe Suite的價格的一小部分（每月付款）。那麼是的，你不覺得很酷嗎？