Mirror镜像的运用- Sketch从入门到精通

Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图:

clip_image002

看见了么?怎么样能实现和手机同步呢?首先你要在手机上下一个Mirror,这个是个APP,在Appstore上一搜就出现了,然后下载到手机里边。如下图:

clip_image004­

看见左下方的有个小钻石的线描的图标了么?叫Sketch Mirror,之前就叫Mirror,近期更新了,就前面多了个Sketch。下面我们来看看怎样和电脑的Sketch进行同步链接,首先你要确保手机和电脑在一个Wifi下面,才能确保链接。然后打开在Sketch里做的比如iPhone6尺寸的一个手机界面,把手机里的Mirro打开,电脑上点击Mirror,你就会发现电脑上的Mirror上面多了个小红点:

clip_image006

这就说明连接成功了。然后你点击电脑上的Mirror,就会出现手机设备的名称,比如我的手机上我的名称叫smiler,那么Mirror就会自动搜索到手机设备,如下图:

clip_image008clip_image010

看见smiler的iPhone了么?然后点击它,这样你电脑现在打开的是哪个Sketch文件,手机上就会显示哪个了。当然手机里面是可以选择的,以你Sketch上的建的画板名称显示的,所以电脑上用Sketch做图的时候,一定要先把画板命名好,因为比如你要做很多个界面的时候,方便在手机上快速找到你想要预览看的效果。

假如你周围也有人打开了手机上的Mirror,那么你的电脑上Mirror里也会显示出来,你可以连接到别人的手机设备上,比如,你做了一个iphone5的尺寸,但你没有iphone5的设备,正好你周围的人有,手机上也有Mirror软件,那么你就可以让他在他的iphone5设备上打开Mirror,就可以看到你在电脑上做的iPhone5的界面效果图了。这样有利于更准确的实现的你的效果图,因为最终程序员们是要在手机上实现你的设计的,不再实际真机上看效果,仅仅在电脑上看效果图是不准确的,有了Mirror这个镜像,就能更好的实现你的设计,提高设计的准确度。

我是完全离不开Mirror镜像了,而且Sketch里面已经有默认的苹果各机型的尺寸,和安卓机的一些手机基本尺寸了,所以你在设计相应的手机界面效果图时,就可以直接在Sketch提供的默认手机画板上进行设计,然后利用好Mirror镜像,相对应的手机机型,来看看实际在真机上的效果预览,我觉得这是非常有必要的。

不仅仅是能看见预览效果图,你接连成功后,直接在电脑上做图,有改动的时候,手机上显示的当前界面上的元素就会实时的移动,这样你就可以一边设计一边直接在真机上看到效果了,是不是很棒!

大家可以试一下,对了,Mirror那个手机APP是收费的,具体多少钱我忘记了,买了好久,又更新了几次,大家谅解一下哈。我记得不贵,在可接受的范围,但这个好的软件,值得去购买。我觉得设计师们应该支持正版,因为这样你去花钱买你所支持牛逼的软件或产品,他们才会做出更好的东西来让你使用,所以个人建议支持正版,有版权意识。相信聪明的你们已经掌握了这节课,那么就赶紧去联系吧,软件多练才会熟练,没什么难的,只要勤奋不怕苦,赶紧去练习吧。

在线课程地址http://study.163.com/course/courseMain.htm?courseId=1176001

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7036/

(0)
iouedioued
上一篇 2015-07-13 09:20
下一篇 2015-07-13 09:36

相关推荐

  • Sketch导出icon神器插件App Asset export教程

    废话不多说,直接开整: 1.首先可以直接在 Sketch Tool 中搜索"App Asset Export" 这个插件直接安装 或者到源码主页下载双击安装插件Github开源下载地址 使用方法 建一个1024x1024大小图层进行Icon设计 打开Plugins…

    2018-03-13
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • UserFlows一款能在Sketch画板生成流程图的插件

    UserFlows是一款能在Sketch中从画板生成流程图的插件。 定义链接 要定义两个画板之间的链接 - 选择一个图层和目标画板,然后运行定义链接命令(Cmd Shift K)。 添加条件逻辑 通过插件创建和管理条件,轻松显示条件…

    2016-12-08
  • 从零开始学Sketch——入门篇

    如果你是一枚交互设计师或者UI设计师,那么你一定知道Sketch这个强大的矢量设计软件;如果你用过Photoshop,那么在你接触了Sketch之后就能了解到这款产品相对于PS的优点,说不定会跟我一样变成一个Sketch的死忠粉。…

    2016-01-06
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • Sketch从入门到精通-Sketch3四种模糊方式

    现在经常能看到界面上各种模糊效果,或者是背景模糊,然后上面排字,放图片;通常是做背景的时候用到的模糊效果。在Sketch里面就有基本的四种模糊方式,分别介绍一下。 首先是最常见的高斯模糊(Gaussian Blur),…

    2015-08-03
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • Sketch从入门到精通-Sketch3 插件的运用

    插件往往是最提高工作效率的,用过Sketch的人,都被Sketch强大的插件所折服,因为真的是太好用了。而且,Sketch还有个专门整合了插件的一个下载器,叫Sketch Toolbox的Mac应用,下载和安装Sketch的利器。 直接在里…

    2015-08-28