Sketch學習筆記(一)-基礎介面與工具

WenChien Lee
6 min readDec 21, 2018
Sketch學習筆記

今年才同時接觸了Mac系統與Sketch,從整個和windows完全不一樣的陌生使用者介面和體驗,直到使用Sketch做完整個專案,對Sketch了解不少,為了增加自己的印象與分享給其他和幾個月前的我一樣初次接觸的新手,決定整理出一系列「Sketch學習筆記」!

Sketch基本介紹

Sketch是目前很夯的UI設計工具,目前僅支援MAC系統。為年費制,到期還是可以使用,只是無法更新版本。

官網:https://www.sketchapp.com/

Adobe也有出一款UI設計工具名為Adobe XD,也非常值得研究!

另外,目前也漸漸出現更多專為UI設計而生的工具,例如FigmaLunacy等…相信一定還有更多我沒聽過的工具,未來設計UI也會越來越便利!

歡迎介面

打開Sketch會看到如下的歡迎畫面。

Sketch歡迎介面(版本52.5)

右欄上方可切換選單(Recents/Template),如果近期開過其他檔案,則會顯示在Recents列表中(按右鍵可以選擇clean)

在Template選單中,可以選擇打開規範元件庫或範例檔案,或者開啟一個全新Web Design專案,Sketch將自動建立好art board

基本操作介面

Sketch基本畫面(已自行安裝Anima工具)

這篇會大概簡述一下有哪些工具,後面的筆記才會介紹得更詳細喔!

整個Sketch畫面大致如下:

  • 上方:工具列
  • 左側:圖層面板
  • 右側:元件細節設定
  • 中間白色區塊:畫布,基本上沒有邊界

新增工具

新增元件工具

在預設最左邊的加號Insert工具中可以新增各種元件。

除了元件,要增加Art board(設計面板)/切片(Slice)/感應區(Hotspot)也在這裡!

工具列表解釋如下:

  • Shape:用以新增各種形狀
  • Vector:鋼筆功能,用法與其他繪圖工具的鋼筆相同,以向量方式新增點線面
  • Pencil:同Illustrator鉛筆功能,計算手繪最佳路徑為向量線條
  • Text:文字工具
  • Image:插入圖片工具
  • Artboard:要啟動一專案,必須的功能,畫布上的畫布(後續會再說明)
  • Slice:切圖工具
  • Hotspot:prototype設定工具,可以設定link範圍,不限於元件
  • Symbols與Text Style可以置入IOS規範的元件與字體樣式

Data工具

這是新版的重大更新之一,以前想要做隨機的資料,需要安裝一個叫做「 content generator」的外掛,在新版的Sketch中不但不用安裝這個外掛,資料還可以自行設定!是一個超棒的更新!

後續再介紹如何使用它!

群組與元件編輯工具

群組與元件編輯工具

Group/Ungroup:編輯/解散群組,用法同Illustrator。按著Command可以快速選擇單一圖層(無論是否被群組)。Group的快捷鍵為Command+G。

Create Symbol:新增元件。在專案執行的過程中,設計需要盡可能地將元素元件化以求更高的效率(不管是在設計面或是程式面上),使用元件新增將會開啟一個新的Page,專門存放元件,預設名稱為「Symbols」,可以自行改名。

Zoom:視窗控制。可以手動點增減或是快捷鍵Command+滑鼠滾輪,也可以點擊中間的%數,有選單可以選擇!

圖形編輯工具

圖形編輯工具
  • Edit:單點編輯
  • Transform:形變
  • Rotate:旋轉
  • Flatten:展開路徑
  • 路徑編輯:聯集/減去/交集/差集
  • Mask:遮色片工具
  • Scale:縮放
  • Make Grid:格線複製工具
  • 圖層順序編輯:往上移/往下移

原型製作工具

prototyping tools

這系列工具是建立互動原型用,不過市面上其實也有不少相關工具,Sketch目前提供的動效較少,後續會再介紹!

設計輔助工具

設計輔助工具

這邊可以開啟或關閉一些尺規與格線輔助工具。

輸出工具

圖片輸出工具

可以輸出畫面與元件切圖…等,Sketch還支援jpg/png/svg等各種格式。

自定義工具列

在上方工具列中點下右鍵,就會出現自定義調整視窗。

工具列顯示方式設定

你可以設定同時顯示Icon和工具名稱,也可以只有Icon或只有名稱。

選擇Customize Toolbar,可以自行拖曳出自己喜歡或慣用的順序!

連「空格」都可以自訂的選單~

那麼!基本的介面與上方工具列的概述就到這邊!

後續會再繼續介紹更多的工具使用方式與圖層和元件編輯介面喔~

以上是我的Sketch學習筆記,若有錯誤的地方歡迎大家討論指正!如果你覺得這篇文章還算實用,有幫助到你的話,請不吝給我一點掌聲!給我繼續寫作的動力喔!

--

--

WenChien Lee

一個喜歡分享的 UIUX 設計師!這裡分享各種講座與工作坊心得、工具教學、推薦書單、職涯觀點和生活體驗!