设计图走查对比功能 【Sketch】

蓝湖官方扫地僧发表于:2020年03月18日 16:15:55更新于:2020年03月24日 15:53:56


Lark20200318-193631.png

 


 该功能可以让你在苹果电脑上实时对比设计图和真实截屏。

  让下面两类图片在一定透明度下,叠加在一起,方便你对比工程师实际开发出来的界面是否准确。

  设计图: 预览 Sketch 中的设计图 

  真机 APP 截屏:手中 iPhone 真机 APP 界面的实时截屏



   在开始之前,你需要先检查装备:

   Sketch 客户端

   iPhone 一台

   iPhone 数据线一根

 

  1. 在 Sketch 内先选中要对比的设计图画板

  2. 在 Sketch 插件工具栏内打开蓝湖的走查功能 (快捷键 Shift + Cmd + O)

    image.png

 3. 打开 Mac 系统自带软件 QuickTime 的录屏功能


    image.png


           将 iPhone 连接到电脑后(首次需要在手机上点“信任”),点击录制按钮旁的下拉列表:


image.png


        

     详细方法:https://www.jianshu.com/p/d8f7adaf61ea



4. 然后将刚才打开的设计图蒙层套在 QuickTime 的手机投屏上


拖拽边框调整到合适大小即可

附件:Lark20200324-154705.gif • 5.23MB • 下载

回复(2)

  • 603091786

    还不如把这个功能考虑一下做在网页上,可以让开发自己先查看一下,设计师看到页面基本上知道哪些地方还原度没有到,但是开发自己是看不出来的,需要这个辅助功能

  • blandboy

    拖拽边框调整到合适大小,太不准确了。

    建议像Sketch一样,选择画板来对比走查,

    @2x的图就用二倍的设计稿来走查。

    @3x的类似!

您需要登录后才可以回复