Apple UI 控件参考
统一命名，统一语言
做UI设计的时候，用不同企业的组件库，
同一个控件有十种叫法。
归根结底，控件就那几十种。
名字再怎么变，底层行为是确定的。
Toggle
Picker
Alert / Sheet
Navigation Bar
Tab Bar
浮动按钮 / FAB
这份参考以 Apple HIG + SwiftUI/UIKit 组件名为基准
把每个控件的官方名称、功能、平台差异、跨体系对照全部列清楚
文档结构
按钮与操作
~15种Button、Toggle、Link、Menu、Context Menu、Gesture
输入与选择
~18种TextField、Picker、Slider、Stepper、DatePicker、ColorPicker、Form
数据展示
~20种Text、Label、Image、List、Table、Grid、ProgressView、Gauge、Chart
导航与结构
~18种NavigationStack、TabView、Sidebar、Toolbar、Stack、ScrollView、Section
反馈与浮层
~14种Alert、Sheet、Popover、ConfirmationDialog、Toast、Notification
平台标记说明
每个控件会标注平台可用性
控件的三层命名
跨体系对照表
悬停行可高亮标准名称
| SwiftUI | UIKit | AppKit | Web HTML | Ant Design | Material Design |
|---|---|---|---|---|---|
| Button | UIButton | NSButton | <button> | Button | Button / FAB |
| Toggle | UISwitch | NSSwitch | checkbox | Switch | Switch |
| Slider | UISlider | NSSlider | range | Slider | Slider |
| Stepper | UIStepper | NSStepper | number | InputNumber | — |
| Picker | UIPickerView | NSPopUpButton | select | Select | Select / Menu |
| TextField | UITextField | NSTextField | text | Input | TextField |
| TextEditor | UITextView | NSTextView | textarea | Input.TextArea | TextField (multi) |
| SecureField | UITextField | NSSecureTextField | password | Input.Password | TextField (pwd) |
| DatePicker | UIDatePicker | NSDatePicker | date | DatePicker | DatePicker |
| ColorPicker | UIColorPicker | NSColorPanel | color | ColorPicker | — |
| ProgressView | UIProgressView | NSProgressIndicator | progress | Progress | LinearProgress |
| List | UITableView | NSTableView | ul / ol | List | List |
| NavigationStack | UINavigationController | — | — | — | — |
| TabView | UITabBarController | NSTabView | — | Tabs | Tabs |
| Alert | UIAlertController | NSAlert | dialog / alert() | Modal.confirm | AlertDialog |
| Sheet | UISheetPresentation | NSPanel | dialog | Drawer / Modal | BottomSheet |
| Popover | UIPopover | NSPopover | — | Popover | Menu |
| Menu | UIMenu | NSMenu | select / menu | Dropdown | Menu |
Web展示的限制
与对策
在网页上展示Apple控件时的实际限制，以及相应的解决思路。
Toggle长得不像iOS开关
CSS自定义样式模拟，或标注"仅Safari接近原生"
DatePicker样式不同
macOS Safari最接近系统原生
无NavigationBar
CSS模拟 + 说明
无Sheet滑出动画
CSS动画模拟
无Haptic Feedback
文字说明
无SF Symbols
用截图或描述替代
Blur/Vibrancy效果
backdrop-filter 做近似
能用原生HTML渲染的就用原生HTML——
在macOS Safari上，原生HTML控件会自动调用系统原生外观。
这是最省力也最准确的方式。
控件分类逻辑
Apple UI 控件的六大分类体系
操作类
用户"做动作"的东西
输入类
用户"给数据"的东西
展示类
给用户"看信息"的东西
结构类
"放东西的容器"
导航类
"去哪里"
反馈类
系统"回应你"的东西
使用方式
做设计时
查Apple官方名称，和开发说同一种语言
换组件库时
通过跨体系对照表，快速找到对应关系
建自己的组件库时
以Apple命名为基准，保持一致性
做Web展示时
查HTML近似实现列，直接用原生元素渲染
这份参考基于 Apple Human Interface Guidelines (2024-2025)、SwiftUI框架、UIKit/AppKit框架整理。控件名称以SwiftUI为第一优先级。