码农也该懂点sketch

一、简单的了解一下sketch

sketch

sketch是一款轻量的,易用的矢量设计工具,有了它,可以让你进行更加简单高效的UI设计。

个人总结下接触sketch一段时间之后的感受:

1、PS比上手Sketch要难得多,这就意味着独立产品开发者,sketch是你更优的选择。

2、sketch包大小比ps要小很多,并不是一个数量级的,因此,对于硬盘容量捉襟见肘的你,sketch是你不二的选择。

3、sketch有大量的免费矢量图标供你下载,直接拿来复用,而且社区还非常活跃,即便你没有找到素材,也不要害怕,你总能够从一些技巧和文章中获得灵感,来自己进行设计,别怕,一点都不难。

二、作为移动端开发,我们如何用sketch

因为,据我们所知,根据我们的历史经验,我们平常工作中用某个工具的时候,80%的时间只在使用这个工具20%的特性上,因此,我这里也就重点来拨开sketch20%的特性对于我们来说是什么?

请按照我的步骤来,过程结束你会得到一个标注好的包,对应这个包,你就可以做出一个设计优美的App了。

1、新建一个新的sketch工程,如何大概长这样:

空白工程

2、上面什么都没有,就是一个空工程,试想一下,我们app是有一个一个的页面组成的,那么,我们是不是要插入一个页面呢?然后在页面里面填点元素还是什么的?

好,那么,我们点击insert,window的左上角那个,出现这样换一个面板,选择artbord,

artboard

3、然后,在window的右侧那里选择,你需要的尺寸,这里我选择iPhone8了,对于做Android开发的,你应该也理解为什么视觉出的图总是按照iPhone来出,因为他们也懒啊~~~

4、好的,选择好了之后,现在就可以看到面板中有这样一个artboard了:

添加了一个artboard之后

5、接下来的事情自然是给这个面板添加一些元素了,比如,我们做一个底部有三个tab的页,分别是《广场》《发现》《我的》:

添加tabbar

6、你也许觉得这么好看的tabbar是我自己化出来的,错!!!,这是我添加的而已,准确说,这是别人设计好的一个可复用的symbols,我直接拖过来的,看这里:

可复用的symbols

7、这些symbols哪里来的?嗯,是从sketch的插件中下载的,这里就引入了插件的下载:按住command+,

你就会进入,然后点击libraries,就会下载,然后傻瓜式的安装即可。

下载
安装

8、安装之后,你就可以使用这些symbols了,tabbar我们已经添加好,同样的步骤,我们添加一下导航栏:

导航栏,底部tab添加完毕

9,接下来当然是添加一个列表了,那我们就添加一个风云人物吧:

风云人物

10.ok,这个页面算是设计好了,接下来,我们就要输出设计文稿给开发狗(自己)开发了,那么,怎么输出呢?你需要下载一个插件 :

就是这个sketch measure

安装这个插件即可,可以直接github上下载安装:https://github.com/utom/sketch-measure

11、接下来就改导出设计文稿了:在导出的过程中,需要注意一点,除了切图之外,其他的都是自动处理的,这里我们需要把底部的三个icon导出出来:

导出的方式是,选中要导出的icon,然后吧sketch measure工具打开,在点击一下那个刀的工具,然后在右侧选择要导出的分辨率,需要2倍图的可以点下那个3那个加号。

12、切完图之后,最后就导出吧:

导出规范

13,最终,你就可以看到sketch measure的输出了:

14,至此,你就可以开心的去做更具优美的设计做开发了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券