Bento 便当格Bento Grid
设计风格用大小不同的网格卡片组织并列信息
Bento 布局把功能和卖点分进大小不同的卡片，重要内容占更大区域，补充信息放进小格。列数、圆角和卡片数量没有固定答案，手机上通常需要重新排序和减少列数。
COACHTake a 12-minute walk
before your next call.
before your next call.
5 days
设计原则 · Principles
- 一格围绕一个主题：可以包含标题、说明和操作，但不要把无关信息硬塞在一起快
- 卡片大小反映优先级：大格展示核心内容，小格补充信息；具体跨度由网格和屏幕决定
- 圆角和间距遵循同一套尺度：数值跟随品牌与卡片尺寸，不必固定在 16～24px
- 格内信息保持可扫读：图标、大字或一句话只是常见组合，关键是层级清楚并留出操作空间18 小时续航够用一整天
- 颜色用来分组或强调：不要求灰底白卡，也不限制深色卡数量，但要保持整体对比和一致性
什么时候用
- 产品功能总览，同时展示多个并列能力
- 规格比较，让重点指标占据更大区域M4 芯片10 核 CPU · 18h 续航 · 38 万亿次算力
- 应用功能页，在一页说明主要能力功能页
- 仪表盘首页，组合指标、图表和快捷入口
什么时候不用
- 在小卡片中放置长段正文，增加阅读负担
- 卡片大小没有优先级，只追求随机变化
- 卡片数量过多，用户无法快速扫读
- 按顺序进行的流程被拆成互不相关的格子第一步 → 第二步 → 第三步
组成结构 · Anatomy
不均匀网格
圆角 16-24px
统一格距
格内三件套
灰底白格
1不均匀网格Grid用不同跨度表达优先级；小屏重排后仍要保持阅读顺序
2统一圆角Radius卡片圆角来自项目尺度，并与卡片大小和品牌气质协调
3统一格距Gap一致间距帮助看出同一组；需要分组时可以使用更大的组间距
4可扫读内容Content标题、说明、数据和操作按优先级组织，不用强求固定三件套
5画布与卡片Canvas示例用浅灰底托白卡；其他主题也可以，只要边界和对比清楚
AI 提示词 · Prompt
Bento 便当格布局，不均匀卡片网格，一格一个卖点，圆角 20px，浅灰底白卡，格内图标+大字+一句文案，大小格子错落，bento grid layout, uneven card sizes, one feature per cell, rounded 20px corners, light gray canvas white cards, airy cell content典型使用场景
发布会式规格墙
M4 芯片，快到离谱。
每一项，都强一项。
中央处理器10 核 CPU
性能提升 1.6 倍
性能提升 1.6 倍
18h
电池续航
38 万亿
每秒神经网络运算
硬件光追
游戏画面直逼主机
App 功能总览页
Paws 能做什么猫咪生活，一个 App 全包
喂食提醒
疫苗记录
4.2kg本月体重曲线 ↗ 健康
App Store 下载 →
SaaS 特性区
FEATURES
为团队速度而生的四件事
⌘K 指令面板
不碰鼠标，一句话直达任何页面、任何操作。
50ms
每一次交互的响应上限
实时协作
多人光标同屏可见
AI 自动整理
零散任务自动归入迭代，周报自动写好草稿。
个人主页 bento
小狸
独立开发者 · 深圳
正在播放夜航星
博客
GitHub
每周通讯1,204 位订阅者