从想法到界面的设计基础

一句话判断

不是「设计入门科普」，而是一套完整的「自检清单」——用一个黑胶唱片 app 的 redesign 过程，把信息架构、导航、内容组织、视觉层级四个维度的常见错误和修正方法全走了一遍。

这场 Session 讲了什么

Majo 从 Design Evangelism 团队的视角，用一个虚构的黑胶唱片收藏 app 做 case study，从四个层面展示如何从零打磨一个 app 的设计：

1. Structure（结构）

• 打开 app 的三个核心问题：我在哪里？我能做什么？我能去哪里？
• 信息架构（Information Architecture）的流程：列出所有功能 -> 想象用户场景 -> 删除非本质项 -> 重新分组。
• 如果你不知道什么该保留，什么该砍，你也没法在 app 里传达清楚。

2. Navigation（导航）

• Tab bar 是导航组件，不是操作按钮的位置。「添加唱片」不应该放在 tab bar 里。
• 每个 tab 的标签和图标要能自我解释——用户不需要点进去才知道里面是什么。用 SF Symbols 保证跨平台一致性。
• Toolbar 解决「我在哪里」（标题）和「能做什么」（操作按钮）两个问题。
• 迭代不是失败，是过程。第一版不完美很正常。

3. Content（内容）

• Progressive disclosure（渐进式披露）：不是把所有东西都铺出来，而是先展示关键内容，更多内容通过 tap 展开。
• 内容分组的四种策略：按时间（最近/当季）、按进度（进行中/已完成）、按模式（相关推荐）、按事件。
• 大量图片用 Collection 展示，少量结构化数据用 List。Grid 在只有两项时太浪费空间。
• Apple Design Resources 的 List 模板可以直接用，不用从零设计。

4. Visual Design（视觉设计）

• 视觉层级：squint test（眯眼看）——如果你眯眼只能看到一部分内容，说明层级没做好。
• System Text Styles 创建清晰的层级，支持 Dynamic Type，不用自己定义字号。
• 文字叠在图片上时：加渐变/模糊背景保证可读性，清晰度优先于美观。
• Semantic colors（label、secondarySystemBackground 等）自动适配明暗模式和对比度设置。Accent color 谨慎使用，只在按钮、选中态等有意义的地方。
• 风格一致性：选定色板 + 规则，混合搭配。不需要每张图都精心设计。

值得深挖的点

「三个问题」框架可以作为设计 review 的检查清单：任何一个 screen 打开后，问「我在哪里 / 能做什么 / 能去哪」。如果任何一个问题答不上来，这个 screen 就需要改进。这个框架简单但非常有效，适合在 code review 或 design review 时使用。

Progressive disclosure 的度：Majo 不是说「把东西藏起来」，而是「在正确的时间展示正确的东西」。Groups 和 Records 混在一起是错的，但分成两个区域后依然铺满屏幕也是错的。关键是一开始只展示最有价值的内容，让用户自己选择是否深入。

Semantic colors 不是「无聊」，是「专业」：很多人觉得用系统颜色太「Apple 味」了，想要自己的品牌色。但 Majo 的观点是：动态颜色 + accent color 的组合已经足够表达个性，同时保证了无障碍和跨模式适配。先用好系统能力，再考虑自定义。

代码片段

这里没有代码，但有几个设计决策值得记录：

# 信息架构的自查流程
1. 写下 app 的所有功能/工作流/nice-to-have
2. 想象用户何时何地使用 app，什么真正有用，什么是障碍
3. 删除非本质功能、重命名不清楚的名称、合并自然归属的功能
4. 用结果指导 Tab Bar / Navigation 的结构

# 内容分组策略
- 按时间：最近添加、当季推荐
- 按进度：完整收藏、进行中的系列
- 按模式：相似风格、同类型
- 按事件：关联活动、特别策划

最佳实践

1. Tab Bar 不超过 4 个 tab：每个额外的 tab 都增加用户决策负担。能合并就合并。
2. Tab 用 SF Symbols + 明确标签：不要自己设计图标（除非你是专业设计师），不要用含糊的标签名。
3. 每个 screen 都有 toolbar 标题：即使你觉得「很明显这是什么页面」。标题解决「我在哪里」的问题，不要跳过。
4. 大量图片内容用 Collection，结构化数据用 List：不要用 Grid 展示少量项目，也不要在一个 screen 里混用两种内容类型。
5. 先用 system text styles，再考虑自定义：它们支持 Dynamic Type，自动适配用户的文字大小偏好。如果你自定义字号，记得也要支持无障碍。
6. Squint test 是最简单的视觉层级检查：眯眼看你的 screen，最先注意到的应该是最重要的内容。如果最先看到的是装饰性元素，层级反了。

还有什么值得关注

• Apple Design Resources（Figma/Sketch 模板）可以直接用来搭建原型，不用从空白画布开始。
• 配合观看 “Get to know the new design system” 了解 Liquid Glass 时代的组件更新。
• 如果你同时负责设计和开发，Majo 的迭代方法论特别值得借鉴：每一轮改一个维度（结构 -> 导航 -> 内容 -> 视觉），不要同时改所有东西。
• 这个 session 的方法论对 Android/Web 同样适用——框架是跨平台的，只有具体组件不同。