thumb-first-design

Thumb-First · 设计

移动端设计判断——判断正确的移动端模式是什么以及为什么，而不是如何编码。无论实现使用 CSS、SwiftUI 还是 React Native，这些决策都适用。这是 Thumb-First 套件的设计判断层。

快速开始

规划功能的移动端设计： /thumb-first-design plan 或“为此设计移动端 UX”或“这在移动端应该如何运作” 审查现有的移动端设计： /thumb-first-design audit 或“审查此移动端屏幕”或“这是好的移动端设计吗”

此技能负责确定模式和人体工学；它不会编写实现代码——如需响应式 CSS，请使用 responsive-craft；如需处理移动端网页/PWA 技术缺陷（安全区域、视口、服务工作线程），请使用其配套技能 thumb-first-platform；如需使用 React Native/Expo，请使用原生移动端技能。如需一次性完成综合审查，同时运行此设计判断审查和平台审查并合并为一份报告，请运行 /thumb-first。

---

核心原则

以下是历久弥新的原则——由定义该领域的人士总结而来。无论设备换代或平台如何变化，这些原则都适用。

1. 针对最受限的握持方式进行设计 (Hoober) — 握持方式会随着任务每隔几秒切换一次。常被引用的“49% 的人单手使用”并不意味着可以把控件藏在容易触及的区域。应考虑用户可能采用的最受限握持方式，确保无论如何握持设备，界面都能正常使用。*实践中：*将交互区域——控件、导航和主要操作——放在下方区域；内容可以填满上方，但不要在那里放置交互元素。

2. 拇指热区是成本地图，而非布局网格 (Hurff) — Natural / Stretch / “Ow” 告诉你某个位置的触达成本，而不是规定元素必须放在哪里。高成本区域适合放置不常用或具有破坏性的操作。触达成本会随着屏幕尺寸非线性上升——应针对不同设备类别重新绘制地图。

3. 移动端迫使设计聚焦 (Wroblewski) — 小屏幕是一项优势：它迫使人思考“什么才配占据这个屏幕？”在决定布局前，先决定要删去什么、什么内容最重要。优先级排序就是设计工作。

4. 内容本身就是控件 (Clark) — 优先直接操作内容，而不是依赖包裹内容的界面装饰。但凡没有可见提示的手势，只有专家才会发现——手势的强大功能与易发现性之间存在取舍，这种矛盾永远无法彻底消除。

5. 动效传递信息，而非装饰 (Modern Craft) — 转场承载状态、层级和因果关系。应将动效与布局一同设计，而不是留到最后才润色。元素从何处来、到何处去，本身就是信息。

6. 导航界面目前尚未定型 — iOS 26（Liquid Glass、悬浮标签栏）和 Material 3 Expressive（导航抽屉已弃用）都处于转型阶段。应将平台导航视为仍在变化；明确指出这一点，不要把不断变化的方案当作已定论的规范。

7. 面对设计分歧时，不要默默默认某个方案 — 当移动端设计选择有多个合理答案时（导航模式、底部面板还是模态框、手势还是可见控件），应提供 2-3 个选项及其权衡，让用户选择。参见 references/design-forks.md。

---

设计师视角

此技能通过八个具名视角进行推理，而不是使用扁平化的检查清单。每个视角都代表一位立场鲜明且观点有据可考的从业者。权重会根据具体情境调整——哪些视角最重要，取决于设计内容。

视角	代表人物	在以下设计工作中发挥主导作用……
人体工学现实主义者	Steven Hoober	触达范围、操作位置、握持假设
拇指区域规划师	Scott Hurff	布局成本、大屏权衡
聚焦推动者	Luke Wroblewski	内容优先级、表单
直接操作派	Josh Clark	触控模型、手势与控件、可发现性
导航分类学家	Frank Rausch	导航架构、模态框、抽屉、底部面板
实证怀疑者	Raluca Budiu / NN/g	扫读、覆盖层、检验假设是否为迷思
现代工艺派	Allen / de With / Nelson	动效与手感、原生级工艺、复杂应用的信息密度
平台规范派	Apple HIG / Material 3	当前惯例、系统保留手势

各视角的完整立场、相互间的分歧以及权重表见 references/designer-lenses.md。两种模式开始时都要加载该文件。

---

模式选择

有两种模式。根据 $ARGUMENTS 判断，或询问用户。

判断

• $ARGUMENTS 中包含 "audit"、"review"、"critique"、"evaluate"、"feedback" → 审核
• $ARGUMENTS 中包含 "plan"、"design"、"build"、"new"、"how should" → 规划
• 用户指向现有屏幕／组件／应用并要求评估 → 审核
• 用户要开始开发新的移动功能，或不确定它应该如何运作 → 规划
• 意图不明确 → 询问。

如果可以使用 AskUserQuestion：

• 规划——在编写任何代码之前，为某个功能设计移动端 UX
• 审核——按照最佳实践审查现有的移动端设计

否则，询问："你想（1）规划新功能的移动端设计，还是（2）审核现有的移动端设计？"

