四个"非手机/电脑"平台合一。共性:每个都被设备特性逼出独特取舍——手腕(秒级)、客厅(远距离)、车内(安全)、游戏(沉浸)。
一、watchOS(手腕上的秒级交互)
4 条核心原则:
① 及时且相关——"此刻用户最需要看什么?"(天气 App 打开即显当地当天)② 短暂高效——"只有 10 秒注意力,先看什么?"(iPhone 新闻多标签,watch 只显 5 条头条)③ 数码表冠是核心——交互与表冠绑定塑造导航 ④ 一致可预测的导航。
▸ 3 种导航(对应 SwiftUI 容器):
| 导航 | 容器 | 用途 |
|---|---|---|
| 分割视图 | NavigationSplitView | 信息对比+快速筛选(天气/股票,默认显详情) |
| 标签视图 | TabView | 多功能模块并列(健身/音乐,垂直分页+模糊过渡) |
| 分层导航 | NavigationStack | 按层级深入(设置/提醒,大标题→子页返回按钮) |
· 还有源列表 Source List(左上角切换同类实体,如世界时钟城市,免标题/关闭按钮)+垂直分页(单页限一屏高)。 · Series 7 三原则:放大组件用足空间、字体颜色建层级、清晰导航给位置感。大标题滚动时缩进状态栏;按钮贴合屏幕曲率;滚动视图圆角矩形按钮、固定视图底部固定按钮。 · 布局:状态栏适应圆角,时钟每屏显示;图形延伸到边、文字左对齐;滚动清晰区确保按钮完整显示;最佳=单屏免滚动。 · 全屏材质 4 级(超薄/薄/普通/厚)+全屏渐变(健身三环色)+活力填充+4 级文本(主/次/三/四)+导航栏动态模糊。颜色传达含义(世界时钟早黄晚蓝、计时器黑→橙)。 · Smart Stack 智能堆栈:滚动看多组件;5 关键时刻提优先级(时间临近/到达位置/检测耳机/醒睡/开始结束锻炼);布局(三行文本/分组色编码/条形图/圆形图/大文本/趋势图)。 · 即时控件:建议小组件(降水前 15 分钟出现)/互动小组件(开灯)/Live Activities(同步 iPhone,单一控件,只显状态变化)。 · AOD 始终显示:熄屏低亮度显关键信息,自动深色模式降亮度,敏感信息隐藏(只显发件人名)。 · 次要功能控件:排序过滤(模态弹窗)/滑动操作(删城市)/更多按钮(85% 白圆+黑光,暗亮背景都可见)/工具栏按钮(隐导航栏下,撰写按钮)/破坏性操作要确认。 · 全键盘(Series 7):无边框(鼓励滑动输入)、删除键移到文本框。
二、tvOS(8 英尺外的客厅)
设计理念:内容优先。 10 原则:更好浏览/简化交互/创建层次/避免过度刺激/用箭头/多样化 UI/移除障碍/速度节奏/显元数据/用分页。
· 消除进入障碍:Top Shelf 沉浸式顶级推荐;预告片开始无声播放(用户选择开音频);内容占满屏减交互步骤。 · 简化交互:减遥控器点击滑动降认知负担;借鉴熟悉交互。 · 响应迅速+避免过度视觉刺激(类比"很多大声音听不清"→视觉同理,简洁聚焦核心)。 · 多样化展示:打破网格布局(不同形状纵横比);插视觉休息点减疲劳。 · 元数据次要但重要:长按/点击调用(标题/导演);分页点+箭头给位置感方向感;按内容数量本地化+复数处理。 · Top Shelf:5-10 项(过多增噪音);全屏图 1920×1080;预览视频 2-5 分钟(用户操作才播音频);上滑全屏自动隐 UI。
三、CarPlay(下一代设计系统,安全第一)
· 模块化布局系统:每个仪表是独立模块组件,可调大小适配硬件;组合不同仪表创建多种布局(冒险越野风景 + 技术线性仪表);适配各种屏幕形状(线性仪表适合宽窄驾驶屏)。 · 深度品牌定制:融合车辆品牌 + Apple 品牌;SF 可变字体(重量/宽度/角柔和度连续调);仪表盘可定义(从传统模拟指针到现代,圆弧/刻度/颜色渐变全可定制);适应任何驱动系统(燃油/电/混动的速度计油量计)。 · 动态内容区域:无论布局始终保留空间显地图/正在播放/车辆信息;方向盘控制翻阅;也是通知弹窗默认位置;可全屏仪表叠加沉浸体验。 · 视图区域 + 安全区:定义 CarPlay 绘制 UI 的边界;非矩形屏用最小矩形包围+安全区最大矩形;系统旁有小组件时自动调整间距;状态栏始终显示(驾驶侧垂直或底部水平);外观随一天时间/车况/用户设置自动调整(地图可单独设外观保导航一致)。
四、游戏设计(10 大原则)
▸ 核心循环 Core Loop:行动 Action → 奖励 Reward → 扩展 Expansion(RPG:战斗→宝藏经验→升级;平台:跑跳→过关→解锁)。配互动/扩展/进程机制。设计:聚焦受众、易理解、阶段顺畅衔接、每次迭代有意义、质疑假设、不局限传统(Threes 创新合并机制)。
| 原则 | 要点 |
|---|---|
| 成为好老师 Be a Good Teacher | 通过游戏教学(Cut the Rope 第一关直接操作)、展示核心机制、逐步引入概念、情境化提示、持续帮助 |
| 减少摩擦 Remove Friction | 减加载时间(分段/延迟/异步加载、移出主线程)、后台更新别阻塞、简化注册(跳过/Vendor ID 自动账户/推迟到必要时)、允许跳过教程、别强迫早期决策、延迟评分请求 |
| 调优核心循环 | 见上 |
| 为触控设计 Design for Touch | 别移植虚拟按键/D-Pad;Touch→See→Hear→Feel 感知循环(直接互动+即时视听反馈);纪念碑谷/Threes/无尽之剑/割绳子案例 |
| 促进参与 Foster Engagement | 激励重试("再试一次/看接下来/看结局")、多层进展系统、免费+付费都有价值、新鲜内容(剧情/关卡/季节性)、提前规划更新;看留存热力图 |
| 后台传输 | 初始包含前 15 分钟内容,其余 NSURLSession 后台下载;处理磁盘/提前到达边界 |
| 优化图形性能 | 减绘图调用(批处理)、每次调用处理更多三角形;SpriteKit/SceneKit/Metal;GPU 帧调试器 |
| 介绍视频 | App Store 第一印象;≤30 秒展示真实玩法非广告;iPhone/iPad 分别做 |
| 本地化 | 优先 EFIGS(英法意德西)+ 日韩简繁中;翻译资产+UI+文化适应 |
| 瞄准前沿技术 / Go to Eleven | 用最新硬件软件;追求卓越超越常规 |
· 游戏输入:虚拟摇杆替物理摇杆+隐藏未用控件;直接触控控相机;拇指周围放高频控件、顶部放不常用;动态符号+按下状态+视听触反馈;避开安全区。 · 自适应布局:别整体等比缩小 UI(位置不准),拆成独立部分各自锚定到特定位置;考虑安全区避圆角/摄像头/灵动岛遮挡;多机型测试。 · Tips:首屏与游戏风格一致;主操作按钮显著;点击区 ≥44×44pt;逐步披露教程(经济系统留到后面);支持动态文字/左右手/色盲模式。
▸ Apple Games 应用 + Game Center(吸引/留住玩家)
主/副类别设为"游戏"→ 获专属页面(图标/名字/副标题,系统自动配背景色,显年龄分级+子类别小图标+手柄图标)。Game Center 4 功能: · 成就 Achievements:记录进展、鼓励探索、分享好友 · 排行榜 Leaderboards:社交比较+刷新高分,定期刷新显重置时间 · 挑战 Challenges:邀友比分、实时看成绩、限时(创紧迫感)、可重赛 · 活动 Activities:深度链接把玩家带到游戏内特定位置(排行榜/挑战/解锁),适合发现多人玩法,组队码可跨平台邀请 · 应用内活动 In-App Events:限时更新/节日主题/促销(制造"错过就没了"),首页+资料库+搜索结果显活动卡;提前 2 周预告("即将开始"可设提醒);深度链接加参数追踪来源(
event=lobsterbash)拉回流失玩家。
源自 WatchOS 手表(13)+ TV OS 电视(1)+ CarPlay 车载(3)+ Game 游戏(11),共 28 篇。组件级用法(表盘/复杂功能/Top Shelf 见组件手册)Apple HIG 组件决策手册(63 个组件 · 何时用哪个);游戏跨平台设计入门见 Apple 设计规范总览 + 全库反查地图(HIG 导航核心) §Getting Started。