腾讯出品!5分钟带你快速了解Bento box设计趋势

导语

Bento box 设计风格或 Bento UI 作为一种设计趋势正在被验证,它近期频繁的出现在大众视野。本文中我们将讨论 Bento box 设计趋势的起源和发展,并结合设计应用案例,让大家感受它的魅力,望此后的应用中,为设计师朋友带来更多灵感和启发。

更多设计趋势分析:

一、什么是 Bento box?

1. 概念简述

大家对便当盒(Bento box)应该很熟悉,印象最深的是日式便当盒,看上去既精致又有食欲,格子用来区分食物,极其讲究组合的美感。Bento UI 就是用户界面如同便当盒的结构,有清晰的区块划分,整齐又整体的将内容排布。

腾讯出品!5分钟带你快速了解Bento box设计趋势

健身社区 App,Purrweb UI/UX Agency

这种设计风格不仅是一个框架,它融入了极简主义和东方传统美学,将功能与美感推向一个全新的体验。它追求简单直接的解决方案,让用户能够轻松理解并操作。

腾讯出品!5分钟带你快速了解Bento box设计趋势

企业资源规划客户端,Arounda UI/UX

2. 发展的助推器

Bento UI 让人很容易联想到苹果的 widget,widget 词典释义为"小组件"。2020 年 6 月苹果手机推出了 iOS 14 正式版系统,其中讨论度最高的要数 Widget。苹果强调 Widget 不是进入应用的另一快捷方式,而是一种快速展示用户关心的应用程序数据的信息展示方式。

腾讯出品!5分钟带你快速了解Bento box设计趋势

大众视其为新的流量入口,各大应用抢先适配,多款以时钟、日历、天气功能的小组件应用多次轮番登上 App Store 应用免费榜前列。

腾讯出品!5分钟带你快速了解Bento box设计趋势

腾讯出品!5分钟带你快速了解Bento box设计趋势

灵动岛小组件

在知乎上,一篇关于夸赞苹果 widget 的帖子中,有用户调侃的评论道:看来,你对 Android 手机一无所知。的确,widget 早在 2008 年的 Android 手机系统上就已经广泛应用了:信息类、集合类、控件类、混合类 widget 层出不穷。

腾讯出品!5分钟带你快速了解Bento box设计趋势

Android 系统 Widget

2010 年的 Windows Phone 7 引入 Metro 设计语言系统,这些都可以视为现今 Bento box 设计风格的灵感来源。我们作为设计师,追根溯源会为设计创意开个好头。

腾讯出品!5分钟带你快速了解Bento box设计趋势

Windows Phone 7

二、风格解析

1. 设计特征

  1. 打造具有视觉吸引力的层次感,结构和组织是基石
  2. 基于网格,轻松为各设备创建响应式布局
  3. 内容和功能划分清晰、轻量易用
  4. 简约优雅、现代感十足

随着被行业影响者们采用,不难看出它抓人眼球的原因,无非是设计思维和设计原则运用的恰到好处。

2. 设计思维

①基于便当盒网格布局的设计思维,让用户更专注于每个 Box 里的信息呈现。Bento UI 的设计美学中,核心元素是 Box,你也可以称它为“卡片”、“组件”、“单位”...

腾讯出品!5分钟带你快速了解Bento box设计趋势

任务管理器应用程序,Dmitry Lauretsky

②Bento UI 可以在不同尺寸的设备上,根据空间进行自适应调整,根据网格规则,在多端可以提供一致的用户体验。

腾讯出品!5分钟带你快速了解Bento box设计趋势

图片来自名为 Bento 的产品/一款链接聚合工具

③有组织性的对特定内容或功能进行分化,简约且优雅。

腾讯出品!5分钟带你快速了解Bento box设计趋势

品牌网站设计,Andriy Yurchenko

Bento UI 会给人很自我的感觉,它的每个卡片间都有清晰的边界,使内容更加突出,用户能直观的判断出卡片类型及其功能,方便信息捕捉。

腾讯出品!5分钟带你快速了解Bento box设计趋势

科技公司网站,tubik UX

苹果连续两年的新闻发布会幻灯片,均使用了 Bento UI 来凸显产品的每个特性信息。

