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

本課程的學生評價約 4.5 顆星,有人確定經過這 8.5 小時的訓練,可以從頭到尾做自己的設計專案。  這裡教你如何使用web與行動應用設計行業中最新的工具,如Flinto、Principle、Marvel App 和 Invision Craft Plugin,塑模整個流程和微互動。並教你如何製作細膩的 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的價格的一小部分(每月付款)。那麼是的,你不覺得很酷嗎?

為什麼 Flinto、 Principle、Marvel App 和 InVision 創作?

Principle 使得創作畫和用戶界面互動設計變得容易。非常適合多螢幕應用,或新的互動和動畫。

Flinto可讓設計人員使用自訂動畫、手勢和 Sketch輸入快速製作行動、桌面或web應用程式的互動原型。

Marvel 這個簡單編輯器允許你在幾秒鐘內將所有設計鏈接在一起,然後添加手勢和頁面/螢幕轉換,使你的原型感覺就像一個真正的應用程式或網站。

這個課程

本課程涵蓋了基礎知識,並詳細介紹了我在日常工作流程中使用的一些高級功能、技巧和外掛。

我們還將開展一些很酷的專案,我們將能夠在行動設備和網絡上進行原型分析。我們甚至會做一些UI動畫和微互動,這將使你的原型看起來很真實。


目標受眾

  • Web 設計師
  • 行動應用設計師
  • 開發人員,希望了解更多有關用戶界面設計的資訊
  • 產品經理,試圖學習新技能。
  • 平面設計師,想進入web和行動產品設計領域

講師介紹

Pablo Stanley 產品設計師

你好,我是Pablo Stanley。 我是個在舊金山的產品設計師。

我是舊金山醫療保健創業公司 Carbon Health 的設計師和共同創始人。我喜歡解決設計難題、製作傻逼的插圖、做極客的音樂、創作豐富多彩的動畫 GIF、嚼素食漢堡和寫小說漫畫。

教學輔導是我新發現的熱情所在。我想盡可能地學習和教學,Udemy 是最好的平台。 我也創作了一個名為“The Design Team”的漫畫系列。

英文字幕 : 有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To


報名參加課程

Sponsored by Udemy

你可能會有興趣

 歡迎使用 App 訂閱發文通知 

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: