静态原型的hexAppbar折叠

接下来,我们开始设计Appbar被滑动收缩以后的界面效果。

 sketch_weather_app_fold_complete

可以看到,这个效果图绝大部分和展开时的效果图时一样的。

所以我们可以将整个画板修改一个名字为-展开,并复制出一个新的画板命名为折叠,修改一下其中的元素就好了。

 sketch_fold_unfold_1

使用Symbol

这样做完全没有问题,但是可能会给以后内容的修改留下一个隐患:假如我要把风力3级修改为5级,除了要修改展开画板,还要修改折叠画板,要修改两个地方。

不过假如我将More infoForcast做成了Symbol,那么只需要修改一处,两个画板中的内容就都可以变化了。

More info Forcastgap,组合成一个组件Content

 sketch_content_group

然后,使用转换Symbol的功能,

 sketch_content_create_symbol

之后,在Symbols页面,就能看到Content的内容了,

 sketch_symbol_page_content

之后,只要修改这个Symbol中的任何内容,都可以同步的反应到使用了它的界面之上。

创建折叠界面

Weather页面,复制展开,改名为折叠

 sketch_fold_artboard

修改Appbar中的内容,

  1. 移除Weather detail,将Content的位置上挪,并调整画板的高度至合适位置,

     sketch_fold_content_adjust
  2. 显示Toolbar中的位置-成都

     sketch_fold_toolbar_location
  3. 修改状态栏的背景颜色为Primary Dark Color:#303F9F,

     sketch_fold_statusbar_color

至此,使用Sketch进行界面设计的工作就全部完成了。

文中使用到的完整的Sketch项目工程文件,可以在这里下载到。