猪头少年 - 云南AI专家 - 云南独立开发者
全部文章

Engineering note

未来设计趋势-Bento Layout/便当布局

前几天找网站设计的灵感的时候,发现一个介绍2024年网站设计趋势的视频,里面介绍了一个叫 Bento Layout 的趋势,今天就给大家分享一下什么是 Bento Layout,中文称为“便当布局”。

什么是Bento

Bento 一词来源与日本,写作“弁当”,中文翻译叫做“便当”。主要是指外出是用盒子装着饭菜,便当盒内部会有明确规划好的格子,用来将食物进行分类盛装。一个典型的便当如下图所示。

https://static.scung.cn/d5d8ed54-fab5-4f25-927c-64cca469b4af.jpg

什么是 Bento Layout

上面介绍了什么是 Bento 之后,Bento Layout 顾名思义,就是以便当盒为灵感的设计布局方式,将众多的元素通过特定的区块进行区分,区块有明确的界限和大小,使用起来简单高效。

有很多的 Bento Layout 的实践,例如 Windows OS 开始菜单的磁贴,iOS 上的小组件,苹果公司用来介绍设备的网页都是使用的这种布局,还有一个建立个人主页网站也是基于这种布局,该网站甚至就是以 Bento 来命名,详细内容可以查看这里。

https://static.scung.cn/45f61f1f-bf10-4778-a9d2-2ad679f1b60c.png

Bento Layout 的优缺点

所有的设计都有其优势和劣势,Bento Layout 也不例外,要根据业务灵活切换设计风格。

优势

1、结构简单清晰

Bento Layout 的设计中存在着明确分隔界限,元素内容一目了然,用户可以快速浏览并理解页面的所有内容。

2、容易扩展使用

Bento Layout 建立在基础的表格布局之上,以卡片来承载内容,可以轻松的在不同的设备上建立响应式页面。

3、视觉效果优秀

Bento Layout 看起来更加现代化,其中每个元素都以独立卡片的形式呈现,具有清晰的边界,用户可以清楚地分辨不同的内容。

劣势

1、信息量爆炸

由于 Bento Layout 中所哟䣌内容都压缩到一个容器之中,做的不好就会导致信息密度过大,元素拥挤,影响用户的体验。

2、结构单一,不容易做出创新

在 Bento Layout 中,所有元素都有固定的大小和位置,在结构清晰的同时也限制住了设计的创新性。

写不动了,设计和实现后面再补上。

继续阅读

从文章索引继续。

这篇文章暂未归入核心专题;你仍可从全部文章中找到下一篇相关内容。

选择一条专题路线

Keep reading

相关文章

我做了一个 JSON 工作台:14 个功能,全部在浏览器本地跑继续阅读 电子印章怎么做:印章制作 + PDF 盖章骑缝章完整流程继续阅读 2026 最新 Windows 桌面应用发布免费代码签名指南:上架 Microsoft Store,使用 MSIX 分发继续阅读 我为什么做 Winsaa继续阅读

Next step

不要停在单篇文章。

沿主专题继续阅读,查看同一问题从概念到实战的完整路径。

选择一条专题路线