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 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- 更多UI/UX線上課程
- 歡迎加入 Framer Taiwan 社群
- 什麼是 MVP ?
- 一天內從產品概念到完成 MVP
- 成為產品經理
- Soft & Share 團購和特價線上課程 加入這個社團追蹤我們的團購訊息與 特價線上課程
- 追蹤這個 Twitter ,獲得特價線上課程訊息
使用 e-mail 追蹤 Soft & Share 網站
你好 我想問framer可做網頁設計嗎?
可做網頁設計的原型 https://blog.framer.com/prototyping-for-the-web-with-framer-c619925272d5