給工程師的 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 設計) 

輕量級,簡單好上手(工程師 OS:就像 Sublime 之於 Eclipse

內建和可擴充的豐富 UI 模版(iOS、Material Design 等)

可以取代大部分 PS以拉Fireworks 等功能

搭配 FlintoZeplin 可讓工程師更開心,設計師提早下班

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

  • 11,375
Loading comments...

More from 張凱迪(KD Chang)