概念二元驱动案例导航

大理论

创意机构和高端服务网站经常用一个核心概念统一叙事，例如理性/感性、策略/美学、工艺/科技。这个概念只有在进入信息架构后才有价值：它要影响菜单、服务分组、案例标签、团队介绍、动效节奏和联系路径。否则它只是品牌文案。

小知识点

1. 先写 concept map：概念两端分别对应哪些服务能力、案例证据、语气和视觉状态。
2. 首页不能只展示概念；必须给用户通往 work、services、about/contact 的清晰路径。
3. 案例卡片要说明项目为何证明这个概念，至少包含行业、任务、输出、结果或能力标签。
4. 团队 hover、work menu、hero video 等互动必须帮助用户判断能力，而不是把导航藏起来。
5. 二元概念不应该制造二元混乱：用户需要知道当前处于哪一侧、如何切换、两侧如何汇合到 CTA。
6. 内容系统要能持续添加新案例，避免每次新增项目都要重新设计整页叙事。

设计判断

如果用户读完概念后能快速进入服务、案例和联系路径，并理解每个案例如何支撑主张，这个概念成为了导航结构；如果用户只记得一句口号但不知道点哪里，它没有通过信息架构检验。

实现建议

为 concept-led portfolio/service page 输出：concept axis、导航项、服务矩阵、案例字段、团队互动规则、CTA 位置、移动端菜单、CMS 字段和空状态。前端用可维护数据结构驱动 case cards 和 work menu；动效只强化概念切换和上下文过渡，不阻塞案例阅读。

反例/风险

概念词遍布页面但没有服务信息、work menu 只靠 hover 才可用、案例图很漂亮但没有任务说明、Contact 藏在长滚动底部、CMS 无法支撑新案例、移动端概念动画压过菜单。

案例分析

The Agency of Love & Logic 获得 Awwwards Site of the Day（2026-04-19）。Awwwards 页面描述它用 love 与 logic 的视角呈现 agency rebrand，并围绕 curated case studies 展开；元素包含 Strategy Services、Case Study、Team Hover、Work Menu、Hero Videos、About Page、Contact Page、Design Services，技术/分类包含 Portfolio、Responsive、Interaction Design、Project Page、GSAP、Sanity 和 Astro。可学习点是：概念二元不是口号，它可以成为服务、案例和导航的组织方法，但每一端都必须落到具体页面和内容字段。

来源链接

Awwwards The Agency of Love & Logic: https://www.awwwards.com/sites/the-agency-of-love-logic