Yet another Sketch Mirror App for Android

作者：李明亮
链接：https://zhuanlan.zhihu.com/p/23328430

Sketch 是目前设计产品交互原型的主流工具之一，官方提供的 Sketch Mirror 可以很方便地实时预览设计稿，但遗憾的是，Sketch Mirror 并没有 Android 版本。

如果想要在 Android 手机上预览 Sketch 文件，目前有如下三种方式：

1. 使用 Skala 插件；需要手动同步，一次只能预览一张图，不是很方便。
2. 使用 Crystal ，一个模仿 Sketch Mirror 的第三方实现；交互体验上不是很流畅。
3. 直接使用手机浏览器访问 Sketch 提供的本地预览链接…

于是我们自己实现了一个 Sketch Mirror App for Android ，功能不多，交互流畅，实时预览。

代码开源，链接地址为 GitHub - zhihu/mirror: Yet another Sketch Mirror App for Android.

同时提供一个已经编译好的安装包，猛击此链接前往下载界面。

使用方式如图所示：

使用过程中 需要注意 的地方：

• 最好在 WIFI 良好的环境中使用；如果确实无法搜索或连接到 Sketch ，可以手动杀死 App 再打开一次。将来可能会提供 USB 连接的支持，增强连接稳定性。
• 如果你使用的是 Sketch 官方提供的 Material Design 模版， 强烈建议 使用屏幕分辨率为 1280×720 的手机进行预览；预览失严重时，建议制作与手机分辨率相同大小的设计稿。
• 目前不支持横屏/分屏模式；双击长图，会把图片放大到屏幕宽度大小；双指缩放大图。
• 当 Artboard 数量较多时，可能崩溃。

希望大家用的开心 :)

最后简单介绍一下连接 Sketch 的原理。其实非常简单，点击 Sketch 提供的本地预览链接，会打开系统浏览器，比如 Chrome ；打开 Chrome 的「检查」功能，切换到 Network 标签，刷新网页，找到刚才点击的链接，我们看到这是一个 WebSocket ：

当你在修改 Sketch 文件的时候，数据就会源源不断地通过这个 WebSocket 传输到连接的设备上。所以第三方软件只需要不断读这些数据，就可以实现实时预览的功能啦。所以你也可以写一个 Yet another Sketch Mirror App for Android.

关键字：产品经理, sketch

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！