# General Translation Blog: Daniel White：遵循声音物理规律的界面 URL: https://generaltranslation.com/zh/blog/daniel-white.mdx Docs index: https://generaltranslation.com/llms.txt Description: Daniel 为何在意那些让页面显得鲜活的细节，以及他如何为界面设计引入一种新的感官 Authors: Taylor Fang Published: 2026-10-28 *About General Translation Open-Source Grants* The open-source ethos is core to what we do at General Translation. Our flagship internationalization (i18n) libraries are open source under the MIT license. [generaltranslation/gt](https://github.com/generaltranslation/gt) We’re now supporting other open-source developers who build and maintain software for the public good, starting with $15,000 in no-strings-attached funds as well as $75,000 in GT platform credits across fifteen developers. Nominations are rolling and still open! Read more [here](https://generaltranslation.com/zh/blog/supporting-open-source-software). 我们很高兴地宣布下一个开源资助项目：由 [Daniel White](https://www.danielwhite.uk/) 打造的 [Cuelume](https://cuelume.dev/)。 Cuelume 是一个**小巧、零依赖的 Web 交互音效库**，内置十四种专为用户界面设计的提示音：既有 *tap*、*type*、*open* 等交互音，也有 *success*、*warning*、*loading* 等状态音。大多数 UI 音效都是播放预先录制的音频，而 Cuelume 中的每一声点击，都是实时合成的物体敲击声。**无需加载任何音频文件**，也无需额外安装；整个库经压缩和 gzip 后仅 9 kB。 Cuelume **已被 Vercel 的 [fx](https://github.com/vercel-labs/fx) 采用**，并获得了 Supabase、PostHog、Interfaces、Intercom 和 Nuxt 等团队设计师的好评，**在 GitHub 上已收获 2,000 颗星**。它还提供 [Claude Code 插件](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md)版本，让开发者能以更自然的方式与智能体交互。常驻英国的设计工程师，Cuelume 的创建者。 Cuelume 的创建者 Daniel White 是一位常驻英国的设计工程师。这是他为数不多的几次受访之一。我们和他聊了 Web 所缺失的那种感官 (它也是人类反应最快的感官！) 、网页的鲜活感、他成为设计工程师的经历，以及他如何打造出这个借助听觉反馈让界面更具人情味的库。 ## 把机器拆开 Daniel 十一岁时，第一次想弄明白家里书桌上那台电脑内部究竟是如何运作的。据他自己说，他基于 Google 的 API 搭建了一个搜索引擎，后来又用 Java 写了一个 2D 物理引擎，用来模拟小物体如何下落和弹跳。这些早期的尝试，已经预示了他日后对**在网页上还原真实世界物理效果**的执着。 “我一直想从底层弄明白事物是怎么运作的，”他说，“这让我意识到，既然人脑能够随着时间不断创造和学习，那么**你能创造的东西基本上是无穷无尽的。**” 他之所以被前端工程吸引，是因为那种即时的反馈循环。“我爱上了这种感觉：在代码里改动一点点，就能立刻看到这些改动在网页上鲜活地呈现出来。” 他的第一份职业工程师工作是在一家邮轮公司。“我搭建了一个网站，人们用它查找航线、询问价格，”他[写道](https://www.danielwhite.uk/voyage)。他致力于让页面加载更轻快、安全地开展促销活动、帮助用户获取报价，还“愉快地花了几周时间，教电脑读懂甲板平面图，并在图上找出各个舱房”。谈到设计工程师 (Design Engineer) 这一相对较新的职位时，Daniel 认为这是他本人以及许多同行工作的自然演进。 “我一直更像工程师，而不是设计师。做前端的时候，你会自然而然地向设计靠拢，因为你需要更多地考虑 UI 和 UX，”他说。起初，设计师把 Figma 文件交给他，由他来实现。久而久之，**他开始自己做出更多设计决策**，尤其专注于微交互和反馈。他一个个具体的设计选择，逐渐积累成了一套更宏观的设计判断体系。“我在自己的笔记本电脑上本地搭建了一个‘记忆大脑’，里面存着我做过的所有设计决策，”他说，“现在它了解我的思考方式，还会随着时间自我进化。” ## 人类最快的感官 Cuelume 的构想源于对**人类如何感知界面**的思考。“人类能尝、能看、也能听，”Daniel 说，“在 UI 和 UX 上，我们能用眼睛看，但听觉却是网页上缺失的一种感官。” 设计界大多**在视觉细节上精雕细琢，却忽视了听觉细节。** “我们与网页交互时，一直缺少让大脑借助声音去构建画面的那一环，”他说。 Cuelume 正是为填补这一空白而生。用他的话说，它就是“一种借助声音、更轻松地与网页交互的方式”。声音不只是点缀，更是**重要的认知反馈**。“按下按钮时听到咔哒一声，或者支付失败时听到提示音，我们就更容易明白发生了什么，也更能把前因后果联系起来，”他说。他的直觉得到了大量有趣研究的印证，尤其是那些表明**听觉是人类最敏锐的感官之一**的研究。 “你的听觉比视觉**快 20 到 100 倍**，”神经科学家 Seth Horowitz [表示](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain)。大脑中负责接收听觉时序信息的细胞，放电速度比其他任何神经元都快，每秒可达 [500 次](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html)。声音之所以比视觉更快，是因为其神经回路更简单。 (发令枪就是一个[著名的例子](https://www.edge.org/conversation/david_m_eagleman-brain-time)：短跑比赛用枪声而非闪光来起跑，因为人对声音的反应更快。) 从进化的角度看，声音是更可靠的危险信号：它在黑暗中依然有效，能从四面八方传来，甚至能绕过障碍物。在界面领域的研究中，[Brewster 等人](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF)的一项研究发现，加入声音反馈的按钮能帮助用户明显更快地从错误中恢复，也更受参与者青睐。在网页上，声音还有很大空间去营造 Daniel 所说的“**生命感**”。他打造 Cuelume，就是想让更多界面灵动起来，为每一次交互配上自然而悦耳的声音。 “我特别喜欢网页上的小细节，喜欢留意那些别人不太会在意的细微之处，”他说。正是这些细节，成为“**让页面焕发生机的点睛之笔。**” ## 声音的物理原理 Cuelume 不使用预先录制的采样；声音是借助 [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) **在播放时实时合成的**。这些声音以被敲击的物体和乐器为原型进行数学建模，用数学方式复现真实物体发声的物理规律： * **音符以一次短促的敲击开始**。真实的敲击在最开始、“槌”接触物体的瞬间，会产生一小段噪声。Cuelume 会在音高出现之前加入一段短促的噪声，让声音听起来更像真实的交互，而不是电子音突然响起。 * **正弦波。** 声音本质上是气压变化，按时间绘制出来就成了一条波形。正弦波是只有单一频率的平滑、均匀的声音；大多数声音都由多个不同频率的正弦波组成。但合成器通常以其他波形 (方波、锯齿波) 为基础，这些波形听起来更嘈杂、更刺耳。Cuelume 在尖锐音域 (5 kHz) 以下只使用正弦波。 * **越高的泛音衰减越快。** 物体振动时会产生一个主音高以及泛音，即叠加在其上的一系列更高、更轻的音高。在真实物体中，较高的音高最先消失，较低的音高持续最久。Cuelume 的算法复刻了这一特性，因此高音比低音消退得更快。 * **重复播放时听起来不会完全相同。** 频繁触发的提示音每次播放都会比上一次稍重或稍轻，因此两次点击听起来不会一模一样。 (结果类提示音每次播放都相同。) 其中不少声音特性源自一个更为悠久的传统，即 Bill Gaver 于 1986 年在 Apple 提出的“听觉图标” (auditory icons) 。他[主张](https://research.gold.ac.uk/id/eprint/15059/)，信息应当通过**日常声音而非音乐性的哔哔声**来传达：因为日常声音在日常环境中更为人熟悉，与音乐性声音相比也更不容易让人分心或厌烦。此外，如今的合成声音已经足够以假乱真。[MIT 开展的研究](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771)表明，听众**无法区分合成录音与真实录音**；合成模型的声音足够逼真，听众甚至能判断出某个声音的“材质”和“撞击力度”。声音设计一旦存在，就会深刻影响我们对界面的体验。甚至有研究表明，**声音会影响我们的其他感官，尤其是触觉**。在[羊皮纸皮肤错觉](https://pubmed.ncbi.nlm.nih.gov/9512426/)实验中，研究人员发现，人们一边搓手一边听较高频率的声音时，会觉得双手更加光滑、干燥 (就像羊皮纸一样) 。在[大理石手错觉](https://pub.uni-bielefeld.de/record/2656678)实验中，研究人员发现，参与者被锤子轻轻敲击时，如果同时听到更响亮的声音，手部会变得僵硬，皮肤电导率也会随之改变。在 Cuelume 中，十四种固定提示音都可以套用四种[声音主题](https://cuelume-site.pages.dev/docs/#set-theme)。主题用于调整每种提示音的个性或真实感。 ```ts import { play, setTheme } from "cuelume"; setTheme("mech"); // 干脆利落的机械零件声 setTheme("bubble"); // 敲击声、滴水声、开瓶塞声和咕嘟声 setTheme("press"); // 低沉音色上叠加一声咔嗒，松开时再响起一声更轻的 setTheme("default"); // 玻璃、木头、空气、软槌 play("select", { theme: "bubble" }); // 单次俏皮点缀 ``` 不过，可生成的声音仅限于这十四种提示音与四种主题的组合。它没有声音设计模式，也无法自定义频率。 “如果加入一百万种声音，首先就会带来工程上的问题，因为你根本无法管理每种声音的频率和颗粒，维护起来根本不可能，”Daniel 解释道，“我也不想让这个库被数百万种声音撑得臃肿。我考虑的是 Web 上最常见的使用场景，以及这些场景听起来应该是什么样子。” 欢迎访问 Cuelume [网站](https://cuelume.dev)，亲耳感受不同的声音风格！要[使用 Cuelume](https://cuelume.dev/docs#install)，只需为元素添加 `data-cuelume-*` 属性并调用 `bind()` 即可。 ## 未来方向 “Cuelume 被集成进 Vercel 的产品 fx 时，我真的很开心，”Daniel 说，“Vercel 也在赞助我的项目。论对开源的热爱，他们是一支好得离谱的团队。” 他最近还为 Cuelume 推出了一个 Claude Code 插件。 “很多人私信我，说这简直是颠覆性的，因为现在他们能听出自己的智能体是在工作、已经完成，还是需要他们介入。” Daniel 还希望提升 Cuelume 理解产品的能力，**甚至能为产品推荐合适的声音**，尽管这是个棘手的问题。声音应当根据“你的产品想要达成什么”来精心挑选。但声音的好坏出了名地难以评判，借助 AI 更是难上加难。Daniel 目前正在探索制定一套绘制频率图的规则和技巧，让一个简单的推理模型就能执行。 Daniel 最近加入 Attio，担任设计工程师。他仍在业余时间维护 Cuelume，以及一系列小巧、无依赖的 UI 库：slot-text、drawably、cube-motion、springline 等。 Daniel 认为，**构建与决策之间的天平已经发生了倾斜**。“如今，设计品味和创造力远比工程工作重要，因为写代码这件事正变得越来越无足轻重，”他说，“成为优秀的工程师固然重要，但培养自己的品味、走出自己的路同样重要。” 在他看来，品味并不是从别的界面里学来的。他给设计师的建议是**拓宽灵感来源**。“你可以花时间读书、走到户外、从大自然中汲取灵感，用设计师的眼光去观察生活。” 他也是这样解释自己的种种选择的，包括打造一个声音库——声音是 Web 中一个尚未被充分探索的领域。“如果有一百个人告诉我应该这么做，因为这样行得通，我往往会走一条完全不同的路。当所有人都朝一个方向看时，我会努力寻找一条无人走过的路，”他说。 “我们是人，不应该只是亦步亦趋地走别人走过的路，”他说，“重要的是**找到真正触动你内心的东西**。” ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.