軟件介紹

Sketch Measure是一款非常著名的Sketch插件，它擁有十分出色的功能，集成了各種便捷實(shí)用的工具，包括標(biāo)注和切圖等等，可以幫助用戶(hù)更加輕松地完成設(shè)計(jì)工作，是廣大交互設(shè)計(jì)師必備的設(shè)計(jì)輔助工具。這里為大家?guī)��?lái)最新版本的Sketch Measure，有需要的用戶(hù)快來(lái)下載吧。

安裝方法

下載，然后解壓打開(kāi)，找到后綴是.sketchplugin的文件就是這個(gè)插件啦

接下來(lái)就是安裝插件了，首先打開(kāi)Sketch，在最上方的任務(wù)欄中找到插件(Plugins)，點(diǎn)開(kāi)，選擇管理插件(Manage Plagins)。

然后就會(huì)打開(kāi)插件管理界面，點(diǎn)擊左下角的小齒輪，選擇顯示插件文件夾(Reveal Plugins Folder)

接著插件文件夾所在的位置會(huì)跳出，將剛才的插件文件放入這個(gè)文件夾中就完成了，這時(shí)再打開(kāi)Sketch-Plugin時(shí)就會(huì)看到measure啦！

使用教程

使用Measure這個(gè)插件首先需要打開(kāi)它的工具欄，在sketch工具欄的Plugins - Sketch Measure - 工具欄，快捷鍵是control+shift+B。

Measure的功能全部集中在這個(gè)工具欄中，簡(jiǎn)單清晰。

標(biāo)注尺寸

用于標(biāo)注一些圖層的寬度和高度

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 尺寸 按鈕或使用快捷鍵 control ? + shift ? + 2

對(duì)于寬度和高度，如果你想分別單獨(dú)標(biāo)注以及設(shè)置顯示方式

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 尺寸 按鈕

標(biāo)注間隔

任何層與畫(huà)板之間的間距

選中在畫(huà)板上的一個(gè)層或選中任意兩個(gè)層

點(diǎn)擊工具欄上的 間隔 按鈕或使用快捷鍵 control ? + shift ? + 3

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

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 間隔 按鈕

標(biāo)注屬性

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

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 屬性 按鈕或使用快捷鍵 control ? + shift ? + 4

如果你想分別單獨(dú)標(biāo)注任何屬性

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 屬性 按鈕

標(biāo)注備注

在畫(huà)板上標(biāo)注一些備注，在規(guī)范導(dǎo)出的查看器中展示

插入文本層，鍵入一些文本

選中文本層

點(diǎn)擊工具欄上的 備注 按鈕或使用快捷鍵 control ? + shift ? + 5

設(shè)置切圖

快速設(shè)置層導(dǎo)出選項(xiàng)的預(yù)設(shè)和 規(guī)范導(dǎo)出 切片規(guī)格，例如下圖導(dǎo)出安卓資源

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 設(shè)置切圖 按鈕或使用快捷鍵 control ? + shift ? + S

如果你想創(chuàng)建切片圖層

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 設(shè)置切圖 按鈕

顏色命名

設(shè)置顏色命名和導(dǎo)出 .xml 文件給開(kāi)發(fā)者

點(diǎn)擊工具欄上的 顏色命名 按鈕或使用快捷鍵 control ? + shift ? + C

在 Sketch 中選中一個(gè)或多個(gè)圖層或文本層

在第 1 步驟彈出的顏色管理對(duì)話(huà)框界面中點(diǎn)擊 + 按鈕

如果你想編輯顏色命名

在對(duì)話(huà)框界面中雙擊顏色項(xiàng)目即可

規(guī)范導(dǎo)出

一鍵自動(dòng)生成 HTML 頁(yè)面，離線下檢查所有設(shè)計(jì)細(xì)節(jié)，包括 CSS 樣式。

在 Sketch 中選中一些畫(huà)板

點(diǎn)擊工具欄上的 規(guī)范導(dǎo)出 按鈕或使用快捷鍵 control ? + shift ? + E

如果你創(chuàng)建一個(gè) HTML 文件一個(gè)畫(huà)板，請(qǐng)取消選中“高級(jí)模式”

規(guī)范查看器

你可以使用 Safari 9+ 或 Google Chrome 來(lái)查看, 導(dǎo)出的規(guī)范基于 HTML 5、CSS 3 和 Javascript 呈現(xiàn)

選中一個(gè)層并懸停在層上來(lái)測(cè)量和獲得間距

點(diǎn)擊位于規(guī)范查看器界面右側(cè)屬性檢查器的顏色區(qū)域可改變顏色格式

使用 command ? + + 和 command ? + - 來(lái)縮放畫(huà)布

摁住鍵盤(pán)空格鍵, 同時(shí)鼠標(biāo)拖拽畫(huà)布可平移畫(huà)布

切換備注開(kāi)關(guān)可顯示和隱藏備注

注意事項(xiàng)

第一次執(zhí)行上述操作會(huì)彈出界面倍率和單位選擇對(duì)話(huà)框

選擇的倍率和單位基于當(dāng)前畫(huà)板尺寸，如 Sketch 默認(rèn) iPhone 7 畫(huà)板 375x667px 的倍數(shù)和單位分別為 1 和 px，同時(shí) Sketch Measure 也內(nèi)置了常用的倍率和單位，點(diǎn)擊下拉菜單即可選擇