Sketch 插件 - marketch

tags
Tool
Works
Design
date
🐞
最新版本的 Sketch 出现了兼容问题,插件暂时无法使用

S 情境

Sketch 是一款主流的用户体验设计工具,但对于交互文档的支持较弱,阅读体验存在提升空间。主要体现在导出 PDF 时,没有站点地图
  1. 阅读者无法快速浏览文档结构,无法高效把握整体内容
  1. 在不同页面(功能模块)间导航体验差

T 任务

寻找是否存在插件可以解决上述问题,若无考虑自行开发。

A 行动

发现了一款名为 Measure 的插件
Sketch Measure V3.4.1-Sketch 74.1最新版 一键导出标注和切图插件Sketch Meaxure 支持macOS Big Sur系统
UI设计师标注切图神器 旧插件的颜色命名功能,在新插件上可以直接使用Sketch自带的文档颜色管理重命名,这样导出的HTML也是带颜色命名的 这两款插件都可以直接下载, Sketch MeaXure是使用TypeScript重新实现Sketch Measure,并使用Sketch JavaScript API。 新增 标注切图工具快捷图标 1,添加【瀑布流展示】、方便预览、查找设计稿 2,导出新增thumbnail文件夹,文件夹放置缩略图,便于网络跟快的加载。 3,切图素材可点击下载-"本地打开index.html无法直接下载"(不过可以另存为下载),部署到线上或者通过IP网络的形式访问可一键下载。 4,汉化插件菜单。 与最新版本的Sketch(v70.3)完全兼容。 最新的色板功能支持。 安装 下载并解压 Sketch Measure.zip 双击 Sketch Measure.sketchplugin 完成安装 有时你可能需要标注一个区域以突出该层,而这在 Sketch Measure 中很容易实现 标注尺寸 用于标注一些图层的宽度和高度 标注间隔 任何层与画板之间的间距 标注属性 标注图层或文本层的信息,例如填充颜色、边框颜色、不透明度字体和字号等 在画板上标注一些备注,在规范导出的查看器中展示 设置切图 快速设置层导出选项的预设和 规范导出 切片规格,例如下图导出安卓资源 设置颜色命名和导出 .xml 文件给开发者 一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。 你可以使用 Safari 9+ 或 Google Chrome 来查看, 导出的规范基于 HTML 5、CSS 3 和 Javascript 呈现 选中一个层并悬停在层上来测量和获得间距 点击位于规范查看器界面右侧属性检查器的颜色区域可改变颜色格式 摁住键盘空格键, 同时鼠标拖拽画布可平移画布 切换备注开关可显示和隐藏备注 在线演示: http://utom.design/news/ 第一次执行上述操作会弹出界面倍率和单位选择对话框 选择的倍率和单位基于当前画板尺寸,如 Sketch 默认 iPhone 7 画板 375x667px 的倍数和单位分别为 1 和 px,同时 Sketch Measure 也内置了常用的倍率和单位,点击下拉菜单即可选择 声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
Sketch Measure V3.4.1-Sketch 74.1最新版 一键导出标注和切图插件Sketch Meaxure 支持macOS Big Sur系统
插件拥有简单的站点地图(只支持一级目录),且大部分功能针对 UI 进行设计,对交互文档阅读体验的提升有限。
另外一款名为 marketch 的插件,虽然仍然面向 UI 设计稿进行设计,但在站点地图的导航上更加友好(支持二级,页面+画板的层级导航)
marketch 在 Github 开源,于是决定进行二次开发,进一步提升交互文档的阅读体验。
插件的逻辑可以分为 2 个部分
  1. 与 macOS 交互:决定导出前的设置项
  1. 前端 HTML+CSS+JavaScript:决定导出后的样式、交互,是核心部分
与 macOS 交互部分,需要使用 Objective-C 开发,对我来说是一个完全陌生的语言,比起相对熟悉的 JavaScript、Python,语法也非常的「怪异」,废了不少功夫查看官方文档和第三方文章。
前端部分,核心逻辑全部在 index.html 文件中,阅读整体代码基本了解了各部分的逻辑;后续介绍的「拖拽查看」功能也通过阅读 Measure 的源码进行模仿实现。

R 结果

从第一个版本到最近一个版本历时 3 个月,期间完成了 17 次提交,完成了至少 12 个优化点。

画板预览图

灵感来自 Axure 的编辑模式,设计师可以通过 hover 站点地图的某个项目快速预览页面内容,方便在复杂文档中高效获取页面下的信息,快速导航。我将此功能也融入导出的文档中。
notion image

识别文本图层中的 URL

交互文档经常会引用其他模块的文档,或者第三方 API 等文档供技术参考;之前的插件需要选中图层中逐个复制链接再粘贴到浏览器中访问,此功能实现了 hover 图层时自动识别,点击直接跳转,提升了查看链接的体验。
notion image

优化导出文件的目录结构

插件原本导出后,会将所有画板 PNG 全部显示在一级目录中,导致寻找文档的访问入口(index.html)的效率低下,通过修改导出逻辑,实现了将 PNG 图片收纳进文件夹,简化了目录结构,更加清爽、访问文档更快捷。
notion image

支持拖拽浏览

按住空格可拖拽浏览,提升浏览体验。

优化侧边导航样式

优化后,层级结构更加清晰
notion image

支持突出显示某个节点

当某个画板更新后需要提醒合作伙伴关注时,可在 Sketch 中在画板名称尾部追加符号 * 则导出后突出显示此画板提醒阅读者关注
notion image

支持设置默认显示比例

用户中有使用 1 倍也有使用 2 倍尺寸进行设计的,若使用 2 倍设计,则阅读文档时使用 50% 缩放比例会更加合适,故在导出时增加了设置项。
notion image

自动设置页头信息

观察到有同事会在每个画板头部显示画板名称,部分小组将此列为文档规范,每次手动填写比较繁琐,所以通过插件读取画板名称,自动将名称添加在页面头部,省去手动操作的成本。
notion image

其他体验细节优化

  • 支持通过链接打开特定页面
    • 旧版本:通过链接只能默认打开首个画板
      此版本:通过链接可以打开复制链接时所在的画板,方便通过链接分享文档
  • 点击侧边导航,默认定位到页面顶部
  • 通过 Cmd/Ctrl+加减键放大或缩小图层
  • 浏览器标签显示 Sketch 源文件的名称
 

© jiangzilong 2024