用途:为数字产品设计定义响应式布局网格系统,使页面在不同断点下保持一致的布局结构。
主要能力:定义网格的组成要素,包括列(移动端通常4列、平板8列、桌面12列)、间距(列与列之间,常见16px、24px或32px)、页边距(移动端16px,桌面24-48px)以及断点(如375、768、1024、1440px)。支持多种网格类型:列网格(等宽列)、模块化网格(列加行形成模块)、基线网格(4px或8px的垂直节奏对齐)和复合网格(重叠网格用于复杂布局)。响应式行为包括流式(列按比例拉伸)、固定(最大宽度容器居中)、自适应(每个断点独立布局)和列递减(小尺寸下减少列数)。常见布局模式有全出血、容器化、非对称(侧栏加主内容)和卡片网格(自动填充响应式卡片)。
使用方式:作为设计规范技能,用于制定网格规格并交付给开发者;资料未提供具体安装命令或调用方式。
适用场景:数字产品界面设计、设计系统建设、跨断点页面布局规划。
限制与最佳实践:应保持间距和页边距一致,内容对齐网格而非随意摆放,在每个断点而非仅极端尺寸下测试,为开发者记录网格规格,并允许为强调而有意打破网格。资料未提供收费、价格或平台支持信息。