fbpx

Framer 快速上手課程– 設計、產生程式碼與協同作業

Contents

還記得精實創業這本書講的 MVP 概念?想要先建構一個 App 原型而且可以精確的描述 App 互動功能與 UI 流程體驗,Framer 在這個領域是一個功能強大的輔助設計工具,它可以匯入 Sketch 檔案,設計擬真的 App 原型與 UI 互動流程,並可以使用真實的資料 ( 例如地圖資訊 ) ,花時間設計一個接近實際運作功能的原型,可以幫你在與客戶需求討論階段節省下不少時間,更可以增進與工程師實作之前溝通的效率,全世界許多知名的公司如 Dropbox 、Google 、Facebook、Disney 、和 Uber 都有在使用
想要學習 Framer ?  這堂課的講師風格很活潑,讓你快速上手這個功能強大的原型設計工具

我會學到些什麼呢?

  • 學生將學習Framer的基礎知識,這是一個驚嘆的設計和原型設計工具
  • 介面設計,展現原本想表現的方法。
  • 用易於學習的程式碼活靈活現出設計。
  • 使用進階的手勢和互動創建漂亮的原型
  • 將設計從靜態轉換為動態,真的很快。
  • 在本地設備上分享你的設計和預覽。

需求 

  • 你將需要安裝最新版本的Framer。有一個15天的試用版,你可以在他們的網站上下載。
  • 你需要一台Mac電腦
  • 其他設計工具(如Sketch)的一些基本知識將有幫助,但不是必需的
  • 本課程有基本的程式設計。任何初學者都可學會。

說明

2017年7月4日更新

  • 發佈關於在專案中添加聲音的講座,以及如何通過事件和動畫來觸發它們。
  • 在第三部分添加了一個測驗。測試你的知識!

讓我們來學Framer吧!

Framer是一個可繪製、原型製作 、寫程式、和跨團隊共享專案的工具。它將視覺編輯的熟悉程度與程式碼的靈活性相結合。它讓你在一個智能界面中運作整體的設計工作流程。

使用Framer,你可以提供端到端的體驗。在將作品交給工程師之前,Framer可以讓你完善和驗證互動、動畫和流程。

Framer彌合了設計和開發之間的斷層,使其成為全球產品團隊的首選工具,如Dropbox、Facebook、Google、Disney 和 Uber。

界面設計,以驚人的方式。

使用Framer設計,你耍點花招就可獲得熟悉且最喜愛的圖形工具。 Framer直觀的自動佈局和智能分組算法使響應式設計變得輕而易舉。在特定設備的螢幕上繪製像素完美的精度,然後打開動畫的定位。 Framer是一種設計工具,製作互動作品。

你可以插入畫板、繪製圖層 、添加文字和圖像。添加到畫布中的每個新圖層都會響應它周圍的環境。它的反應是如此的好,感覺像變魔術。這裡介紹一些讓你用 Framer 做出特別且有趣的設計:

  • 自動排序與畫板。
  • 插入和操作形狀。
  • 高級的文本工具
  • 自動化層次嵌套
  • 適用於所有設備的畫布
  • 圖標管理面板。
  • 圖層裁剪

互動設計, 快捷且容易

即使你是初學者,Framer也可以輕鬆上手寫程式碼。你只需要一鍵插入帶有自動代碼的動畫。通過簡單的滑塊控件和直接操作做進一步客製化。你可以使用組件添加預製本機互動和應用程式的多螢幕流程。這是所見即所得,很簡單,由程式碼啟動支持。

自動產生程式碼使你的設計生活只需插入動畫或事件那麼簡單。風格則採用滑塊控件或直接在畫布中進行編輯。無論你想要做什麼,Framer始終保持你的程式碼完好無損。以下是你可以輕鬆實踐的一些事情:

  • 插入圖層、動畫、事件和片段。
  • 全功能程式碼編輯器。
  • 智能自動完成
  • 應用程式內的文檔。
  • 錯誤檢查員。
  • 直接在畫布上放置圖層。
  • 視覺化屬性編輯。
  • 設備選擇器
  • 可拆卸帆布
  • 實時畫布同步。

Framer使設計和原型製作變得容易。

使用Framer,你可以更智能的方式設計,你可以使用簡單的程式設計讓螢幕活起來,你可以無縫與你的團隊或客戶無縫分享與協作。

目標受眾

  • 想要使用高級原型設計工具的設計師
  • 開發人員希望運用他們既有的 JavaScript 技巧在技術上增添可用的設計工具
  • 正在尋找一體化設計工作流程的設計師
  • 想要創建響應式佈局和令人驚嘆的互動的設計師

關於講師  

Pablo Stanley 產品設計師

你好,我是Pablo Stanley。 我是舊金山的產品設計師。我是舊金山Carbon Health這家醫療保健創業公司的設計師和共同創始人。我喜歡解決設計難題、製作看起來傻傻的插圖、編怪胎的音樂、創作豐富多彩的動畫GIF、嚼素食漢堡和寫小說漫畫。

教學輔導是我新發現的激情之一。我想盡可能地學習和教學,Udemy是最好的平台。

我也創作一個名為“設計團隊”的漫畫系列。


  • 點選這個優惠連結 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程


Sponsored by Udemy


Lingoda

也許你會有興趣

使用 e-mail 追蹤 Soft & Share 網站

2 thoughts on “Framer 快速上手課程– 設計、產生程式碼與協同作業

Add yours

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: