保持统一身份,调整具体构图
Lock invariants, vary composition
系列产物保留共同标识,同时根据用途调整内容安排。
以下示例与示意结果由本站编写,用于说明方法,不是模型实测结果。
使用场景
你要制作结账、收据和订单详情三个界面草图,既要像同一产品,也要体现不同任务。教学共同规则:品牌色 #1D4ED8、正文 16px、圆角 6px、底部导航“购物车/订单/我的”;结账突出输入,收据突出成功摘要,详情突出订单信息。
具体做法
生成系列前写清固定项与允许变化的部分。颜色、字体层级、组件和导航来自同一约定;构图与信息重点按页面目的变化。每个新页面生成后与同类页面对照实际产物,检查组件状态和间距是否仍属于同一系统。不能只因内部规则写完就宣布一致。
反例
分别制作上述三个界面。每页重新选颜色、字体和底部导航,让它们各自更有创意,不需要对照同一规则。
改进写法
按上述教学规则制作三个草图。固定 #1D4ED8、16px 正文、6px 圆角和购物车/订单/我的导航,以及共享按钮与间距用法。允许结账以输入表单为主、收据以成功摘要为主、详情以信息分组为主。逐页记录哪些规则相同、哪些构图因任务不同;将实际输出并排检查,修正无理由漂移。
为什么这样改
每页重新设计身份元素,会让用户难以复用已学会的界面规律。把身份不变量与页面构图分开,既能保留识别和操作的一致性,也不会把所有页面压成同一张模板。
如何验证
示意检查矩阵有三行页面,列为颜色、字体、导航、按钮和任务重点。前三页的共享项应一致,重点分别是输入、成功和详情。
检查真实草图而非只看提示词;其中一页换了导航或圆角且没有业务理由,应调整。构图不同本身不是失败。
适用边界
教学数值不是通用设计标准。响应式、状态和可访问性仍需在实现中验证,静态草图不能证明交互一致。合法的业务差异应写成明确变体,不为了统一而删除必要差异。
原文与版本
- Leonxlnx/taste-skill · Lock invariants, vary composition
查看此版本的文件ce26fc25c0e5 - anthropics/skills · Fixed versus variable template surfaces
查看此版本的文件8a1541c4a3ff