5.3列表中列表项的完成与删除效果.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.