用sketch如何實現交互點擊的視覺標註？

01-26

Viewer 這個案例據說是用sketch實現視覺點擊標註的，不知道是如何實現的，是配合了插件使用么，感激不盡。

utom 大神新開發的插件，同時他本人也是目前 Sketch 上相當流行的插件 Sketch measure 的作者。不過，據我所知，這個應該還沒有完全開發完成（比如導出部分），可以期待一下。

另外，類似的功能在 Zeplin 上也可以實現，可以看我之前的一個答案：Zeplin 的使用體驗如何？ - 知乎用戶的回答

快速回答：

1.在Sketch內輸入文字（你要備註的文本內容）

2.將文字變為備註。快捷鍵：ctrl+shift+5（注意是ctrl，不是cmd~）

3.ctrl+shift+e輸出

4.打開Index.html，ta-da~~ 標註成功！

Sketch Measure 插件完全免費，如果對它感興趣，歡迎移步專欄：[插件安利] 自動輸出標註及切圖的神器 - Sketch Measure - Sketch 中文教程 - 知乎專欄，本文將詳細介紹Sketch Measure 的用法，以及與同類插件（Zeplin）的優劣勢比較~

最新的Sketch Measure v0.9.0 已經可以導出Artboard了實現自動標註了。

utom/sketch-measure · GitHub

sketch比較適合做mockup，也就是高保真的、不可操作的視覺稿。如果做交互點擊標註功能，需要藉助於插件。

這裡可以推薦一款同時滿足這兩個功能的插件——墨刀sketch插件，國產的，簡單易用，基本不用學。

1，安裝MockingBot Sketch Plugin，上傳artboard到墨刀

2，點擊創建項目，選擇設備類型，設計稿就會自動上傳到墨刀

3，交互點擊：拖拽一個鏈接組件，添加頁面鏈接，就可以實現點擊交互效果了。不光是點擊交互，還包括長按、左右滑等常用手勢。

4，點擊右上角運行，查看標註。點擊元素，位置、間距、字體、顏色、不透明度、漸變色、樣式代碼等信息都能自動獲取

5，支持（Hex,RGB,RGBA,ARGB）四種顏色，支持Android、ios、網頁不同平台的單位（dp、pt、px等）換算，支持樣式代碼（Swift、Android、css、Less、Sass、Stylus），還支持吸管吸取顏色。

6，可以下載項目全部切圖的多倍率圖片，也可以下載單個切圖的多倍率圖片。

下載的圖片是打包好的。每個壓縮包里都有@1x @2x @3x @1.5x 四種圖片。

7，協作！協作！協作！即可以用鏈接分享，也可以添加團隊協作成員。同樣當設計師更改設計稿時，直接在上傳到墨刀，開發刷新一下就可以了，不需要像之前那樣發來發去了。

sketch配合合適的插件工具，效果還是非常強大的。好用的工具，泣血推薦給大家。

配合插件Sketch Measure 已經可以實現. 免去設計師手工標註.可選擇PT PX 等單位.

使用幫助: Sketch Measure - 插件 - sketch.im

在線演示: Spec Export - Sketch Measure 2.0

下載: Make it a fun to create spec for developers and teammates