張凱迪(KD Chang)
台灣大學，主修經濟學，臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台，也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。
給工程師的 Sketch
Prototype 入門教學
張凱迪 @kdchang
Outline
What's Sketch ?
Why Sketch ?
常用功能介紹
從 Mockup 到 Prototype
好用工具及學習資源
What's Sketch ?
Sketch 是一個 Mac 上的輕量級介面設計工具
Sketch 小檔案
2012 年贏得 Apple Design Award
目前只有 Mac 版，以前曾有 Web 版
Sketch 是一個 Mac 上的輕量級介面設計工具
2010 年由荷蘭公司 Bohemian Coding 所創建
提供 30 天試用版，正式版 99 鎂（教育價：5折）
已有眾多大型網路、科技公司採用
Why Sketch ?
一般設計流程
Wireframe
Mockup
Prototype
一般設計流程
Wireframe（線框圖）
保真度低（low fidelity ）、修改成本低。適合初期討論產品架構和基本功能。通常使用紙筆手繪，但建議於完成後電子化
Mockup（視覺稿）
保真度中（middle fidelity ）、修改成本中。於 Mockup 階段著重於整體視覺、排版的靜態討論和確認
Prototype（原型）
保真度高（high fidelity ），接近最終產品、修改成本高。確認互動設計的流程並確認架構和視覺規劃是否有需要調整之處
其他設計常用工具
Sketch 優點
活躍的第三方套件生態系
專為 UI 設計而生（Artboard 設計可以方便 UI 設計）
內建和可擴充的豐富 UI 模版（iOS、Material Design 等）
Sketch 主要用在 UI 介面設計(Mockup)
知名網路、科技公司都在用
常用功能介紹
初始畫面
使用模版
開始空白專案
工具欄（可自定義）
主要工作區域
圖層區
屬性區
自定義工具欄
點選工具欄區域 > 選擇 Customize Toolbar
拖曳欲使用工具至工具欄
常用工具
製作圓形 Avatar
旋轉製作重複圖形
Mask
先插入圖片後將製作的圓形覆蓋上去
選取所有元素（圓形在上）
點選 Mask 鍵
Mask
可移動調整內部圖片
Rotate
先新增直線
選取 rotate copies 並填寫複製數量
Rotate
插入工具
點選 Insert > 選擇欲插入元素
新增空白 Page（頁面/圖層）
點選 + 新增 Page
新增空白 Artboard（畫板）
點選 Insert > Artboard
新增空白 Artboard（畫板）
點選 Insert > Artboard
新增空白 Artboard（畫板）
點選欲設計的介面大小
iOS Design
Android Design
Mobile Design 參考
新增空白 Artboard（畫板）
空白iPhone 6 Artboard
畫板就像一個個介面
在 Page 中可以一次瀏覽多張 Artboard，方便介面設計
Artboard（畫板）是 Sketch 成果展示區域
一個 Page（頁面）一般放置至多 12 個 Artboard
Artboard（畫板）特性
使用模版進行介面設計
點選欲使用之模版
iOS Template
Android Template
iOS icon Template
Android icon Template
Mac App icon Template
Web UI Template
Template 使用
從 Symbols Page複製欲使用之模版
先新增一個 UI Page，並新增一個 Artboard
複製貼上大法
貼上從 Symbols Page 複製來的模版
成果展示
預覽、分享或匯出檔案
自從有了 Sketch，
小碼農也可以自己設計 UI了！
從 Mockup 到 Prototype
從 Sketch 到 Flinto
Flinto 小檔案
快速製作 Prototype 簡易工具
整合 Sketch 易學好用
支援常用換場動畫
目前支援 Mac
正式版 99 鎂。也有試用 30 天版本
Welcom to Flinto
最近專案
開始空白專案
於手機瀏覽成果
Sketch 外掛
從 Sketch 直接匯出到 Flinto
從 Sketch 直接匯出到 Flinto
工具欄
主要工作區域
圖層區
屬性區
串起 flow
點選串連結
建立連結區域和連結動畫
預覽、分享
設計開發協同工作神器 Zeplin
支援匯入 Sketch 檔案，可以線上協同並分享
不用再腦補
不用再猜色碼
設計師和工程師感情更好了！
好用工具及學習資源
使用 Sketch Toolbox 管理外掛
Notebook 註解好幫手
Sketch Flinto 從 Mockup 到 Prototype
Content Generator Sketch Plugin 生成假資料
Sketch Measure 測量位置、大小
Icon Stamper 簡單生成不同大小 icon
常用外掛
官方教學
Sketch 中文教學
Sketch 問答
參考文件
給工程師的 Sketch Prototype 入門教學
By 張凱迪(KD Chang)
給工程師的 Sketch Prototype 入門教學
工程師和設計師總是無法了解彼此的世界嗎？本簡報提供工程師的 Sketch Prototyping 簡易入門教學，讓你可以了解如何使用 Sketch 打造產品 Prototype ，往全端工程師邁進。 Python Web 程式設計入門實戰 https://hahow.in/cr/python101 JavaScript 程式設計新手村 https://hahow.in/cr/javascript101
