静态原型的状态栏

状态栏Symbol

状态栏似乎很复杂，有wifi信号、手机信号、时间、电量等信息，幸好Sketch原生就自带的现成组件，你可以直接拿过来就用了。当然，你也可以自己一个一个去画，不过既然有了现成的轮子，又何必重复劳动呢。

菜单栏中选择File -> New From Template，在弹出的菜单中选择Material Design。此时会创建一个新的工程文件。

sketch_new_material_design

与之前空的工程文件不同的是，这里面已经有了两个现成的page，里面的内容就是Material Design会使用到的各种现成的组件。

sketch_status_bar_symbol

选择Material Design Symbol -> Material/Android/Status bar 360dp black，这就是一个现成的可用的状态栏。这样的组件叫做symbol，它是有多个图形组合后形成的一个通用符号。Symbol可以被不同的page、项目共享使用。

以后只要看到这个图案，就知道这是一个symbol了，

sketch_symbo

我们也可以创建自己的symbol，不过这个地方还不会用到。随着设计开发的深入，在这个章节的后半部分，我们会进行详细的介绍。

使用状态栏Symbol

使用鼠标右键 + Copy（或者cmd + c）之后，将它粘贴（鼠标右键 + Paste Over或者cmd + v）到我们之前的weather page之中，

sketch_paste_symbol

如果状态栏粘贴之后，并没有对齐画板的边缘，手动将它移动，对齐就可以了。

此时可以看到，

  1. Pages下面自动多出了一个叫做symbols的页面，它里面放的就是我们刚引进的symbol。

  2. 这时的statusbar还是一个独立的部分，并没有隶属于Mobile Portrait画板之下，两者还是平级的关系。

调整状态栏Symbol

接下来我们就开始调整statusbar与Mobile Portrait之间的隶属关系。

  1. 将状态栏展开，选中里面的内容；
  2. 将各个组件拖入到Mobile Portrait之下；
  3. 删除没有内容的状态栏symbol；
  4. 将刚拖入的组件使用工具栏上的Group功能组合起来，并将组合后的组件更名为Statusbar；
sketch_modify_statusbar_parent

选中状态栏，我们可以看到状态栏的尺寸是：24px*360px，刚好是前面讲过的状态栏应该的高度。

修改背景色

将状态栏的背景颜色修改成之前设定的Primary Color：#3F51B5，

sketch_statusbar_color