组件插槽先定义三件事:默认内容是什么、哪些区域可选、内容为空或过长时怎样保持结构。用Pixso 主组件与实例建立通知卡片的固定区与可选区,评审时可以直接看出实例替换后是否仍然可用。

先写插槽契约
标题、状态、正文、辅助信息和操作区分别回答什么问题?先写每个区域的责任、是否必填、默认文案和最大长度,再画容器。没有契约时,设计师容易把所有内容都做成自由文本,研发也难判断哪些字段能被替换。
通知卡片可以固定标题和状态,正文、辅助信息和操作区按场景可选。默认实例必须是完整可用的通知,而不是只放灰色占位;这样长内容和空内容才有可比较的基准。
把空、长和重复内容画出来
空正文时保留合理间距,但不留下大块空白;标题过长时说明截断或换行规则;出现两个相同操作时,合并或降低次要动作,避免卡片变成一排按钮。每种状态都要标明是否允许实例覆盖。
同一通知卡片至少做默认、正文为空、标题两行和两个操作四个实例。对照组件边界,检查文字层级、操作顺序和辅助技术可读性,不把“看起来整齐”当成内容契约。
区分可选区和组合组件
可选区适合在同一组件内隐藏或替换内容,组合组件则把多个独立组件按场景拼起来。若每个实例都需要改层级、边距和交互,说明组件边界可能太大,应拆成更小的组件或明确组合规则。
用固定的容器、间距和状态属性保护结构,允许实例只替换真实需要变化的内容。把“可编辑”范围画在组件说明旁,不要让使用者只能靠试错发现哪些层不可改。
交付一组可复用的例子
文档中同时放默认、错误、长内容和空内容实例,说明何时选用每个例子。示例应使用同一组字段,方便开发、设计和评审逐项对照。
把组件和实例放进 Pixso 文件的独立页面,命名与文档一致,保留版本记录。变更插槽时更新默认内容、反例和迁移提示,而不是只替换一张主视觉图。
插槽的边界还要考虑可访问性和内容顺序。视觉上把辅助信息放在标题下方,并不代表读屏顺序可以随意调整;组件说明中记录 DOM/阅读顺序和焦点顺序,避免实例替换后信息被读两次或完全跳过。
当一个插槽需要承载完全不同的内容类型时,优先拆出两个语义明确的组件,而不是继续增加“类型”属性。组件越能用一组稳定规则解释,实例和文档越容易维护,迁移时也更少出现隐形破坏。
插槽作为内容插入点的技术背景可参考MDN templates and slots;设计稿仍需补充内容责任和状态。