Astryx 控制节奏设计规范混合控件对齐、尺寸密度与目标热区协同的实战指南【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx控制节奏Control Rhythm是 Astryx 设计体系中负责混合控件如何在同一行里看起来像被有意编排过的设计意图记录。本指南以 docs/design/control-rhythm.md 为核心骨架结合仓库内的 组件尺寸级联架构、SizeContext 实现、InputGroup 源码 与输入字段、按钮家族契约深入讲解固定高度控件与内容自适应控件的对齐规则、尺寸与密度协同设计、以及视觉紧凑但目标热区充足的实现原理。读完本文你将能判断一行混合控件是否符合 Astryx 的节奏要求并理解其底层尺寸解析与主题令牌机制。一、控制节奏解决什么问题用户意图与文档边界在真实界面中工具栏、筛选区、表单行经常同时出现固定高度的输入框、按钮、图标按钮与内容自适应的选择控件。如果它们各自沿用不同的尺寸体系视觉上就会像是从别的组件库拼凑出来的。Astryx 将这种感知问题收敛为两条用户意图混合控件应当看起来是被有意组合的而不是来自无关尺寸体系的部件堆叠视觉紧凑不应让交互变得不合理地难以命中。值得注意的是该规范在文件末尾明确划定了自己的内容边界Content Boundary本文件只定义感知节奏与目标意图不定义具体尺寸数值、密度 prop、内边距令牌、命中区域机制或审计阈值。这些机制分别由 组件尺寸级联架构、主题令牌架构 与组件/家族契约承载。这也解释了为什么下面会同时看到设计意图MUST 级措辞与实现机制源码两层内容。二、设计原则四条 MUST 级规则控制节奏以四条设计原则DR1–DR4锚定所有后续决策DR1 — 混合控件对齐。同一行中同时出现的固定高度控件与内容自适应控件必须共享一个有意的基线baseline与表观高度apparent height。DR2 — 尺寸与密度协同调节。作者必须把外部尺寸与内部内边距当作同一个视觉节奏来评估而不是两个互不相关的独立设置。DR3 — 内容有呼吸空间。文本与图标必须保留足够的内部空间保持可读并视觉居中。DR4 — 视觉尺寸与目标尺寸服务不同需求。控件可以看起来紧凑同时保留与其输入场景相称的可操作目标区域target area。DR1 与 DR4 是整个规范的两个支点DR1 决定行的观感DR4 决定单个控件的可用性。它们在源码层面对应两条独立的机制——尺寸级联负责外观高度与命中区域/审计契约负责可操作性二者互不取代。三、解剖与层次四个角色及其关系规范用一张解剖表定义了控制节奏中四个稳定角色注意命名的是视觉/交互角色而非 DOM 结构角色目的必需关系fixed control固定控件提供可预测的轮廓在所选尺寸下与同行控件对齐content-sized control内容自适应控件容纳可变文本或多行内容依据周围节奏调节密度content lane内容通道容纳文本与图标保持居中远离边缘拥挤target area目标区域接收交互可以超出可见轮廓而不破坏布局内容通道与目标区域是刻意拆分的两个概念前者是视觉职责后者是交互职责二者允许分离。这与输入字段家族契约中 FR2 渲染的端控件拥有不重叠的空间 一脉相承——文本、caret 与选中内容不得绘制或接收指针事件于清除按钮、Spinner、状态控件之下。四、状态表示行高与对齐的稳定性规范要求rest、focus、loading、value、status 等状态必须保持既定的行高与对齐除非组件契约明确定义了展开expansion。这一条在输入字段家族契约中落地为 FR1 不变式在相同包含布局中成员不得仅仅因为占位内容变为值、或出现 busy/status/clear 控件就改变其外层可用内联尺寸。值得注意的是家族契约将独立运行的 Selector 记录为 DEC-1 例外——它允许跟随所显示内容改变尺寸除此之外所有成员都必须保持内联尺寸稳定。同时Typeahead 与 Tokenizer 的当前实现缝隙如选中 Token 后输入框从布局中移除导致父级塌缩也被如实记录为待修差距而非既成事实。五、响应式与输入行为约束下的节奏DR5 — 行在约束下保持连贯。控件可以换行或堆叠但每一行结果都必须保持有意的对齐。DR6 — 输入上下文决定目标。紧凑指针布局可以与触屏导向布局在视觉上不同但必须保持相同的控件身份。DR6 与规范开放问题 OQ1直接相关源材料描述了一个宽裕的触屏目标但审计失败阈值却小得多——设计目标与机制下限需要分别定义。这正是 DR4 的延伸视觉紧凑与操作可用是两条独立的轴不能因视觉紧凑而压缩触控目标。六、无障碍意图紧凑不得牺牲可用性紧凑处理不得损害可读性、焦点可见性或可操作性。目标尺寸机制与最小阈值保持在组件、无障碍与审计契约中设计规范本身不复制这些数值。这符合设计规范的定位——docs/design/README.md 明确说明设计记录不拥有实现机制、公共 API 语法与审计结果而是链接到其规范所有者。七、源码纵深Astryx 如何实现混合控件对齐7.1 标准尺寸轴sm | md | lg与尺寸级联DR1 的共享表观高度在实现层由一个统一尺寸轴承载。组件尺寸级联架构定义了三种角色参与消费方接受标准sm | md | lg元素尺寸轴并通过共享尺寸上下文解析提供方所有者为文档列出的合格后代建立默认尺寸组件默认值在无显式与无继承值时作为兜底。一个消费方按以下优先级解析唯一有效尺寸显式组件 prop 最近的活跃提供方值 该组件文档化的默认值。这在 SizeContext.ts 中即一行代码const inherited use(SizeContext); return sizeProp ?? (inherited as T | null) ?? defaultSize;7.2 主题令牌三个档位的物理高度sm | md | lg并非抽象标签而是映射到主题令牌。在 tokens.stylex.ts 中默认值如下档位令牌默认值sm--size-element-sm28pxmd--size-element-md32pxlg--size-element-lg36px令牌值可通过主题重定义如defineTheme中将--size-element-md覆盖为44px以适配触屏这正是 DR6输入上下文决定目标的机制基础——同一尺寸轴在不同主题下可呈现不同物理高度但控件身份与解析顺序不变。7.3 InputGroup固定行高的具体实现工具栏中medium 动作按钮 默认密度字段落在同一表观高度的示例在 InputGroup.tsx 中有直接对应实现const sizeStyles stylex.create({ sm: {height: sizeVars[--size-element-sm]}, md: {height: sizeVars[--size-element-md]}, lg: {height: sizeVars[--size-element-lg]}, });InputGroup 通过useSize(sizeProp, md)解析尺寸再用SizeProvider将解析结果级联给全部子控件输入框、前后缀、端控件同时以InputGroupContext通知子输入移除自身边框/圆角由组容器提供统一边界。固定高度 统一边界 尺寸级联三者合起来正是 DR1固定高度与内容自适应控件共享表观高度的工程实现。家族契约 FR3 进一步要求被接纳进 InputGroup 的子控件必须从组中解析兼容的控件高度与尺寸并保持单行几何。7.4 Button 家族几何不变式DR3内容有呼吸空间与 DR4视觉与目标分离在 按钮家族契约 FR7 中得到强化使用家族尺寸轴的成员必须将sm/md/lg映射到相同的控件高度契约仅图标成员在解析尺寸下应为正方形字重、按下状态、加载或图标替换不得改变其外尺寸。——即视觉状态变化绝不改变外层几何这与控制节奏的状态稳定性要求完全一致。7.5 级联边界哪些继承、哪些不继承尺寸级联架构还定义了若干边界值得作者注意参与是显式的仅仅暴露一个名为size的 prop 不会自动加入级联最近的提供方生效嵌套提供方作用域互不泄漏null 重置继承提供方值为null时后代回到各自默认值除非更近的提供方存在传播不抹除子控件所有权一个子控件的显式覆盖不得改变兄弟控件或提供方。这些规则保证了 DR1 的对齐不会退化为强制——提供方给的是默认值不是强迫值。八、代表性示例规范给出两个可验证的基准示例同一工具栏中的 medium 动作按钮与默认密度字段落在相同的表观高度与基线上。验证方式Button与TextInput在 md 档位下均解析--size-element-md并由 Toolbar 的SizeProvider见 Toolbar.tsx提供统一默认值。紧凑图标控件保留比其字形更大的可操作目标。验证方式IconButton 视觉呈正方形紧凑轮廓而目标区域/命中契约独立于可见轮廓由各组件与审计契约单独负责——这正是 OQ1 中设计目标与机制下限分开定义所要求的呈现形态。九、可视化参考与组件契约链接规范当前不包含规范性视觉资产并明确要求混合字段/动作与指针/触屏示例应在晋升promotion前补充到docs/design/assets/control-rhythm/目录。同样地当前未断言任何组件链接family:input-fields被列为候选关系等待采纳评审。这符合 设计规范模板 对资产与契约链接的准入要求。十、决策日志与开放问题决策日志本记录仍为draft状态authority: draft尚无仓库设计决策批准它其内容是对公开 Design Conventions wiki 中尺寸与密度意图的蒸馏。晋升为current需要 DESIGNOWNERScixzhang、imdreamrunner或.github/DESIGNOWNERS当前成员对精确 PR head 的批准。开放问题OQ1 — 目标意图。源材料描述了宽裕触屏目标但审计失败阈值小得多设计目标与机制下限需要分别定义。OQ2 — 参考行。哪种控件组合应为每种受支持密度提供规范性视觉证据这两个问题直接决定了 DR4/DR6 能否从意图落到可审计的规范。十一、总结从意图到机制的完整链路把控制节奏放在 Astryx 的知识分层中看链路非常清晰设计层本文档定义 DR1–DR6 四条原则、四个解剖角色与状态稳定性要求——只谈感知不写数值架构层component-size-cascade定义sm|md|lg标准轴与显式 继承 默认的解析顺序实现层SizeContext.ts、InputGroup.tsx、tokens.stylex.ts落地为useSize、SizeProvider与--size-element-*令牌家族契约层input-fields.md、buttons.md以 FR1/FR3/FR7 等不变式约束每个具体成员的几何稳定性。在设计新控件或审查既有界面时可以依次用三个问题自检同行控件是否共享同一解析尺寸状态变化是否改变外层尺寸视觉紧凑是否牺牲了操作目标——三者分别对应 DR1、DR2/DR3 与 DR4也是控制节奏规范的全部精髓。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考