axure原型设计之抽屉列表

  抽屉列表实在是太常见了,一般做后台设计的产品经理特别熟悉,因为基本大多数后台的菜单都是以抽屉列表的形式存在着,因为抽屉列表可伸缩,能够存放很多菜单项。还有一个是大家特别熟悉的,那就是QQ的好友列表。既然这么常见的设计元素,不好好钻研钻研怎么行呢?哈哈哈,这章就教大家如何使用axure原型工具设计抽屉列表。

  第一步:拖拉摆放好第一个抽屉的相关控件

  1、一个180X360的白底黑框长矩形;

  2、一个180X30的灰底黑框矩形,命名为“文章管理”,放在长矩形的上方;

  3、一个180X59的动态面板,命名为“文章管理子列表”,紧挨“文章管理”下方放好,初始状态设置为隐藏;

  4、“文章管理子列表”的state1面板状态中竖列放置两个180X30的白底黑框矩形,文字分别设置为“新建文章”和“文章列表”。

  第二步:为“文章管理”添加一个鼠标点击时用例

  用例中的条件设为“文章管理子列表”可见等于false;

  用例中的动作设为显示“文章管理子列表”,动画为向下滑动,时间为200毫秒,更多选项为推动元件,方向为下方,动画为线性,时间为200毫秒。

  第三步:为“文章管理”再添加一个鼠标点击时用例

  用例中的条件设为“文章管理子列表”可见等于true;

  用例中的动作设为隐藏“文章管理子列表”,动画为向上滑动,时间为200毫秒,更多选项为拉动元件,方向为下方,动画为线性,时间为200毫秒。

  第四步:复制粘贴其他列表项

  “文章管理”以及“文章管理子列表”为一个列表项,通过复制再建两个列表项并按层次摆放好。

  其中一个列表项分别改名为“用户管理”和“用户管理子列表”,“用户管理子列表”里面两个矩形的文字分别为“新建用户”和“用户列表”。

  另一个列表项分别改名为“多媒体管理”和“多媒体管理子列表”,“多媒体管理子列表”里面两个矩形的文字分别为“图片”和“视频”。

  再有,每个交互用例也要做相对应的修改。

  OK,点击预览,并点击选择列表即可以看到效果。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

  效果图:axure原型设计之抽屉列表(http://weidublog.com/wp-content/case/prototyping1/201703240859/)

  附件下载:抽屉列表rp文件(http://weidublog.com/index.php/2017/03/20/181/)

  作者:维度

  转载请注明出处:http://weidublog.com/index.php/2017/03/24/246/

「互联网的一些事」聚焦互联网前沿资讯,行业爆料、小道消息、内幕挖掘,关注互联网热点事件!干货分享,提供各种产品文档、行业报告、设计素材免费下载。官方微信:imyixieshi

本文链接: http://www.yixieshi.com/79225.html (转载请保留)

 
®关于本站文章™ | 若非注明原创,默认 均为网友分享文章,如有侵权,请联系我们™
㊣ 本文永久链接: axure原型设计之抽屉列表