YL
FOOTER & SHELL

页脚与骨架 UI 设计模式

页脚与骨架(Footer & Shell)分类收录 9 种常用界面模式:巨型页脚、极简页脚、带 CTA 页脚、订阅页脚、多列页脚、应用骨架等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

页脚与骨架

Footer & Shell

9 条

巨型页脚

Mega Footer

页脚深色多列SEO

深色大页脚,左侧品牌区(logo + 一句话介绍),右侧 3-4 组链接列,底部一条版权与社交。承载 SEO 长尾与「这家公司很完整」的观感。

极简页脚

Minimal Footer

页脚极简单行落地页

一行搞定:左边 logo + 版权,右边几个关键链接。适合作品集、工具站、单页落地页。

带 CTA 页脚

Footer with CTA

页脚CTA收口转化

页脚上方再嵌一块浅色 CTA 区块,用最后的转化机会收尾。滚动到底部的用户往往已经认真看完了整页。

订阅页脚

Newsletter Footer

页脚订阅邮箱沉淀

深色底、大标题、单行邮箱订阅。适合内容型产品把访客沉淀成可反复触达的名单。

多列页脚

Multi-column Footer

页脚多列链接白底

最经典的白底四列页脚:四组链接并列,底部一条版权 + 语言切换。信息密度高但不压迫。

应用骨架

App Shell

骨架后台导轨导航

左侧窄图标导轨 + 顶部条 + 内容区的经典后台骨架。图标导航比文字导航省空间,适合功能多的产品。

仪表盘布局

Dashboard Layout

仪表盘KPI图表后台

顶栏 + 一行 KPI 卡 + 大图表 + 侧栏区块的经典信息密度布局。让用户在 3 秒内看到「现在怎么样」。

三栏文档布局

Three-column Docs

文档三栏目录Scrollspy

左导航 + 中正文 + 右页内目录(TOC)的三栏文档骨架。右侧目录随滚动高亮当前小节,是长文档的必备件。

圣杯布局

Holy Grail Layout

布局骨架三栏经典

顶栏 + 左导航 + 主内容 + 右辅助 + 页脚的万能骨架,Web 布局史上有名字的经典结构。