声音 用户 听觉 在这个互联网信息爆炸的时代,我们每天都会接触不同的产品,在日常的 UX 设计中,设计师往往会关注产品的界面是不是好看,交互是不是便捷,而声音设计是最容易被忽略的:天猫精灵的人声音效,饭烧好后小米电饭锅发出的提示音……不可否认的是,声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音体验设计》,总结了一些心得体会,与各位分享。更多声音设计干货:连声音都是细节!阿里设计师总结的10个声音设计要点声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作为设计手段。阅读文章 > 一、声音是如何产生的声音是由振动产生的声波,通过介质(空气或固体、液体)传播并能被人或动物听觉器官所感知的波动现象。好,此刻,请你停下来,把你的右手放在喉咙的位置,然后尝试发出“啊”的声音,你是不是会感受到喉咙有明显的振动感?那是因为你的声带振动产生了声波,通过空气传播并被你的耳朵所感知。由此可见,声音的产生离不开物体的振动、传播的介质以及人或动物的听觉器官。此外,声音有三个重要特性,即音调、响度和音色。音调指声音的高低,是由频率决定,频率越高音调越高。响度又称音量,人耳感受到的声音强弱,它是人对声音大小的主观感觉量。音色指的是声音的品质,与发声体的材料和结构等自身因素有关。我们在清晨能听到小鸟的叫声不是因为其响度高而是因为小鸟声音的频率很高,而摩托车的隆隆声又低又深是因为其声音频率低响度高。二、为什么我们需要声音声音是我们连接世界,连接其他人最本能,最强大的方式。研究表明,人的感官从外界获取的信息里,视觉占 60%,听觉占 20%,触觉占 15%,味觉和嗅觉分别是 3%和 2%。另外,人对视觉的感知时间为 189 秒,而对声音的感知时间仅需 146 秒。虽然通过视觉获取的信息量占据了绝大部分,但人对于声音的反应速度要快于其他所有的感官刺激。由此就可以解释,为什么跑步运动员的起跑提示是听发令枪而非看倒计时了。1. 声音包含情绪听是一种被动并时刻发生的行为,声音可使听者自发且直接产生情绪反馈。音乐就是最常见的一种通过声音进行情绪表达的方式。我们通过视频号观看演唱会,其实不光光听的是音乐本身,歌手饱含情怀的演唱、评论区实时滚动的字幕, 或许能够唤醒你生命中的一些难忘记忆,让人的情感达到共鸣,这是听觉和视觉所带来的震撼力。2. 声音包含信息声音能够通过其特有的通道表达眼睛“看不见”的信息。多邻国作为一款风靡全球的语言学习工具软件,通过闯关式的答题形式,伴随情感化的动效和游戏化的音效提示让使用者爱不释手。答题正确和错误时系统出现的差异化提示音清晰地传达了正确和错误的信息,带给用户积极的正向反馈。3. 声音包含品牌特性你还记得每次走进全家便利店时听到的那个音乐旋律吗?声音标识也属于企业品牌的一部分,企业通过创造那些打破陈规的声音触发器,以此捕获消费者的注意力,然后利用这些注意力唤醒消费者头脑中与品牌相关的正面体验。好的声音能够给用户留下深刻印象,以至于下一次听到声音就能想到这个品牌,比如英特尔那段洗脑的标志性音乐“灯,等灯等灯”就是一个非常好的案例。图自 sankeibiz.jp4. 声音能降低认知负荷著名的研究人员马克·韦塞尔曾说过,“我们需要的是更聪明的人类,而不是更聪明的设备”,注意力将是未来最稀缺的资源,而如果让用户以最小的注意力来达成目标是我们需要关注的。每个人的注意力总量是有限的,但是我们可以通过将不同精度注意力分配在不同复杂程度的任务上来以缓解用户在同一时间处理多个任务时的压力,从而提升任务处理效率。当你在驾车时,几乎所有注意力都集中于看路况,偶尔看一下后视镜以及指示灯的状态,而地图导航的语音播报功能其实是利用了对人的注意力精度要求最低的环境知觉,利用了活跃的听觉通道,不仅减轻了对其他通道的占用,还能避免因视觉误差带来的潜在危险,降低用户的认知负荷。三、常见的提示音事件当你使用手机拍照的时候,按下“拍照”按钮后系统发出的“咔嚓声”是不是似曾相识?数字世界里的许多声音来源于现实世界,手机本身没有快门,但是设计师从已知世界中获取灵感,给手机重新设计快门声音,让手机拍照用起来和胶片相机一样。有的声音提示可以帮助人们获取反馈,以确保用户的操作是正常进行的,比如手机按键声、数码相机快门声;有的声音能帮助人们获取信息,减少人们出错的概率,比如安全带提示音、行驶方向提示音。按照声音类型我们可以对其分成四种类型,包含机械类、反馈类、信息类和状态提示类。四、声音设计法则1. 声音设计第一法则:我需要在这里添加声音吗和界面设计一样,在声音设计里我们也需要遵循“Less is More”的原则。站在使用者的角度想象一下,当你在厨房烧饭被油烟机的轰轰声吵得脑壳疼的时候,手里拿着的铁锅铲和锅碰撞产生的“哐哐”声,电热水壶、电饭锅、烤箱、搅拌机的声音同时响起,是不是会有再也不想在厨房多待一秒的想法?声音设计的首要法则是,考虑用户是不是真的需要声音,出现声音的场景是什么,如果有可能的话,我们可以用其他方式来提醒用户吗(比如换成闪烁的指示灯)?2. 让声音听起来简单在 shopify 设计系统的官方网站里,对于声音的时长描述为:“短音不超过 250ms,长音不超过 1 秒”。过长的提示音会让用户觉得拖沓厌烦,过短的提示音则无法让用户明确感知。比如我们经常听到的 QQ 软件里的“咳~咳”咳嗽声表示收到系统消息,“咚咚咚”敲门声表示有好友上线,“滴滴~滴滴”表示有人给你发消息了,这些声音虽然听起来简单却是有意义的。3. 在合适的情境发声就像做界面设计一样,作为设计师我们大部分时间是在办公室电脑桌前做设计,但很少有人能真正站在用户的使用场景去思考问题。如果你设计的一款手机被用户放在口袋或者书包里,这个时候有人打电话来了,用户却无法听到来电声怎么办?如果用户此时正在开会,但手机铃声突然响起了怎么办?考虑用户一天中的时间或活动,确保产品在各种方便和不方便的场景下都进行相应测试,可以防止多种错误的假设出现。4. 协调多维度感官体验通常情况下,声音不会作为一个单独通道出现,考虑听觉、触觉、视觉的统一性很有必要。当你走进一家看起来很有情调的咖啡馆,一进门就能闻到浓浓的咖啡豆香,店里贴满了富有年代感的海报,可是播放的却是让人抓狂的重金属音乐,是不是让你体验特别糟糕?5. 注意声音的重复容差研究表明,用户对声音的容忍度是有限的,声音越复杂越重复,阈值就会明显降低。有些声音每天会出现很多次,也许初次听到用户会觉得声音很好听,但是当一天中这个声音到达十次甚至是百次的时候,用户就会觉得厌烦。因此我们的声音应该是信息丰富的,而不是烦人的。写在最后“收音机与电视机很像,只是电视机有画面。如果视觉阻断了更多可能性,那么听觉就带来了更多的可能性。”声音可以表达出影像外形无法表达出来的信息,为用户提供更好更直接的体验。设计师常说“细节决定成败”,而声音体验设计是我们在日常工作中不可忽视的“细节”,牢牢抓住这个细节,能够为我们的产品体验提升带来更多的可能性。参考Shopify 设计系统:https://polaris.shopify.com/design/sounds《声音体验设计》[美]Amber Case / [德]Aaron Day /本篇来源:优设网原文地址:https://www.uisdc.com/sound-design
声音 环境 画板 我最近入手了 VR 设备,体验大大超出预期,难怪老罗觉得 VR 是下一代硬件平台,我觉得还真的有可能。在 VR 中有很多新奇的交互体验,视觉冲击感强,所以我对 VR 设计具体怎么做,充满好奇。不管你将来做不做 VR 设计,其实都应该了解一下,作为设计的广度,拓展下知识面也是必要的,万一哪天就要做了呢?就像多年前的 UI 设计一样,所以这篇文章值得点赞收藏。之前也有写过 VR 相关文章,结合起来看效果会更好。同样超干货,值得一读。用一篇超全面的文章,让你掌握VR设计的基础知识本文旨在向不了解 VR 设计的人介绍一些基础概念(资料来源于谷歌和一些其他机构)。阅读文章 > VR 应用具有非常直观的 UI 界面,与可穿戴设备、手机、平板、PC 上的应用类似,使得大众能够使用 VR。想出新颖的交互会比较有趣,但它却增加了用户的学习曲线。类似于 2D 界面,VR 设计师会用大小、对比和颜色设计出界面层次结构。在 VR 里,大小取决于用户和内容之间的距离,因此了解内容的大小和适当的观看距离至关重要。比如,知道要设计多大的字体是很棘手的,但幸运的是,在现实世界中有很多先例。在为 VR 设计内容时,对印刷设计(广告牌、海报、书籍)也需要类似的思考,对 VR 设计有借鉴意义。考虑下你现在是如何与一个触摸屏进行互动。我们必须慢慢去学习理解许多模式,比如滑动、捏缩放,长按出现更多选项。这些在做 VR 设计时也必须要去考虑好。我相信随着越来越多的设计师进入 VR 领域,将会有更多的想法来创建和打造新的 UI 模式,从而帮助行业向前发展。一、视野视野,或任何给定时间可观察环境的范围,是设计 VR 界面时非常重要的一个方面。更宽的视野,用户在体验过程中的沉浸感就更强。有 2 种类型的 FOV 共同作用形成人类视觉。单眼 FOV 描述的是我们一只眼睛的视野。对于一只健康的眼睛,单眼 FOV 的视野水平在 170-175,包括从瞳孔到鼻子的角度。鼻前视野 FOV 通常为 50-65,对于鼻子较大的人来说较小,而从瞳孔到头部一侧的视野为颞 FOV,其较宽,通常为 100-110。二、新建 Figma 文件1. 画板当做 VR 设计时,我使用的画板尺寸为 3600x1800(360 度),然后我绘制出完美的 FOV 区域来集中主要设计。2. 消失点在透视理论中有一个消失点的概念,这个概念在 VR 设计中很有用,因为它能帮助设计师在设计软件中创建一个便于感知深度和距离的参考。我总结了一种在我的设计中创建消失点的方法,通过在一个圆内以 10-15 度的角度画分隔线。之后,我将线条引入画板,并拉伸线条,直到它在框架内。完成后,将以连续间隔的直线放到画板中。(彩云注:这个方法也很适合用到画透视线中)3. 选择主题并丰富背景一旦消失点画好了,主要的参考线已经变明朗了,接下来就取决于你想如何在环境中发挥创造力。大多数时候,我使用渐变来创建天空和陆地等效果,然后添加了气泡、结构或使用形状的建筑物,这为环境添加了很多细节,使其感觉更 3D 逼真。4. 设计 UI到这一步的时候,你可以基于产品目标开始设计 UI 了。在设计 VR 时,对比是最重要的,因此,尽量减少文本和背景周围的颜色。通常,背景一般是半透明,在 UI 设计中一个白色背景最好适配深色环境,而对于深色背景最好适配白色环境。按钮通常包括两种形式,主要按钮和次要按钮,颜色保持简单同样是最好的。5. 布局与桌面和手机的传统 UI 设计不同,在 VR 或者 AR 中,嵌套导航保持在同一环境中,而界面框架利用了环境中可用的巨大空间。只有当有新的游戏场景可供探索时,环境才会发生变化。其他时候,也可以实现弹出窗口,新层叠加在旧 UI 之上。6. 使用 XR 工具创建曲面 UI仅用 Figma 就可以了,设计工具这块原来就足够了,有一种快速简单的方法来设计原型 3D,VR,AR 界面。有一个插件叫 3D UI Generator,能够自动缩放和调整任何图形,画板以创建 3D 界面和环境。它支持旋转、斜切、缩放、远近、FOV、曲面程度和等距视图。在 Figma 上可以安装 3D for XR: https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR7. 声音用户体验虽然在使用网页或 APP 时,声音往往很烦人,但它是 VR 开发不可或缺的一部分。考虑通感现象,其中一种感觉的刺激导致另一种感觉自动触发。例如,你闻到一些东西,就会产生味觉错觉。这也适用于声音。由于 VR 中仍然缺乏触觉反馈,因此当用户触摸物体时,声音是提供反馈的一种很好的方式。3D 声音(又称 Holophonic 声音)仍处于起步阶段,但将对我们体验 VR 的方式产生变革。我们都习惯于立体声,它提供来自两个声道(左/右)的声音,但全音可以让我们分辨声音是来自上方、下方还是后方。想想当你在外面听到飞机的声音,你凭直觉向上看,对吗?在 VR 中拥有这种声音体验将使用户真正身临其境。三、总结这是 VR 设计最基本的底层原理。这几篇 VR 相关文章一起看完,总算让 VR 中的设计不再神秘了。元宇宙是未来发展一大趋势,不少人都想上这趟车,VR 设计就是最靠近这一趋势的领域之一,VR 设计师这个岗位在将来会越来越紧缺。更多VR好文:Facebook设计师:从VR设计实战中总结的5个设计思路@C7210 :本文来自 Facebook VR 团队的设计师 Gabriel Valdivia,为我们讲述了Facebook 360这款备受关注的新产品诞生背后的一些设计思考与经验心得。阅读文章 > 欢迎关注作者的微信公众号:「彩云译设计」本篇来源:优设网原文地址:https://www.uisdc.com/vr-design
图标 控件 声音 这五个核心概念是学习交互与设计心理学的基础,在唐纳德先生的设计心理学中有提到,分别是:示能、意符、约束、映射、反馈。很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。示能当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。所以很多 UI 设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是 UI 的上游,那么 UI 设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。OK,那么来我们先来讲:示能1. 示能心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到 2 处甚至 3 处开关的控制,而每处开关的数量会在 3-5 个,这个时候不用意符去标识,就很麻烦了。回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。2. 反示能和示能相反,指的是任何物体之间不能进行怎样的互动。例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。数字产品中也会遇到一些有很明显反示能的控件,例如 segment Controls(分段控件/分段选择器/分段选择控件),它是 iOS 的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和 tab 不同。高手帮你学规范!iOS和Android规范解析之标签导航和分段控件从今天开始,将介绍iOS和Android设计规范中关于导航的部分。阅读文章 > 并且在该控件的描述中,seg 通常数量只能在 5 个以内,并且 5 个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用 tab 则会产生冲突,而使用 seg 则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。3. 不同场景中示能的变化一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的 3 个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。4. 相同示能的不同表现方式与含义这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的 tab 与其视图的呈现,tab 的本质就是利用多个标签来切换标签下的视图,所以标签除了用 tab 的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在 b 端 web 设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。再例如一个父子集共生的内容卡片同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。这里可以用一个比较形象的比喻,我有 4 张椅子,其中 3 张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过 8 张,如果没有人坐则只显示一张椅子。但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。小结示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。意符1. 意符的类型与表现形式示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确。例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。所以意符告诉我们对事物的正确操作方式以及任何可感知的标识。说白了就是一个能够表达事物具体操作的符号。在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。意符的类型文字文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。案例 1:开关开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。这里的文字就是意符,用来解释开关的作用。开关本身具备的含义中是有这样两条原则:需要让用户感知操作后立即生效开关所属文本必须简单清晰无歧义所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。那么大家再来品一品这两句话:1.“不把我推荐给….” 2.“把我推荐给….”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。开关文字意符的描述方式还有几种不同的方式:内容标题+开关切换后状态与内容变化的描述第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收 xxx 消息,而不要写成关闭后,不接受 xxx 消息。功能直接描述不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。批量整体描述对于同一种类型的功能设置,可以利用批量的形式做整体描述。再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释。例如 b 站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。文字意符很直观,但也要避免歧义。图形/图标图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。这些其实是很简单和基础的概念,但是很多工作多年的 UI 设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问 UI 和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看 iOS 系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。两个原因:1. 因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标2. 暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。颜色颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。声音声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟 1 秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。动效动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。例如我们看到理发店门口正在旋转的彩色灯。这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:1. 降低用户认知成本我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的 45 路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。2. 引导/提示/强化对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等3. 氛围、强化视觉电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。4. 表示状态当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。5. 更多意符意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。小结意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。万字干货!15个著名的设计心理学原理和应用深度解析!“除非有更好的选择,否则就遵从标准”你是否有在听别人说某某原理法则时一脸懵 B 的时候?阅读文章 > 欢迎关注作者的微信公众号:「应谋鬼计」本篇来源:优设网原文地址:https://www.uisdc.com/signification
音频 游戏 声音 NExT 音频设计师希辰,一位“带有媒体属性的技术工作者”,大学毕业后和朋友一起开了个录音棚,踏入声音设计行业。工作之余做了一个专注声音设计的主题网站「soundoer.com」,2018 年开始在个人微博「希辰 Xichen」分享自己拍摄的声音设计系列 Vlog,最近他又在着手整理关于游戏音频设计的系列文档。如果你有志进入游戏音频行业,有这样的疑问:“我需要掌握哪些技能?”、“游戏音频从业者是如何分工的?”、“有哪些具体的工作流程?”。希辰将以自己在音频行业的亲身实践和思考给出回复,共分三篇:「上篇」是非全面的游戏音频设计技能树、「中篇」游戏音频从业者的分工和工作流、「下篇」游戏音频设计的发展方向展望,本文首先分享上篇。希辰真人出镜 | 在声音的领域里“画画”作为一门艺术与技术紧密结合且还在不断快速发展的实用型学科,游戏音频设计综合性地运用声音领域里许多方向的知识、技能和工具来进行声音创作,并通过一个动态的(Dynamic)、交互的(Interactive)、程序性的(Procedural)游戏引擎系统将最终的声音效果呈现出来。仅从这一句简单的描述来看,对游戏音频设计师的从业要求就同时包含了艺术创作方面的制作能力和技术思维的实现能力,这背后还涉及到许多领域的知识技能储备。我想这可能正是令许多想入行的朋友们感到望而生畏的原因,甚至是声音相关行业想转行的同行们似乎也感到无从下手。也正如此,我的分享也只能是“非全面”的,仅从个人学习和工作经历出发,尽可能有条理地梳理出一个可供大家参考的游戏音频设计技能树。声学基础声学本身是一个已有成熟理论体系的物理学科,包含了有关声音的各种细分方向研究。作为建构在此基础之上的实用性学科,游戏音频设计自然也会涉及到相关的声学基础知识。我认为有两块理论知识尤为重要且与实际应用甚是相关:1. 物理声学简单说是对声波的产生、传播、特性等相关的研究,决定了我们如何在虚拟世界中对声音进行解构和还原,以及随着技术的不断发展我们该如何用更高效的模型去实现更逼真的效果;2. 心理声学重点关注的是通过科学方法来研究人类是如何感知声音的,比如音频压缩技术和响度标准等就是心理声学在实际应用中的典型体现。随着心理学和脑科学的不断发展,心理声学在解决人类如何更有效、更细节、更多维地感知声音这一问题上一定会有更深入的研究。掌握扎实的理论知识或许在实际应用上不会有立竿见影的效果,但知其然且知其所以然还是很重要的,这样才能在积累经验的同时不断有想法上的突破,避免自己成为只会熟练操作的工具人。数字音频制作数字音频制作,是指以数字音频工作站(Digital Audio Workstation, DAW)为主要工具,运用各种数字信号处理(Digital Signal Processing, DSP)手段来进行声音制作。通俗点说就是用计算机来进行声音制作。DAW 是指 Pro Tools、Reaper、Cubase、Logic 等之类的宿主软件;DSP 是指用各种插件工具对声音进行处理。这是贯穿整个声音设计相关行业最基本的技能。相较模拟时代而言,现今的音频制作入门门槛是越来越低了,无论是硬件设备、软件工具还是各种学习资源,都是非常容易获取的,这也让更多的人有机会参与到声音创作中去。这就像,现在大多数人并不需要理解光圈快门等成像原理,就能用手机拍出一张好看的照片。但作为专业的从业者,只会使用工具是远远不够的,还要去思考怎样把工具用对用好,比如如何搭建一个信号链正确、结构明晰的工程文件,如何输出符合数据格式和响度标准的声音资源等。不要只在意最终做出来的东西好不好听,而忽视了这些最能体现个人专业度和工作习惯的重要细节。录音技术录音技术是使用话筒(Microphone)和录音机(Recorder)等设备采集声音的过程,是获取原始声音素材的最重要的手段。从录音对象和场合来分析,有同期录音、实地录音、拟音录音、音乐录音和语音录音等具体分类。对游戏音频设计师来说,录音不仅是获取声音素材的手段,其过程本身也是一种重要的学习方式。只有细心体验过真实的声音,才能更加有的放矢地对录制到的声音素材进行再创作,创造出既符合真实体验又满足游戏功能和美感需求的听觉体验。合成器合成器是通过生成简单波形并对其进行各种调制处理来获取声音素材的方式,在音乐制作领域已经是非常成熟的创作工具。而合成器在信号链和调制处理方面的运用对声音设计也是有很大的借鉴意义。如果有朋友觉得直接上手模拟合成器费钱,可以尝试先从软件合成器入手。据说这套设备 6 个 0 以上∑( △|||)︴混音如果说录音技术和合成器关注的是如何获取声音,那么混音关注的就是如何将声音重放出来。无论是音乐混音、电影混音还是游戏混音,它们的最终目标都是一致的,将设计完成的声音在频域、时域和空间上进行合理排布,并通过合适的重放系统播放出来,传达给受众一个完整的听觉体验。与音乐和电影这类线性媒体相比,游戏作为典型的交互式媒体在设计思路和工作流上确实有所不同,但在重放环节其实并无任何区别,还是通过耳机和音箱系统,所以在混音的方法原则和评价标准上都是一致的。声音设计这里对声音设计的定义相对狭义,重点是指从游戏的设计需求出发来制作出语音、音乐和音效这三大类的声音资源。从项目实际运作角度考虑,游戏音频设计师是无法完全独立完成所有制作的——语音资源需要配音演员和导演的参与,音乐资源则需要作曲家和乐手的参与,游戏音频设计师可以根据自身的技能特长有选择地参与其中,但无论如何最重要的是——本着对最终声音表现负责的态度来把控所有声音资源的质量。毕竟游戏音频设计师应该是整个项目中对声音设计最有发言权的人了。不同金属与干冰碰撞的声音火花游戏设计基础业内外经常听到的一种调侃是,有了策划、美术和程序就能开始做游戏了,而音频往往就被忽略了。这其中既有客观原因:对于大多数游戏类型来说,声音不是游戏玩法和表现上的核心,玩家对声音表现的敏感度也远低于视觉上的表现;或许也有主观因素:有些游戏音频设计师可能只忙于完成视觉表现上的需求,而没有从更深层次的游戏设计与开发环节中发挥更大的作用。因此,掌握游戏设计和开发流程等相关知识的意义在于,游戏音频设计师要把自己定位成一名真正的游戏开发者。以开发团队核心成员的身份,去了解其他工种的工作内容和流程以便于更顺畅的沟通与合作,从专业角度提出音频方面的设计想法来提升游戏的整体品质。只有充分展示出自身不可替代的价值,才能获得他人在专业上的认可与重视。游戏引擎游戏引擎作为游戏开发的核心工具,自然也是游戏音频设计师必须要掌握的。除了某些游戏工作室内部的自研引擎之外,目前主流的商用引擎是 Unreal 和 Unity,官方网站和各类社区都有非常丰富的学习资源,自学上手很容易。游戏音频中间件游戏音频中间件是一种用于管理声音数据、实现音频功能的图形化界面软件,它的出现减少了游戏音频设计师对引擎端程序支持的依赖程度且极大地提高了工作效率,因此在现在的游戏开发流程中似乎已经成为了一种标配工具,在各类招聘要求中也成了必备技能之一,重要性自然不言而喻。但我更想从祛魅的角度来说一说我的看法,大家千万不要觉得离了中间件就没法干活了,工具就只是工具而已,主要的作用就是提高开发效率,省去了重复造轮子的成本,而对游戏音频设计师的自我修养来说,更重要的是养成良好的数据管理习惯,理解工具背后的实现逻辑,这样才能举一反三,在之后遇到其他的开发工具和环境之后,依旧能有一套切实可行的游戏音频设计方案,这才算是自己积累下来的核心竞争力。除了某些游戏工作室内部的自研工具之外,目前市面上也已经有不少成熟的商用游戏音频中间件可供选择,个人比较推荐 Audiokinetic Wwise,官方提供了非常丰富的文档资料和学习资源,在学习工具本身的同时还能了解到许多游戏音频设计相关的概念和思路。技术音频从各种猎头资源和招聘启事了解到的信息来看,近两年国内游戏开发团队对技术音频设计师的需求明显增加,因此我觉得有必要单独提出来聊一聊。在我来看,这个岗位出现的主要原因是,随着游戏品质的不断提升,游戏音频在数据和功能方面的工作量和实现要求已经超过了普通程序员的能力范畴,而目前行业内的大多数游戏音频设计师受限于经验背景和技能储备,也没有足够的程序基础去解决某些技术性问题,因此需要一个既有音频设计相关知识又有程序功底的开发人员来参与到各个开发环节中去。简单来说,技术音频设计师的工作职责就是处理一切普通游戏音频设计师无法解决但又和音频相关的技术性问题,比如工作流和性能优化、音频功能和工具开发等,这样的角色定位与技术美术(Technical Artist)在游戏美术开发中的功能是类似的。从游戏开发分工精细化的发展角度来看,技术音频设计师这个岗位确实是有存在的必要,让专精人才在细分工作上发挥作用,对项目的效率和品质提升都是有帮助的,但我认为有时候对游戏音频设计工作内容的过度分工和剥离,可能也会带来一些负面影响。所以我要以游戏音频设计师的身份立场鲜明地表达一下我的观点,不要轻易放弃那些原本就是份内职责的技术性思考和解决问题的能力,否则很有可能成为只会制作声音资源的内包人员。游戏音频设计师从游戏需求和声音表现出发,对音频数据和功能进行整体性的构思,并将实现逻辑完整地传达给程序员进行开发,同时参与到开发全程的整合、调试和优化环节中去,我觉得这正是游戏音频设计区别于传统声音设计的独有乐趣。以上,就是我对游戏音频设计相关技能和知识储备的“非全面”梳理——声学基础、数字音频制作、录音技术、合成器、混音、声音设计、游戏设计基础、游戏引擎、游戏音频中间件、技术音频。最后再次强调,游戏音频设计是艺术与技术紧密结合的学科,在提升实用型技能的同时,也不要忽视了艺术修养方面的积累。虽然我一直抱有成为“全栈式”游戏音频设计师的想法,但不得不承认这是一个非常理想化的目标,上述提到的每项内容都是值得深耕数十年的领域。从实际就业的角度来考量,也并非说要完全具备以上这些能力才能找到一份游戏音频设计的相关工作,行业的发展必定会带来分工的进一步细化和岗位需求的增加。因此更为实际的学习路径是结合自身兴趣和专业特长,以“一专多强”的目标去不断完善自己的技能树,扎实地在游戏音频设计行业走得更稳更远。连声音都是细节!阿里设计师总结的10个声音设计要点声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作为设计手段。阅读文章 > 欢迎关注作者微信公众号:「NExT Studios」本篇来源:优设网原文地址:https://www.uisdc.com/game-audio-design