用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

平时在设计完界面之后,设计师都会用样机把界面包装下,增加点氛围,提高界面通过率。这些操作一般都是在PS中完成的。用智能对象,嵌套到样机模板中,以后直接更新智能对象的图片就可以了。那么在Sketch中怎么做呢?

在Sketch中利用插件也可以做到,这个插件叫做Magic Mirror。可以理解为Sketch中的智能对象。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

Magic Mirror可以实现PS的智能对象效果,无论外面的容器怎么变化,里面实际界面保持不变,非常适合做样机任务。而且是直接展示画板,不用像PS一样需要到导出图片。直接上图看效果。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

1:安装插件

下载地址见文章末尾。

安装过后,右侧的属性面板中会多出这个小面板。可以进行自动刷新、旋转、比例选择等操作。选择Plugins——Magic Mirror,可以进行插件的禁止、激活、全部刷新等操作。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

2:创建形状图层

我们从网上下载样机图片,这里拿iPhone8为例子,因为iPhone X屏幕是圆角,画起来不好画……在手机屏幕上用钢笔工具勾勒出屏幕的形状,一定要是四个锚点(后面有原因),调整好角度细节。

这个形状就是我们需要用到展示界面的容器。当然了,为了让展示看起来更真实,也可以在屏幕中加一些反光之类的效果。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

3:选择展示界面

容器做好后,接下来就是容器的内容了,这个内容就是你之前做好的项目中的界面。选中需要展示的界面画板,右侧属性栏新增的Magic Mirror面板下勾选 Incloud In Artboards,勾选的就是需要在容器中展示的。

需要注意的是,展示的页面和界面画板可以在不同的Pages中的,实际上我们做展示,也都会单独做个页面来用。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

4:开始展示

以上步骤做好后,返回展示页面,点击刚才做好的形状图层,右侧选择需要展示的界面,就可以实现我们需要的效果了。建议勾选Auto Artboard Refresh,这样就会自动刷新,如果没有变化,手动点击刷新即可。

Size,直接选择默认的@1x就行,因为我们在Sketch做的界面基本都是按照375-667这种一倍尺寸来设计的。

如果有很多样机需要展示,就多做几个形状图层,再选择需要展示的页面画板即可。

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

需要注意的地方

Magic Mirror由于主要是来展示屏幕界面的,所以只针对于正常的四边形,三角形、五边形、凹陷进去的四边形等等这些都无法用,选择形状后不会显示选择画板选项,有的会显示选项,但是无法展示画面。

其实严格来说是“外部突出的的四个锚点的形状”,因为就算是正方形有四条边,在一条边上增加一个锚点就不起作用了,估计是插件做了锚点判断。

最后还有一条很神奇的是,圆形竟然也能显示……

用了这个插件,我在Sketch中轻松实现了智能对象功能-UI黑客

Magic Mirror是需要收费的,免费版只能使用@1x的图片,其他2、3、4等更大的会加水印。

其实在展示界面的细节角度来说,PS有丰富细腻的蒙版、扭曲、光效工具,更有表现力。Sketch由于是矢量软件的关系,在这方面是不如PS的。大家可以根据需求灵活运用。

插件下载

最后附上插件下载地址

http://bbs.uihacker.com/?thread-32.htm