打开参考库

COLLECTION 01 — WEBSITE INSPIRATION

产品官网与落地页设计参考

做产品官网，先找对参考。从完整页面的信息结构，到导航与页脚的具体处理，这里按你正在解决的问题整理设计灵感网站。

5 个资源来源3 个代表案例更新于
先看具体案例

从你的任务开始

先看完整页面比较产品定位、页面结构与风格研究页面的动态表现到原站观察滚动、转场和节奏只想解决一个区块从导航与页脚的专题图库开始

START WITH A CASE

先看这几个具体例子

已有展示样本 · 完整效果在原站查看
Resflow · 产品首屏已有展示截图静态截图

Curated

Resflow · 产品首屏

观察深色背景里，产品名称、简短说明与行动入口的视觉层级。

打开原站案例 资源说明
Chesapeake Plywood · 大型菜单已有展示截图静态截图

Navbar Gallery

Chesapeake Plywood · 大型菜单

栏目较多时，先比较导航如何分组，再检查移动端怎样收起。

打开原站案例 资源说明
Trove · 页脚与行动入口已有展示截图静态截图

Footer

Trove · 页脚与行动入口

把邀请入口、辅助链接与品牌文字分成不同层次，完成页面收尾。

打开原站案例 资源说明

MAKE A CHOICE

按正在做的事，选参考入口

左右滑动查看完整比较

先确定整页方向；只处理一个区块时，直接从导航或页脚案例开始。

产品官网设计参考选型比较
来源先解决什么查找方式获取范围具体入口
Curated整页视觉与首屏方向按行业、风格浏览，再打开案例公开画廊；高级筛选付费Resflow 首屏
Landbook按风格缩小候选范围组合行业、页面类型与字体筛选公开图库；高级功能见原站浏览原站
Landing Love页面动态与滚动节奏按分类找案例，回到原网站观察公开展示；更多功能见原站Creatorspace 案例
Navbar Gallery栏目较多的导航结构按菜单类型比较桌面与移动端公开导航分类与案例大型菜单案例
Footer页脚的信息层级与收尾先定链接与行动入口，再比排版公开页脚图库Trove 页脚
想按具体布局和风格继续找？

用现有参考库筛选，再查看匹配的网站与案例。

按条件查找产品官网

KNOW YOUR SOURCES

再了解各个资源来源

用途、使用方式与取舍，一起看。
  1. 01完整页面

    Curated

    curated.design

    按行业和风格组织真实网站，适合在项目开始时建立整体方向。

    • 行业分类
    • 网页布局
    适合
    比较 SaaS、AI 产品和工具类官网的信息层次。
    怎么用
    先选相近行业，找到候选后继续打开原网站，观察完整页面。
    取舍
    高级筛选属于 Pro；公开画廊适合先做方向筛选。
    查看具体示例 官方资料
  2. 02完整页面

    Landbook

    land-book.com

    把行业、风格、页面类型和字体等线索放在同一个网站设计图库里。

    • 风格筛选
    • 落地页
    适合
    已有大致风格，想比较不同产品的首屏和整页布局。
    怎么用
    从行业或页面类型缩小范围，再看字体、配色和区块安排。
    取舍
    设计图库提供参考；页面源码和模板需要另行查看原站。
    访问原站
  3. 03动态网页

    Landing Love

    landing.love

    以落地页和网站展示为主，可以从行业、视觉风格和动态表现继续查找。

    • 网页动效
    • 落地页
    适合
    参考滚动节奏、页面转场和首屏的视觉表现。
    怎么用
    先浏览 SaaS、AI 或 Minimal 等分类，再到案例原站确认动态效果。
    取舍
    展示中的动效需要在原站检查；现成实现代码不作为默认提供内容。
    查看具体示例 官方资料

把参考用到你的项目里

  1. 01

    写清这页的目标

    先确定是介绍产品、解释功能，还是引导注册。参考页面应服务于同一个目标。

  2. 02

    比较结构，再比较风格

    先看标题、功能、证据与行动入口如何排列，再挑配色、字体和动效。

  3. 03

    回到原站检查

    打开候选网站，观察完整页面和移动端。把能解决当前问题的细节留下来。

开始之前，你可能还想知道

官网参考和落地页参考有什么区别？

产品官网通常覆盖产品介绍、功能与其他栏目；落地页更集中地服务一个行动目标。可以从同一批网站获取灵感，但信息的取舍应跟你的页面目标一致。

这些网站都能提供代码或模板吗？

本页以设计参考为主。画廊、源码和模板是不同的资源形式，是否能获取代码、是否付费，需要看对应原站的具体条目。需要可实现的组件时，可以继续查看 UI 组件库专题。

应该一次收藏多少参考？

先选少量与你的产品、用户和页面目标接近的页面。给每个候选写下一条具体借鉴点，例如首屏如何说明价值、功能如何分组，比只保存截图更容易用于设计。