Sketch Measure使用教程

工具欄

一個集成了所有功能圖標的工具欄，可以方便操作每一個功能

執行 Plugin > Sketch Measure > Toolbar 或使用快捷鍵 control ⌃ + shift ⇧ + B

標注區域

有時你可能需要標注一個區域以突出該層，而這在 Sketch Measure 中很容易實現

1. 在 Sketch 中選中一個或多個層
2. 點擊工具欄上的 區域 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + 1

 

標注尺寸

用於標注一些圖層的寬度和高度

1. 在 Sketch 中選中一個或多個層
2. 點擊工具欄上的 尺寸 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + 2

   對於寬度和高度，如果你想分別單獨標注以及設置顯示方式

   可以在按住 alt ⌥ 鍵的同時點擊工具欄上的 尺寸 按鈕

 

標注間隔

任何層與畫板之間的間距

1. 選中在畫板上的一個層或選中任意兩個層
2. 點擊工具欄上的 間隔 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + 3

   如果你想分別單獨顯示頂部、右、底部或左的間距

   可以在按住 alt ⌥ 鍵的同時點擊工具欄上的 間隔 按鈕

 

標注屬性

標注圖層或文本層的信息，例如填充顏色、邊框顏色、不透明度字體和字號等

1. 在 Sketch 中選中一個或多個層
2. 點擊工具欄上的 屬性 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + 4

   如果你想分別單獨標注任何屬性

   可以在按住 alt ⌥ 鍵的同時點擊工具欄上的 屬性 按鈕

 

標注備注

在畫板上標注一些備注，在規范導出的查看器中展示

 

1. 插入文本層，鍵入一些文本
2. 選中文本層
3. 點擊工具欄上的 備注 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + 5

設置切圖

快速設置層導出選項的預設和 規范導出 切片規格，例如下圖導出安卓資源

 

1. 在 Sketch 中選中一個或多個層
2. 點擊工具欄上的 設置切圖 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + S

   如果你想創建切片圖層

   可以在按住 alt ⌥ 鍵的同時點擊工具欄上的 設置切圖 按鈕

 

顏色命名

設置顏色命名和導出 .xml 文件給開發者

1. 點擊工具欄上的 顏色命名 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + C
2. 在 Sketch 中選中一個或多個圖層或文本層
3. 在第 1 步驟彈出的顏色管理對話框界面中點擊 + 按鈕

   如果你想編輯顏色命名

   在對話框界面中雙擊顏色項目即可

 

規范導出

一鍵自動生成 HTML 頁面，離線下檢查所有設計細節，包括 CSS 樣式。

1. 在 Sketch 中選中一些畫板
2. 點擊工具欄上的 規范導出 按鈕或使用快捷鍵 control ⌃ + shift ⇧ + E

   如果你創建一個 HTML 文件一個畫板，請取消選中“高級模式”

 

規范查看器

你可以使用 Safari 9+ 或 Google Chrome 來查看, 導出的規范基於 HTML 5、CSS 3 和 Javascript 呈現

• 選中一個層並懸停在層上來測量和獲得間距
• 點擊位於規范查看器界面右側屬性檢查器的顏色區域可改變顏色格式
• 使用 command ⌘ + + 和 command ⌘ + - 來縮放畫布
• 摁住鍵盤空格鍵, 同時鼠標拖拽畫布可平移畫布
• 切換備注開關可顯示和隱藏備注
• 

   

在線演示: http://utom.design/news/

注意事項

第一次執行上述操作會彈出界面倍率和單位選擇對話框

 

選擇的倍率和單位基於當前畫板尺寸，如 Sketch 默認 iPhone 7 畫板 375x667px 的倍數和單位分別為 1 和 px，同時 Sketch Measure 也內置了常用的倍率和單位，點擊下拉菜單即可選擇