Axure调节声音大小效果.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.