Sketch3 行雲流水的 UI design 工具,有 Sublime Text 輕快的體驗!


前言:
以前使用 Windows 的時候,一直有耳聞搞設計的都熱愛用 Mac,而自己使用了 Mac 一陣子卻感覺不出來差異,直到最近遇到了 Sketch3!這套設計界的神兵利器,讓我眼睛為之一亮!
這顆「黃鑽石」可以說是設計界的 Sublime Text,都是很輕量、又支援超多外掛,用起來就是一整個行雲流水呀~
尤其在 web design 與圖形設計方面,平常使用幾乎可以取代 photoshop、illustrator。

Sketch3 亮點整理如下:


  • 超輕量,讓你愛上的瞬開的體驗
  • 外掛超多,各種神奇的套件都有
  • 操作容易上手,行雲流水的境界
  • 可自訂 symbols、text styles 方便 reuse
  • 各種尺寸的圖片輸出
  • 支援向量圖檔編輯
  • 可快速切換像素預覽

常見的 web design 應用:
  • mock up
  • 開發 RWD 超方便,可快速切換在不同解析度下做預覽
  • 還可以輸出 Asset、CSS
  • 自建 template
  • 搭配 Bootstrap 3 UI Kit 快速建立 mock up [教學]
  • 可將 arborad 輸出到 zeplin
  • 有支援 Google 官方 Material Design 

sketch toolbox // 套件管理工具,必裝!之後其他套件都透過它來安裝
  • Content Generator // 自動填充假文、假圖,方便 mock up 佔位內容
  • Dynamic Button  // button 會隨內文寬度調整
  • sketch measure // 量測尺寸
  • AEFlowchart  // 畫流程圖
  • 用 Skala Preview 丟到手機上預覽
  • Sketch Notebook // 來標註設計稿說明有哪些圖,以及它們的名稱是什麼,讓RD開發起來更有效率。
  • Sketch Commands // 許多常用的 workflow task 也可將素材輸出
  • Sketch Dockpreview // preview your current artboard in the Dock
  • sketch set line height  // 行高
  • Renameit // 重新命名
  • Clear-styles // 清除樣式
  • Swap-Fill-Border // 填滿邊框交換
  • zeplin-sketch-plugin // zeplin

簡單的作個名詞解釋方便快速上手,詳見參考資源:
  • Page:像是沒有邊界的畫布,一個檔裡可分很多 Page,而 Page 裡可以放很多 Artboard。
  • Arboard:像是有尺寸的畫布 (就是 AI 的畫布),本身有內建各種尺寸可選擇(eg. iOS、Android、RWD)。而內容元素只有在 arboard 範圍內是可視的。
  • Symbol:針對一個 group 設定成模組,方便之後 reuse。

常用快捷鍵:
  • R 畫矩形
  • O 畫圓形
  • L  畫線
  • T 插入文字
  • cmd + g 群組化
  • cmd + d 複製並貼上
  • cmd + 加、減 放大縮小
  • 點選元件 + option 快速檢視與其他元件的距
  • UI將物件拖拉到桌面即可產生 png 圖

參考資源:
Bobo內心旁白:「再見了 Adobe 家族!胖胖的軟體真的不是我的菜...」

留言

這個網誌中的熱門文章

【Eclipse】MS950轉UTF-8亂碼解決方法 中文亂碼

使用 Feedly 訂閱 Ptt 的 RSS,讓手機少裝一些 App

Apache Access Logs 日誌依日期存檔