如果用户选择了审核，但没有提供待审内容，应先询问要审核什么——截图、实时 URL、代码还是描述——再进行路由。审核工作流可以处理上述任意内容，只需提供其中一种即可。

---

路由

模式	读取工作流	立即加载
规划	workflows/plan.md	references/designer-lenses.md
审核	workflows/audit.md	references/designer-lenses.md

按需加载其他参考资料：

• references/reach-and-ergonomics.md — 操作位置、拇指触达范围、单手使用、大屏
• references/navigation.md — 选择导航模式：标签栏、抽屉、底部面板、模态框
• references/forms-and-input.md — 包含表单字段或数据录入的任何屏幕
• references/touch-gesture-motion.md — 手势、触控目标、过渡效果、触觉反馈、手感
• references/content-and-attention.md — 内容优先级、扫读、快速浏览、覆盖层
• references/design-forks.md — 某个选择存在多个合理答案时
• references/output-format.md — 呈现审核结果（默认使用 HTML 报告；调整 references/report-template.html）

注意事项 — Claude 在移动端设计中的失误

移动端设计失误源于判断，而非代码。请对照此列表检查每条建议。

1. 因为看起来“简洁”就默认采用汉堡菜单 — 隐藏式导航不易被发现。标签栏能清晰展示各个目的地，效果始终更好。汉堡菜单只是不得已时的选择，适用于确实层级很深的导航，不应作为默认方案。

2. 把主要操作放在屏幕顶部 — 这是桌面端的习惯。在现代手机上，屏幕顶部是拇指最难触及的区域。主要且频繁的操作应放在下方易触及的区域。

3. 按平均握持方式设计 — 根本不存在所谓的平均握持方式。只考虑单手舒适操作，会给约 51% 随时以掌托或双手操作的人带来不便。设计时应兼顾受限最多的握持方式。

4. 把底部工作表当作导航目的地 — 工作表适用于短暂、范围明确的任务，且背景内容仍然相关。它们不是页面。切勿层叠工作表来构建操作流程。

5. 添加没有可见提示的手势 — 看不见的滑动操作只适合专家使用。每种手势都需要有广为人知的惯例作为依据，或提供可见提示，最好还要有非手势的替代操作。

6. 使用多列表单和占位符代替标签 — 移动端表单始终应为单列。获得焦点后会消失的占位符，会在用户最需要标签时将其移除。标签应始终可见。

7. 把动效当作最后的润色环节 — 布局完成后再添加动效，就无法说明元素从何处出现。应将转场与布局一同设计——它们传达状态和因果关系。

8. 把桌面端的信息密度照搬到移动端 — 将桌面屏幕上的内容塞进手机，并不等于移动端设计。移动端要求做出取舍：哪些内容优先、哪些延后、哪些删去。

9. 针对未明确的平台进行“移动端”设计 — 被要求“针对移动端”设计时，Claude 会默认采用 iOS 模式（返回滑动、工作表停靠点、顶部栏操作），而这些模式并不适用于 Android。未说明平台时，应明确说明假设并指出 iOS / Android 之间的差异，同时说明 iOS 26 / Material 3 仍处于过渡阶段，不要将任一方视为已定型。

10. 只针对展示效果最好的屏幕进行优化 — 在营销图片中看起来很棒的设计，可能不适合单手操作、键盘打开时使用、受到打断时使用，或供回访用户使用。设计时应考虑真实、分心且只能匆匆浏览的场景。

有关每条注意事项背后的原因及识别问题的观察角度，请参阅 references/designer-lenses.md 和主题参考资料。

---

参考索引

文件	内容	加载时机
designer-lenses.md	8 个视角——立场、分歧、上下文感知权重表	两种模式的开始阶段
reach-and-ergonomics.md	握持数据、拇指触达区域、操作放置、大屏幕触达	放置操作或评估触达范围时
navigation.md	Rausch 的导航分类、标签页／抽屉／底部面板／模态框的决策、iOS 26 + Material 3 状态	选择或审查导航时
forms-and-input.md	Wroblewski 的表单原则、输入类型、字段精简、键盘	任何数据输入界面
touch-gesture-motion.md	触控目标、手势可发现性、作为沟通方式的动效、触觉反馈	手势、转场或体验感受相关内容
content-and-attention.md	优先级、浏览模式、一目了然性、覆盖层泛滥	内容布局和层级
design-forks.md	存在歧义的移动端设计决策及其选项与权衡	某项选择没有唯一正确答案时
output-format.md	审计如何呈现结果——HTML 报告（默认）+ 终端备用方案；颜色／图表／章节规则	呈现审计结果（第 5 步）
report-template.html	标准的自包含 HTML 审计报告（示例）——基于此调整，不要从头重做	编写 HTML 报告时

工作流索引

工作流	用途
plan.md	探索 → 排定优先级 → 选择模式 → 移动端设计简报
audit.md	依据各视角评估 → 提出设计分岔 → 排定优先级的发现