用途
Astro UX 是一套面向 Astro 获客型(lead generation)网站的 UX 模式与区块模板技能,主要用于页面区块设计。它提供各类常见落地页区块的设计规范与模板,帮助在 Astro 项目中构建结构清晰、转化导向的页面。
核心规则
- 移动优先设计:以 375px 为基准,向上扩展。
- 清晰的视觉层级:每个视口只保留一个主 CTA。
- 先建立信任再索取信息:在表单之前展示社会证明。
- 最小化摩擦:短表单、清晰标签。
- 可访问性:支持键盘导航、焦点状态、对比度。
区块类型
转化区块
| 区块 | 用途 | 关键元素 |
|---|---|---|
| Hero | 第一印象 + CTA | 标题、副标题、CTA、信任徽章 |
| CTA Banner | 页面中部转化 | 标题、按钮、紧迫感 |
| 表单区块 | 线索捕获 | 表单、收益点、信任 |
| 最终 CTA | 最后机会 | 总结、强 CTA |
信任区块
| 区块 | 用途 | 关键元素 |
|---|---|---|
| 客户评价 | 社会证明 | 引语、姓名、照片、星级 |
| Logo | 权威性 | 客户/合作伙伴 Logo |
| 数据统计 | 可信度 | 数字、背景说明 |
| 评价 | 第三方证明 | Google/Trustpilot 评价 |
内容区块
| 区块 | 用途 | 关键元素 |
|---|---|---|
| 功能 | 收益点 | 图标、标题、描述 |
| 运作方式 | 流程 | 编号步骤 |
| FAQ | 异议处理 | 问题、回答 |
| 关于 | 信任建设 | 故事、团队、价值观 |
移动端模式
- 粘性移动 CTA 条
- 拇指友好按钮(最小 44px)
- 可折叠导航
- 触屏友好表单输入
页面流转
Hero(含 CTA)→ 信任信号(Logo/数据统计)→ 功能/收益 → 社会证明(客户评价)→ 运作方式 → CTA Banner → FAQ → 最终 CTA → 页脚
相关技能
- section-skeleton — 组件结构
- page-structure — 区块排序
- astro-components — UI 组件
完成标准
- 移动优先响应式
- 清晰的 CTA 层级
- 表单前有信任元素
- 可访问(已检查 a11y)
- 快速加载(视口内无重型资源)
适用场景与限制
该技能适用于 Astro 获客型网站的页面区块设计与结构规划,尤其是需要兼顾移动端体验与转化率的落地页。资料未提供具体安装命令、代码示例、收费信息或平台限制,相关内容暂未提供。