摹客教程

摹客教程

摹客,让设计更快更简单

工具类App原型制作分享-Bear

Bear是一款记事工具,App画风简约可爱,这只萌熊也是这款App的最大亮点,为了真实还原这款工具,我也是将熊的图片放进了原型中,其次就是一些常见的交互动效,这次给大家讲解一下Mockplus中如何实现侧滑菜单效果。

先简单看看动图:

Mockplus原型分享-Bear

点击这里,可以立即在线预览:http://run.mockplus.cn/niWz9rg0LCnuyKZk/index.html

 

三个步骤轻松搞定侧滑菜单:

1. 找到交互分类里面的抽屉组件,拖入工作区任意位置。

2017-07-28_113616

2. 拖拽App左上角图标的链接点,链接抽屉组件。

2017-07-28_143108

3. 双击抽屉组件,再次双击里面的面板,就可以拖入任意组件,摆放任意图标或者文字。

2017-07-28_142620

这样,一个侧滑菜单就完成了,是不是超级简单!演示时即可看到效果。

 

再送上UI Flow大图:

Mockplus原型例子-Bear流程图

这个原型的主要页面有:主页、欢迎页面、添加事件页面、设置页面、升级页面等。

以上设计的所有页面可以在这里下载分享

所有页面的图片集(10张), 在这里下载

Enjoy it!