专栏首页玩转全栈码农也该懂点sketch
原创

码农也该懂点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 条评论
登录 后参与评论

相关文章

  • Tensorflow Lite之图片识别研究

    有关TensorFlow的介绍建议看官网,如果懒的话可以直接看我上篇文章。官方告诉我们,入门TensorFlow lite的最好姿势是学习他的demo,这里从第...

    brzhang
  • 是时候来点arcore了

    简单的来港,ar就是增强现实技术,它是一种将真实世界信息和虚拟世界信息“无缝”集成的新技术,是把原本在现实世界的一定时间空间范围内很难体验到的实体信息(视觉信息...

    brzhang
  • 一个开源P2P-IM项目研究

    现在,小伙伴觉得隐私是非常重要的一件事情,谁也不希望裸奔在互联网的汪洋大海之中,那么如何做到,P2P IM,无服务器IM.

    brzhang
  • 关于VS2012加载项目失败解决办法

    帘卷西风
  • 云服务器无法登录

    用户2921004
  • 【玩转腾讯云】(负基础的超详细图文教程)云开发竟然可以直接开发网站应用

    之前对小程序云开发略有一些了解,见识过云开发小程序的方便与快捷,使用了云开发,再写小程序后端数据存储就可以直接使用官方提供的云数据库,图片文件的存...

    韩旭051
  • 商品综合评价排名

    店内有很多产品,而且包含但不局限于以下指标:浏览量、访客数、平均停留时长、详情页跳出率、下单转化率、下单支付转化率、支付转化率、下单金额、下单商品件数、下单买家...

    机器学习和大数据挖掘
  • 使用mac用终端登陆不了

    使用终端无法登陆。。。。。。。。。。。。。。。。。。。。。。。。。求大神解决。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...

    用户1508413
  • 谁用了22号端口,到底是谁

    通常情况下一般使用netstat -aunltp 查看服务器连接状态信息,windows 和 linux 都能使用,大家都也熟悉

    蒋小爱
  • TDSQL架构及运营介绍

    作者介绍:李瑞,高级DBA,拥有丰富的数据库运维运营经验,现负责腾讯云分布式数据库运营相关工作,对数据库的高一致性、高可靠、分布式架构等有深入理解,擅长MySQ...

    腾讯云数据库 TencentDB

扫码关注云+社区

领取腾讯云代金券