Android也能用上Sketch ...

  • 经验类型教程原作者:原作者

  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
38027 30 107 2017-03-08

        想必大家对Sketch已经很了解了,其中的Mirror作为与Sketch密切结合的软件,大大提升了设计师的效率。可是在设计安卓界面的APP时,Sketch已经不再提供手机端的即使预览了,想必小伙伴们一定很苦恼。或者说小伙伴们出于某种原因并没有花30RMB购买Sketch Mirror,但又不想抛弃Sketch和Mirror这方面强大的功能。


        下面就教大家如何使用自己的安卓或者iOS设备连接到Sketch。

        Here we go!

        首先需要准备两件神器:Sketch Preview和Skala Preview。

        前者是Sketch的一个插件,后者是一个全平台的软件(Mac OS, iOS, Android)。原理是通过Sketch Preview建立与Skala的联系,本身Skala主要是用于Photoshop的。


        干货来了,下面介绍两种安装方式:

      一、 文艺青年方式(自动安装)

        先下载附件中的Sketch Preview,解压到任意文件夹。找到Preview.sketchplugin双击打开,此时会自动运行Sketch并提示安装成功。然后找到Set Preview Size.sketchplugin双击打开,欧耶,又成功了!

        完了。


      二、 2B青年方式(手动安装):

        先复制解压的Sketch Preview,找到Sketch的安装目录,以Sketch 3为例,目录应该是:

~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/Plugins

        然后拷贝进去。或者打开Finder,找到目录Plugins -> Reveal Plugins Folder...拷贝进去!

        重启Sketch。完了,累吗?

        安装完之后,可以在Sktch中的Plugins中找到Preview和的话Set Preview Size,那么恭喜你,成功一大半了!没有的话,2B青年建议走文艺路线好吗~

        下面开始配置Skala Preview。

        首先在App Store里找到Skala Preview。

        找到了吗?

        没找到没关系,点这个链接安装:http://itunes.apple.com/us/app/skala-view/id498876303?mt=8

        点击之后会自动打开App Store完成安装。

        然后再从你想要预览的平台分别安装客户端。iOS就不说安装客户端的方式了,不会的买大安卓吧~ 安卓安装请从Google Play中下载:https://play.google.com/store/apps/details?id=com.bjango.skalaview

        如果打不开,恭喜你,你也被墙了。没关系,大家可以去豌豆荚中搜索下载“斯卡拉查看”(音译的Skala Preview),当然你也可以直接搜素Skala Preview。

        安装完成后分别运行Sketch、Skala Preview、和手机上的Skala Preview,需要保证手机和Mac处于同一局域网下。

        运行后,找到手机端Skala Preview上方的电脑图标,正常的话会显示已运行Skala Preview的电脑名称。点击后会提示Connected。


Skala官网:https://bjango.com/mac/skalapreview/



      预览的用法:

        在Sketch中选中你要预览的Artboard或者命名为Preview的切片,按下⌘P或者在目录中选择Preview,切换预览的尺寸按⌘⌥P或者在目录中选择Set Preview Size就可以了。


        当然Skala不止这点功能,大家可以自行摸索。

        本次教程到此结束。欢迎各位雅正。由于时间匆忙,没有截图辅助,有空我会补上,也会继续发布这方面的教程。

        Thnx.

全部评论:30

  • 2019-10-08 15:17

    插件安装不上~这是2014年的插件,是不是不合适新的sketch了?

  • cclier

    2019-03-26 16:12

    第一步就进行不下去了

  • Sange

    2018-12-18 17:52

    手机上搜不到电脑,连接不了,有没有大神知道怎么解决?

  • 伊笑白

    2018-10-26 13:18

    搞不定

  • Franki

    2018-06-07 17:19

    @漪妍lal: Skala Preview for macOS: http://download.bjango.com/skalapreview/ Skala Preview for iOS: http://itunes.apple.com/us/app/skala-view/id498876303?mt=8 Skala Preview for Android: https://play.google.com/store/apps/details?id=com.bjango.skalaview

  •          一只蛋蛋君

    2018-04-23 13:45

    预览的时候手机直接闪退。

  • 漪妍lal

    2018-01-09 13:11

    为什么在app store里找不到?你有安装包吗?

  • 莫奈丢了画笔

    2017-12-14 00:02

    @南心之: 应该是用不了。。

  • 南心之

    2017-11-14 22:52

    471不支持了吧,如何破?

  • Franki

    2017-04-13 10:47

    @eyelon: 正解~~

  • eyelon

    2017-04-12 20:09

    @lcylindsay: 是不是没装google框架?

  • eyelon

    2017-04-12 20:08

    @光明XC: 你是不是没装GOOGLE框架?

  • 阿成在路上

    2017-03-15 10:25

    @elviscai: 可以,很好用,感谢分享!

  • elviscai

    2017-03-09 23:25

    https://play.google.com/store/apps/details?id=com.smithyproductions.crystal 装个 Crystal 直接就可以了(限定同一局域网)~

  • 郭沙楞

    2016-10-21 10:38

    一连接就闪退

  • 小得_

    2016-08-08 15:00

    非常感谢作者,已经成功连接。

  • DesignerMax

    2016-03-23 18:10

    安卓手机表示死活连不上电脑

  • 嗯哼嗯哼

    2015-11-26 18:35

    https://bjango.com/mac/skalapreview/ skala preview for Os X 下载地址。作者提供的下载不了

  • lcylindsay

    2015-11-26 15:29

    已经在同一Wi-Fi下了,但是安卓手机死活连不上

  • lcylindsay

    2015-11-26 15:23

    @xitown: 我也是

  • 光明XC

    2015-10-16 16:17

    @Franki: 楼主好,我手机是红米note手机,按照你的步骤我都照做了,可是手机没有搜索到苹果电脑啊?这是怎么回事?是不是我手机下载的Skala Preview版本不对呢,我看了一下我的手机ip地址

  • 光明XC

    2015-10-16 14:52

    楼主好,我手机是红米note手机,按照你的步骤我都照做了,可是手机没有搜索到苹果电脑啊?这是怎么回事?是不是我手机下载的Skala Preview版本不对呢

  • Sunight

    2015-09-06 10:53

    @冰雕: 确实,这个挺尴尬

  • 冰雕

    2015-07-08 18:07

    大中华地区不提供下载!!!!

  • fyg

    2015-02-13 16:53

    可惜没Mac

  • xitown

    2015-02-05 17:15

    @Franki: 呃,确定是在同一个局域网~~

  • Franki

    2015-01-23 11:52

    @xitown: 没找到计算机,检查一下设置,看是处在同一IP段下不?

  • xitown

    2015-01-09 18:08

    ip6已搞掂,小米3还没弄好,一直提示神马no computers available

  • annejiajun

    2014-11-19 15:18

    非常感谢你大分享,期待下期

  • qq465644390

    2014-10-15 11:45

    刚好用到!非常感谢~

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票