木子素材 首页 大神 UI设计 查看内容

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

2023-12-6 06:03| 发布者: admin| 查看: 155| 评论: 0

摘要: 导语 Bento box 设计风格或 Bento UI 作为一种设计趋势正在被验证,它近期频繁的出现在大众视野。本文中我们将讨论 Bento box 设计趋势的起源和发展,并结合设计应用案例,让大家感受它的魅力,望此后的应用中,为设 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

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

导语

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

更多设计趋势分析:

5900字总监级干货!深度分析 C 端设计的发展趋势

现在环境开始变得不一样了。

阅读文章 >

一、什么是 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/

万字干货!帮你完整掌握爆红的Linear风设计风格

一、什么是 Linear 风设计?

阅读文章 >

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

结语

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

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

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

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

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×