SuperAPI AI 工具集

spacing-system

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

Spacing System 是一个面向界面设计的系统化间距技能,目标是让布局获得一致性与节奏感。它的核心思路是先选定一个基础单位,通常为 4px 或 8px,然后在此基础上构建一套间距尺度。资料中给出的示例尺度为:2xs 为 2px,xs 为 4px,sm 为 8px,md 为 16px,lg 为 24px,xl 为 32px,2xl 为 48px,3xl 为 64px。

在间距类型上,该技能将间距划分为若干用途:Inset 指容器内部的内边距,可以是四边相等,也可以采用压缩或拉伸的变体;Stack 指纵向堆叠元素之间的垂直间距;Inline 指行内元素之间的水平间距;Grid gap 指网格或弹性布局项目之间的间隙。

应用规则方面,资料提出:相关项目之间使用较小间距,例如 sm 或 md;彼此独立的区块之间使用较大间距,例如 lg 或 xl;页面边距在每个断点上保持一致;组件内部间距则按组件自身定义。

该技能还引入密度模式的概念:紧凑模式将间距整体减少一档,适合数据密集的视图;舒适模式为默认间距;宽松模式将间距整体增加一档,适合以阅读为主的界面。

最佳实践包括:始终使用既定尺度,不要使用任意数值;保持组件内部间距一致;不相关的组之间使用更大的间隙;记录间距的意图而不仅仅是数值;并在不同视口尺寸下测试间距表现。

该技能适用于需要统一内边距和外边距的设计系统建设、组件库规范制定以及前端实现中的间距标准化场景。关于具体的安装命令、调用方式、支持的平台或工具链、是否收费以及实际使用效果,资料中暂未提供。