多语言展示
当前在线:1090今日阅读:167今日分享:16

UI设计神器Sketch3教程 - 新功能介绍

UI设计神器Sketch3终于到来了。设计师中轻量级的工具之一,它带来了更多创作的想象。这款软件虽然还有一些不完善的地发那个,但是它在持续的更新和修护。
工具/原料

Sketch 3

方法/步骤
1

开始之前,看一下Sketch 3的界面和Keynote有很多相似的地方。说明好的设计是可以借鉴的。作图为SKetch 3,右图为keynote。

2

#1 Symbol标志功能。如果您使用过Adobe Illustrator,也许会接触到symbol功能。这个功能的作用很简单:把一个图标或者一个背景等等设置为symbol后,你在一个地方修改这个图标或者背景,其他symbol会随之改变。简单讲就是: 你变我也变。

3

我们从新建一个空白Artboard开始。然后创建一个背景形状,填充上颜色,写上文字。把背景形状和上方的标题设置为symbol。复制同样一个Artboard,然后只把背景形状和上方的标题按住Alt拖过去。接着,您可以改变尝试改变标题的文字。注意观察,另外一个Artboard上的标题自动变换成相同的标题了。

4

Symbol标志功简化了我们很多步骤,如果每个artboard有些内容是一样的话,不需要一个一个修改每一个Artboard。

5

#2 文字格式功能Sketch 3允许我们像keynote一样自定义文本的格式,并其保存。

6

比如,金新建一个标题,然后修改好自己的样式。接着您可以点击Create new text style, 并且命名新的样式。

7

同样的,可以新建一个段落样式。

8

当您增加新的文本时,您可以直接应用刚才自定义的样式,而不需要重复调整了,有点像word里面的格式刷功能。

9

当然,您也可以管理自定义的样式。

10

#3 多平台导出切图切图作为一项繁琐的设计工作,处理的其实很简单的问题,就是导出不同尺寸和清晰度的图像,给不同平台,不同屏幕分比率。

11

举一个简单的例子。新建了一个button,然后在右下方,点击Export。可以点击加号来增加需要导出的尺寸和分辨率。retina屏幕需要加后缀@2x, 这是为了iOS程序员开发过程中使用图片素材带来便利,可以保证这个button在retina屏幕或者非retina屏幕显示一致。

12

#4 强大的UI kitSketch 3 提供了mac,ios 和web设计经常需要用到的UI kit。kit是原件的意思,也就是说,设计师可以直接利用这些原件来做设计,不需要自己再去创建,简化了重复繁琐的步骤,让设计师能更加专注于设计本身。

13

新建一个iPhone 6的Artboard。打开iOS UI kit,复制到Artboard。这样可以非常非常快速帮助设计师来设计iOS界面。

14

更重要的一点是,好的设计师如果用好的工具可以让设计更加出色,简化设计流程。但是设计师所有的价值,我个人觉得还是设计师本身和软件无关,软件只是现在这个互联网社会,使用较多的一种媒介,我们的生活不应该迷失在其中,因为其实,我们身边还有很多媒介,我们没有好好的使用,比如纸和笔。

15

写得有点多,希望对您有所帮助。

推荐信息