制作界面时,用这里认识组件并描述想要的效果,将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗,怎样检查?
- 什么情况下会用到这页的方法?
- 已知道用户要做的动作,需要安排界面时。
- 根据自己的情况,应该怎样选择?
- 先按任务选:切换内容用标签、提交操作用按钮、输入内容用表单;再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错?
- 不要照搬示例标签、条数和业务字段;少量内容不必加分页或搜索,重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用?
- 用自己的长文本和空数据检查布局,再用键盘、触屏测试操作、焦点、错误提示与返回。
MENU
导航菜单
站点主导航下拉。
Navigation Menu · Nav dropdown
选这个组件前,先核对用途
什么情况下适合使用?收纳同一对象的一组操作或次要命令。
什么情况下不宜直接照搬?核心操作不应藏得难找;触屏不能仅依赖右键或悬停。
下面的名称、条数和字段是示例。交给 AI 前换成本项目内容;实际示例仅证明演示交互,不代表业务已接通。
亲手试一下,再决定是否使用
按什么顺序试用这个示例?展开并选择一项;右键菜单可在区域内右键。
试用时应该观察什么?选项与当前任务相关;关键操作要有触屏和键盘入口。
本地练习 · 重新开始会清空示例状态,不会修改项目资料。
查看保留的原始规格
Use a navigation menu with section dropdowns.
使用带分节下拉的导航菜单。
做出的效果不一致,应该检查什么?
只画出了样子 → 把缺失的点击、键盘或状态变化逐项交给 AI;交互已存在但行为不同 → 提供实际步骤、预期和结果,要求只修正差异。先在示例资料上验证,再接入产品。
继续描述组件 →