未来设计趋势-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 中,所有元素都有固定的大小和位置,在结构清晰的同时也限制住了设计的创新性。

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

发布时间:2024-01-16
其他阅读

Apple网页中滚动效果

打开Apple官网查看iPhone页面,我们可以看到一个特殊效果,当你滚动鼠标时,页面不出现滚动效果,但内容却在变化。现在,基于 position : sticky 可以很容易实现这个效果。

查看原文

WPF中CornerRadius是什么属性

在WPF中,CornerRadius 属性我们经常需要使用到,它的作用是用来设置控件的四个圆角,在 BorderButton 等控件中使用。等同于 css 中的 border-radius 设置。

查看原文

Web前端中实现自定义右键菜单

在原生的桌面应用中,右键菜单是个很常见也很常用的东西,但是在Web应用中,由于浏览器自带了右键菜单,所以我们很少见到应用有自己的右键菜单,但不常见并不代表没有,本文就会介绍一个右键菜单的实现。

查看原文

Linux中查看,添加,修改,删除用户和用户组

将用户分组是Linux系统中对用户进行管理及控制访问权限的一种手段。某个用户都属于某个用户组;一个组中可以有多个用户,一个用户也可以属于不同的组。当一个用户同时是多个组中的成员时,登录时所属的为默认组,而其他组称为附加组。本文将会介绍在 Linux 中查看,添加,修改,删除用户和用户组,注意:权限管理非常重要,可能一不小心就导致系统无法登录,请谨慎操作

查看原文

自驾环游抚仙湖

抚仙湖作为云南第三大湖,以前只去过北边几个开发比较好的区域,周末闲来无事,准备自驾完整地环湖一圈,从呈贡出发,沿着国道开到澄江,然后环湖一圈,经过江川后再到澄江,吃完饭后回到呈贡。

查看原文