- 1、本文档共8页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第五章 交互效果的制作
第二节 调节声音大小效果
调节声音大小效果
/ 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.
文档评论(0)