UI/UX Terminology
部分UIUX中的术语来源于生活，比较有意思，本文使用AI辅助进行整理（数字考古 📜），顺便练习下前端，动手写一写组件。信息来源主要为Gemini总结，配合第三方资料验证&勘误
最近在Vibe毕设前端UI，部分术语初看感觉很迷惑，为什么单选按钮叫Radio Button，导航栏叫作 Breadcrumb，弹窗提示叫Toast？
这些术语的灵感分别来自老式收音机、格林童话、烤面包机。当时的 GUI 设计师，为了让普通人快速看懂数字世界，从现实世界里借用了熟悉的概念。
Radio ☉
Radio buttons typically occur in groups; they’re round and are filled in with a black circle when on. They’re called radio buttons because they act like the buttons on a car radio.
Inside Macintosh Volume I, p.66, 1985
上世纪中期的汽车收音机，有一排机械按键用于预设频道。按下其中一个，它会保持按下的状态，同时把其他按键弹起。
这种设计被搬到屏幕上，让用户在一组数据中挑选其中一个：
Modal/Modalless Dialog 💬
A mode is a part of an application that the user has to formally enter and leave, and that restricts the operations that can be performed while it’s in effect.
Inside Macintosh Volume I, p.28, 1985
A modal dialog box is one that the user must explicitly dismiss before doing anything else… the main use of a modal dialog box is when it’s important for the user to complete an operation before doing anything else.
A modeless dialog box allows the user to perform other operations without dismissing the dialog box.
Inside Macintosh Volume I, p.67-68, 1985
在人机交互时，经常会有这样一种组件：它出现在主页面内容之上，用户必须先在完成和它的交互，才能返回主页面。在设计上有个小巧思，可以给屏幕其余添加模糊，以将用户的注意力集中过来。
这个组件在行业内经常被称为 Modal，其中文译名为 “模态”。结合《Inside Macintosh Volume I》的相关表述，感觉用名词形式 Mode 更贴切，Modal 更适合作为组件前缀使用，例如 Modal Dialog（模态对话框）、Modal Searchbox（模态搜索框）等。
Dialog，对话。字面意思，计算机与用户的一次"交谈"，配合Modal，可以设计出下面这些需要"强制中断"设计的组件：
- 覆盖/删除文件前的警告
- 登录/注册账号
Breadcrumbs 🍞
格林童话中《Hänsel与Gretel》讲了这样一个故事：
一对贫穷的夫妇因饥荒，两次将子女Hänsel、Gretel遗弃在森林。第一次哥哥 Hänsel 沿路撒石子，兄妹凭石子反光找到家；第二次撒的面包屑，然而小鸟吃光了。二人迷路，误入女巫的糖果屋，女巫锁住 Hänsel 想养胖后吃掉，Gretel 则留着做苦役。Gretel 假意顺从，趁女巫靠近烤炉时，将其推入炉中烧死，救出 Hänsel，还发现女巫藏的金银财宝…
UI中的面包屑导航正是借用了这个隐喻，显示用户的访问路径，帮助用户了解当前位置并返回上级页面。
常见的使用常见应该就是文件管理器了，例如 Windows 的 Explorer.exe 和 macOS 的Finder.app
此外， VSCode中也有面包屑组件，显示当前所在的层级，并允许你快速在文件夹、文件与符号之间跳转。我个人是很少用到，跳转文件一般用⌘ + P就够了，查看 Symbol 用侧边栏的 Outline 更舒服
Hamburger 🍔
Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. —— Norm Cox
最熟悉的一集，汉堡包，伟大，无需多言👍
三条横线组成的图标被称为"汉堡菜单"，因为它看起来像一个汉堡包：两条面包夹着中间的肉饼，由Norm Cox于1981年为 Xerox Star 操作系统设计。第二年在Windows上也使用了这个图标，后面又不用了。但随着移动端兴起，在安卓和 iOS 又能经常看到汉堡了。
Important: 在移动端访问 vluv.space, 也在右上角领取小 🍔
Toast & Snackbar 🍞
Toast名称翻译为“烤面包片/吐司”。其灵感来源于烤面包机 (Toaster) —— 当面包烤好后，会从机器中自动弹出 (Pop up)。Snackbar 名称直译为“快餐柜台/小吃吧”，也是暗示这个组件快捷、轻量
两个组件都是Modalless的，不会打断用户操作，并且会在一段时间后自动消失，Snackbar的不同之处是，它通常会包含"信息 + action"，action可以是重试/取消等等
Carousel 🎠
Carousel一词源自法语"carrousel"[1]，多指游乐园中大型、装饰华丽的旋转木马，还可转义指代像机场行李转盘那样的旋转装置(baggage/luggage carousel)
在屏幕上，Carousel组件的行为和旋转木马类似，单向转圈，无限循环。比较讨厌的场景就是轮播广告，不过页面下滑一下就过去了，最讨厌的还当属弹窗（暂且归类为Modal Dialog吧）
列举几个比较合适的使用场景：
- 展示商品的不同视图
- 摄影图片展示
Accordion 🪗
Accordion组件允许用户展开或折叠内容区域，就像演奏手风琴时风箱的伸缩一样。
我非常喜欢的一个组件，某个内容涵盖话题比较多，例如FAQ(常见问题)，就可以使用该组件，界面变得简洁了，用户也可以选择性地查看感兴趣的内容
典型的Accordion只允许一个项目展开（手风琴模式），但也支持多个项目同时展开（折叠面板模式）。
Avatar 👾
Avatar 在源自梵文单词 avatarana，在印度教中，特指神祇为了恢复宇宙秩序，化身为肉体形态（如人或动物）降临凡间。[2]
发现这个神学术语涉及的的事件还挺多的，最初是早期的极客和科幻作家将其引入计算机领域，下面内容由 Gemini 辅助生成 最早的概念 (1979 - PLATO) 赋予哲学意义 (1985 - Ultima IV) [3] 确立视觉定义 (1986 - Habitat) The largest part of the screen is devoted to the graphics display. This is an animated view of the player’s current location in the Habitat world. The scene consists of various objects arrayed on the screen, such as the houses and tree you see here. The players are represent by animated figures that we call “Avatars”. Avatars are usually, though not exclusively, humanoid in appearance. In this scene you can see two of them, carrying on a conversation. 大众化普及 (1992 - Snow Crash) 现代用法：从全身到“大头照” 游戏/VR界：依然保留“全身化身”的含义（如《魔兽世界》的角色或 Apple 的 Memoji）。 社交网络/论坛：在早期的论坛（BBS）、即时通讯软件（ICQ, QQ, MSN）中，由于带宽和屏幕空间限制，用户的代表形象被压缩成了一张静态的小图片。 虽然形式变成了 2D 的小方块，但我们依然沿用了 Avatar 这个词（在 Web 开发中，通常指代那张圆形或方形的用户图片）。 在中文语境下，我们更习惯称之为头像，而在英文的 UI 设计规范（如 Material Design 或 Ant Design）中，这个组件依然被命名为 Avatar。 在数字UI设计中，Avatar代表用户的数字身份或虚拟形象，通常显示为圆形或方形的用户头像。它已成为现代应用中用户识别与个性化的核心组件。
在早期的 PLATO 系统（一种早期的多用户计算系统）的游戏 Avatar 中，这个词开始出现，但当时更多指代游戏本身。
著名的角色扮演游戏**《创世纪 IV》(Ultima IV: Quest of the Avatar)** 是里程碑。游戏设计者理查德·加里奥特（Richard Garriott）希望玩家不仅仅是控制一个棋子，而是能在道德层面为自己的行为负责。他将玩家的角色称为 “The Avatar”，暗示屏幕里的角色是屏幕外真实玩家灵魂的载体。
这是 Avatar 真正变成我们今天所理解的“头像/化身”的关键节点。
Lucasfilm Games（卢卡斯影业游戏部门）开发了最早的大型多人在线社区 Habitat。开发者 Chip Morningstar 和 F. Randall Farmer 首次正式使用 Avatar 一词来称呼用户在屏幕上操控的那个小人。
尼尔·斯蒂芬森的赛博朋克经典小说**《Snow Crash》** 将这个概念推向了大众。书种描绘了一个叫“Metaverse”（元宇宙）的虚拟世界，人们在其中通过 Avatar（视听化身）进行社交。这本书定义了现代互联网对 Avatar 的想象：它可以是你真实样子的投射，也可以是你幻想中的样子。
随着互联网的发展，Avatar 的含义发生了分流：
Spinner & Skeleton Screen ⏳
大约公元1300年，“蜘蛛”的意思，作为名词形式源自动词 spin（旋转、纺织）。“纺织线的纺织者”这一含义出现在14世纪晚期（13世纪晚期作为姓氏），通常指女性。《牛津英语词典》提到，_spinner_在“蜘蛛”这个意思上在1530年至1615年间相当常见；而现在则主要是方言或修辞用法。
持续旋转的加载圈在早期的页面上经常看见，术语为Spinner。但在现代一点的页面/App中，通常会避免使用它，见 Mobile Design Details: Avoid The Spinner — Luke Wroblewski, 2013
也算经历过早期互联网，盯着一个转圈看久了会觉得“这应用是不是坏了”，就会想刷新页面重新加载。在2013年，为优化用户体验，Luke Wroblewski提出预先展示页面轮廓，让用户可以预览到即将加载的内容结构。这看起来类似于页面的“骨骼”，因此得名Skeleton
当你看到灰色的方块（头像占位）和灰色的长条（文字占位）时，大脑会自动填补空白，产生“内容已经加载了一半”的错觉。
By the way，本博客在加载图片时也没有采用loading动画，而是用的用的模糊缩略图
MISC
还有一些组件，命名就是简单的英语词汇，不过多介绍了，简单总结一下：
| 术语 | 词源 | 简述 |
|---|---|---|
| Tabs | 文件夹标签 | 快速定位不同分类内容 |
| Panel | 面板 | 区域划分，承载内容 |
| Drawer | 抽屉 | 侧边抽出式面板 |
| Button | 按钮 | 触发动作 |
| Badge | 徽章 | 状态/数量标记 |
| Tooltip | 提示小工具 | 悬停显示额外信息 |
| Pagination | 分页 | 页面分割导航 |
| Card | 卡片 | 信息容器单元 |
Source: CAROUSEL - Definition & Meaning - Reverso English Dictionary ↩︎
The player again plays the Stranger, but this time the ultimate goal is not to defeat an evil villain – instead a path of Virtue has to be followed and a virtuous life led. Together with seven companions, the Stranger manages to master all of the eight Virtues by talking to the people, meditating at shrines, and setting a good example by living the Virtues. After recovering a number of important artifacts, as well as the Key of Three Parts, the party then descends into the depths of the Abyss, where they ultimately recover the Codex of Ultimate Wisdom. The Codex asks a series of questions relating to the Virtues, after which it confirms the Stranger as the Avatar, the hero of Britannia and defender of Virtue. ↩︎
UI/UX Terminology