如何添加聲音到您的網(wǎng)站設計中，而不激怒用戶(hù)發(fā)布者：本站     時(shí)間：2019-11-13 09:11:14

偶爾，每個(gè)專(zhuān)業(yè)人士都會(huì )遇到巨大、荒謬的挑戰，以至于他們無(wú)法控制自己，但他們必須去爭取。就像大衛和歌利亞的故事…如果大衛只是覺(jué)得無(wú)聊歌利亞并沒(méi)有威脅到他的整個(gè)國家。今天我們將來(lái)討論如何把聲音放到一個(gè)網(wǎng)站設計上，并討論它如何會(huì )做得更好。

是的，我知道，我是那種“永遠不要在你的網(wǎng)站上自動(dòng)播放聲音”的人。即便如此，我們還是在這里，我不會(huì )通過(guò)討論嵌入式視頻、播客或Soundcloud包裝器來(lái)作弊。我也不會(huì )談?wù)摫尘耙魳?lè )，甚至只是環(huán)境背景音，因為在我看來(lái)，所有這些都是邪惡的。

即使是尋找關(guān)于聲音處理正確的網(wǎng)站設計的例子也幾乎是不可能的，因為所有的搜索結果要么是以音樂(lè )為中心的例子，要么是關(guān)于你永遠不應該使用聲音的文章。

但不得不承認，在某些情況下，在你的網(wǎng)站設計和網(wǎng)站應用程序中添加聲音，在某些特定的情況下，不會(huì )為你可能失去的客戶(hù)負責，明白嗎？這是一種智力練習，不用說(shuō)，不管你做什么，總有辦法讓它永遠消失。

添加聲音的例子

通知和提醒

很少有事情能像高音調的噪音那樣讓你知道你應該集中注意力，老師的手指甲在黑板上，電話(huà)有鈴聲，貓和嬰兒用非常相似的音調來(lái)讓我們抓狂。早在個(gè)人電腦出現之前，界面和產(chǎn)品設計師就已經(jīng)利用了這一原則。它是有效的。

個(gè)人認為這些只適用于聊天對話(huà)，或者用戶(hù)特別要求的通知。當你在等待信息的時(shí)候，你需要在信息到來(lái)的那一刻集中注意力，一個(gè)警報的聲音可能會(huì )很受歡迎。

例如，從Facebook Messenger和Slack，到新聞聚合器，再到各種約會(huì )應用，無(wú)所不包。

成功的警報

在我們的網(wǎng)站設計和應用程序設計中，我們可能會(huì )更多地使用一種模式，那就是一點(diǎn)聲音，告訴用戶(hù)事情進(jìn)展順利。至少對于我們這些游戲玩家來(lái)說(shuō)，每次你贏(yíng)得一場(chǎng)戰斗或完成一個(gè)關(guān)卡時(shí)都會(huì )播放勝利音樂(lè )。如果你能找到一個(gè)簡(jiǎn)短的“成功”的聲音，喚起懷舊和多巴胺的打擊，而不只是惱人的人，你可能有一個(gè)贏(yíng)家。

可訪(fǎng)問(wèn)性增強

警報聲音都很好，但是如何利用聲音的力量來(lái)幫助人們解決視力問(wèn)題呢？當然，也有屏幕閱讀器之類(lèi)的，但是如果你知道你的大部分用戶(hù)都有視力問(wèn)題，你可以考慮給他們一些可選的音頻提示，讓事情變得更簡(jiǎn)單。

想想按鈕上的“點(diǎn)擊”聲，當你使用滑塊上的“點(diǎn)擊”和“拖動(dòng)”按鈕時(shí)，它的音調會(huì )發(fā)生變化，這是一種觸覺(jué)反饋的一般感覺(jué)，通?？梢杂脛?dòng)畫(huà)表現出來(lái)。對于視力不好的人來(lái)說(shuō)，聲音是一種非常有用的擬物化形式。

藝術(shù)實(shí)驗

當然，我們有可能在您的投資組合的“實(shí)驗”部分，或在您的CodePen配置文件中。這是一個(gè)滿(mǎn)是他們的網(wǎng)站：Chrome音樂(lè )實(shí)驗室。

實(shí)現聲音的一般技巧

播放聲音

JavaScript是唯一的方法，當然，你可以用HTML5嵌入一個(gè)聲音，但那只會(huì )為你提供一個(gè)音頻播放器。如果你想以一種更實(shí)用的方式將聲音整合到你的UI中，JS是唯一的方法。意思是，當然，技術(shù)上我們仍然有Silverlight，但是誰(shuí)會(huì )回到使用插件呢？

如果你從來(lái)沒(méi)有故意添加聲音到你自己的頁(yè)面，或者只是不太熟悉JS，這里是如何播放聲音點(diǎn)擊?，F在，這已經(jīng)很好了，但是如果你的用戶(hù)在尋找按鈕時(shí)遇到了麻煩呢？您可能想看看本教程的css技巧，如何播放聲音時(shí)，有人懸停在一個(gè)元素。

你還是要盡量不去惹惱別人

總是給用戶(hù)預留一種方法來(lái)關(guān)閉聲音，下一個(gè)問(wèn)題當然是，默認情況下是否應該將聲音設為不。同樣，如果你希望有很多視障人士在你的網(wǎng)站設計上，你可以考慮讓聲音默認播放，然后寫(xiě)上一個(gè)大大的“你可以關(guān)掉這些聲音，請不要關(guān)閉頁(yè)面！”注意前面和中間。

最后

聲音文件可以，根據它們的質(zhì)量，在帶寬上給人們造成很大的沖擊。使用CDN的帶寬，并緩存出所有的聲音文件，為您的用戶(hù)的帶寬。接下來(lái)，看看聽(tīng)覺(jué)樣式表，認真思考你的網(wǎng)站設計是如何呈現給屏幕用戶(hù)的。