• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 哪天就用到了!在移动产品中做音效设计的8个技巧

哪天就用到了!在移动产品中做音效设计的8个技巧

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,经验分享,音效设计等相关知识,希望在学习及工作中可以帮助到您

沈天宇 :一年前,我曾经提出过一个问题——交互产品如何做音效设计?

说实话当时让人满意的答案并不多。后来自己用Garageband和电钢琴摸索了一阵,再后来在Medium上看到了一个这篇文章,作者是Will Littlejohn,Facebook音效设计总监。之后发现原来这个领域真的是大有学问,因此就翻译了过来。

我认为音效设计是一个十分容易被忽视的体验设计,但是确实能提高APP的体验设计。在车联网、智能语音助手等场景中会是十分十分重要的地位。

我知道互联网领域或者游戏都有很多出色的音效设计师,也希望能炸出一些大神出来一起讨论。

当我和人说到我在facebook的工作,大家一开始都是一脸懵逼的:

音效?Facebook?

对此我倒觉得没什么,因为人们一般情况下都不会考虑到音效。然而有成千上万的音效设计师在各行各业工作,这真的是一个不为人知的专业。我做了几十年的声音设计,所以对于声音设计方面有很多的实践。以下几分钟的文章可以让很多人有所启发。

总的来说,我们做的是:我们通过声音,给用户的世界带来一个场景。你听到的声音和其他感官一样,是一种承载体验的介质,并帮助你理解设计师想要为你设计的体验。对于关注声音的人来说,这种介质可以是美妙的,沮丧的或者满足的。

这篇文章主要讲述关于音效交互设计,这个算是一个不太为人知的领域。为了帮助你理解这个不为人知的领域,我和音效设计团队可以和大家分享一下我们在音效设计这一路所了解的。

我们主要讨论移动产品的领域。音效设计是一个非常大的领域,所以我会总结一些tips来让大家正确理解音效设计扮演的角色。

保持极简

如果你正在考虑让音效成为你的产品的一部分,我强烈建议让它保持极简。

整天出现那些冗长复杂的音效会对你的产品体验有负面效应。要仔细考虑在用户旅程中声音扮演的角色。我发现温暖和微小的音效可以让人感觉好。

举个例子,听听在Facebook Messenger(视频链接→video)中的音效吧:

让它感觉家族化

你可能会注意到,上面的视频那些声音听起来好像有差不多的听感。这是有意设计的,因为我发现系列化的音效,由于操作之间的相互关联,更容易产生用户粘性。

因此,我鼓励大家系统化的设计声音,就好像设计你们界面上的控件一样,要具有统一性。

少即是多

音效有时候会吓到用户。作为一个设计师,我经常会被问到:“这个声音真的是必要的吗?”就好像设计视觉元素一样,一不小心就会让体验变得一团乱。

你可以问下自己这个音效是否真的是非常重要,因为太多的音效会降低有效度,而且让人困扰。

音效是否要设计的很特别?

当你正在设计你的音效时,场景决定了你需要如何来设计。在有些情况下你的声音最好能让人一下就听出来所代表的行为。但是也有些时候音效只是要表达一下APP中状态的改变。当你正在打造你的音效时,一定要考虑使用场景。考虑一下这个音效是否积极?是否自然?你希望用户听到音效之后会想些什么吗?

如果你希望用户听了之后想一些什么,那就可以去设计一个比较特别一点的音效,这样用户听到声音之后马上可以和他所做的行为联系起来。反之,你就要设计一个比较不那么特别的音效,在这个场景中你就要精简你的设计。

我们设计的声音总体上还是要服从整个app的气质,不要去通过一个很特别的音效来抢镜。如果你的音效只是为了给不同的操作提供一个反馈,那你要确保这个音效不能让人听多了就烦。

重复,重复,重复

对于音效有个绕不过去的问题,那就是听多了就容易烦。就好像平时你听个什么声音,听的多了就会恨它。你记得你第一次听到卡车的“倒车,请注意”吗?你可能还觉得那真的好贴心呢,你现在听了什么感觉?复杂的声音第一次听可能会比较有趣,但是一定很快会变得非常烦躁。当你把音效放入你的产品的时候,你必须要考虑用户到底每天要听多少次。

专注于功能

音效也是拓展产品功能的利器。如果你的音效可以给用户更多的价值,那他们一定会喜欢。

我最喜欢的例子就是Facebook APP中“发布”的声音,当用户发布了内容,就可以体验到我们设计的这个让人满足的时刻,但是我们仔细的考虑了这个音效应该放在哪里。我们看到一个让这个音效更有用处的机会就是:当内容真正发出去了再发出这个声音。这样比我按下那个发送按钮的时候更有用一些。

