反馈与浮层类控件
系统"说话"的方式——弹窗、提示、状态反馈、模态覆盖层
Alert
Alert · UIAlertController · dialog
系统级弹窗。
居中出现、背景变暗、强制用户做出选择。
设计要点
最多 3 个按钮
标题短而明确
不要滥用（打断流程）
Live Demo
点击按钮查看 iOS 风格警告弹窗
ConfirmationDialog
confirmationDialog · ActionSheet
从底部滑出的操作列表。
用于多选一操作。
Live Demo
点击按钮查看底部操作列表
Sheet
sheet · fullScreenCover · Detent
从底部滑出的半覆盖页面。
用于展示新内容或填写表单。
关闭方式
下滑手势 + 按钮
macOS: 从标题栏下方滑出
Live Demo
Popover
popover · NSPopover · Tooltip
带箭头的气泡浮层。
从触发控件旁边弹出，点击外部关闭。
iPhone 行为
自动降级为 Sheet
Live Demo — macOS/iPad Style
点击按钮切换显示
跨体系命名对照表
反馈与浮层类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| Alert | Modal.confirm | ElMessageBox | AlertDialog |
| ConfirmationDialog | — | — | — |
| Sheet | Drawer | el-drawer | BottomSheet |
| Popover | Popover | el-popover | — |
Inspector
inspector · 右侧属性面板
从右侧滑出的属性面板。
用于查看和编辑选中项目的详细信息。
HTML 近似
position: fixed; right: 0;
或 Grid 布局 trailing 列
Live Demo — Xcode Style
项目列表
点击选择项目 → Inspector 显示详情
📝
选择项目查看属性
FileDialog
fileImporter · fileExporter · NSOpenPanel
macOS 系统级文件对话框。
打开、保存、移动文件。
Web 近似
<input type="file"> 打开
<a download> 保存
Live Demo — macOS Open Panel
ShareLink
ShareLink · UIActivityViewController · navigator.share
调用系统分享面板。
AirDrop、信息、邮件、第三方扩展。
AirDrop
信息
邮件
拷贝
Web Share API
navigator.share({
title: '标题',
url: 'https://...'
})
Live Demo — iOS Share Sheet
分享至
其他操作
需要 HTTPS 和浏览器支持
Notification
UserNotifications · Notification API
推送通知 / 本地通知。
横幅、提醒、通知中心、锁屏。
设计要点
标题简短、正文有价值
提供操作按钮
避免过度通知
Live Demo — iOS Banner Style
新邮件：项目进度更新
您好，附件是最新的项目进度报告...
张三
会议时间改到下午3点，可以吗？
团队周会
会议室 A · 10:00 - 11:00
跨体系命名对照表
反馈与浮层类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| Inspector | Drawer (right) | el-drawer | — |
| FileDialog | Upload | el-upload | — |
| ShareLink | — | — | — |
| Notification | Notification | el-notification | Snackbar |
Tooltip
Help Tag · toolTip · title属性
鼠标悬停约1秒后出现的小文字气泡。
macOS 官方叫 Help Tag。
HTML 近似
<button title="提示文字">按钮</button>
Live Demo — 悬停约1秒显示
悬停在按钮上查看工具提示
MenuBar
Menu Bar · NSMenuBar · 顶部菜单栏
macOS 屏幕最顶部的菜单栏。
文件、编辑、视图、窗口、帮助。
Live Demo — macOS Menu Bar
点击菜单项查看下拉菜单
StatusBarItem
MenuBarExtra · NSStatusItem · 状态栏图标
macOS 菜单栏右侧的小图标。
点击展开一个小面板或菜单。
Live Demo
菜单栏右侧状态区域模拟
Apple 反馈设计的层级原则
从轻到重，能用低级别解决的不要用高级别
发送消息后的震动、键盘点击音
按钮变为勾号、列表项滑出消失
短信预览横幅、邮件到达通知
底部操作选择、分享方式选择
删除确认、错误警告、权限请求
核心原则
能用低级别解决的，不要用高级别。Alert 是最后手段。
跨体系命名对照表
反馈与浮层类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| Tooltip / Help Tag | Tooltip | el-tooltip | Tooltip |
| MenuBar | — | — | — |
| StatusBarItem | — | — | — |
MenuBar 和 StatusBarItem 是 macOS 独有的系统级 UI 组件
HUD / Toast
系统浮层提示 · 非官方组件
Apple 没有官方的 "Toast" 控件。
这是 Android/Web 的概念。
系统 HUD
音量/亮度调节、静音模式
内联反馈
"已复制" 出现在原按钮位置
音效 + 触感
Haptic 反馈
Apple 设计理念
操作的结果应该是显而易见的，不需要额外提示。
Live Demo — 系统 HUD 样式
点击下方按钮触发 HUD
模拟 iOS 系统音量调节样式
HapticFeedback
sensoryFeedback · 触觉反馈
触觉反馈是 Apple 多感官设计的重要组成部分。
注意
Web 上无法模拟触觉反馈。
以下仅为概念展示。
触觉类型
Impact
light / medium / heavy
按钮按下、元素吸附
Notification
success / warning / error
操作完成反馈
Selection
轻微嘀嗒
Picker 滚动、选项切换
Rigid / Soft
硬碰硬 / 柔软碰撞
动画终点反馈
SwiftUI (iOS 17+)
.sensoryFeedback(.success, trigger: state)
Sound
系统声音 · 多感官反馈
系统声音和触觉反馈配合使用。
这是 Apple 多感官反馈设计的一部分。
设计原则
声音应增强体验，而非打扰用户。
用户可在设置中关闭特定声音。
系统声音场景
键盘点击音
发送消息
收到消息
支付完成
截图快门
锁屏
ContextMenu
contextMenu · UIContextMenuInteraction · 右键菜单
长按或右键弹出的操作菜单。
iOS 长按，macOS 右键。
SwiftUI
.contextMenu {
Button("拷贝") { ... }
Button("删除") { ... }
}
Live Demo — 右键触发
文档.pdf
右键打开菜单
项目文件夹
右键打开菜单
照片.jpg
右键打开菜单
网页链接
右键打开菜单
在移动端可以长按触发（演示为右键）
跨体系命名对照表
反馈与浮层类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| HUD (无官方) | Message | ElMessage | Snackbar |
| HapticFeedback | — | — | — |
| Sound | — | — | — |
| ContextMenu | Dropdown.Menu | el-dropdown-menu | Menu |
Haptic 和 Sound 是 Apple 设备独有的硬件能力