Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
MOBILE
顶部导航栏
移动端顶栏。
Navigation Bar · Mobile nav bar
选这个组件前，先核对用途
什么情况下适合使用？主要面向触屏、单手和小屏操作。
什么情况下不宜直接照搬？桌面悬停和密集小按钮不能直接照搬；核对键盘弹起与系统返回。
下面的名称、条数和字段是示例。交给 AI 前换成本项目内容；实际示例仅证明演示交互，不代表业务已接通。
观察外观与信息层次
按什么顺序试用这个示例？在触屏上试对应手势；也可以用示例按钮检查结果。
试用时应该观察什么？手势不能是唯一入口；安全区域要在目标设备实测。
这是外观示意，没有连接数据服务。
查看保留的原始规格
Use a mobile navigation bar with back title and action.
使用带返回、标题和操作的移动端顶栏。
做出的效果不一致，应该检查什么？
只画出了样子 → 把缺失的点击、键盘或状态变化逐项交给 AI；交互已存在但行为不同 → 提供实际步骤、预期和结果，要求只修正差异。先在示例资料上验证，再接入产品。
继续描述组件 →