这是 Will 重组的 iOS/macOS 深读 —— 比官方 HIG 更细的 iPad/Mac 专项:光标、导航、文案、图表、窗口。给 PM 做 iPad/Mac 应用时的决策依据。
一、Mac vs iPad 本质差异(做跨平台前必读)
| 维度 | iPad(iOS 基因) | Mac |
|---|---|---|
| 设计前提 | 为触摸而生(元素大、可走路操作) | 为键鼠而生(指针精准、信息密度大) |
| 按钮位置 | 屏幕中下部(单手拇指够得着) | 哪儿都行(人体工程学意义不大);别放窗口底部(易被 Dock 遮) |
| 字体 | 标准 17pt | 标准 13pt;iPad app 上 Mac 要把内容缩到 77%(=13÷17),否则字过大不协调;Mac 不支持 Dynamic Type |
| 颜色 | 用高亮色标可操作区、给内容填色 | 中性(多窗口多文件,用色会杂乱);界面服务内容不抢注意力 |
| 手势 | 双指捏合/旋转以触点为中心;下拉刷新有效 | 以光标位置为中心;下拉刷新等手势映射差→用菜单/右键/工具栏替代;可用 hover 显更多信息 |
| 图标 | — | 2024 起靠拢 iOS 统一圆角矩形(2019 还是独特拟物外形增辨识) |
三大交互框架:① 精简标签整合(信息密集型)② 行列列表(结构化数据)③ 文件夹+文档浏览器。信息布局:Mac 窗口大,别直接放大 iOS 布局;合理内容边距防文本行过长;用分屏/主-详细视图最大化密度。
二、iPadOS 26 新窗口系统 + 指针
· 窗口:右下角拖动手柄→变浮动窗口;左上角窗口控件(点击放大、长按展开布局快捷方式);把窗口控件包进工具栏同一行(别留顶部安全区浪费内容空间);每个文档开独立窗口(以前开第二个会挤掉第一个);给每窗口描述性名称(用文档标题,窗口列表才有用)。 · 指针:iPadOS 26 新形状,始终 1:1 直接追踪输入(不再磁吸/回弹);新高亮是"液态玻璃盘",悬浮在控件上方、弯曲折射底层,准确指示即将点击的按钮。 · 菜单栏(iPad 继承 macOS):指针移顶部/手指下滑唤出;每 app 有自己的菜单栏;按使用频率排序+分组+图标+快捷键;别隐藏菜单项(不可用置灰而非隐藏,靠位置记忆);填充"视图"菜单(标签页+显隐侧边栏)。
三、自适应光标 iPadOS Pointer(iPad 独有,Mac 用传统指针)
核心:iPad 整个系统为"指尖大小"设计,所以指针要自适应精度,减少误操作。
▸ 自适应 vs 传统指针
| 传统指针(Mac) | 自适应指针(iPad) | |
|---|---|---|
| 精度 | 像素级(易点错到按钮间/上一行文字/2:15 而非 2:30) | 动态匹配界面精度:圆形默认→对准按钮变按钮形/对准文字行变 I 形/对准 15 分钟间隔 |
| 遮挡 | 绘制在界面上,遮挡控件 | 沿 Z 轴移到图标后面,露出真实颜色 |
| 原理 | — | 双指针(可见指针+不可见"模型指针");抬手自动重新对准控件中心;磁性扫描惯性落点吸到最近目标("像魔法") |
▸ 3 种内容效果(突出交互元素)
| 效果 | 用在哪 | 表现 |
|---|---|---|
| 高亮 Highlight | 无背景小控件(工具栏按钮/标签栏,默认) | 指针移到控件后变浅色背景,选中时内容放大带视差;光效叠加显示指针真实位置 |
| 提升 Lift | 有背景中等元素(App 图标/控制中心模块) | 指针消失在控件后,元素放大+阴影+辐射光,显得浮起 |
| 悬停 Hover | 大对象(变形会表现差) | 指针保留默认形状,对象改外观(缩放/着色/阴影任意组合) |
· 设计自定义指针:用实心形状或粗描边(指针颜色随背景变);自定义大小与默认 19pt 圆视觉平衡;形状传达意图(高亮笔尖形而非标记笔图标);尽量保中心锚点。 · 坑:矩形对象别用高亮(用提升);对象间别留间隙(指针变回圆产生多余动画);带框元素加 ~12pt 内边距、无框 ~24pt;不放大就别加阴影。
四、导航(iPad/iPhone 通用 + 从核心价值反推)
· 扁平 vs 层级:扁平用标签栏(照片/音乐),层级用侧边栏遍历深层内容(邮件)。侧边栏↔标签栏自适应:窄屏/竖屏侧边栏自动变标签栏;别同视图混用;侧边栏只放主导航入口(用户生成内容如播放列表嵌可折叠标题下);侧边栏用轮廓图标、标签栏用实心图标。 · 从核心价值反推信息层级(骑行 App 案例):别把所有功能塞一个标签;退一步问"用户为什么用你的 App"→ 先设计核心内容(路线详情)→ 反推顶级层级(地点);永不强制自动切标签;别建"首页"塞所有功能(破坏层级、冗余混乱)。 · Push vs Modal 两种过渡:Push(从右滑入)= 层级深入,频繁切换内容用它(Messages);Modal(从底部弹出)= 独立任务流(创建事件/多步骤/全屏),有意打断聚焦注意力。Modal 用导航栏标签(首选操作右侧粗体+取消左侧)优于 X 关闭符号(仅最小交互无输入时用 X);限制 modal 叠 modal。
五、UX 文案(这块是全库文案方法论的核心)
▸ PACE 框架(创造自然的对话流):
| 字母 | 含义 | 要点 |
|---|---|---|
| Purpose 目的 | 每屏一个明确目的 | 考虑信息层级(标题+按钮最醒目)、知道该省略什么(温度警告删"为什么/紧急电话")、难决定写啥就回到目的 |
| Anticipation 预期 | 把 App 当对话对象 | 想象一次对话(改闹钟问"仅改下个还是全部周末")、定 VOICE 变 TONE、预期下一步(呼吸 App"现在吸气…") |
| Context 语境 | 跳出 App 想用户在干啥 | 户外散步给大按钮、全景拍摄文字放箭头下;写有用的警告(中断性要有用清晰);有用的空状态(Podcasts"没有保存的节目"+解释) |
| Empathy 同理心 | 为每个人写 | 简单直白语言、响应本地化(词长变化)、无障碍(VoiceOver 描述意图+无性别引用) |
▸ VOICE(表达方式,始终如一)vs TONE(语气,随情境变):每个 App 像一个人有个性(多邻国"quest"+感叹号)。苹果文案 4 原则:清晰/简洁/友好/有帮助。语气调制 4 步:① 定 VOICE 属性 ② 展开 ③ 按情境调 4 属性平衡(完成 3 倍目标→大幅提友好;Wi-Fi 没连→提帮助降简洁)④ 据此表达。
▸ 4 个提升文案质量的技巧(最实用):
- 删填充词:副词形容词("simply/quickly"——车牌例子根本不简单)、感叹词客套话("oops/sorry/please"——快递迟到"我们很抱歉"显不真诚)。
- 避免重复:"我们迟到了"+"配送员无法准时"+"10 分钟"→合并"配送延迟 10 分钟"。
- 以理由(why)开头:"想继续连胜?完成今天的拼字"比反过来更有力("想得到 X,先做 Y")。
- 建用词表:想用的词(alias)vs 别用的(用户名/玩家名),全 App 统一;动词也统一(find)。写完大声读出来就知道哪啰嗦。
· Great Alerts:标题点明问题(含文件名)、内容说原因给操作、选项明确后果(别"是/否"用"取消下载/继续下载");别用警告暴露错误代码、别弥补可预防问题。 · Tips 提示:可执行+指导性+易记(长按发表情);促销/错误/无操作/复杂路径不适合做提示。教用户学会用 App:5 原则(排功能优先级显而易见/视觉提示/熟悉手势/按行为分组/给控制感)——通过实践学习 > 读一堆引导。
六、图表系统 Charts(做数据产品必读)
5 要素:① Marks 标记(柱/线/点——柱图清晰展示销售模式,点图真实数据看不出模式,线图遇关店间隔会误导)② Axes 坐标轴(固定范围如电量 0-100% vs 动态范围如步数;4 条水平网格线、7 天步长)③ Descriptions 描述(标题"总销售量:1,234 个煎饼"直接给结论)④ Interaction 交互(工具提示+大触摸区扩到全高)⑤ Color 颜色(均衡饱和度防一色显更重要,用紫绿而非紫粉防色盲)。
· 何时用图表:变化性/比率/比较性;简单信息用列表别用图表。 · 宏中微三层:宏观(总数/平均)→中观(工作日 vs 周末子集)→微观(最大单值高亮)。 · 静态 vs 交互:静态图小、无网格线标签交互(预览/缩略图,隐喻点击看更多);交互图大、通栏、含轴线标签,逐步引入功能(渐进)。 · 多图差异化:用熟悉图表型(柱/线;散点图需说明);图表间要有明显差异(光改文字描述会被忽略,要改颜色/造型/时间范围)。
七、订阅设计 + 其他模式
▸ 成功订阅 3 原则:Effortless(始终显订阅按钮别当弹窗广告、在用户表现兴趣时呈现、简化步骤——3 步转化 61% vs 9 步仅 7%)/ Transparent(价值主张+号召+多层级+清晰条款+恢复购买)/ Engaging(免费试用/高级功能/内容采样三选一)。
· 模态浮层 Sheet(iOS13 默认):露出背景=内容感知;下滑关闭(单手友好);有关键决策时禁用下滑+给二次确认;留关闭按钮(不是人人懂手势)。 · 安全区:避开圆角/传感器槽/主屏指示器;滚动视图延伸到屏底;底部边缘保护(需两次上滑退出)。 · 选择器:新版支持触摸/笔/键盘/光标多输入+紧凑模式(行内按钮→顶部展开)。
八、动态组件与系统集成(功能与组件)
| 组件 | 要点 |
|---|---|
| App Clips | 卡片(标题/副标题/图像/打开查看播放/应用归属);3 原则简洁/快速/推广完整 App;避免登录/导航/设置/教程;首次后 8h 可通知(超 1 天需明确授权延一周) |
| App Intents | 系统层调用功能(操作按钮/挤压/小组件/Siri);聚焦基础任务(设置/创建/删除);别为同类任务做多意图(用参数);二元状态支持"切换"默认参数;两种打开 App 方式 |
| Interactive Snippets | 顶部覆盖的快捷信息+操作(Spotlight/Siri/快捷指令);大字号即时易读;确认/取消/滑掉才消失 |
| Live Activities / 快捷指令 / Widgets | 组件级用法见 Apple HIG 组件决策手册(63 个组件 · 何时用哪个);动态岛灵感来自生物形态(弹性有机体);快捷指令视觉设计+应用快捷方式见组件手册 |
| 自定义视觉效果(iOS 18 SwiftUI) | 5 类:Scroll Effects(视差)/ Color Treatments(Mesh Gradient 网格渐变)/ View Transitions / Text Transitions(TextRenderer 逐字)/ Metal Shaders(GPU 波纹失真) |
九、iPad UI Kit:iOS 18 → 26 组件视觉规格(Liquid Glass 改版)
这一节补自 iPad UI Kit(官方 Sketch/Figma 视觉规格 kit)—— 它的内容几乎全在图里(每个组件一张参考图 + 18 vs 26 逐组件 before/after)。下面把 iOS 26 / Liquid Glass 把组件视觉改成什么样抽成文字 + 关键实图,供做 iPad 原型时对齐新视觉。
▸ 标签栏 Tab Bar(改动最大):从 iOS 18 的"贴底实心栏"变成 iOS 26 的悬浮胶囊——左侧边栏切换图标 + 中间标签(选中态药丸高亮、激活字变蓝)+ 右搜索;深色玻璃 / 浅色玻璃两版随背景自适应。
图:iPadOS 26 Tab Bar 实样。不再贴底,而是悬浮胶囊;选中项用药丸背景+蓝字;深/浅玻璃随背景自动切。
▸ 工具栏 Toolbar:从"一整条栏"变成每个图标独立的圆形玻璃浮钮,按前导/中央(标题+副标题)/尾端分组;主操作 = 蓝色实心圆。4 变体:Top-iPad(标题副标题居中)/ Top-iPhone(返回箭头+标题+蓝主钮)/ Top-Sheet(X 关闭+标题+蓝主钮)/ Bottom(一排圆玻璃钮)。
图:iOS 26 Toolbar 实样。工具栏项变成一个个独立的圆形玻璃按钮(不再是连续栏),蓝色实心圆=主操作。
▸ 材质 Materials:iOS 26 引入 Liquid Glass 大/中/小三尺寸材质(实样见 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系) §材质层)+ 染色态。
▸ iOS 26 完整组件视觉目录(UI Kit 收录,均已 Liquid Glass 化,精确像素在原档图里):
Action Sheets / Activity Views / Alerts / App Icons / Buttons / Color Pickers / Contextual Menus / Device Bezels / Empty States / Face ID / Keyboards / Lists / Materials / Menus / Notifications / Page Controls / Pickers / Pop-up Buttons / Popovers / Progress Indicators / Segmented Controls / Sheets / Sidebars / Sliders / Status Bars & Menus / Steppers / System / Tab Bars / Text Fields / Toggles / Toolbars / Wallpapers / Widgets / Windows。 18 vs 26 对比:UI Kit 专门有一份逐组件的 iOS 18 → 26 before/after(动作表单/警报/上下文菜单/控制中心/主屏/锁屏/键盘/列表/通知/选择器/弹出框/Sheet/侧边栏/滑块/开关/步进器/标签栏/文本框/工具栏…)。整体方向:实心栏 → 悬浮玻璃元素、直角 → 胶囊/圆角、贴边 → 悬浮。 诚实边界:这 168 张图我只抽了改动最大的 Tab Bar/Toolbar/Materials 三个看实图,其余组件的精确像素/anatomy 仍需在 Obsidian 直接看 UI Kit 原图(
sources/reference/apple-design/.../iOS iPad UI Kit 组件/)。
源自 iOS macOS 信息与控件(35)+ 功能与组件(13)+ iPad UI Kit(3 + 168 视觉规格图),共 51 篇。组件级用法见 Apple HIG 组件决策手册(63 个组件 · 何时用哪个);Liquid Glass 在 iPad 的应用见 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系);文案背后的设计哲学见 Apple HIG 设计原则与心法(12 条核心原则 / 流畅界面 / 意图设计 / 多感官 / ML 体验)。