MODULE 10 / LESSON 01

iOS 与 iPadOS:熟悉感与内容优先

理解导航层级、系统组件、动态文字与多窗口。

37 / 60 课适配不同平台

先理解这个概念

iOS 强调符合平台习惯的导航与触摸交互;iPadOS 还要考虑多列、键盘、指针与窗口变化。SwiftUI 和 UIKit 是实现框架,HIG 是体验指导。共享数据与品牌并不意味着每个平台必须使用相同布局。

平台熟悉感来自导航、反馈和系统整合,不只是圆角与模糊材质。用户对返回、分享、文本编辑和窗口行为已有预期。优先使用系统提供的结构与控件,可以继承许多行为,但仍需要决定信息架构、状态和内容顺序;使用原生组件不等于设计自动完成。

用程序员的语言说

共享业务层,分别实现适合宿主平台的交互适配层。

记住这三个原则

  1. 01

    优先使用系统导航、文本与控件能力。

  2. 02

    考虑安全区域、动态文字与系统返回手势。

  3. 03

    平板按可用窗口空间切换列表与详情结构。

实际设计时,分三步做

  1. STEP 01

    按任务选择层级导航、并列栏目或临时任务呈现。区分“去下一级”和“开启一个可取消的独立任务”。

  2. STEP 02

    用系统文字角色与可伸缩布局处理字体变化,给安全区域和键盘留出空间,不依赖固定设备截图坐标。

  3. STEP 03

    在 iPad 上重新评估列表与详情能否并排,保留选中对象和草稿,并检查键盘、指针与多窗口使用。

一个容易理解的例子

BEFORE / 常见问题

把 iPhone 单列表等比例放大到 iPad,中间出现巨大的空白。

AFTER / 可以这样改

宽窗口显示列表与详情,窄窗口回到层级导航,保留当前选择。

空间增加后可以减少来回跳转,而不是单纯放大元素。

展开看:从场景到设计决定

笔记应用在手机中从笔记列表进入正文,返回后恢复位置;新建笔记是独立编辑任务,应明确保存与取消。iPad 宽窗口可同时看到列表和正文,但窄窗口仍需完整导航。若用户通过系统分享导入内容,导入结果应进入同一笔记模型,而不是生成只有分享入口能访问的孤立页面。

适用边界与取舍

平台视觉会随系统版本变化,不应手工复制某一版截图的全部材质参数。稳定的内容结构与系统语义比模仿玻璃效果更能保持熟悉感。

YOUR TURN

把这个原则用一次

先做一个小判断

为笔记应用设计 iPhone 与 iPad 的导航差异。

再完成一份设计练习

为阅读应用设计手机与平板两种课程导航,说明正在阅读章节怎样延续。

容易踩的坑

不要为了模仿系统材质而在所有内容卡片上叠加透明效果。平台样式以当前 HIG 为准。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3Android · Layout basics