美文网首页用Sketch做UISketch
Sketch学习笔记:Inspector和Symbols

Sketch学习笔记:Inspector和Symbols

作者: LaurenQ | 来源:发表于2016-08-21 22:17 被阅读3241次

    Inspector/检查器

    简单地说,Inspector就是一个编辑器,对你添加在Sketch画布当中的 Shape, Text, Image等控件进行编辑的一个工具,就在Sketch的右侧——和Axure一样,是不是?

    我选中一个矩形,Inspector中出现的就是这个矩形的基本信息,你可以改变它的大小,位置,边线,填充色等等


    2016-08-16_16:55:29.jpg

    如果双击这个矩形,就会进入图形编辑的Inspector


    2016-08-16_16:56:53.jpg

    这意味着你可以改变这个矩形的形状啦。

    关于检查器,几个重要的通用性质是:

    2016-08-16_17:05:24.jpg
    • 点击+,会增加一层Style。Style可以叠加。
    • 点击小齿轮可以对这做全局设置。
    • Checkbox处,打勾则此效果显示在图层中,不打勾则不显示。
    • 对某一条效果右键后可以点击delete删除。

    Symbols

    用过Axure的同学肯定不会对母版部件自定义感到陌生,都是可以让你标准化自己的UI组件的好功能,但它们的上手不是那么的友好

    Sketch里有个相似的功能叫做Symbol,无论是理解还是操作,都简易一些。

    如图,我们要做两个手机APP页面,一个是HomePage,一个是About Page。这些Page上都有Navigation Bar。我们的目的就是把顶栏给标准化,可以反复使用,一次更改,多处生效。

    • 就这条简单的Bar~名称+图标+背景色,选中它们:


      2016-08-20_16:48:03.jpg
    • 选中所有元素,CMD+G把它们组合成一个Group,重命名为Bar

      2016-08-20_16:48:59.jpg
    • 选中这个Group,然后点击Create Symbol

      2016-08-20_16:50:23.jpg
    • 我们的Bar group就变成symbol啦,紫色的~

    2016-08-20_16:50:54.jpg
    • 接下来,你可以在Insert-Symbol里看到刚才做好的Symbol了,直接选择Bar
    2016-08-20_16:52:10.jpg
    • 现在我们可以看到,在另外一个Artboard上出现了一毛一样的Group:


      2016-08-20_16:53:14.jpg
    • 假如你对这个Symbol做更改,那么改动会全局生效:

    2016-08-20_16:53:58.jpg

    相关文章

      网友评论

      • NG524:Symbol 弄懂了,谢谢博主
      • 爱因斯探:每次打开sketch,创建的sketch都会消失。这是为什么?

      本文标题:Sketch学习笔记:Inspector和Symbols

      本文链接:https://www.haomeiwen.com/subject/snewsttx.html