4.7筛选项滑动切换效果.pptxVIP

第四章 图片平滑过渡效果 第七节 筛选项滑动切换效果 筛选项滑动切换效果 / 01 筛选项滑动切换效果 3 【实例】设计筛选项滑动切换效果。 【实例效果】 （1）如图所示，无论是在移动端还是在Web端产品中，需要对某一选项进行筛选时，有“Today”“Tomorrow”“Monday”三个单选项，单击可以选择。 （2）单选按钮的选中样式为“有背景选中色，文字为白色”，未选中样式为“背景色与文字颜色都为灰色”。 （3）单选按钮之间具有联动效果。选中按钮后，当前选中的按钮变为选中状态，其他按钮变为未选中状态。 （4）选中按钮后，背景色会发生移动，由之前选中项移动到当前选中项，并且伴随着移入和移出的过程。 筛选项滑动切换效果 4 【实例准备】 （1）图所示为选中背景、未选中背景、选中文字、未选中文字样式。 （2）因为有三个按钮，所以在“Today”单选按钮中，分别自定义名称为“today未选中背景”“today选中背景”“today文字”。 （3）在“Tomorrow”按钮中，分别自定义名称为“tomorrow未选中背景”“tomorrow选中背景”“tomorrow文字”。 （4）在“Monday”按钮中，分别自定义名称为“monday未选中背景”“monday选中背景”“monday文字”。 （5）在每个按钮上方放置相同大小的热区，供增加交互事件使用。 （6）每个单选按钮按照层级从上到下依次为：热区、“today文字”“today选中背景”“today未选中背景”。 筛选项滑动切换效果 5 【设计思路】 （1）按钮未选中时，“选中背景”隐藏；按钮切换到选中状态时，“选中背景”显示，并且伴有移入过程。 （2）按钮选中时，“选中背景”显示；按钮切换到未选中状态时，“选中背景”隐藏，并且伴有移出过程。 （3）“选中背景”移入和移出的过程需要有方向，这该如何确定呢？因为只有三个单选按钮，所以我们采用全局变量来辅助判断，根据两个按钮的位置来判断“选中背景”的移入和移出方向。 （4）文字内容不需要改变，只改变文字颜色，此处我们采用更直接的办法，通过“文字改变”设置富文本的值。 筛选项滑动切换效果 6 【实例总结】 筛选单选项在单击时增加滑动效果，可让用户更容易理解选项的切换过程。增加了过程动画后，对当前操作做了一种交互上的诠释：①选中项发生了变化；②当前选项只能够单选，无法多选。 在实现的过程中，也要去思考何种切换方式更为友好，更容易让用户感知到切换的过程，如左右滑动、上下滑动、翻转。因为本实例中是多个单选按钮排列展示的，所以选中内容滑动切换的效果更符合感知习惯，这也是产品的功能与布局决定的。 T hanks.