axure原型设计之抽屉列表

2017年3月24日
10+
阅读:801

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

效果图:axure原型设计之抽屉列表
附件下载:抽屉列表rp文件 

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

10条评论

  • 呆贼 2017年7月27日在下午5:49

    手速太快菜单栏会消失 哈哈

  • 张翼 2017年6月23日在上午11:25

    付费收到了邮件,还没有看内容,重点是支持工作
    抽屉列表个人在使用时设计到进阶问题
    1、抽屉列表使用时,涉及到独立主菜单,就是那种点击后没有子菜单的,该如何进行设置。
    2、抽屉导航,点击当前主菜单,需要关闭所有其他主菜单,该怎么进行动作设定

    • 维度 2017年6月23日在上午11:41

      1、直接把子列表那个动态面板的高度设置为0就行了
      2、在原有的点击操作之前再加一步操作,把所有子列表的那个动态面板都设置为隐藏,然后再执行以后的操作

  • 法图麦 2017年5月31日在下午4:35

    操作中并非是(用例中的条件设为“文章管理子列表”可见等于false);
    应该为文章管理矩形框转换成动态面板,后设置可见等于false,以下同理。

    • 维度 2017年6月1日在上午9:01

      恩,确实是这样,不过第一步的第3点已经有说明了是动态面板了

  • 晓艳 2017年4月28日在下午3:59

    从啥都不懂跟着做,到看演示后先想想怎么做再对比教程中的方法,觉得进步很快。谢谢楼主分享。

    发现动态原型也是个锻炼逻辑思维的过程。

    • 维度 2017年4月28日在下午4:42

      是的,之所以出这套教程,就是想以一个一个例子的方式,让大家可以在动手中学习axure,不枯燥,又能入门得比较快,以后身边有谁要学axure,也可以向他们推荐我的博客。

      • 晓艳 2017年4月28日在下午5:41

        当然。我已经推荐给好几个朋友了。😀 好东西要分享。

        • 维度 2017年4月28日在下午7:54

          不错不错,哈哈哈。。。

  • 曼曼曼~ 2017年4月10日在下午8:34

    谢谢分享

曼曼曼~进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注