LESSON 17 / 575 分钟
原生设计、动画与可访问性
原生体验更多来自平台习惯与系统行为，而不是把网页套进手机外壳。
用你的前端经验理解
Design tokens 对应语义颜色与字体；CSS transition 可类比状态驱动动画，但系统控件能额外提供可访问性与平台行为。
01 / 理解问题
为什么需要它
原生感来自对系统习惯的尊重：清楚的导航、熟悉的控件、可理解的反馈，以及适应用户设置的内容。使用系统字体与语义颜色能减少暗色模式和动态字体适配成本，但仅选了系统组件并不自动保证可访问性，还要考虑标签、顺序、操作区域和信息表达。
它是怎样工作的
动画应解释状态变化，如记录被移除或卡片展开，而不是延迟所有操作。用户开启减少动态效果时，应保留清晰结果而减少位移。VoiceOver 读的是可访问性语义，不是你眼中的像素；只有心形图标的按钮需要说明其操作和当前状态，红色也不能单独承担错误含义。
02 / 掌握要点
把关键概念连起来
1
设计
参考 Human Interface Guidelines，优先使用系统导航、控件、SF Symbols 和语义颜色，适配明暗外观。文字通过 String Catalogs 等本地化资源管理，考虑翻译后长度、复数和从右到左的布局。
2
动画
withAnimation 让状态变化产生过渡；transition 描述视图插入/移除。尊重减少动态效果设置。
3
可访问性
检查 VoiceOver、Dynamic Type、键盘焦点、对比度；不要只靠颜色传达信息，也别固定文字容器高度。
03 / 案例推演
设计一个可访问的收藏按钮
- 视觉上显示心形状态，同时为辅助技术提供“收藏文章”或“取消收藏”的操作名称。
- 点击后更新状态并保持可操作，不用长动画阻挡下一次交互；必要时以文字提示成功或失败。
- 用长标题、大字号、暗色和 VoiceOver 检查完整文章行，避免辅助技术逐一读出无意义装饰元素。
这里需要你亲自判断
一个“看起来很苹果”的截图，不能证明界面在大字体、键盘或辅助功能下可用。
04 / 动手验证
做一个小练习
给一个仅图标按钮补充语义标签，然后用 VoiceOver 和键盘验证。
- 列出一个图标按钮的可见信息与屏幕阅读器应读出的信息。
- 去掉颜色之后，检查未读、错误和选中状态是否仍能区分。
展开参考思路与验收标准
用户应该能知道控件是什么、当前状态是什么、激活后会发生什么。动画与触觉反馈是辅助信息，不能成为唯一的成功凭据。
05 / 检查理解
仅靠红绿区分成功失败，最需要补充什么？
答对理解题后即可标记完成