5.1弹窗中筛选时间效果.pptxVIP

第五章 交互效果的制作 第一节 弹窗中筛选时间效果 弹窗中筛选时间效果 / 01 弹窗中筛选时间效果 3 【实例】设计弹窗中筛选时间效果。 【实例效果】 （1）如图所示，在移动端的提醒APP中，单击右上角的“闹钟”按钮，从界面下方自下向上弹出选择日期对话框，并且伴有遮罩效果，可以选择日期和位置属性。 （2）单击日期对话框之外的遮罩位置，对话框自上向下收起。 （3）如果要修改某一天的时间，则单击需要修改的时间，会直接出现蓝色背景的时间调整浮层。这时可以水平拖动调整时间，最中间的时间为当前选中时间，颜色为白色。 （4）单击“CANCEL”“OK”按钮执行取消或确定操作，并且隐藏时间调整浮层。 弹窗中筛选时间效果 4 【实例准备】 （1）图所示为移动端APP的内容。 （2）准备灰色透明的矩形，自定义名称为“遮罩”，默认置于底层，“遮罩”矩形的大小与APP尺寸保持一致，如图所示。 弹窗中筛选时间效果 5 （3）准备可以自下向上弹出的动态面板，自定义名称为“日期对话框”，其中设置需要提醒的日期和位置。“日期对话框”动态面板默认置于底层，设为隐藏，下边界位置与APP页面的下边界位置相同，大小设置为478像素×420像素。 （4）在“日期对话框”动态面板的“State1”状态中，放置自定义名称为“时间浮层1”的动态面板，如图所示。动态面板默认设置为隐藏，置于底层，大小设置为476像素×139像素。 （5）在“时间浮层1”的“State1”状态中，进行如下设置： ①包含自定义名称为“时间浮层2”的动态面板，尺寸设置为476像素×70像素； ②包含两个遮罩的矩形，矩形取背景颜色，并且设置不透明度为50，置于顶层； ③包含可以单击的热区。 （6）在“时间浮层2”的“State1”状态中，如图所示，放置自定义名称为“时间浮层3”的动态面板，尺寸设置为862像素×28像素，展示时间为全部时间，背景为白色，文字颜色设置为白色。 弹窗中筛选时间效果 6 【设计思路】 （1）单击APP中右上角的“闹钟”按钮，向上滑动显示“日期对话框”，并且置于顶层。 （2）单击“日期对话框”中的时间进行选择，显示并且置顶“时间浮层1”动态面板。 （3）在“时间浮层1”动态面板中，使用蓝色、不透明度为50的矩形遮盖住左右两侧的非选中时间内容，放置可以拖动的“时间浮层2”动态面板。 （4）拖动“时间浮层2”动态面板，移动“时间浮层3”动态面板，可以实现时间内容的左右拖动过程。 （5）单击“CANCEL”“OK”按钮，隐藏“时间浮层1”动态面板。 弹窗中筛选时间效果 7 【实例总结】 多个功能项需要选择时，在我们见过的产品设计中，比较多的是将各个选项排列展示，通过入口进入下一页面进行选择。这种设计增加了页面跳转次数与操作步骤和门槛，并且让整个产品流程不流畅。 如果通过对话框、浮层、内容的展开等操作进行设计，则可减少页面跳转次数，可以让整个操作流程更简洁、高效。 本实例中的交互设计只是一种思路，也有更好的交互设计方法，如将需要筛选的内容在当前筛选项下方展开显示，会让整个流程更加流畅，并且减少了对话框和浮层的操作，体验更佳。所以我们在做产品设计的过程中，首要原则是保证交互设计是为产品功能服务的，再采用体验最佳、操作更流畅的交互效果。 T hanks.