内容怎么排?6 种页面骨架

何时用

需要用户完成一个明确动作(注册、购买、留资)时。整页只服务于这一个目标,信息按"引起注意→建立信任→促成行动"的顺序展开。

信息优先级

• 主张:用户 3 秒内要知道"这是什么、对我有什么用"
• 证明:数据、案例、评价,支撑可信度
• 细节:对感兴趣的人提供更多
• 行动:贯穿全页,最终 CTA 收尾

🖼️ 图片规则

• Hero:满版主视觉图 16:9,文字压底或居中
• 价值点:用图标不用照片,保持轻量
• 故事区:配实景图 4:3,图文左右或上下
• 数据区:纯文字大数字,不配图
• 全页图片统一调色,别东一张暖色西一张冷色

按以下布局骨架,结合指定皮肤生成一个落地页:

【骨架模块,从上到下】
1. Hero:满版主视觉图(16:9)+ H1 一句话主张 + 支撑文案 + 主CTA/次CTA
2. 价值点:三栏,每栏用图标(不用照片)+ 标题 + 一句描述
3. 数据证明:三个大数字 + 标签,建立信任
4. 故事/详情:图文左右分栏(图4:3 + 文),讲一个具体案例
5. 最终CTA:居中,大标题 + 主按钮

【响应式】
- PC:价值点3栏、故事图文左右
- 手机:价值点1栏纵向、故事图上文下、Hero文字压底

【图片规则】Hero满版16:9;价值点用图标;故事区实景4:3;数据区纯文字

【信息优先级】主张>证明>细节>行动,整页只服务一个转化目标

何时用

内容数量多(>10项)、需要分类筛选、每项结构一致时。核心是"扫视效率"——用户快速判断每个项是否值得点进去。

信息优先级

• 缩略图:第一眼抓住,决定是否细看
• 标题:说清是什么,1 行内
• 关键属性:价格/日期/标签等决策信息
• 辅助信息:简介/评分,可省略

🖼️ 图片规则

• 每项配缩略图,比例统一(推荐 4:3 或 1:1)
• 无图项用色块/图标占位,别留空白
• 缩略图加载用 loading="lazy" 懒加载
• 列表项 hover 缩略图可轻微放大反馈
• 筛选用文字标签不用图

按以下布局骨架,结合指定皮肤生成一个列表页:

【骨架模块,从上到下】
1. 页面标题 + 右侧操作(如搜索图标)
2. 筛选/分类条:标签横排(PC),手机折叠成抽屉
3. 排序栏:结果数 + 排序方式
4. 列表网格:每项 = 缩略图(4:3)+ 标题 + 关键属性 + 辅助信息
5. 分页(PC)/ 加载更多或无限滚动(手机)

【响应式】
- PC:3-4列网格,筛选横排
- 手机:1-2列,筛选折叠抽屉,无限滚动

【图片规则】每项配缩略图(4:3统一),无图用色块占位,lazy加载

【信息优先级】缩略图>标题>关键属性>辅助,保证扫视效率

何时用

用户已点进某个具体内容,需要完整信息做决策(学不学这门课、买不买这件商品、读不读这篇文章)。

信息优先级

• 标题+核心属性:价格/时长/作者等决策要素置顶
• 正文详情:图文并茂,讲清楚
• 行动入口:报名/购买按钮,吸顶或固定底栏,始终可达
• 相关推荐:看完后的延续,放底部

🖼️ 图片规则

• 正文每 2-3 段配一张图,打断文字墙
• 图片可点击放大查看
• 数据信息用图表不用纯文字描述
• 商品类:多角度图轮播置顶,正文可省图

按以下布局骨架,结合指定皮肤生成一个详情页:

【骨架模块】
1. 面包屑导航(首页>分类>本页)
2. 标题区:H1标题 + 核心属性(价格/时长/作者)+ 主操作按钮
3. 正文区:PC 左正文右侧栏;正文富文本+配图,侧栏放目录/相关
4. 相关推荐:底部 3 张卡片

