按钮与操作类控件
用户"做动作"的东西——点击、切换、长按、拖拽
Button
Button · UIButton · NSButton · <button>
用户点击后触发一个动作。
最基础、最高频的交互控件。
设计要点
- • iOS按钮默认无边框，靠颜色和位置暗示
- • macOS按钮通常有边框和背景
- • 破坏性操作必须用红色，需二次确认
- • CTA按钮一个页面建议只有一个
Live Demo
ButtonStyle 变体
| 样式 | 修饰符 | 场景 |
|---|---|---|
| Default | .automatic | 通用 |
| Bordered | .bordered | 常规操作 |
| Bordered Prominent | .borderedProminent | 主要操作 CTA |
| Borderless | .borderless | 次要操作 |
Toggle
Toggle · UISwitch · NSSwitch · checkbox
在两个互斥状态之间切换（开/关）。
操作立即生效，不需要额外确认。
设计要点
- • Toggle即时生效，不需要"保存"
- • 需要确认的操作用 Button + ConfirmationDialog
- • iOS上通常放在List/Form行尾
- • 不要用Toggle做"选择选项"——那是Picker
Live Demo — iOS Style
Wi-Fi
已连接到 "Home Network"
蓝牙
未连接设备
飞行模式
Live Demo — macOS Style
平台差异
iOS · 椭圆滑块开关 · 绿色表示开启
macOS · 方形勾选框 · 蓝色勾选标记
Link
Link · 无UIKit对应 · <a>
打开一个URL——可以是网页、其他App、系统设置等。
Live Demo
访问 ningshen.top 获取更多内容
点击后在新标签页打开URL
设计要点
- • 蓝色文字（#007AFF）是标准链接颜色
- • iOS上通常不显示下划线，靠颜色暗示
- • 语义上表示"去那里"，而非"做这件事"
NavigationLink
NavigationLink · pushViewController · <a> + arrow
在NavigationStack中推入新页面。
App内部页面跳转，而非打开外部URL。
视觉特征
- • List中自动显示 > 箭头指示器
- • 点击后页面从右侧滑入
- • 当前页面向左滑出
Live Demo — iOS List Style
Navigation Bar
个人资料
编辑你的信息
通知设置
管理推送通知
隐私与安全
密码、定位服务
与 Link 的区别
NavigationLink · App内部页面跳转
Link · 打开外部URL（网页、其他App）
Menu
Menu · UIMenu · NSMenu · <select>
点击后展开一组操作选项。
适用于不需要常驻显示的操作集合。
菜单项类型
- • 普通项（文字 + 可选图标）
- • 破坏性项（红色文字）
- • 禁用项（灰色不可点击）
- • 分割线（Divider）
- • 内联Picker（带✓标记）
Live Demo
macOS 菜单栏层级
系统菜单栏
├── 应用菜单
├── About
├── Preferences
└── Quit
├── File 文件
├── Edit 编辑
├── View 显示
├── Window 窗口
└── Help 帮助
Context Menu
contextMenu · UIContextMenu · Right Click
长按或右键时弹出的操作菜单。
为特定内容提供快捷操作。
设计要点
- • 长按触发（iOS）或右键触发
- • 提供与当前内容相关的操作
- • iOS可配合预览功能
Live Demo — 右键点击 / 长按
Document.pdf
右键点击或长按此区域
与 Menu 的区别
Context Menu · 依附于内容元素
Menu · 由专用按钮触发
Segmented Control
Picker(.segmented) · UISegmentedControl · radio
在2-5个互斥选项之间切换。
所有选项同时可见，切换即时生效。
设计要点
- • 最多5个分段——更多就用Picker
- • 每个分段标签要短（1-2个词）
- • 不要用来做导航——它是筛选/视图切换
- • Toggle是二选一，Segmented是多选一
Live Demo
Pull-Down Button
Menu · UIButton + UIMenu · NSPopUpButton
点击按钮显示操作列表。
按钮标签固定，不显示当前选中值。
Live Demo
Gesture
手势不是可视控件，但它们是操作体系的核心
Apple 标准手势
| 手势 | SwiftUI | 触发方式 | 典型用途 |
|---|---|---|---|
| Tap | TapGesture | 轻点 | 选中、触发操作 |
| Long Press | LongPressGesture | 长按（>0.5s） | 弹出Context Menu |
| Drag | DragGesture | 按住拖动 | 移动元素、滑动操作 |
| Swipe | SwipeGesture | 快速滑动 | 返回上一页、删除行 |
| Pinch | MagnifyGesture | 双指捏合 | 缩放 |
| Rotation | RotateGesture | 双指旋转 | 旋转元素 |
| Hover | .onHover | 💻 鼠标悬停 | 显示工具提示、高亮 |
系统级手势（不可覆盖）
📱 iPhone
- • 底部上滑 → 回到主屏幕
- • 左边缘右滑 → 返回上一页
- • 三指捏合/张开 → 复制/粘贴
💻 macOS 触控板
- • 双指从右向左滑 → 通知中心
- • 三指向上滑 → Mission Control
- • 双指点击 → 右键菜单
SwipeActions
swipeActions · UISwipeActions · JS Sim
在List行上滑动露出操作按钮。
标准布局
- • ← 左滑：删除(红)、归档(紫)、更多(灰)
- • → 右滑：标为已读(蓝)、置顶(橙)
- • Full Swipe：滑到底自动触发第一操作
Live Demo — 向左滑动
滑动这行
Swipe left to reveal actions
支持触屏滑动
Drag & Drop
draggable · UIDragInteraction · HTML5 API
拖动一个元素到另一个位置。
支持App内部及跨App操作。
Live Demo
Drop here
ControlGroup
控件组
组合相关的控件
ColorWell
颜色选择器
Help Button
macOS特有
macOS Help Button
点击后显示与当前焦点控件相关的帮助说明。
常用于设置面板、偏好设置等界面。
跨体系命名对照表
按钮与操作类控件
| Apple Official | Ant Design | Element UI | Material Design | Bootstrap |
|---|---|---|---|---|
| Button | Button | el-button | Button / FAB | btn |
| Toggle (Switch) | Switch | el-switch | Switch | form-switch |
| Segmented Control | Segmented | — | SegmentedButton | btn-group |
| Menu | Dropdown | el-dropdown | Menu | dropdown |
| Context Menu | — | el-context-menu | Menu (long-press) | — |
| Link | — | el-link | TextButton | link |
| ControlGroup | Space.Compact | el-button-group | ButtonGroup | btn-group |