UI设计之如何从Photoshop转到Sketch(2)

来源:网络   作者:热心网友   发布时间:2017-04-12    浏览次数:484

三.使用流程简要说明


1.基本准备:

如下图,在做项目的时候,我基本上是一个内容模块是一个Page,然后它的子页都在这个Page的不同的艺术板里,这样可以非常直观的展示出页面结构和逻辑,不容易有遗漏,同时也方便复用一些公共部分;Sketch导出效果图的时候可以直接以艺术板的名字命名图片,所以艺术板的命名建议尽量规范一些,这样导出之后整理图片会非常方便;266858e5d0eda801219c7745b43a.jpg

2.常用操作:

在Sketch中,新建形状,文本等都和PS差不多,比较大的亮点是共享样式,建立一个共享样式,可以给多个部分使用,好处在于一旦修改也会是多个部分共同修改,能提高效率。共享样式在形状和文本样式中都有。

492958e5d121a801219c7748c0d2.jpg

还有一个就是文档颜色,其实和PS的色板差不多,不过更直观也操作更方便,只要吸取或者输入自己想要的色值,点击文档颜色里的加号就能添加成功了。

600658e5d164a801219c77e7f8a7.jpg

3.实时预览:

Sketch Mirror,与Sketch搭配的iPhone预览工具,在APP Store可下载,通过WIFI或者数据线获得连接,连接上之后可以实时预览自己的文件,超级爽。

764858e5d179a801219c77a72b7b.jpg


















这张是拍的不太好,但是还是能看到,我的手机和电脑画面同步着,而且我有任何改动,只要刷新一下就能马上看得到,告别以前做完图发给手机预览的心酸日子真的开心到飞起!

5b2a58e5d184a801219c77d268c0.jpg

当然了,还有一个更厉害的效率神器,马上介绍!


三.组件

1.简介:

Sketch我目前认为最最大的优势就是Symbols(即组件),主要用来整理一些页面内常用的公共部分,以便于复用和统一修改。如果有用过墨刀的话会知道,和里面组件的功能几乎一样,也有些类似于PPT的母版,但可操作性更强。


2.创建组件:

要创建一个组件非常简单,只需要选中你想要作为组件的图层或组,点击菜单栏这个紫色按钮,或者直接右键选择创建组件即可;1d8258e5d196a801219c7797b605.jpg









3.组件分组:

如下图是我目前创建的一些组件,X/Y的写法是指同一个X的组件即默认为同一个组的组件,在替换组件的时候方便找到;

ee5b58e5d1a6a801219c776a63ab.jpg

4.组件覆盖与替换:

如下图,标题栏为一个组件,在插入组件之后,还可以对文字部分进行修改,还可以对组件进行选择替换,非常的方便abca58e5d1d5a801219c77528053.jpg123b58e5d1d6a801219c77132150.jpg


其实组件除了能提高作图效率之外,在style guide的编写上都有很好的指导意义,在自己项目的组件整理和晚上的过程中,其实style guide基本上就完成了一半。


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/5859.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通