使用 Sketch 畫 UI (含Prototyping 簡易入門教學)

Sketch 是近年流行的 UI 介面設計工具,簡單上手的設計讓許多設計師(包括我)紛紛從 PS 和 AI(以拉)等其他工具跳槽了。Sketch目前只有 Mac 版,官方提供 30 天試用版,正式版為US 99(約台幣三千)。

Sketch 的優點

  1. 專門為 UI 設計而生(Web、App、Mobile等)
  2. 向量繪圖軟體(即使放大和縮小都不會失真)
  3. 比Adobe系列輕量(安裝後為46.6MB/Adobe至少1GB以上…)
  4. 簡單好上手(內建豐富和可擴充的 UI 模版)
  5. 可以取代大部分 PS、AI功能
  6. 知名網路、科技公司都在用

一般在產品開發的過程中,設計師對應到工程師可能溝通不良的原因,除了設計流程的問題外,有很大一部分是因為對於彼此的世界不了解。因此工程師和設計師若是試著了解對方的語言,就可以降低彼此的溝通成本囉!而Sketch就是扮演著設計師和工程師之間溝通橋樑的角色:設計師將腦海中設計的圖像用Sketch呈現,讓工程師了解設計方向與呈現方式。

在 UI 設計流程中,會有以下三種階段,Sketch就是在Mockup流程中,扮演設計師和工程師之間溝通橋樑的角色:

  1. Wireframe(線框圖)
    為初期討論產品架構和基本功能。通常使用紙筆手繪,但建議於完成後電子化。修改成本低。
  2. Mockup(視覺稿)
    於 Mockup 階段著重於整體視覺、排版的靜態討論和確認,而 Sketch 主要會是在 Mockup 階段進行設計
  3. Prototype(原型架構)
    確認互動設計的流程並確認架構和視覺規劃是否有需要調整之處。接近(或等於)最終產品、修改成本最高。

 

使用 Sketch 內建 Template 元件樣板庫

先 下載 開啟 Sketch 後,會看到以下畫面

可依專案內容,使用內建 Templates 或新增 New Document ,我們先選擇 Material Design ,打開後有滿滿的免費元件樣版庫可以使用!

驚呼之餘,我們點選工具列左上方 Insert > Artboard

接著就複製模板的元件,貼上至 Artboard。設計完成的畫面可以使用右上方 Export 匯出 或 Share 直接分享你的設計圖囉!

 

使用 Sketch 設計 UI

接著來介紹一下Sketch 工作空間的版面配置:

上方為工具列、中間是工作區、左邊是Pages (圖層區),右邊為屬性區 (調整位置、圖片大小、透明度等)。

建立 iPhoneX 介面 Artboard( Insert > Artboard)

 

右方屬性區有許多app樣板,選擇 iPhoneX,再複製貼上樣版庫的元件,即可簡單輕鬆的設計 iPhoneX 的介面了!

 

是不是很簡單呢?(笑)

 

以下來介紹一些Sketch 好用、強大的功能:

1. Artboard

類似以拉裡的Artboard,為每個你設計的流程畫面,Sketch 用 Page 來區分不同 Artboard,也可利用不同的 Artboard 來製作各種尺寸的 icon。

2. 建立可同步修改的 Symbols、Styles

這應該是我從 AI 跳槽到 Sketch 的一大推力,把元素轉成同步的 Symbols,像是一個模組一樣可以重複使用,若需要修改,只要改Symbols 就可以同步完成!

假如以一個 App 來說,所有的畫面都有一個黑色的 Navigation Bar,萬一某天客戶說要全改成白色背景和修改文字顏色,在 Photoshop 或 以拉 要怎麼製作?

OS: 可能會改到天荒地老哪…

 

3. Plugins 常用外掛

推薦外掛管理工具 Sketch Toolbox ,已整理好超多外掛,直接下載安裝到指定目錄即可!

  1. 外掛管理工具 Sketch Toolbox
  2. Notebook 註解好幫手
  3. Sketch Flinto 從 Mockup 到 Prototype
  4. Content Generator Sketch Plugin 生成假資料
  5. Sketch Measure 測量位置、大小
  6. Icon Stamper 簡單生成不同大小 icon

Sketch_Toolbox_Screenshot

 

關於作者:
@7netic 以淺顯易懂的方式,介紹分享平面設計領域,並衍伸出其它不同的創意角度與觀點,從文字設計、網站編排、平面設計、品牌視覺、數位∕動態、影像紀錄、插畫作品…等等,希望帶給大家多元視覺的風格體驗!

喜歡我們的文章嗎?歡迎分享按讚給予我們支持和鼓勵!

您可能也會喜歡…

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

%d 位部落客按了讚: