用途
ryux-responsive 用于指导构建需要发布到不止一种宽度的界面布局。它属于 RYUX 设计智能体系,位于 UI 组交付门禁的 RESPONSIVE 区域(RX-2.0 级别,级别定义在 ryux-core 中)。其核心立场是:响应式设计是行为性的——当空间减少时,按优先级排序、简化、重组的顺序处理,而不是把所有内容挤压进更小的视口。
主要能力
技能按元素类型给出窄屏适配指引:
- 内容:优先内容保持在前,次要内容移到控件之后。
- 导航:折叠为少量顶层目的地,并保持当前位置可见。
- 表格:选择优先列、将行堆叠为带标签的块,或在表格自身容器内滚动并固定关键列。
- 表单:单列布局,键盘类型与输入匹配。
- 操作:主操作处于拇指可及范围,不隐藏在首屏之下。
- 模态框与抽屉:全屏或底部弹出层,关闭操作与主操作可达。
- 文字:保持尺寸,允许换行,仅在可访问完整值的前提下截断。
构建前需对每个区块回答:什么变化、什么保留、什么消失、什么重排、什么变为可滚动、什么变为堆叠,以及哪种交互改变(悬停变为点按,侧边面板变为弹出层)。
使用方式
该技能以规则形式组织,每条规则包含要求级别、做法、禁止做法、原因、不适用情形、权衡与检查方式。规则要点包括:
- RX-RD-01 [必需] [硬性门禁]:检查声明的视口与最小支持宽度,两者均不得出现页面水平滚动。不适用于有文档化最小宽度的仅桌面内部工具。
- RX-RD-02 [必需]:空间缩小时先确定最重要内容,简化剩余内容,再重组(堆叠、折叠、将次要内容移到控件之后),并保持文字尺寸。
- RX-RD-03 [必需]:内容保持在安全区域内,手机上主操作处于拇指可及范围,不得放在刘海或home指示条下方。
- RX-RD-04 [情境性]:存在数据表格或模态框、抽屉、浮层时,为表格选择优先列并堆叠行或容器内滚动固定关键列;手机上浮层以全屏或底部弹出层呈现,关闭与主操作可达。
- RX-RD-06 [偏好] [质量锁]:同一组件在任何出现位置都以相同方式自适应;若某页面确有不同用途需要不同模式,需写明原因。
适用场景
适用于需要同时面向桌面、平板和手机等多种宽度的界面布局开发,尤其涉及数据表格、表单、导航、模态框与底部弹出层等组件的小屏适配。示例:桌面数据表格在平板上改为表格内水平滚动或显示优先列,在手机上改为摘要卡片列表并可打开详情视图。
限制
- 硬性门禁始终适用:不得编造数字、人物、紧迫感、业务规则或术语;不得将占位内容作为最终交付;不得缺失关键状态(详见 ryux-core)。
- 关于参考流程在不同宽度下的证据,需通过 ryux MCP 的 get_flow、search_screens 获取移动端模式;若无 ryux MCP,需说明证据仅来自设计与标准。
- 该技能为设计规则指引,具体实现与测试方式暂未提供。
- 收费、价格、平台支持等信息暂未提供。