SaaSFrame

SaaSFrame 专门收集 SaaS 网站和产品界面，把案例分成网站页面、产品屏幕、组件模式与用户流程。它的价值在于按业务节点查找，例如定价、集成、API Key、注册或产品导览，而不是在不同产品的首页之间随意跳转。

四种入口解决不同问题

先确定问题属于哪一层，避免用落地页截图回答产品交互问题。

营销页按商业目的拆解

当前分类包含 Landing Page、Pricing Page、Comparison Page、Security、Documentation、Integrations、Customer Stories 等。做网站改版时可围绕同一页面类型选取三到五个同行案例，比较它们如何解释价值、展示证据、处理套餐差异和引导下一步。

产品界面按任务寻找

产品库包含 Sign Up Flow、Product Tour、Invite Team Members、API Key、Charts、Calendar、Color Picker 等具体任务。研究时记录用户进入前的状态、所需输入、错误反馈和完成标志，而不是只复制控件外观；同一个按钮在权限、数据和业务规则不同的产品中含义可能完全不同。

把屏幕还原成完整流程

1. 确定起点、用户角色和成功条件。
2. 按顺序保存关键屏幕，而非只截最漂亮的一张。
3. 补上空状态、错误、等待与返回路径。
4. 标记每一步需要的数据和权限。
5. 画成自己的流程图，再进入线框设计。

模式库用于比较，不是组件包

CTA、Testimonials、Pricing、Tabs、Steps、Notification Banner 等模式能帮助发现常见表达，但截图不等于可直接使用的设计系统组件。落地前仍要定义字体、间距、状态、响应式规则和无障碍要求，并确认模式是否适合当前信息密度。

研究结果怎样交给团队

• 每个案例写明来源产品、页面类型和研究日期；
• 将“观察到的做法”与“本项目采用的原则”分开；
• 用注释说明选择或拒绝某种模式的原因；
• 把流程、文案和数据条件一起交给产品与开发。

适合 SaaS，不覆盖所有设计类型

SaaSFrame 适合 B2B 软件、订阅产品和后台型应用的竞品研究。电商陈列、游戏界面、艺术实验站或品牌视觉仍应补充其他资料库。案例代表某个时间点的真实页面，原产品可能已经迭代；涉及价格、法规和功能时必须回到原站核对。