腾讯出品!5分钟带你快速了解Bento box设计趋势

2023 年苹果发布会-Apple Watch Ultra

腾讯出品!5分钟带你快速了解Bento box设计趋势

2022 年苹果发布会-Apple Watch Series 8

3. 设计原则

①减少干扰:使用简单有效的设计元素

当对卡片进行操作时,按钮、开关、点赞层作为重要的操作引导元素,无论任何形状,在这个紧凑的空间内,定会得到用户一定的注意力。

腾讯出品!5分钟带你快速了解Bento box设计趋势

加密钱包 APP,Purrweb UI/UX Agency

在紧凑的布局中,有规律和规则的添加多操作,也是对设计师能力的考验

腾讯出品!5分钟带你快速了解Bento box设计趋势

心里健康 App,Purrweb UI/UX Agency

单行或多行的文案根据信息级别,以线和面的视觉形式呈现出节奏的美感。

腾讯出品!5分钟带你快速了解Bento box设计趋势

人工智能网站,Arounda UI/UX

腾讯出品!5分钟带你快速了解Bento box设计趋势

人力资源平台,Awsmd

②重视反馈:微交互加入必要环节

在使用中,被反馈是用户最需要的,也是最基本的交互设计规则之一。反馈动效并非越突出越好、越多越好,也不单纯是为了有趣,要根据使用场景的特征,合理的添加。下图这个输入框回弹动效不难看出设计师的巧思。

腾讯出品!5分钟带你快速了解Bento box设计趋势

必要的操作反馈要讲究克制,细节处打磨够精准,才会让用户眼前一亮。下图中,卡片放置之前,会显示一个灰色格子预判位置;拖拽卡片会模拟物体失重的晃动感,非常自然又充满趣味。

腾讯出品!5分钟带你快速了解Bento box设计趋势

图片来自名为 Bento 的产品,一款链接聚合工具

三、Bento box 的食用须知

1. 克制的艺术

漂亮的日式便当盒最大的特征是食材丰富、食物组合极具形式美感。Bento UI 的卡片类型多样,需要仔细处理和平衡,避免因信息密集导致的阅读压力问题。美感与口感的权衡,这是专属于设计师的克制艺术。

2. 创意的限制

白玉微瑕,Bento UI 也并非完美。在严格的栅格系统上运行,每个单元是一个规矩的矩形,这种严格的布局让异型、破窗等不规则的创新设计很难融入。另外,圆角也是 Bento Box 设计美学的关键。

3. 为你推荐

①Bento grids

如果你渴望更多灵感可以去 bento grids 看看,上面集合了丰富的 Bento UI 应用程序的创意案例: https://bentogrids.com/

腾讯出品!5分钟带你快速了解Bento box设计趋势

②Chronicle

它是一款演示文稿制作工具,官网运用了 bento UI 的设计: https://chroniclehq.com

腾讯出品!5分钟带你快速了解Bento box设计趋势

③Bento

强烈推荐一款比较典型的链接聚合工具网站,使用过程中你会感受到设计的细腻: https://bento.me/en/home

腾讯出品!5分钟带你快速了解Bento box设计趋势

④Nev 的个人网站

一个来自爱尔兰设计师 Nev 的个人网站和 Benro 的设计有异曲同工之处,当你想设计自己的网站时,不妨作为参考: https://nevflynn.com/

腾讯出品!5分钟带你快速了解Bento box设计趋势

⑤Linear

Linear 的官网大面积暗色中流畅克制的微动效,加之无衬线体带来锋利又庄重的专业感,让人惊叹科技感也能如此打造: https://linear.app/

腾讯出品!5分钟带你快速了解Bento box设计趋势

结语

除了满足当前用户需求之外,UI 和 UX 还将承担预测、探索、解决用户新的痛点和期望的持久任务。随着各端的 UI 和 UX 趋势不断发展,设计师需要了解设计趋势,也有责任让设计更进一步,以获得更有用、更直观、更愉快的用户体验。

以上就是 Bento box 设计风格的一些精彩案例,敬请期待下期的分享,感谢你的阅读!

欢迎关注作者微信公众号:「腾讯ISUX」

腾讯出品!5分钟带你快速了解Bento box设计趋势

收藏 165
点赞 67

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。