MBA Edu Website Redesign
针对 MBA 教育平台的信息架构与品牌体验升级
- 项目范围
- 首页与公开页面体系
- 角色
- UI 设计 · 独立完成
- 团队协作
- 1 产品经理 · 1 前端工程师
- 项目周期
- 2023.12 – 2024.01
官网不仅需要展示内容，更需要帮助学习者完成选择
MBA Edu 面向正在了解 MBA、比较院校并准备申请的学习者。随着院校、项目、资讯和招生活动持续增加，官网需要同时承担品牌表达、信息组织与决策支持。
项目源于我在年度规划中提出的官网体验升级提案，设计部分独立完成，与产品、前端协作推进上线。
本次升级围绕首页与核心公开页面展开。内容优先级经过重新梳理，院校发现、项目判断、活动参与和内容阅读由此形成更清晰的体验路径。
设计重点在于让不同内容出现在合适的决策阶段。我为什么要继续了解？
快速理解平台提供的核心资源与专业价值。
哪个项目更适合我？
在统一字段下筛选院校、识别差异并建立比较。
下一步可以做什么？
继续查看项目详情、活动信息或进入报名路径。
旧版首页像一张持续扩张的资源清单
旧版首页具备丰富的内容基础，但不同类型的内容使用了相近权重。用户需要自行判断什么值得先看、哪些入口与当前任务相关。
旧版首页首屏
旧版首页整页信息流节选
首屏缺少稳定的价值主张
核心位置由多组活动和招生内容共同占据。用户首先接收到的是当期信息，还需要继续判断平台能提供哪些长期价值。
资源丰富，但阅读优先级接近
新闻、专题、活动、课程与工具持续铺陈，浏览入口很多，却没有先后关系帮助用户缩小决策范围。
入口存在，行动路径仍然分散
院校检索、对比、报名与咨询均可找到，但它们与内容入口竞争注意力，缺少连续的下一步提示。
核心挑战如何在保留教育平台内容广度的同时，让品牌价值、院校发现与招生行动形成明确顺序？
把页面问题逐条翻成设计动作
每条策略都落在具体的页面区域，下文逐项展开。
首页同时承载品牌传播、招生信息、新闻更新与工具入口。
先建立页面职责，再决定每类内容出现的顺序。
用大幅主题区建立当期焦点，紧接院校检索和精选内容，形成从了解、发现到继续探索的层级。
院校信息分散在不同内容模块，缺少统一的比较框架。
把筛选、浏览与比较组织为同一条任务路径。
以独立院校目录承接多条件筛选，用稳定卡片字段呈现项目差异，并保留对比与浏览历史。
专题、资讯与招生活动采用相近的内容组织方式。
让页面结构匹配不同阅读和报名任务。
分别建立专题、资讯与活动模板，以内容精选、时间地点和筛选条件表达各自用途。
四个目标定义升级方向
建立专业可信的教育品牌形象
以更克制的界面层级承接院校、项目与招生内容。
降低理解项目信息的成本
让筛选条件、项目字段与比较动作出现在同一语境。
让招生行动拥有清晰上下文
把报名、活动和项目详情放回用户正在判断的页面。
建立可持续扩展的页面语言
让导航、卡片、筛选和内容模板形成稳定的界面家族。
首页对比聚焦信息优先级的变化
新版首屏以统一导航、大幅主题区、院校检索与精选内容建立更明确的入口层级，整页内容也随优先级梳理大幅精简。
MBA Edu 旧版官网首页
传播内容、院校入口和资讯模块在首屏及后续信息流中并列出现。
MBA Edu 新版官网首页
主题表达、院校发现与编辑精选在同一首屏中形成清晰顺序。
01020304统一一级导航
品牌与核心频道进入同一导航层，并用蓝色选中态标记当前位置。
建立主视觉焦点
大幅主题内容承担当期价值表达，视觉注意力不再被多组小型宣传横幅平均切分。
把院校发现放进首屏
院校名、专业、省市、联考、模式和学费在同一检索面板中建立明确任务入口。
精选内容形成第二层阅读
三张编辑卡片承接行业信息与择校依据，限定首屏第二层内容的数量与权重。
页面变短，是优先级变清晰的直接结果
同为 1920px 设计宽度，新版首页整页高度约为旧版的 61%。内容从持续铺陈的信息流，收敛为主题、检索、精选与资讯四组模块，每一屏只保留当前决策阶段需要的内容。
首页后续区域延续统一的内容分组
院校资讯以稳定的标题、图像与摘要结构出现；品牌介绍和关联入口集中在侧栏，主信息流不再频繁切换布局规则。
010201主内容区保持一致的资讯卡片字段与垂直节奏。
02品牌与延伸入口集中在辅助栏，不与核心阅读路径争夺宽度。
把院校发现从首页入口，延伸为连续的项目查看路径
院校目录把多条件筛选、项目结果与比较入口并置；用户可以从院校或地区等条件开始，再进入项目详情继续查看。
院校 / 专硕 / 城市 / 模式 / 学费
统一卡片字段呈现项目差异
对比与浏览历史保持在页面侧边
项目资料与相关活动继续展开
筛选、结果与比较处在同一工作区
左侧筛选负责缩小范围，中部卡片负责比较项目名称、地区、学习方式与学费，右侧对比与浏览历史保留正在考虑的对象。
01020301筛选条件与项目结果在同一页面并置。
02四列项目卡片使用一致字段，形成可横向对照的浏览框架。
03比较与浏览历史形成持续可见的决策工具。
详情页继续回答“值不值得进一步了解”
项目名称与院校视觉建立识别，基础信息采用结构化字段呈现；相关活动放在同一上下文中，建立从项目资料到招生信息的页面关系。
01020301院校视觉与项目名称构成明确的详情页开场。
02认证、地区、性质等信息进入可扫描的基础资料表。
03相关招生活动与详情信息并列，行动入口具备内容上下文。
为不同内容任务建立稳定的页面模板
专题、招生活动与资讯共享导航和视觉语言，同时在首要信息、筛选条件与阅读结构上保留各自差异。
专题页承接阶段性传播主题
以主题视觉建立第一层识别，再用分类、排序和卡片网格管理持续增加的专题内容。
招生活动先回答时间与地点
活动类型、地区和时间成为首要筛选条件；日期、地点与报名入口进入统一信息块，直接呈现活动判断所需字段。
资讯页区分精选内容与持续更新
顶部重点内容负责编辑推荐，分类与列表承接日常更新，右侧区域继续提供专题推荐与延伸阅读。
EMBA 频道复用同一套栏目模板
三张主题卡建立当期重点，双列列表承接项目动态；右侧检索与工具箱沿用全站辅助栏结构，频道内即可完成筛选。
一套贯穿所有页面的界面语言
品牌蓝、字体层级、布局分区与卡片模式在每个页面反复出现，下面按角色拆开来看。
品牌蓝承担识别与关键操作
导航选中态、筛选按钮、对比操作和模块标题保持一致的行动色角色。
标题、字段与元信息层级稳定
页面标题负责建立任务，卡片标题表达对象，地区、时间与费用退到辅助层。
主内容与辅助工具明确分区
筛选、内容结果和右侧工具形成固定工作区，复杂信息按区域与字段组织。
卡片字段随任务改变，结构保持一致
院校卡突出项目与费用，活动卡突出日期地点，资讯卡突出标题摘要与来源。
把上线页面沉淀为一套可交接的设计系统
色彩、字体与组件规格依据上线页面逐项整理。以下规范样例均以 HTML 实时渲染呈现，而非图片导出，可直接作为前端交接标准。
品牌蓝承担识别与行动，灰阶负责内容层级，深墨色限定在页脚与信息密集区。
#0046DC导航选中态 / 主按钮 / 栏目标记
#1656DE主视觉渐变 / 大区块底色
#326AE2悬停态 / 次级按钮 / 图形元素
#64F0FF深色区数字与关键点缀
#1E2022页脚 / 深色信息区
#2D2D2D页面与卡片标题
#646464正文与摘要
#969696元信息 / 日期 / 来源
#BEC3C8深色底上的次要文字
#F1F3F3分区底色 / 输入框底
中文使用苹方与冬青黑体族，西文与数字使用 Helvetica Neue；层级由字号与灰度共同表达。
22px让选择更有依据频道与栏目大标题
18px工具箱与模块标题区块标题
16px精选内容标题在此层级列表重点条目
14px卡片标题与导航文字卡片标题 / 一级导航
12px摘要与说明文字使用此层级，负责段落阅读。摘要 / 正文
11px2024-01-12 · 来源名称元信息 / 日期与来源
组件规格取自上线首页的高频模块：栏目头、排行榜、首屏检索面板与内容卡。界面以直角和 R2 小圆角保持工具感，品牌蓝只出现在可点击与被强调的位置。
基于公开内容数据的年度盘点，覆盖百余所商学院官方账号。
- 全国专业学位水平评估结果解读
- 2024级工商管理硕士招生简章汇总
- 提前面试高频问题与作答思路整理
- 长三角地区MBA项目学费一览
从内容门户，走向更清晰的 MBA 教育决策体验
首页层级更明确
主题表达、院校检索与精选内容形成连续的首屏阅读顺序。
核心页面形成连续关系
从筛选院校、浏览项目到查看详情与相关活动，路径具备连续上下文。
页面家族更统一
专题、活动与资讯共享品牌语言，并以各自模板服务不同内容任务。
这次升级让丰富的教育资源拥有明确秩序。页面先帮助用户建立理解，再支持项目比较，最后给出可行动的下一步。
