用途:用于设计、实现或评审响应式客户端布局,重点处理窄屏下的空间分配、文本截断、标题换行、纯图标控件、移动端悬停与提示、移动键盘等界面问题。
主要能力与规则:
- 最小视口:以 390 CSS px 为主要验收下限,不得出现非预期重叠、裁切、整页横向滚动或主要操作不可达;低于 390px 可放宽布局要求。
- 决策顺序:先调整空间分配或将元素换行,再考虑文本截断、纯图标控件或把图标移入“更多”菜单。主要操作与主要状态不得省略。不得通过全局裁切、统一缩小字号或缩小点击目标来隐藏冲突;仅在产品设计明确要求时缩小字号。
- 文本截断:被截断内容必须能在次级页面或菜单中完整查看,例如输入框下方的会话统计;截断不得丢失错误等关键信息。标签导航、可见选择器、按钮、标签等优先单行截断;无法在别处查看的重要信息必须完整显示。
- 标题:页面标题优先完整显示,必要时把操作区移到另一行,例如 Plugins 页面的标题换行行为。卡片标题优先自然换行;若限制行数,必须仍可查看完整标题。
- 纯图标控件:需同时满足图标含义清晰或操作对用户熟悉,以及悬停时显示提示(必要时补充)。不要将“更多账户信息”降为图标,因为它会跳转到独立页面;输入框中的模型选择器可降为图标,因为用户经常看到且可打开菜单切换模型;自动化任务中的关联会话是另一例。
- 移动端悬停:仅在支持悬停的设备上启用鼠标悬停效果,用 @media (hover: hover) 判断,而非视口宽度。手机上点击不得残留仅为悬停准备的背景、高亮或操作按钮可见性。保留正常选中、启用、按下状态及键盘焦点指示。宽度变化时尽量保留焦点,除非被聚焦元素因此从页面消失。
- 移动端提示:移动端不显示仅提供操作名称或键盘快捷键等辅助信息的提示,例如复制按钮的“Copy”提示可省略,点击仍直接执行原操作。提供补充说明的提示必须支持移动端点击显示,例如 Plugins 页面描述旁的信息提示。
- 移动键盘:移动端不得自动唤起输入键盘,除非明确有此意图。
限制:资料未提供具体实现代码、安装命令、平台支持范围或收费信息。