Bento Grid

ベントーグリッド / 2020s / 版面 / 信息设计

把不同种类的信息分装进各自独立的方格，让全貌一眼可见。

Bento Grid — AI 生成的诠释图像 1 — AI 生成的诠释图像（并非参考作品）

Bento Grid — AI 生成的诠释图像 2 — AI 生成的诠释图像（并非参考作品）

Bento Grid — AI 生成的诠释图像 3 — AI 生成的诠释图像（并非参考作品）

快速判断

视觉特征

大小不一的卡片
对齐的间隙
一屏概览
模块

适用场景

把多项功能讲成一个故事
在保持信息量的同时显得亲切

使用这一风格

把简短指引带入项目，或将结构化规格交给AI工具。

design.md 图像提示词 JSON API MCP与机器入口组合

在 ChatGPT 中打开在 Claude 中打开在 Google AI 中打开

详细方法与出处制作规则、真实案例、比较、研究与引用格式

辞典词条

字体: 平实的无衬线体，把数字与短标题放大
版面: 在四到六栏里铺满大小卡片
材料: 每一块面承担不同角色，装饰只留在卡片内部
注意: 不要把所有卡片做成一样，按重要程度改变面积与密度。
延伸阅读: modular dashboard layouts / product storytelling grids

相关词条

Swiss (スイス・スタイル)共同感受：Trust。比较Bento Grid与Swiss
Glassmorphism (グラスモーフィズム)作为有意义的对照由编辑建立关联。比较Bento Grid与Glassmorphism

继续浏览信息设计

从信息设计中按共同感受优先推荐以下词条。

Isotype (アイソタイプ)共同感受：Trust / Technique / Intimacy。
Pictogram System (案内用ピクトグラム)共同感受：Trust / Technique / Intimacy。
Schematic Transit Diagram (スキーマティック路線図)共同感受：Trust / Technique。

查看信息设计全部词条

引用此条目

这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。

Link: https://indexstyle.org/zh/styles/bento-grid
Markdown: [Bento Grid — IndexStyle](https://indexstyle.org/zh/styles/bento-grid)
HTML: <a href="https://indexstyle.org/zh/styles/bento-grid">Bento Grid — IndexStyle</a>

返回索引中的位置