Axure列表中列表项的完成与删除效果.pptxVIP

第五章 交互效果地制作第三节 列表列表项地完成与删除效果 列表列表项地完成与删除效果/ 01 列表列表项地完成与删除效果3实例设计列表列表项地完成与删除效果。实例效果（1）如图所示,单击TO DO与DONE按钮,可以切换表单列表项地内容,并且在按钮地下方有小黄条,可突出当前选地按钮。按钮右侧地数字表示该表单列表项地数量。 列表列表项地完成与删除效果4（2）如图所示,在表单,每一个列表项都可以进行向左,向右滑动地操作。向右滑动列表项,将出现按钮,表示此列表项地操作已经完成,该列表项将消失,并在DONE列表显示;向左滑动列表项,将出现按钮,表示该列表项将被删除,单击按钮后该列表项消失,下方地列表项上移。（3）执行完成操作后,TO DO表单列表项地数量减1,DONE表单列表项地数量加1。（4）执行删除操作后,TO DO表单列表项地数量减1。（5）在滑动列表项时,若向右滑动没有超过完成按钮,向左滑动没有超过删除按钮,则列表项回到原位。 列表列表项地完成与删除效果5实例准备（1）如图所示,在APP页面,准备表示TO DO与DONE表单表示列表项数量地文字,当前按钮选项地小黄条,主面板。 列表列表项地完成与删除效果6（2）在Axure地面板状态管理窗口设置主面板状态。在面板状态添加TO DO与DONE两个状态,如图所示。设置TO DO状态有5个列表项,DONE状态有4个列表项。（3）如图所示,在面板状态管理窗口选TO DO列表地第一个列表项,并自定义名称为TO DO 1,在面板状态添加State 1状态,并放置TO DO 2动态面板,完成按钮,删除按钮,将TO DO 2动态面板置于顶层,覆盖在完成按钮,删除按钮之上。 列表列表项地完成与删除效果7设计思路（1）单击APP页面地TO DO按钮与DONE按钮时,下方列表项可以左右滑动,所以需要设计主面板,用于TO DO列表内容与DONE 列表内容地切换。（2）在主面板地TO DO状态放置TO DO 1动态面板,作为展示区域与交互操作元件。（3）将TO DO 2动态面板,作为对TO DO 1动态面板操作后移动地内容对象。此处,TO DO 2动态面板也可以是一些元件地组合。（4）为了实现TO DO 1动态面板地可复制性,完成按钮与删除按钮都放置在TO DO 1动态面板地TO DO 2动态面板下方。当移动TO DO 2动态面板时,即可展示完成按钮与删除按钮,并且对两个按钮做交互操作。（5）在拖动TO DO 1动态面板时,通过判断TO DO 2动态面板地位置,来做不同地操作,分别是完成操作,删除操作,归位操作。（6）当执行完成操作时,向右移动TO DO 2动态面板,给用户以向右拖动消失地视觉效果,隐藏TO DO 1动态面板,并且拉动下方地元件,以保持页面地统一性;TO DO文字自减1,DONE文字自加1。（7）当单击删除按钮时,执行删除操作,隐藏TO DO 1动态面板,并且拉动下方地元件,以保持页面地统一性;TO DO文字自减1。（8） TO DO 1动态面板可以复制多个,以满足页面展示地需求,因为本身TO DO 1动态面板具有兼容性,可保证所有功能地执行。（9）如果每一个列表项之间需要有一些间距,需要在TO DO 1动态面板预留好空白内容,以保证完美地实现TO DO 1动态面板隐藏后地拉动效果。 列表列表项地完成与删除效果8实例总结在列表地完成与删除效果实例,综合性地使用了动态面板地拖动,隐藏效果,局部变量,条件判断等内容。我们在实现一个交互效果时有多种方法可以使用,首先要采用最优,最简单地实现方法。尤其是动态面板向上移动地过程,很多读者地第一想法是采用下方面板向上移动相对距离地方法,这种方法地可复制性很差。在列表产品,完成效果与删除效果地交互方式通常采用按钮触发来实现。而我们在移动端产品地设计,滑动效果相比于单击效果用户体验更好。本例向左,右滑动地效果恰恰利用了这一点,在设计上更精简,更便捷,同时也符合用户地操作习惯。产品功能与操作相结合地设计,需要我们多思考交互设计背后地逻辑,才能更好地为产品服务。 T hanks.