别再随口说“那个”了——UI命名比你想象的更重要

别再随口说“那个”了——UI命名比你想象的更重要

七月 17, 2026 ui design developer tools vibe coding web development design systems ai-assisted development frontend development ux terminology

那些叫不出名字的 UI 组件,正在拖累你的工作效率

开会的时候,你有没有遇到过这种情况:对着屏幕比划半天,"就那个蓝色的小三角"、"旁边那个圆圈"、"弹出来的那个东西"……对面的开发者一脸懵,点着头假装听懂了。

其实这不只是尴尬的问题。在 AI 写代码越来越火的当下,你用的词直接决定 AI 给你的是什么货色。你说"把这个下拉框弄好看点",AI 就给你一个它理解的好看——天知道会变成什么样。但你说"加个 segmented control,选中的那个要有明显的 active 状态",结果完全不一样。


术语鸿沟

UI 设计里的每个元素其实都有正经名字。有些一看就懂:button、checkbox、slider。有些就很有意思了,比如 macOS 窗口上红黄绿那三个小圆圈,人家正经叫"Traffic Lights"。最近很火的"Bento Grid",说的就是那种不规则布局,把不同大小的卡片拼在一起。"Scrim"听起来很高级,其实就是弹窗后面那层半透明的遮罩。

问题来了:大家说的根本不是一回事。产品经理说"那个弹出来的提示",可能是 toast 也可能是 snackbar——这俩长得像,但用法完全不一样。设计师说"背景那个模糊的东西",其实就是 scrim。这种鸡同鸭讲的沟通方式,效率能高才怪。


为什么 AI 时代更需要准确用词

如果你在用 AI 编程助手(或者准备用),接下来这段话很重要。

你的 Prompt 就等于你在跟 AI 说话。AI 不懂你的潜台词,更不会猜。

你说"加个 tab 样式的组件"——好,AI 可能给你一个效果,但你心里想要的可能是 segmented control。你说"弹出一个弹窗"——这可能是一个 modal、一个 popover、一个 dialog,甚至是一个 toast。AI 只能按你说的字面意思来。

所以 Prompt 越准确,AI 返回的东西就越接近你想要的。少折腾几轮,代码更符合预期,这不就是效率吗?


那些被忽视的关键术语

有些术语你可能压根不知道,但知道了就回不去了。

macOS 那个毛玻璃效果,正规叫法是"Visual Effect Material"或"Vibrancy"。做动画时控制节奏的参数叫"easing"——是"嗖"一下弹过去,还是慢悠悠地飘过去,给人的感觉完全不同。

还有一个容易被忽视的概念:Focus Ring。很多人觉得这只是个视觉细节,但实际上这是键盘用户的导航入口。没有它,用 Tab 键的人根本不知道光标在哪。对做无障碍访问来说,这是必须理解的概念。


怎么积累你的 UI 词汇量

别想着一口吃成胖子。从三个你最常混淆的概念开始就行。

比如分不清 popover 和 dropdown 的区别?或者 tooltip 和 hover card 什么时候该用哪个?搞懂这几个,你的组件选择就不再是瞎蒙,而是有根据的决策。

真正的转变发生在你开始把这些术语用进日常沟通的时候。当你不再说"那个东西",而是说"这个 resize handle"、"加上 scrim overlay"、"用 popover 容器"——大家秒懂,省去大量解释成本。


写在最后

命名这件事确实难。连 Martin Fowler 这种大佬都说过,命名是软件开发里最难的部分之一。UI 组件也是这个道理,天天见面,却懒得记人家叫什么。

但记住正确的名字真的有用。跟开发者对 bug、跟 AI 提需求、还是上网搜为什么 CSS 动画不对劲——知道术语就是快很多。

下次遇到"那个东西"的时候,停下来查一下它叫什么。你和你的同事都会感谢你的。

对了,有个叫 NameThatUI 的工具挺实用,专门收录 UI 术语,配图解释,收藏备用很方便。

Read in other languages:

RU BG EL CS UZ TR SV FI RO PT PL NB NL HU IT FR ES DE DA EN