Bento 便当格Bento Grid
你可能会说
那种大小不一的格子拼在一起的功能介绍区，现在很流行的。
Bento 便当格是一种用大小不同的卡片组织并列信息的网格布局它常把重要功能放进大卡片，把补充数据或次要信息放进小卡片，适合产品总览和仪表盘。列数、圆角和卡片数量没有固定答案，手机上通常需要重新排序并减少列数。
左右滑动查看完整示例
COACHTake a short walk
before your next call.
before your next call.
记录示例
设计原则 · Principles
- 一格围绕一个主题：可以包含标题、说明和操作，无关信息应拆到其他区块
- 卡片大小反映优先级：大格展示核心内容，小格补充信息；具体跨度由网格和屏幕决定
- 圆角和间距遵循同一套尺度：数值跟随品牌与卡片尺寸，不必固定在 16～24px
- 格内信息保持可扫读：图标、大字或一句话只是常见组合，关键是层级清楚并留出操作空间
- 颜色用来分组或强调：不要求灰底白卡，也不限制深色卡数量，但要保持整体对比和一致性
什么时候用
- 产品功能总览，同时展示多个并列能力
- 规格比较，让重点指标占据更大区域M4 芯片10 核 CPU · 18h 续航 · 38 万亿次算力
- 应用功能页，在一页说明主要能力功能页
- 仪表盘首页，组合指标、图表和快捷入口
什么时候不用
- 在小卡片中放置长段正文，增加阅读负担
- 卡片大小没有优先级，只追求随机变化
- 卡片数量过多，用户无法快速扫读
- 按顺序进行的流程被拆成互不相关的格子第一步 → 第二步 → 第三步
组成结构 · Anatomy
不均匀网格
圆角 16-24px
统一格距
内容优先级
灰底白格
用不同跨度表达优先级；小屏重排后仍要保持阅读顺序
卡片圆角来自项目尺度，并与卡片大小和品牌气质协调
一致间距帮助看出同一组；需要分组时可以使用更大的组间距
标题、说明、数据和操作按优先级组织，元素数量由内容决定
示例用浅灰底托白卡；其他主题也可以，只要边界和对比清楚
AI 提示词 · Prompt
为一款新耳机做功能介绍页。用大小不同的模块组织续航、降噪、佩戴和连接体验，每个模块只回答一个问题；先安排阅读顺序，再决定卡片大小。规格和效果只使用已有测试或产品资料，缺少的先标“待补充”，不要补造数据。
典型使用场景
发布会式规格墙
左右滑动查看完整示例
M4 芯片，快到离谱。
每一项，都强一项。
中央处理器10 核 CPU
性能提升 1.6 倍
性能提升 1.6 倍
18h
电池续航
示例指标
说明统计口径与时间范围
硬件光追
游戏画面直逼主机
App 功能总览页
左右滑动查看完整示例
Paws 能做什么猫咪生活，一个 App 全包
喂食提醒
疫苗记录
4.2kg本月体重曲线 ↗ 健康
App Store 下载 →
SaaS 特性区
左右滑动查看完整示例
FEATURES
为团队速度而生的四件事
⌘K 指令面板
不碰鼠标，一句话直达任何页面、任何操作。
响应示例
实际响应指标需注明测试条件与口径
实时协作
多人光标同屏可见
AI 自动整理
零散任务自动归入迭代，周报自动写好草稿。
个人主页 bento
左右滑动查看完整示例
小狸
独立开发者 · 深圳
正在播放夜航星
博客
GitHub
每周通讯1,204 位订阅者
延伸阅读 · 权威出处