5.4页面切换交互效果

6
页面切换交互效果
【实例总结】 在本实例中，使用了切换面板状态、设置矩形尺寸、显示滑动效果的操作。 我们在单击或悬浮一些操作按钮时，都会有按下效果、悬浮效果的反馈。产品不同，反馈的强弱也不同。在一些需 要明显提示的产品设计中，用户执行按下操作后，给予明显的视觉反馈和转场动画，能够间接地提醒用户操作项与选 择项，并且操作后，为进入到下一步骤中起到了强调作用。
（6）将蓝色背景的矩形自定义名称为“背景1-1”，代表着“State1”中的第一个卡片按钮。
5
页面切换交互效果
【设计思路】 （1）进度条的变化效果使用矩形，在触发操作时，调整进度条的尺寸。 （2）单击卡片式单选按钮时，背景上要有颜色的变化，并且背景颜色的变化过程是由左向右的滑动过程，需要一 个隐藏的矩形通过显示操作来实现滑动效果。 （3）在切换步骤时，使用动态面板的切换效果。
（2）页面中准备自定义名称为“标题”的矩形，用于展示页面文本信息。 （3）放置自定义名称为“卡片面板”的动态面板，宽度设置为344像素。
4
页面切换交互效果
（4）在“卡片面板”中有三个状态，分别放置三个页面的展示内容，如图所示。
（5）在“卡片面板”的“State1”状态中，准备蓝色背景样式，默认隐藏。对于一个按钮，层级从上到下依次是 热区、图片+文字、蓝色背景、白色背景，如图所示。
7
Thanks.
（2）在页面2中，需要选择一个矩形按钮，选择后会有按下效果，按下效果中强调了当前选择内容，会有蓝色背景从左向 右滑动展示。当页面内容跳转到页面3时，在页面最上方的步骤进度会发生长度变化，以区别当前进行的步骤。
3
ห้องสมุดไป่ตู้
页面切换交互效果
【实例准备】 （1）如图所示，在页面中，上方放置蓝色填充色的矩形进度条，默认尺寸为100像素×20像素。
第五章 交互效果的制作
第四节 页面切换交互效果
页面切换交互效果
页面切换交互效果
【实例】设计页面切换交互效果。 【实例效果】 （1）如图所示，一个流程式产品中有多个步骤，在页面1中需要选择一个矩形按钮，选择后会有按下效果，按下效果中强 调了当前选择的内容，会有蓝色背景从左向右滑动展示。当页面内容跳转到页面2时，页面最上方的步骤进度会发生长度变化， 以区别当前进行的步骤。