这个设计相当于给用户多了一个功能。人们不用再去盯着进度条看着上传,只要听到“发布”的声音,那内容就是被发出去了。这个也让用户可以去忙别的事情而不是在那儿干等着内容发布。这个就好像你在做饭的时候用上定时器,不用盯着锅里看了。

落地很关键

思考后的落地对于界面的设计来说是非常重要的。所以也应该同样适用于音效设计。你可能为了一个重要的场景设计了一个非常完美音效,但是如果落地的时候不细细雕琢依然有可能导致不理想的体验。

落地时的小细节可能会成就或者拖累音效的有效性。因此尤其要注意音效和视觉配合的时机,同时也要考虑到一些异常的情况。还有一个比较需要注意的是,在整个APP中,或者在和类似的APP中,你的每个音效的相对音量应该是接近的。

传达感觉是最重要的。所以要确保你设计的音效感觉能被100%的传达到。举个例子,一个音效如果音量设置太响,本来它是愉悦的感觉可能会变得十分可怕。不同的手机对于扬声器的音量也不一样,所以当你设定音量的时候一定要小心。

测试

测试从来不嫌多。

一旦你落地了你的音效,你最好把整个产品的体验都整合起来,花点时间来整体体验。

测试所有你的产品里的音效,尤其注意当开满音量的时候有没有破音。如果破音了,还是要调整一下音量水平。还有就是注意控制声音的高低频。如果在体验中感觉低音太重了?那去掉一些低频的部分。如果感觉太清脆了或者太刺耳了,那需要去掉一些高频部分。

当我这样测试音效的时候,我会仔细的听每一个声音并且逐一优化。你可以用一个EQ调整器来调整。手机并不善于发出什么特别高频或者低频的声音,尤其是高频时容易破音。

最后介绍一下Facebook的SoundKit

为了帮助设计师们能探索出音效会如何影响他们的作品,Facebook的音效设计团队为大家准备了一些音效素材。facebook.design「译者注:这些音效并非开放版权的,仅供学习研究用。」

你可以把这个作为你设计音效的起点。在这些东西中,我们已经打磨好了一些比较有质感的音效,这样用户反复的听也不会觉得烦。这些反馈听起来非常巧妙,就好像触摸的感觉。你可以把他们加在一些重要的按钮或者开关上,并且适当的调低音量。这些音效可以有效的让你的交互变得更有深度,并增强用户对整个产品的感知。

总结

简单的音效可以与你的产品发生非常神奇的化学反应,而且让人们在音效出现的那一刻感受更深。你可以回想一下曾经在产品中体验过的最奇妙的体验,很多时候都是有了音效设计才让整个体验到达了一个新的高度。

我希望这些tips和SoundKit可以帮助你的产品有让人更满意的音效体验设计。

原文地址:Medium
原文作者:WILL LITTLEJOHN
译文地址:Zhihu

「不容错过!高质量音效素材」

  • 《酷站两连发!谷歌的网站多设备在线测试工具+免费音效素材站》
  • 《超实用!7个国外免费音效资源网站全集合》
  • 《帮你在线快速生成音乐素材的JUKEDECK》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2017-08-06WEB中文字体应用指南
  • 2018-08-23将爱豆的照片转成人物插画?这可能是最简单的方法!
  • 2017-08-06B2C 网站用户体验细节设计参考
  • 2018-08-23深度好文!如何积极正确地使用「预设计」方法?
  • 2018-08-23这5种成熟的导航设计模式,可以为用户体验加分
  • 2017-08-06你好 对话框 对话框的设计经验分享
  • 2018-08-23如何用「8点网格」来规范你的设计?看这篇好文!
  • 2018-08-23这个「以用户为中心」的图标设计法,恰好很多设计师不会
  • 2018-08-23从历代iPhone 官网设计,纪念 iPhone 诞生十周年
  • 2018-08-23高手的设计流程!滴滴车主端5.0全新升级背后的设计思考

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 这个帮你改善睡眠的APP,是这样设计出来的
    • 从2009年到2017年,按钮设计发生了哪些变化?
    • 水平滚动的网站设计 小结
    • 豆瓣9.4!Netflix这部汇集顶级设计师的纪录片,简直拍成了美剧的级别
    • 如何用产品思维做电商活动会场设计?来看京东的实战案例!
    • The Complete List of MIME Types(比较完整的MIME类型一览表)
    • UCAN 2017回顾!8分钟看完设计大咖们的尖端干货
    • 学会这5个PS小技巧,让工作效率提高5倍!
    • 最棒的9个国外免费图片素材网站
    • 交互进阶!如何扫除交互设计路上的3大障碍?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有