Sketch 插件 - marketch
tags
Tool
Works
Design
date
‣
最新版本的 Sketch 出现了兼容问题,插件暂时无法使用
S 情境
Sketch 是一款主流的用户体验设计工具,但对于交互文档的支持较弱,阅读体验存在提升空间。主要体现在导出 PDF 时,没有站点地图
- 阅读者无法快速浏览文档结构,无法高效把握整体内容
- 在不同页面(功能模块)间导航体验差
T 任务
寻找是否存在插件可以解决上述问题,若无考虑自行开发。
A 行动
发现了一款名为 Measure 的插件
插件拥有简单的站点地图(只支持一级目录),且大部分功能针对 UI 进行设计,对交互文档阅读体验的提升有限。
另外一款名为 marketch 的插件,虽然仍然面向 UI 设计稿进行设计,但在站点地图的导航上更加友好(支持二级,页面+画板的层级导航)
marketch 在 Github 开源,于是决定进行二次开发,进一步提升交互文档的阅读体验。
插件的逻辑可以分为 2 个部分
- 与 macOS 交互:决定导出前的设置项
- 前端 HTML+CSS+JavaScript:决定导出后的样式、交互,是核心部分
与 macOS 交互部分,需要使用 Objective-C 开发,对我来说是一个完全陌生的语言,比起相对熟悉的 JavaScript、Python,语法也非常的「怪异」,废了不少功夫查看官方文档和第三方文章。
前端部分,核心逻辑全部在 index.html 文件中,阅读整体代码基本了解了各部分的逻辑;后续介绍的「拖拽查看」功能也通过阅读 Measure 的源码进行模仿实现。
R 结果
从第一个版本到最近一个版本历时 3 个月,期间完成了 17 次提交,完成了至少 12 个优化点。
画板预览图
灵感来自 Axure 的编辑模式,设计师可以通过 hover 站点地图的某个项目快速预览页面内容,方便在复杂文档中高效获取页面下的信息,快速导航。我将此功能也融入导出的文档中。

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

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

支持拖拽浏览
按住空格可拖拽浏览,提升浏览体验。
优化侧边导航样式
优化后,层级结构更加清晰

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

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

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

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