设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 例子项目 > Mockplus设计例子 > 工具类App原型制作分享-Bear

工具类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!

上一篇
效率类App原型制作分享-One List

Anny   10/27

美食类App原型制作分享-Recipes

Anny   10/27

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com