不论宽屏或窄屏,先回答“这是谁的页面”。
把设计市集的拥挤页头救回来
Header 是页面顶部的全局识别区:告诉人这是哪里、主要能去哪,以及此刻最重要的行动。先让错误在手机上暴露,再整理并完成报名。
活动页任务确认本周开放,并报名「造物周末」先看拥挤页头在手机上怎样失败,再保留真正承担全局任务的内容。
早鸟票 8 折 · 今天结束微博小红书摊主招商媒体合作
第 12 届 · 河岸仓库把周末
把周末
做成作品
80+ 独立设计摊主、12 场手作工作坊,还有一整天的河岸音乐。
9 月 6–7 日10:00–20:00 · 免费入场
当前:促销、社媒、合作和二级页面全塞在 Header。下一步切到手机,观察主任务是否还找得到。
刚才的 Header 为什么更好用
面板已经证明三项核心职责;开放状态和报名结果都直接长在页头对象上。
当前“工作坊”有文字、下划线和 aria-current。
开放时间解释现在能不能报名,成功后 CTA 自身改变。
它们可去正文、公告条或 Footer,不与主任务争抢。
什么时候需要 Header
当页面属于一个多页站点、需要稳定身份与全局入口时使用;沉浸式单任务流程可简化。
用户需要跨页面移动,并持续确认品牌、当前位置和账户或主行动。
复杂 Header 会把人带离任务;此时保留品牌、返回和必要帮助即可。
怎么决定页头里放什么
先写职责,再排优先级,最后缩窄验证。
- 写三句:用户如何识别站点、跨哪些主页面、此刻最重要的全局行动是什么。
- 把辅助内容迁出:促销、社媒、合作、次级政策移到正文、公告条或 Footer。
- 标出当前项与状态:导航用 aria-current + 形状/文字冗余,行动旁说明可用状态。
- 缩到 390px:确认品牌、主导航入口与主行动仍在首屏;失败后精简或折叠再重试。
同一活动页,只改页头职责
目标都只是让访客确认开放并报名;差异在是否让全局任务主导。
5 秒内知道这是谁、能去哪、现在该做什么。
在手机上换成 4 行,报名离开首屏,Header 失去方向感。
快速自测
一个展览活动页的 Header 已有品牌、3 项主导航和购票按钮。运营还想加入 5 个社媒与合作链接,最合适的处理是?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。