搭骨架
页面结构与布局 · 13 个词条
团队仪表盘
本周增长概览
营收
$84.2k
线索
1,248
转化
6.8%
访客
12.4k
+18% this week
本周待办
6
优化 onboarding 卡片，并补齐搜索面板的状态细节。
项目进展
路线图与完成状态
已完成 9 / 12
设计规范、Demo 和双语词条已经上线。
便当网格
Bento Grid把不同大小的卡片像便当格子一样拼在一起，让重点内容更突出，页面也更有节奏。
设计系统周会
12 张 · 42 分钟整理组件状态页和设计令牌更新记录。
增长面板改版
Dashboard把核心指标聚合进首页，提高首屏扫读效率。
移动端引导流
Prototype优化三步 onboarding 的说明层级和 CTA 比重。
组件词条拍板
Review统一 FAQ、Hero、Footer 等页面区块命名。
视觉素材池
Assets补充官网首屏、团队协作和数据分析场景图。
本周进展
+18%发布 6 个新 demo，双语校对基本完成。
瀑布流布局
Masonry Layout把不同高度的内容块按列往下接，像砖墙一样往下铺，能更省空间。
定位演示
滚动内容区，对比 sticky 和 fixed。
产品信息流
Sticky 工具栏属于这块滚动内容，而右下角按钮更像全局悬浮操作。
Sticky 筛选栏
滚到顶部后吸住
筛选栏
Sticky 会先留在内容流里，滚到阈值后才吸住顶部。
灵感流
往下滚动内容区，可以看到筛选栏停在顶部边缘。
备注
右下角的客服按钮会始终停在可视区域里，不跟内容一起走。
发布清单
和当前区块强相关的控件更适合 sticky，全局操作更适合 fixed。
团队动态
如果父级开了错误的 overflow，sticky 往往会直接失效。
走查结果
Fixed 还要留意 z-index，否则容易被内容盖住。
粘性定位 vs 固定定位
Sticky vs FixedSticky 是滚到某个位置后再吸住，Fixed 是从头到尾都钉在视口上。两者看起来都像“固定住了”，但触发时机完全不同。
把模糊需求翻成准确组件
设计师说大白话，前端也能快速对上真名、别名和常见误叫法。
落地页预览
Hero + 搜索框 + 实时演示
首屏
Hero页面打开后第一眼看到的核心区块，通常放主标题、副标题、主按钮和关键视觉，用来快速讲清价值。
现在就把需求说准
从“这个像官网第一屏那块”开始，快速翻到 `hero`、`cta`、`faq` 这些真名。
行动召唤区
CTA用来推动用户采取下一步行动的区块，通常会把标题、价值点和按钮集中起来，放在关键转化节点。
ViboDesign
帮设计师和前端把组件需求说清楚，也让 AI 更容易听懂。
Explore
首页
搭骨架
摆内容
Support
FAQ
易混对比
关于我们
© 2026 ViboDesign. All rights reserved.
页脚
Footer页面最底部的收尾区块，通常放品牌说明、补充导航、版权和联系方式，帮助用户在结束浏览前完成补充动作。
把模糊叫法翻成真名
适合设计系统、官网和组件库团队统一语言。
Header
组件真名
Hero
组件真名
FAQ
组件真名
顶部导航布局
Top Nav Layout把主要导航放在页面最上方，下面铺主内容区域的经典页面结构，适合官网、工作台和管理后台首页。
词条工作台
本周新增 18 个组件词条
待补 Demo
6
已上线
74
最近更新
- • FAQ demo 改成真实问答
- • Header 增加首页导航
- • Hero 图换成真实预览图
左侧栏布局
Sidebar Layout把层级导航固定在左侧，把主要工作内容放在右侧的页面结构，适合文档、后台和复杂工具。
AI 组件词典
从首屏、FAQ 到 CTA，用一页把常见官网区块说明白。
Hero
讲清价值和主按钮
Feature Grid
展示核心能力和卡片
FAQ
回答最常见问题
CTA
在页尾推动转化
单页滚动布局
Single Page Layout把相关内容按阅读顺序排在同一长页面里，用户通过滚动完成浏览，适合落地页和产品介绍页。
Hero 是什么？
Hero 是页面首屏区，不只是一个大 banner 图。
常见别名
首屏、主视觉区、首页第一屏。
Prompt 示例
做一个包含标题、副标题、主按钮和视觉图的 hero 区块。
文档三栏布局
Doc Layout同时展示整站目录、正文内容和当前页大纲的三栏结构，适合文档站、设计系统和知识库。
