静态原型的hexAppbar折叠
接下来,我们开始设计Appbar被滑动收缩以后的界面效果。

可以看到,这个效果图绝大部分和展开时的效果图时一样的。
所以我们可以将整个画板修改一个名字为-展开
,并复制出一个新的画板命名为折叠
,修改一下其中的元素就好了。

使用Symbol
这样做完全没有问题,但是可能会给以后内容的修改留下一个隐患:假如我要把风力
从3级
修改为5级
,除了要修改展开
画板,还要修改折叠
画板,要修改两个地方。
不过假如我将More info
和Forcast
做成了Symbol
,那么只需要修改一处,两个画板中的内容就都可以变化了。
将More info
Forcast
和gap
,组合成一个组件Content
,

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

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

之后,只要修改这个Symbol
中的任何内容,都可以同步的反应到使用了它的界面之上。
创建折叠界面
在Weather
页面,复制展开
,改名为折叠
,

修改Appbar
中的内容,
移除
Weather detail
,将Content
的位置上挪,并调整画板的高度至合适位置,显示
Toolbar
中的位置-成都
,修改状态栏的背景颜色为
Primary Dark Color
:#303F9F,
至此,使用Sketch
进行界面设计的工作就全部完成了。
文中使用到的完整的Sketch
项目工程文件,可以在这里下载到。