什么是BentoUI设计风格?含Bento案例实操分享设计达人

BentoBox(便当盒)源自日本,指的是一餐被分成各个组成部分并装在盒子里的饭盒。而由此命名的BentoUI或者说BentoBox设计风格,是通过将用户界面划分为明确的部分或区块,类似于传统的便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。

不管是微软的MetroUI,苹果的宣传片和网页,以及近期比较火的另一种设计风格“Linear风”的Linear官网中,都可以看到BentoBox风格的身影。

上文提到,BentoBox设计风格是一种以传统日本便当盒为灵感的设计风格,就像便当的隔层一样,将界面划分为多个隔间,通常结合“卡片”的表现形式,因此具有以下特点:

分隔的布局

BentoBox设计风格通过明确的分隔和隔层来组织界面。每个隔层通常用于放置特定的内容、功能或模块,使界面具有结构性和组织性。

通过将不同类型的内容或功能放置在各自的隔层中,实现了内容的清晰分类。这样,用户可以更快速地找到所需的信息或功能,提高了用户体验的效率和直观性。

视觉层次

视觉上一般通过大小、颜色、形状或样式等视觉元素来创建层次感,这种层次感可以帮助用户理解界面中不同元素的重要性和关系,并引导他们的注意力和操作逻辑。

直观的引导

BentoBox设计风格经常在每个隔层中提供可见的引导元素,如链接或按钮,使用户可以轻松地在不同内容之间交互、浏览,简化了界面对用户引导的方式和过程。

响应式布局

采用简单的网格布局,可以很好的适应不同的屏幕尺寸和设备,从而在开发中实现响应式布局,提供一致的用户体验。

结构清晰BentoBox设计风格通过明确的分隔和布局,为界面提供了清晰的结构,使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中,有助于提高信息的可读性和可理解性。

可扩展性BentoBox设计风格可以适应不同的屏幕尺寸和设备,因为隔层的大小和位置可以根据可用空间进行自适应调整。这种可扩展性使得界面在各种设备上都能提供一致的用户体验。

可视性强每个隔层的独立性和清晰的边界使得界面元素更加突出和易于识别。用户可以快速注意到不同的功能和内容模块,从而提高了界面的可视性和可用性。

限制设计创意BentoBox设计风格的严格分隔和布局可能会限制一些设计创意和自由度。这种结构化的布局方式可能不适用于一些需要更自由、不规则或创新的设计风格(适当打破边界的创新也许会有意想不到的效果)。

信息密集度由于BentoBox设计风格倾向于在有限的空间中组织大量的功能和内容,界面可能会显得信息密集。这可能导致一些界面看起来拥挤,需要仔细处理和平衡,确保用户不会感到混乱。

适应性挑战由于依赖隔层的大小和位置来构建视觉的层次结构,对于不同类型的内容和功能可能需要进行仔细的权衡和调整。处理复杂的界面和内容结构时,需要更多的设计和布局的灵活性。

首先需要分析、判断当前内容是否满足设计需要。当然,形式服务于内容,尽量不要为了某一风格去强行适配;关于是否可以使用该风格,在内容维度上划分了三个等级:完全满足、需要处理、不符合。

完全满足即可以直接使用BentonBox设计风格的内容,大致有以下特点:a.内容简洁;b.逻辑清晰;c.划分明确。

需要处理这种情况是遇到最多的,一般表现为内容有层级,但是比较多;有逻辑,但是比较复杂;各个模块之间有划分,但是边界不清晰,此时需要我们对其进行信息处理(下面会讲到实际操作方法)。

不符合对于不符合的情况,大多内容不通顺,甚至没有逻辑,不管使不使用BentoBox的设计风格,它都存在问题,都需要对其进行信息的处理。

在拿到内容后,不管是简单的还是复杂的,都可以使用以下方式进行梳理,最近搬家时用了很多纸箱来分类、收纳东西,那就叫它“纸箱归纳法”吧。

第一步:信息归纳

第二步:设计布局

处理好信息后,就可以开始进行页面的布局了,也就是所谓低保真原型阶段。根据自己的构思,确定是100%铺满屏幕的形式还是做一个限定在最小宽度的,都可以。然后分好模块的主次先后,开始绘制!

