B端官网 / 信息架构 / ui设计 / vibe coding

公司官网重构

From Corporate Site to Product Matrix Portal

更新于:2026 • B端官网 / 信息架构 / ui设计 / vibe coding
时间2026
项目类型B端官网 / 信息架构 / ui设计 / vibe coding

项目背景

上一家公司是一家提供人才测评、招聘考试、人才盘点和组织发展服务的企业。原有业务内容较多,产品、解决方案与顾问服务之间的关系不够直观,客户进入官网后需要花费较多时间理解“公司能解决什么问题”。在这次重构中,我重新梳理官网的信息架构,将分散的业务内容整合为“产品矩阵—业务场景—平台能力—客户背书—咨询转化”的浏览路径,并通过 Coding 完成可交互、可响应式展示的首页原型。

核心挑战

项目的核心挑战在于业务复杂、入口不清和转化目标并存。公司同时覆盖人才测评、招聘考试、人才盘点、胜任力模型、领导力发展和组织诊断,产品与服务之间存在交叉关系;不同客户也会从“人才测评”“校园招聘”“干部选拔”等不同问题进入官网。页面既要帮助客户快速理解能力,也要自然引导他们预约顾问、获取报价或进一步咨询。

设计策略

  1. 把首页设计成产品门户,用“价值主张—推荐产品—产品矩阵—场景方案—平台能力—客户背书—咨询转化”组织内容
  2. 首屏不再堆砌企业介绍,而是直接回答公司是谁、提供什么、能解决什么问题、客户下一步可以做什么
  3. 将官网内容拆分为首屏、展示、切换、卡片、数据、Logo、页面模板和全局框架等组件,并统一信息密度、排列方式、移动端适配及交互规则

方案亮点

01

从企业介绍到产品门户

首页不再以公司介绍为主,而是围绕客户决策路径展开,让客户先看懂产品、场景和能力,再进入咨询转化。

02

双入口的信息架构

同时保留产品入口和业务问题入口,适配不同客户的理解方式,降低复杂业务内容的进入门槛。

03

可复用的组件规则

通过组件分类、信息密度控制、响应式规则和交互规范,为后续产品页、解决方案页和案例页扩展建立基础。

项目价值

最终完成了一套可交互的官网首页 Demo,将公司分散的业务内容整理为一条清晰的客户认知路径,并验证了产品矩阵型首页的可行性。该方案同时沉淀了可复用的页面组件与设计规则,为后续产品详情页、解决方案页及 Halo 网站落地提供了结构基础。

有项目想法?

联系 Stefancai