Axure教程|原型设计之抽屉列表

维度
3 评论 19936 浏览 72 收藏 4 分钟
🔗 产品经理的职业发展路径主要有四个方向:专业线、管理线、项目线和自主创业。专业线是指沿着技能线不断提升自己..

这么常见的设计元素,不好好钻研钻研怎么行呢?

抽屉列表实在是太常见了,一般做后台设计的产品经理特别熟悉,因为基本大多数后台的菜单都是以抽屉列表的形式存在着,因为抽屉列表可伸缩,能够存放很多菜单项。

还有一个是大家特别熟悉的,那就是QQ的好友列表。这章就教大家如何使用axure原型工具设计抽屉列表。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

OK,点击预览,并点击选择列表即可以看到效果。

 

作者:维度。个人博客:http://weidublog.com/

本文由 @维度 原创发布于人人都是产品经理。未经许可,禁止转载

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 谢谢分享

    来自湖北 回复
  2. 倒是放一个预览地址或源文件啊…

    来自广东 回复
    1. 有放了,被审核员删了,晕死,直接到我的博客看吧,http://weidublog.com/

      来自广东 回复
专题
37903人已学习23篇文章
不知道这些问题,你出去都不敢说自己是做电商运营的。
专题
12082人已学习11篇文章
考勤打卡系统几乎是每个公司的必备,是员工管理系统中的一个分支,常见的打卡方式有指纹打卡、人脸打卡、蓝牙打卡等等。本专题的文章分享了考勤打卡产品的设计指南。
专题
81446人已学习19篇文章
当AI已然成为新的焦点和风口,产品经理该如何抓住这个风口顺势飞起?
专题
12981人已学习12篇文章
现如今,越来越多的企业开始重视私域,很多的企业都对私域的发展进行了布局。本专题的文章分享了如何搭建私域模型。
专题
13306人已学习12篇文章
产品立项,对于产品来说是其生命周期中最基础的和最重要的阶段。产品立项都有哪些主要工作?本专题的文章分享了产品立项指南。
专题
13493人已学习11篇文章
内容管理系统是一种位于WEB 前端(Web 服务器)和后端办公系统或流程(内容创作、编辑)之间的软件系统。本专题的文章分享了内容管理系统(CMS)的设计指南。