【响应式】PC 双栏(正文2/侧栏1);手机纯单栏,侧栏移底部,操作按钮吸底固定

【图片规则】正文每2-3段配图可点击放大;数据用图表;正文宽≤680px

【关键】操作按钮(报名/购买)始终可达,吸顶或固定底栏

何时用

需要用户提供信息时。核心原则:阻力最小化——字段越少越好,能自动填的别让人填,能选的别让人打字。

信息优先级

• 必填核心字段:放最前,最少化
• 分组:相关字段分组(基本信息/联系方式/补充),有清晰小标题
• 校验反馈:实时校验,错在哪提示在哪,别等提交才报错
• 提交:主按钮明显,置底或固定,禁用态清楚

🖼️ 图片规则

• 表单页几乎不用图,保持专注
• 成功页可配一张插画/图标庆祝
• 长表单可配进度条(第 2/4 步)用图形而非文字
• 头像/图片上传字段,用占位圆形框预览

按以下布局骨架,结合指定皮肤生成一个表单页:

【骨架模块】
1. 标题区:表单名 + 一句说明(填这个干嘛)
2. 分组1(基本信息):字段标签 + 输入框,纵向堆叠
3. 分组2(补充信息):单选/多选/下拉
4. 提交区:主按钮,全宽,置底固定

【响应式】PC单栏居中窄宽(≤500px);手机全宽,提交按钮固定底部
【图片规则】几乎不用图,保持专注;成功页可配插画
【关键】字段最少化;实时校验;长表单分步+进度条

何时用

已登录用户的个人主页。一屏内看到"我是谁、我做了什么、我能去哪",是用户在产品里的"家"。

信息优先级

• 身份:头像+昵称,顶部最显眼
• 数据概览:学习时长/积分/订单数等核心指标
• 功能入口:常用功能图标网格(金刚区)
• 内容列表:我的课程/订单/收藏等

🖼️ 图片规则

• 头像:圆形,支持上传替换
• 数据用迷你图表/进度条,不用纯数字
• 功能入口用图标(线性/双色),不用文字按钮
• 背景可加浅色氛围,但别喧宾夺主

按以下布局骨架,结合指定皮肤生成一个个人中心页:

【骨架模块】
1. 用户信息卡:圆形头像 + 昵称 + 简介(居中)
2. 数据概览:3-4个核心数据(学习时长/积分/进度)
3. 功能入口(金刚区):图标网格 4-6 个(我的课程/订单/收藏/设置)
4. 内容列表:我的XX,横向列表项(缩略图+标题+状态)

【响应式】PC数据3-4列入口4-6个;手机数据2-3列入口3-4个
【图片规则】头像圆形;数据用进度条/迷你图表;入口用图标
【关键】一屏看清身份+数据+入口

何时用

用户每天/每次打开 App 先到的页。核心是分发效率:让用户最快到达想去的功能或内容。

信息优先级

• 搜索:顶部,最高频入口
• 活动/推荐:轮播 Banner,运营位
• 核心功能:金刚区图标,最高频 4-8 个
• 内容流:个性化推荐,无限滚动
• 导航:底部 Tab,全站切换

🖼️ 图片规则

• 轮播:16:9,活动/广告图,3-5 张自动轮播
• 金刚区:统一风格图标(线性/面性别混)
• 内容流:缩略图(4:3 或 16:9)+ 标题,图文混排
• 底部 Tab 用图标+文字,选中态高亮

按以下布局骨架,结合指定皮肤生成一个导航型首页:

【骨架模块,从上到下】
1. 搜索栏(顶部固定)
2. 轮播 Banner:16:9 活动图,3-5张自动轮播
3. 金刚区:4-8个核心功能图标网格
4. 内容流:个性化推荐,横向列表项(缩略图+标题),无限滚动
5. 底部 Tab 导航:4-5个,图标+文字,固定常驻

【响应式】PC金刚区8-10个内容多列;手机金刚区4-5个单列内容流
【图片规则】轮播16:9;金刚区统一风格图标;内容流缩略图4:3
【关键】搜索置顶;首屏放最高频功能;底部Tab常驻全站可达