5.2调节声音大小效果.pptxVIP

第五章 交互效果的制作 第二节 调节声音大小效果 调节声音大小效果 / 01 调节声音大小效果 3 【实例】设计调节声音大小效果。 【实例效果】 （1）如图所示，在音乐类、视频类产品中，调节音量是非常频繁的操作。默认状态下，只有声音按钮和声音拖动栏。 （2）在选中状态下，当需要通过拖动声音按钮来改变声音大小时，选中按钮与拖动栏都相应变大，表示当前的选中效果。 （3）拖动完成后，松开鼠标，取消选中效果，声音按钮与拖动栏会缩小为默认状态。 （4）拖动后，会有蓝色的拖动栏背景来展示当前已选择的声音大小。 （5）如图5-13所示，在拖动过程中，如果声音选择过大，则会友好地提醒。这时声音按钮变为红色背景，并且红色背景浮层提醒：“This could damage your ears!”。 （6）在非选中状态下，如果声音选择过大，则会提醒。这时声音按钮变为红色背景，并且红色背景浮层提醒：“This could damage your ears!”。 调节声音大小效果 4 【实例准备】 （1）如图所示，在自定义名称为“声音按钮面板”中新增四个状态，分别代表声音按钮生命周期中的四种样式：“非选中状态”“非选中警告状态”“选中状态”“选中警告状态”。 调节声音大小效果 5 （2）如图所示，自定义名称为“拖动栏面板”中包含“拖动栏默认状态”“拖动栏选中状态”。 （3）在“拖动栏默认状态”中，放置自定义名称为“默认-灰色”的灰色矩形，用作默认状态下的拖动栏背景；放置自定义名称为“默认-蓝色”的蓝色矩形，用作默认状态下已拖动的声音大小。两个矩形的起始位置为（0.20），尺寸设置为638像素×10像素，“默认-灰色”的灰色矩形置于顶层，“默认-蓝色”的蓝色矩形置于底层。 （4）在“拖动栏选中状态”中，放置自定义名称为“选中-灰色”的灰色矩形，用作选中状态下的拖动栏背景；放置自定义名称为“选中-蓝色”的蓝色矩形，用作选中状态下已拖动的声音大小。两个矩形的起始位置为（0.0），尺寸设置为638像素×50像素，“选中-灰色”的灰色矩形置于顶层，“选中-蓝色”的蓝色矩形置于底层。 （5）如图所示，准备自定义名称为“警告”的矩形，背景设置为红色，文字设置为白色，其中文字设置为：“This could damage your ears！”。矩形默认设置为隐藏。 调节声音大小效果 6 【设计思路】 （1）对整个内容的交互操作只有【拖动时】和【拖动结束时】。 （2）对“声音按钮面板”进行【拖动时】，属于对声音进行了调节操作，需要操作状态的反馈。本实例中，我们采用了声音按钮与拖动栏背景的变大效果。 （3）对“声音按钮面板”【拖动结束时】，属于结束了对声音进行调节的操作，需要声音按钮与拖动栏背景恢复至默认展示状态。 （4）在拖动的效果中，拖动栏采用“蓝色”的底层矩形展示当前进度，“灰色”的矩形展示拖动栏背景（层级相反的设计也可以，只是移动控件的方式不同）。拖动时，水平移动“声音按钮面板”与“灰色”矩形的拖动栏背景。 （5）在声音调节这个功能中，如果音量调节过大，可能会对我们的耳朵造成损伤，所以在声音调节到一定值后，我们给出友好的提示，可以通过“警告”矩形的显示和隐藏效果来表现。 （6）超过一定值后，“声音按钮面板”中也需要用红色背景的声音按钮来表现警告含义，增加红色背景的“选中警告状态”和“非选中的警告状态”。 调节声音大小效果 7 【实例总结】 在调节声音大小效果中，我们学习了拖动面板的过程：通过动态面板的拖动效果，移动不同的元件，并且通过两个不同颜色矩形的移动效果产生视觉位移差，来产生类似“进度条”的效果，相同的效果同样可以用于播放器的进度中。 在产品设计中，悬浮状态、按下状态、选中状态的样式不同，可以表达出很多产品层次的意义，并且给予用户更好的体验，从而更好地为产品流程服务。 当声音过大时，视觉效果上同样给予提示反馈，也是利用交互设计来辅助产品设计更加人性化，让产品更加有情怀。 T hanks.