进一步处理归纳的内容,使其符合页面的展示和交互逻辑。除了区分好内容的层级,可以构思一下“隔间”内的交互方式,以更好的表达内容,同时增加页面的趣味性。

第三步:样式设计前面都做好以后,基本就差不多了,大展身手开始设计样式吧!尽量贴合内容设计,减少不必要的元素干扰,如果是其他潮流向的风格或想更创新一些的话,可以斟酌考虑,这里仅做简单的案例参考。

BentoUI或者说BentoBox设计风格,灵感源于便当盒,通过将用户界面划分为明确的部分或区块,类似于便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。

BentoBox设计风格以其结构化的布局、清晰的分类、简化的导航和视觉层次等特点,为用户界面带来了更好的组织、易用性和美观性。同时也带来了一些挑战,比如在创意和自由度方面会产生一些限制,且需要平衡信息的密度和层次等。

THE END
1.拓者设计吧室内设计室内设计师拓者设计吧(TuoZhe8),中国室内设计师互动平台。深耕设计领域十二年,拓者吧聚集了400万设计师、室内设计师、效果图设计师、软装设计师、装修设计人,设计创意群体中具有较高的影响力与号召力!https://www.tuozhe8.com/
2.安装Adobe应用程序的插件扩展和加载项开始前,请确保您的应用程序版本支持该扩展。请在下方选择您的操作系统并按照步骤安装扩展。有关更多信息,请参阅从命令行工作。 选择操作系统 Windows macOS Catalina 10.15 macOS(早期版本) 常见问题解答 我在安装插件或扩展时遇到问题。我该怎么办? 如何卸载插件或扩展? https://helpx.adobe.com/cn/creative-cloud/kb/installingextensionsandaddons.html
3.拓展设计吧素材网站图片免费下载共有1166247个拓展设计吧相关内容为您呈现 设计拓展吧 优之采 拓展坞设计 3 疯风 多合一拓展坞设计 59 DragonTan 生姜切丝 拓展坞×详情页设计全案 2 玉子芋头 亚马逊主图设计a 乐怡君要坚持 跨境电商 亚马逊主图设计案例 拓展坞渲染设计 16 亚马逊拍照设计 https://www.zcool.com.cn/tag/ZNTM3OTM2NA==.html
4.扩初设计包括哪些内容扩初设计包括哪些内容 今天来给大家分享一下关于扩初设计包括哪些内容的问题,以下是对此问题的归纳整理,让我们一起来看看吧。 扩初设计包括哪些内容 扩建设计是建筑设计的重要环节,是建筑设计的第一步,也是最关键的一步。最初的扩展设计包括什么?下面就一个一个介绍吧。https://www.opabc.com/youxi/166946.html
5.Invision官方出品!超全面的「设计系统」构建指南(一)用系统思维扩展设计 你可能已经清楚地意识到,设计系统已经成为当今软件行业的一个热门话题,并且理由也很充分。很多企业投资设计系统,因为他们认识到产品体验能够带来竞争优势,不仅能吸引和留住客户,更降低产品学习成本。 在重视设计系统的公司内部,通常能看见这种情况: https://www.uisdc.com/design-system-1
6.闲来无事,弄个“纯CSS”的伪3D柱状图吧~在这个过程中也算是有一些比较有意思的效果,今天先弄一个 “伪3D” 的柱状图吧。 样式设计 UI 给的稿子上,通常会带有一些“细微”的样式,用来提高观赏性,但是这里为了加快速度,我们就先实现一个比较 “比较纯粹” 的柱状图。 首先上效果图: 网络异常,图片无法展示 https://developer.aliyun.com/article/1117130
7.“吉祥物设计”扩展知识: 北京2022冬奥会吉祥物“冰墩墩”以熊猫为原型进行设计创作,墩墩意喻敦厚、敦实、可爱,契合熊猫的整体形象,象征着冬奥会运动员强壮有力的身体、坚韧不拔的意志和鼓舞人心的奥林匹克精神! 2022年北京冬奥会吉祥物——“冰墩墩” 大熊猫已在地球上生存了至少800万年,被誉为“活化石”和“中国国宝”,近年来https://www.meipian.cn/2u7ynvd2
8.咖啡店策划书(精选7篇)2、要确定咖啡店的经营形式,是纯咖啡馆,还是咖啡+简餐(酒水)的咖啡吧。我感觉最好建成是含简餐和酒水的咖啡吧。 四、给店面起名、设计店面标志、店面形象设计方案(装修方案) 1、吧台设计、厨房设备及机器定位上有考量的基础。 2、座位数、经济规模(坪数)。 https://www.ruiwen.com/cehuashu/7411084.html
9.码分多址(CDMA)的本质正交之美码分多址技术2.长途旅行中,你很困,旁边的两个家伙叽叽喳喳说个不停,如果他们使用你听不懂的语言,你照样能睡着,但是如果他们说的是普通话,那你就完蛋了,那就忍耐吧 三.该我们自己设计了 大自然已经设计了我们的大脑这种高度复杂的“码分多址设备”,我们当然使用这个设备也能造出一个克隆体,如果我们就是上帝,那么我们希望造https://blog.csdn.net/dog250/article/details/6420427
10.尧字歌教案同学们,今天咱们学习了听了古代帝王尧的故事,还学了以尧为声旁的形声字。其实,咱们中国方块汉字的魅力还远不止这些,有机会再带领大家来探索吧。 课堂作业新设计: 1.比一比再组词。 晓( )饶( )挠( )线( ) 烧( )浇( )绕( )绕( ) 附答案: https://www.jy135.com/jiaoan/865705.html
11.新课标版四年级上册数学《沏茶问题》教案(通用13篇)5. 师:现在,请同学们以小组为单位,先交流讨论之后把你的设计方案用你喜欢的`方式写在练习本上,并算算你们的安排需要多长时间? 6. 动手操作,主动探究: (1) 学生动手摆出方案,师巡视 (2) 学生展示,介绍自己的安排,和所用时间 预设: A:洗水壶(1分钟)→接水(1分钟)→烧水(8分钟)→沏茶(1分钟) https://www.fwsir.com/jiaoan/html/jiaoan_20240523160041_3851301.html
12.哪种人是软件设计中的稀缺型人才?有扩展性需求的时候 可扩展设计,主要是利用了面向对象的多态特性,所以这里的接口是一个广义的概念,如果用编程语言的术语来说,它既可以是Interface,也可能是Abstract Class。 这种扩展性的诉求在软件工作中可以说无处不在,小到一个工具类。例如,我现在系统中需要一个开关的功能,开关的配置目前是用数据库做配置的,但https://www.51cto.com/article/605578.html
13.幼儿园教案:《找朋友》(通用15篇)3、 我们要多吃ji蛋,ji蛋营养好。我们到教室里品尝一下ji蛋的美味吧! 设计意图: 1、根据主题《我们爱吃的食物》教师预设了这样一个活动。通过活动扩大幼儿的认知经验和发展幼儿的观察能力。 2、在活动中环节中设计了区分归类这一内容,初步融入粗浅的数学内容,做到学科的整和。 http://mip.yuwenmi.com/jiaoan/youeryuan/3800569.html
14.扩展语句范文8篇(全文)值得注意的是,扩展的要求一定要体现思维和语言的训练,换一句话说学生思维和语言的训练是通过扩展要求的引导来完成的。所以在设计扩展要求时一定要体现层进性,让学生的思维在比较中逐渐走向深入,让学生在反复运用中逐渐熟悉各种表达方式、表现手法的特征与作用。https://www.99xueshu.com/w/ikeych2madyk.html
15.简单的教学设计思路写法扩展资料: 教学设计思路的原则: 1、系统性原则:教学设计是一项系统工程,它是由教学目标和教学对象的分析、教学内容和方法的选择以及教学评估等子系统所组成,各子系统既相对独立,又相互依存、相互制约,组成一个有机的整体。在诸子系统中,各子系统的功能并不等价,其中教学目标起指导其他子系统的作用。 https://www.oh100.com/kaoshi/jiaoxuesheji/396809.html
16.FEMAPv12注册破解版专业有限元分析软件SiemensFE新的解决方案功能包括支持用于NX Nastran多端非线性分析和拓扑优化的端口,具有扩展的设计优化功能。新版本的特色是交互式控制和更清晰的模型查看,改进的工作流程和增强的建模工具以及扩展的仿真应用范围新的解决方案,功能包括支持NX Nastran多步非线性分析以及具有扩展设计优化功能的拓扑优化。Femap版本12针对几何创建和操作http://www.sd173.com/soft/7647.html