返回知识库

产品与设计 · 页面结构与适配

页头Header

让页面顶部稳定承担品牌识别、少量主导航与一个关键行动,窄屏也不丢失主任务。

把设计市集的拥挤页头救回来

Header 是页面顶部的全局识别区:告诉人这是哪里、主要能去哪,以及此刻最重要的行动。先让错误在手机上暴露,再整理并完成报名。

活动页任务确认本周开放,并报名「造物周末」先看拥挤页头在手机上怎样失败,再保留真正承担全局任务的内容。
早鸟票 8 折 · 今天结束微博小红书摊主招商媒体合作
06
SEP
造物
周末
立即报名
第 12 届 · 河岸仓库

把周末
做成作品

80+ 独立设计摊主、12 场手作工作坊,还有一整天的河岸音乐。

9 月 6–7 日10:00–20:00 · 免费入场

当前:促销、社媒、合作和二级页面全塞在 Header。下一步切到手机,观察主任务是否还找得到。

刚才的 Header 为什么更好用

面板已经证明三项核心职责;开放状态和报名结果都直接长在页头对象上。

识别品牌与活动名稳定在左侧

不论宽屏或窄屏,先回答“这是谁的页面”。

导航只留跨页面的主要目的地

当前“工作坊”有文字、下划线和 aria-current。

行动唯一主行动靠近状态

开放时间解释现在能不能报名,成功后 CTA 自身改变。

边界促销与社媒退出主信息带

它们可去正文、公告条或 Footer,不与主任务争抢。

什么时候需要 Header

当页面属于一个多页站点、需要稳定身份与全局入口时使用;沉浸式单任务流程可简化。

适合活动站、商城、内容站、产品工作区

用户需要跨页面移动,并持续确认品牌、当前位置和账户或主行动。

谨慎支付确认、全屏编辑、单一步骤问卷

复杂 Header 会把人带离任务;此时保留品牌、返回和必要帮助即可。

怎么决定页头里放什么

先写职责,再排优先级,最后缩窄验证。

  1. 写三句:用户如何识别站点、跨哪些主页面、此刻最重要的全局行动是什么。
  2. 把辅助内容迁出:促销、社媒、合作、次级政策移到正文、公告条或 Footer。
  3. 标出当前项与状态:导航用 aria-current + 形状/文字冗余,行动旁说明可用状态。
  4. 缩到 390px:确认品牌、主导航入口与主行动仍在首屏;失败后精简或折叠再重试。

同一活动页,只改页头职责

目标都只是让访客确认开放并报名;差异在是否让全局任务主导。

正例 · 角色清楚品牌 + 3 项主导航 + 开放状态 + 报名

5 秒内知道这是谁、能去哪、现在该做什么。

反例 · 链接仓库促销 + 社媒 + 招商 + 合作 + 7 项导航

在手机上换成 4 行,报名离开首屏,Header 失去方向感。

快速自测

一个展览活动页的 Header 已有品牌、3 项主导航和购票按钮。运营还想加入 5 个社媒与合作链接,最合适的处理是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。