Sketch－如何成為開發者跟設計師的溝通橋樑

UI 設計除了 illustrator 還有其他選項嗎？為何每次設計師發結果都有落差？設計師，我們該如何一起合作呢？

簡報大綱：
1. 為什麼我推薦 Sketch？
2. Sketch 如何加速設計流程？
3. 為什麼設計與最後開發有那麼多落差？
4. Sketch 如何幫助設計與開發溝通？

Transcript

1. Sketch - 如何成為開發者
 跟設計師的溝通橋樑 奧革設計 - 陳奕豪
2. 關於我 奧革設計 - 創辦人 聯成數網 - 產品設計顧問 吉寶知識系統 - 產品設計顧問 使用者經驗研究分析 - 社團創辦人 陳奕豪
3. 和大家聊聊 1. 為什麼我推薦 Sketch？ 2. Sketch 如何加速設計流程？ 3. 為什麼設計與最後開發有那麼多落差？ 4. Sketch 如何幫助設計與開發溝通？
4. 我們裡面有 UI Designer 嗎？
5. 我們裡面有 F2E 嗎？
6. 多少人看過或用過?
7. Sketch 專注於介面設計的繪圖工具
8. 為什麼我推薦
 使用Sketch來做介面設計？
9. 推Sketch的原因 - 專注於介面設計上 - 出圖極為便利，省下大量時間 - 介面清楚乾淨，快速易學 - 強大的插件擴充功能 - 容易溝通及展示
10. Sketch 功能簡介
11. Mac 原生介面
12. 色彩管理 全域色彩 文件色彩
13. 向量圖檔 - Sketch 中的任何物件都是向量的 - 圖層任意延伸 - 輸出任意大小
14. 快速輸出 @2x @3x - 倍數輸出
 @2x @3x or @1.5x - 固定尺寸輸出
 1024w 1440w
15. 內建網格系統 - 方格網格（Grid, ⌃ + G） - 網格系統（Layout, ⌃ + L） - 網格計算工具
 http://gridcalculator.dk/
16. 共用樣式 - 共用樣式共用（Shared Styles） - 可以想成是 CSS .class 的概念 - 修改一處、處處更改
17. 共用元件 - 共用系統級元件（頁首、Topbar等） - 一處修改、處處修改 - 共用元件在圖層中會呈現紫色
18. Make Grid
19. UI Templates - Sketch 內建「iOS、Android、Material Design、 Web」等常用介面樣版、基本元件。
20. 製作自己的樣版 - Sketch 允許自行設計自己的樣版 - 團隊 / 專案功用的元件庫
21. Sketch 技巧篇
22. ⌥ 測量幫手 - 壓著 ⌥ 計算兩兩圖層之間的距離 - 方便對齊圖層 - 切版必備
23. 㵰 跨圖層選取 - 壓著 㵰 快速跨群組選取圖層 - 方便進行跨群組距離測量 - 方邊進行跨群組內容修改
24. 滴管工具 - 㵰 + C 啟動滴管功能 - 方便進行配色、選色
25. 拖拉輸出檔案 - 圖層面板中，直接將圖層拉到輸入的資 料夾中即可。
26. 調整大小很輕鬆 - 㵰 + 上/下/左/右 - 㵰 + Shift + 上/下/左/又 - 使用 Scale 工具
27. Help 選單很好用 - 㵰 + ⇧ + / 開啟系統自帶 Help 選單 - 用關鍵字執行功能 - 幾乎所有 Mac 程式都支援
28. 自訂快速鍵
29. 複製/貼上樣式 - 就像是 Office Word 的功能 - 我的快速鍵設定
 㵰 + ⌥ + C / V
30. Sketch 插件篇
31. Sketch Toolbox http://sketchtoolbox.com/
32. Content Generate
33. Rename it!
34. 標號神器 Sketch Measure
35. 工程師
 我們來聊聊
36. 為什麼設計與
 最後開發會有落差？
37. 產生落差的原因 1.缺乏溝通 2.缺乏溝通 3.缺乏溝通 4.缺乏溝通
38. 我想說....
39. 拿到設計稿
 不要急著切版
40. 每個人應該都要具備
 「系統思維」
41. 你看到的只是
 系統的一小部分
42. 設計與開發的
 溝通橋樑 1.眼見為憑，Sketch Mirror 2.讓設計動起來，Sketch + Marvel app
43. Sketch Mirror
 實際設備中瀏覽設計 http://www.bohemiancoding.com/sketch/features/
44. Sketch + Marvel app
 快速建立產品雛形 + https://marvelapp.com/
45. 工程師
 搭載Sketch
46. 精準切版 1. 測量尺寸與距離 2. 複製圖層 CSS 樣式
47. Sketch 資源 1. 設計師資源總匯（持續更新）
 http://resources.ogdesign.tw/ 2. Sketch App Resources
 http://www.sketchappsources.com/ 3. Sketch Tutorial 系列教學
 https://www.youtube.com/playlist? list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS 4. Learn Sketch
 https://designcode.io/sketch
48. 良好的溝通才能打造出 令人滿意的產品
49. 讓我們用同一種語言
 一起溝通吧！
50. 加入「使用者經驗研究分析」社團，一同交流 謝謝 https://www.facebook.com/groups/uiux.tw/ augus@ogdesign.tw