快好知 kuaihz

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  抽屉  抽屉词条  教程  教程词条  列表  列表词条  设计  设计词条  
原型

 Axure之旅:关于Axure的...

Axure是头大象,其实有很多不容易被大家注意到的功能。Axure以高度的自由度著称,用好了绝对是大杀器。本篇是系列文章的第三篇,讲讲关于Axure的一些冷门小...(展开)

原型

 Axure8.0小案例:手把手教...

前段时间通过Axure8.0绘制出电动机模型,并鼓励大家继续玩Axure8.0最好玩坏它。这几天利用业余时间绘制了两个好玩作品——挖掘机和坦克模型。额,别问我是...(展开)

原型

 Axure教程 | 亲,来体验一...

引子这是第一次使用axure8实现的例子,之前的auxre8版本似乎有点问题,输出的html文件总是不能正常显示,新的beta版本这次好像是改进了,最近重新安装...(展开)