一、这是什么风格?
上次看到领导分享的一篇文章正好讲到Banto的设计风格,其实本质就是在固定容器里,划分多个卡片组合,Bento Box(便当盒)源自日本,指的是一餐被分成各个组成部分并装在盒子里的饭盒。而由此命名的 Bento UI 或者说 Bento Box 设计风格,是通过将用户界面划分为明确的部分或区块,类似于传统的便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。
二、风格特点
上文提到,Bento Box 设计风格是一种以传统日本便当盒为灵感的设计风格,就像便当的隔层一样,将界面划分为多个隔间,通常结合“卡片”的表现形式,因此具有以下特点:
1. 分隔的布局
Bento Box 设计风格通过明确的分隔和隔层来组织界面。每个隔层通常用于放置特定的内容、功能或模块,使界面具有结构性和组织性。
2. 清晰的分类
通过将不同类型的内容或功能放置在各自的隔层中,实现了内容的清晰分类。这样,用户可以更快速地找到所需的信息或功能,提高了用户体验的效率和直观性。
3. 视觉层次
视觉上一般通过大小、颜色、形状或样式等视觉元素来创建层次感,这种层次感可以帮助用户理解界面中不同元素的重要性和关系,并引导他们的注意力和操作逻辑。
4. 直观的引导
Bento Box 设计风格经常在每个隔层中提供可见的引导元素,如链接或按钮,使用户可以轻松地在不同内容之间交互、浏览,简化了界面对用户引导的方式和过程。
5. 响应式布局
采用简单的网格布局,可以很好的适应不同的屏幕尺寸和设备,从而在开发中实现响应式布局,提供一致的用户体验。
三、优势和劣势
1. 优势
①结构清晰
Bento Box 设计风格通过明确的分隔和布局,为界面提供了清晰的结构,使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中,有助于提高信息的可读性和可理解性。
②可扩展性
Bento Box 设计风格可以适应不同的屏幕尺寸和设备,因为隔层的大小和位置可以根据可用空间进行自适应调整。这种可扩展性使得界面在各种设备上都能提供一致的用户体验。
③可视性强
每个隔层的独立性和清晰的边界使得界面元素更加突出和易于识别。用户可以快速注意到不同的功能和内容模块,从而提高了界面的可视性和可用性。
2. 劣势
①限制设计创意
Bento Box 设计风格的严格分隔和布局可能会限制一些设计创意和自由度。这种结构化的布局方式可能不适用于一些需要更自由、不规则或创新的设计风格(适当打破边界的创新也许会有意想不到的效果)。
②信息密集度
由于 Bento Box 设计风格倾向于在有限的空间中组织大量的功能和内容,界面可能会显得信息密集。这可能导致一些界面看起来拥挤,需要仔细处理和平衡,确保用户不会感到混乱。
③适应性挑战
由于依赖隔层的大小和位置来构建视觉的层次结构,对于不同类型的内容和功能可能需要进行仔细的权衡和调整。处理复杂的界面和内容结构时,需要更多的设计和布局的灵活性。
总结
Bento UI 或者说 Bento Box 设计风格,灵感源于便当盒,通过将用户界面划分为明确的部分或区块,类似于便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。
Bento Box 设计风格以其结构化的布局、清晰的分类、简化的导航和视觉层次等特点,为用户界面带来了更好的组织、易用性和美观性。同时也带来了一些挑战,比如在创意和自由度方面会产生一些限制,且需要平衡信息的密度和层次等。
未来一段时间我们会看到更多此类设计风格的身影,当设计趋势到来时不免会有被滥用的风险,但 Bento Box 带来的不仅仅是一个设计趋势,还有对信息理解、组织能力的提升。