Axure实现表格的删除 *** 作

上篇： Axure实现表格的编辑 *** 作 -

上篇，实现了Axure表格的编辑 *** 作，本文将介绍表格的删除 *** 作。

1、单行删除

在“内容列表”中继器中新增“删除”按钮，并增加“删除”按钮的“鼠标点击时”用例：

选择“中继器-删除行”，并设置删除所在行的内容。

2、批量删除

1）在“内容列表”中继器中的“单行内容列表”最左边新增一个矩形和复选框，复选框默认为“未选中”状态

设置复选框的用例：

复选框选中时，标记所在行

复选框选中时，标记复选框所在行

复选框未选中时，取消标记复选框所在行

2）新增“批量删除”按钮

3）设置“批量删除”按钮的“鼠标点击时”用例，删除所有“已标记”的行

删除 *** 作完成。

一位有PC端原型设计经验的产品人员,设计移动端产品原型时,遇到的第一个问题可能就是页面拖动的效果了.我们在设计PC端产品时,利用鼠标滚轮进行整个页面的展示,然后到了移动端,利用手指进行拖动,滑动展示整个页面.两种交互方式截然区别.

axure制作移动端产品原型时,会遇到很多难题,建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具.当然,axure是完全能够实现移动端交互的,只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标.

接下来进入主题,跟小伙伴们分享一下【如何利用axure实现移动端页面拖动展示效果】

打开axure前,小伙伴们不妨先设想一下任务的实现方法：

1、移动端显示的页面是固定尺寸的,里面的整体页面可能会超出固定尺寸范围,所以我们需要建立一个动态模板,使其成为固定尺寸的页面,而把超长的整体页面放入其中.

2、整体页面必须能够被拖拽,所以整体页面又是一个动态面板

3、在我们使用移动端产品,进入页面后,向下拖拽,一般页面会被下拉,而且上方会出现【放开刷新】的提示；同理,我们手指上滑,页面被拖至底部,再不停上滑,页面会被上拉,手指放开后,页面下滑至原位.所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时,自动返回原位的交互

这三个实现方法,是我们实现拖动交互的主要思路.接着我们就具体看一下如何在axure中实现目标.

1、准备工作：打开axure,新建文档,添加一张iphone的背景素材,顶部添加的wifi和电量的信息,以及顶部导航栏（这些素材百度都能够找到,ios8 UIkit）,准备工作完毕

2、添加一个动态面板,这个面板相当于我们的屏幕,所以名字能够称为“固定页面”

3、动态面板内再添加一个动态面板,这第二个面板相当于我们要展示的内容,需要拖动才能展示整个内容,长度自然也比“固定页面”要长,能够称之为“长内容”

4、长内容的面板内添加正文内容,这里我添加了一张图片

5、接下来先实现长面板的拖动功能,在固定页面内对长内容面板添加onDrag交互,交互的内容是move,而且move with y,也就是长面只能沿着Y轴拖动

6、拖动功能已经实现,我们能够先预先浏览一下已经完成的效果（点击axure *** 作栏的preview按钮）,尝试着上下拖动图片,结果符合预期,只是拖动后,图片不可以复位,那么接下去就要实现复位的功能

7、为了实现复位,我们需要在固定页面的顶部和底部添加两个判断用的矩形.顶部的矩形我们暂且称之为“上离开判断区域”,顾名思义,当长内容面板向下拖动,离开“上离开判断区域”,长内容需要move到原始的"0,0"坐标,这个交互我们称之为“下拉复位”.判断区域能够设置为透明,与长内容同宽,高度为象征性的2px

8、选择长内容面板,在onDrag动作中添加新的交互“下拉复位”,增加触发条件：当area of widget 长内容 is not over area of widget 上离开判断区域.那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：0.

注意：编辑完下拉复位后,这里有一个很重要的改动,在交互栏中,右击把“下拉复位”的else if条件修改为if.必须这样做,不然下拉复位的动作没有办法实现.至于这样做的原因,就留给小伙伴们思考吧.

9、上拉复位的动作完成后,我们还要实现下拉复位.首先我们添加一个判断框,边框与填充均为透明,尺寸为长内容的宽度与象征性的2px,定位于固定页的底部

10、在实现下拉复位的时候,我们给长内容的复原位定为X：0和Y：0,这个很容易理解,长面板向上复位时肯定移动到（0,0）的位置.但现在实现上拉复位,我们需要计算长面板的高度,这是由于长面板拖到底部后,固定页面显示的是长面板的下部分内容.这里可能有些费解,看我的截图也许能帮助理解

11、经过上一步的 *** 作,我们得知当整个长内容显示到最底部时,整个长内容的定位为（0,-295）,接下去就和实现下拉复位一样了,在交互栏onDrag动作中添加交互“上拉复位”,添加触发条件 当area of widget 长内容 is not over area of widget 下离开判断区域.那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：-295.

编辑完上拉复位后,在交互栏中,右击把“上拉复位”的else if条件修改为if.

12、全部条件编辑完毕,查看一下交互栏onDrag动作中的全部交互

13、大功告成,赶紧运行一下观察效果

总结：

利用axure实现移动端最基本的上拉与下拉动作是如此复杂,所以我还是建议利用其它原型工具制作移动端原型.然而即便如此,axure还是有其优势,实现静态的页面要比其它原型工具都要便利.

​

以下几小教程使用的是Axure的动态面板来实现，内容简单，适合菜鸟查阅，老鸟可飘过，顺便帮忙点个赞哈/偷笑。

一．伸缩/隐藏导航栏

例如：鼠标移动到一级导航上，二级导航会下拉方式显示

1.打开Axure,拖动一个矩形元件，设置宽830、高49；

2.输入所需要的一级导航名称，使用文本标签元件，字体大小20；

3.对需要做二级导航的标签处下方，设置5个左右的矩形框元件，矩形框内写上二级导航名称；

4.5个矩形框全选，右键设置“转换为动态面板”，此时5个矩形已合为一个元件，并设置好该元件的Name：tab

5.对需要下拉的标签，设置交互方式【鼠标移动时→选择显示动作→选择tab→更多选项（d出效果）】

二．遮罩效果d窗

例如：常见交互方式，点击登录或注册，d出登录或注册窗口，背景页面显灰色

�1.布局好所需的元件，样式可自定；

2.d窗外框和内容，右键设置“转换为动态面板”，并且样式处设置为隐藏，设置一个Name：add

3.注册设置交互方式【鼠标点击时→选择显示动作→选择add→更多选项（灯箱效果）→背景色设置为灰色】

三．返回顶部设计

例如：鼠标点击箭头，网页自动往上返回第一屏页面

1.先搭建一个建议的页面，页面尽量往下延伸，方便测试，在页面底端放一个矩形变形后的箭头，并把箭头右键设置“转换为动态面板”。

2..箭头右键设置为“固定到浏览器”，d出设置界面，固定到浏览器窗口→水平固定为右→边距设置为100→垂直固定底部→边距10；

2.将页面顶部元件设置一个Name,把它的Y坐标设置为“0”；

3.箭头设置鼠标点击交互，添加动作为滚动到元件<锚链接>，选择顶部元件，仅垂直滚动，动画为线性。

有看不明白的同鞋，可以留言。想要看《介绍Axure RP几个常用小设计（二）》，请加关注，谢谢！

---