如何添加声音到您的网站设计中,而不激怒用户 - 素马设计 SUMAART

如何添加声音到您的网站设计中,而不激怒用户

By:limo- 2019-10-24 09:56:37

偶尔,每个专业人士都会遇到巨大、荒谬的挑战,以至于他们无法控制自己,但他们必须去争取。就像大卫和歌利亚的故事…如果大卫只是觉得无聊歌利亚并没有威胁到他的整个国家。今天我们将来讨论如何把声音放到一个网站设计上,并讨论它如何会做得更好。


是的,我知道,我是那种“永远不要在你的网站上自动播放声音”的人。即便如此,我们还是在这里,我不会通过讨论嵌入式视频、播客或Soundcloud包装器来作弊。我也不会谈论背景音乐,甚至只是环境背景音,因为在我看来,所有这些都是邪恶的。


即使是寻找关于声音处理正确的网站设计的例子也几乎是不可能的,因为所有的搜索结果要么是以音乐为中心的例子,要么是关于你永远不应该使用声音的文章。


但不得不承认,在某些情况下,在你的网站设计和网站应用程序中添加声音,在某些特定的情况下,不会为你可能失去的客户负责,明白吗?这是一种智力练习,不用说,不管你做什么,总有办法让它永远消失。


添加声音的例子


通知和提醒


很少有事情能像高音调的噪音那样让你知道你应该集中注意力,老师的手指甲在黑板上,电话有铃声,猫和婴儿用非常相似的音调来让我们抓狂。早在个人电脑出现之前,界面和产品设计师就已经利用了这一原则。它是有效的。


个人认为这些只适用于聊天对话,或者用户特别要求的通知。当你在等待信息的时候,你需要在信息到来的那一刻集中注意力,一个警报的声音可能会很受欢迎。


例如,从Facebook Messenger和Slack,到新闻聚合器,再到各种约会应用,无所不包。



成功的警报


在我们的网站设计和应用程序设计中,我们可能会更多地使用一种模式,那就是一点声音,告诉用户事情进展顺利。至少对于我们这些游戏玩家来说,每次你赢得一场战斗或完成一个关卡时都会播放胜利音乐。如果你能找到一个简短的“成功”的声音,唤起怀旧和多巴胺的打击,而不只是恼人的人,你可能有一个赢家。


可访问性增强


警报声音都很好,但是如何利用声音的力量来帮助人们解决视力问题呢?当然,也有屏幕阅读器之类的,但是如果你知道你的大部分用户都有视力问题,你可以考虑给他们一些可选的音频提示,让事情变得更简单。


想想按钮上的“点击”声,当你使用滑块上的“点击”和“拖动”按钮时,它的音调会发生变化,这是一种触觉反馈的一般感觉,通常可以用动画表现出来。对于视力不好的人来说,声音是一种非常有用的拟物化形式。


艺术实验


当然,我们有可能在您的投资组合的“实验”部分,或在您的CodePen配置文件中。这是一个满是他们的网站:Chrome音乐实验室。



实现声音的一般技巧


播放声音


JavaScript是唯一的方法,当然,你可以用HTML5嵌入一个声音,但那只会为你提供一个音频播放器。如果你想以一种更实用的方式将声音整合到你的UI中,JS是唯一的方法。意思是,当然,技术上我们仍然有Silverlight,但是谁会回到使用插件呢?


如果你从来没有故意添加声音到你自己的页面,或者只是不太熟悉JS,这里是如何播放声音点击。现在,这已经很好了,但是如果你的用户在寻找按钮时遇到了麻烦呢?您可能想看看本教程的css技巧,如何播放声音时,有人悬停在一个元素。


你还是要尽量不去惹恼别人


总是给用户预留一种方法来关闭声音,下一个问题当然是,默认情况下是否应该将声音设为不。同样,如果你希望有很多视障人士在你的网站设计上,你可以考虑让声音默认播放,然后写上一个大大的“你可以关掉这些声音,请不要关闭页面!”注意前面和中间。


最后


声音文件可以,根据它们的质量,在带宽上给人们造成很大的冲击。使用CDN的带宽,并缓存出所有的声音文件,为您的用户的带宽。接下来,看看听觉样式表,认真思考你的网站设计是如何呈现给屏幕用户的。