Web 页面区块 / Content List Section
Content List
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
Identity · 身份
- 子类型
- 区块
- 父级类目
- 内容与 SEO、区块与页面构成
What · 是什么
- 定义
- 以列表、卡片或摘要集合呈现一组相关内容的页面区块。
Why · 为什么
- 实现目标
- 承载文章、资源、案例、产品或结果的发现入口。
Where · 在哪里
- 适用场景
- Blog Index、Pillar Page、Docs / FAQ、Features、Web 界面设计
How · 怎么做
- 实现说明
- 标题、摘要、类型和时间等元信息有稳定结构;卡片密度适合任务;列表支持回访。
How much · 多少
- 衡量指标
- 理解 · 效率 · 回访
Lifecycle · 生命周期
- 状态
- 整理中
适用页面类型与对应组件
关系来自本地关系表,并包含反向关联。
- Ahrefs 博客 Newsletter 订阅Ahrefs Blog Newsletter Signup反向 · 应用于
Ahrefs 在博客首页将单字段 Newsletter 订阅嵌入内容列表,用订阅规模与内容预期换取邮箱许可。
- Atlassian 博客团队实践入口Atlassian Blog Team Practices反向 · 应用于
Atlassian 博客用团队协作和工作方式内容吸引探索者,并以推荐、订阅或产品相关入口推动继续行动。
- Canva Design School 订阅Canva Design School Subscribe反向 · 应用于
Canva Design School 以教程、课程和设计资源聚合学习需求,并用低摩擦订阅入口承接持续学习。
- HubSpot 博客报告下载HubSpot Blog Report Download反向 · 应用于
HubSpot 在博客首页的内容列表中用报告下载入口承接阅读兴趣,通过明确资源价值引导访客提交信息获取内容。
- Intercom 博客 Fin 产品入口Intercom Blog Fin Entry反向 · 应用于
Intercom 博客索引围绕客户服务和 AI 主题组织内容,并用突出入口将高意图读者带到 Fin 或产品介绍。
- Linear 博客产品更新入口Linear Blog Product Update反向 · 应用于
Linear 博客用产品更新和方法文章组织回访内容,并在列表上下文中引导读者继续查看产品或文档。
- Notion 博客模板入口Notion Blog Template Entry反向 · 应用于
Notion 博客索引以产品实践和工作方法内容建立兴趣,再用模板或产品入口承接读者的下一步实践。
- Stripe 博客产品学习入口Stripe Blog Product Learning反向 · 应用于
Stripe 博客索引将行业内容与产品实践文章分层展示,并通过卡片行动把学习兴趣连接到更深的产品信息。
- Webflow 博客订阅入口Webflow Blog Newsletter反向 · 应用于
Webflow 博客索引以文章列表承接阅读兴趣,并在内容浏览路径中提供单字段订阅入口,换取后续内容许可。
- Zapier 博客工作流入口Zapier Blog Workflow Entry反向 · 应用于
Zapier 博客通过分类、推荐文章和工作流内容帮助访客定位自动化场景,并把相关主题连接到产品探索。
- Blog IndexBlog Index应用于
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- Docs / FAQDocs & FAQ应用于
回答使用问题、配置问题和常见疑问的文档与问答页面。
- FeaturesFeatures Page应用于
系统展示产品能力、用户收益和相关证明,帮助访问者理解产品能做什么以及哪些能力适合自己的页面类型。
- Pillar PagePillar Page应用于
围绕一个宽主题组织深度解释、子主题入口和相关内容链接的支柱页面模板。
- 对比中心Comparison Hub反向 · 应用于
集中承载多个对手或比较主题,帮助用户进入具体比较。
- 可筛选功能目录Filterable Feature Directory反向 · 应用于
让熟悉产品的用户快速查找和扫描大量功能。
- 多选项短名单Multi-option Shortlist反向 · 应用于
帮助仍在探索的用户从多个候选中形成短名单。
- 技术能力参考Technical Capability Reference反向 · 应用于
提供密集、可核验的技术能力和限制信息。
- Adobe Creative Cloud FeaturesAdobe Creative Cloud Features反向 · 应用于
以创作任务、应用和工作流组织 Creative Cloud 能力目录。
- AWS Lambda FeaturesAWS Lambda Features反向 · 应用于
以运行模型、扩展、事件和安全限制组织技术能力。
- Best Ecommerce PlatformsBest Ecommerce Platforms反向 · 应用于
以商业模型、规模和运营需求组织多个电商平台候选。
- Best Project Management SoftwareBest Project Management Software反向 · 应用于
先给出评估标准,再用候选工具列表帮助读者形成短名单。
- Best Project Management SoftwareBest Project Management Software反向 · 应用于
以编辑评测和适用人群为入口,将多款工具收敛为候选清单。
- Canva FeaturesCanva Features反向 · 应用于
通过大规模分类和卡片覆盖不同创作任务与工具。
- ClickUp CompareClickUp Compare反向 · 应用于
集中承载多个竞争产品的比较入口。
- Cloudflare WorkersCloudflare Workers反向 · 应用于
以运行时、部署、平台 API 和边界限制组织技术参考。
- Free Project Management SoftwareFree Project Management Software反向 · 应用于
将免费项目管理工具按能力、限制和适用人群横向列出。
- Freshdesk Compare HelpdesksFreshdesk Compare Helpdesks反向 · 应用于
将 Freshdesk 与多个帮助台候选集中呈现,先选对手再进入具体比较。
- GitHub ActionsGitHub Actions反向 · 应用于
按自动化工作流、CI/CD、生态和治理呈现能力与限制。
- HubSpot Best CRMHubSpot Best CRM反向 · 应用于
解释 CRM 评估标准并比较多个候选方案。
- HubSpot Comparisons LibraryHubSpot Comparisons Library反向 · 应用于
把比较内容做成覆盖多产品和决策主题的资源中心。
- Mailbox AlternativesMailbox Alternatives反向 · 应用于
把邮箱支持工具的替代选项做成可继续深入的比较目录。
- Salesforce ProductsSalesforce Products反向 · 应用于
用产品线、行业和业务职能提供高密度目录导航。
- Shopify POS FeaturesShopify POS Features反向 · 应用于
把零售、门店和线上经营能力按场景分组。
- Stripe Billing FeaturesStripe Billing Features反向 · 应用于
密集分类计费、自动化、全球化与平台支持,方便专业评估。
- Twilio APITwilio API反向 · 应用于
以资源、认证、请求、响应和错误处理为核心的技术参考页。
- Webflow FeaturesWebflow Features反向 · 应用于
以分类目录承载大量建站能力并通向具体功能。
- Zendesk AlternativesZendesk Alternatives反向 · 应用于
围绕 Zendesk 的替代选项组织多个决策入口。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 内容与 SEOContent & Search Experience属于
把内容结构、搜索意图、内部链接和页面可读性纳入 UI 设计。
- 区块与页面构成Sections & Page Composition属于
把页面拆成具有明确任务和信息职责的区块。
- Article CardArticle Card反向 · 应用于
专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。
- CardCard反向 · 应用于
将相关信息和操作组合成可扫描、可比较的内容容器。
- PaginationPagination反向 · 应用于
将长列表分成多个可导航页面并显示当前位置的组件。