layouts

Vibe Design 布局框架

为后台、工作台与官网提供可复用的页面骨架,先选型再修改业务模块;点击预览图查看示例,配合 VibePM 工具包时还原效果最好。

3 类框架 28 项
查看设计系统风格预览 开通会员获取工具包
侧栏框架Sidebar15 顶栏框架Navbar12 站点框架Site5

侧栏框架Sidebar

15 个框架

用纵向结构组织产品导航、工作区分组与账号入口,支持层级展开、收起成图标轨、窄屏抽屉,以及侧栏内的提示、底槽与右侧边栏。

侧栏通顶 app-sidebar · 结构
查看示例
灰栏工作台 app-sidebar-stage · 结构
查看示例
侧栏留白 app-inset · 结构
查看示例
窄轨二级 app-inset-stage · 结构
查看示例
图标双轨 app-dual-rail · 结构
查看示例
文字双轨 app-icon-rail · 结构
查看示例
图标岛侧栏 app-icon-island · 结构
查看示例
默认图标轨 app-sidebar · 变体
查看示例
侧栏提示卡 app-sidebar · 变体
查看示例
侧栏底用量 app-sidebar · 变体
查看示例
侧栏底账号卡 app-sidebar · 变体
查看示例
侧栏底任务 app-sidebar · 变体
查看示例
侧栏底消息 app-sidebar · 变体
查看示例
筛选工具条 app-sidebar · 变体
查看示例
右侧边栏 app-sidebar · 变体
查看示例

顶栏框架Navbar

12 个框架

用通栏组织品牌、全局搜索与账号操作。可叠加多层工具条、区域切换、筛选与右侧边栏,也可去掉侧栏做成全宽顶栏。

通栏顶栏 app-topnav · 结构
查看示例
顶栏模块导航 app-module-nav · 结构
查看示例
无侧栏通栏 app-top-only · 结构
查看示例
顶栏全局菜单 app-top-menu · 结构
查看示例
双层顶栏 app-stacked-nav · 结构
查看示例
图标岛顶栏 app-top-island · 结构
查看示例
筛选工具条 app-topnav · 变体
查看示例
通栏多页签 app-topnav · 变体
查看示例
模块导航多页签 app-module-nav · 变体
查看示例
分类标签 app-module-nav · 变体
查看示例
右侧边栏 app-topnav · 变体
查看示例
右侧工具栏 app-topnav · 变体
查看示例
区域切换 app-topnav · 变体
查看示例

站点框架Site

5 个框架

面向官网与内容站:通栏或悬浮营销顶、文档目录加正文、居中登录与分栏登录。密度按营销或内容表面,不套控制台侧栏。

营销顶栏页脚 marketing-shell · 结构 · marketing
查看示例
悬浮导航条 marketing-float · 结构 · marketing
查看示例
文档内容壳 docs-shell · 结构 · general
查看示例
登录框架 login-shell · 结构 · general
查看示例
分栏登录 auth-split · 结构 · general
查看示例

Social CTA

关注我们

获取最新设计规范与布局更新,访问官网或联系团队。

Visit us
Vibe Design · 产品协作
VibePM 微信扫码关注公众号 VibePM 公众号二维码
Copyright © www.VibePM.net All rights reserved