BentoUI 设计风格科普 | 原来叫这名儿 |
发布:2023/8/28 来源: 作者:蓝星设计培训机构 浏览:702次 |
分享下近期比较流行的Bento UI或者说Bento Box设计风格,以及一个设计小案例实操
目录 Part.1 这是什么风格? Part.2 风格特点 Part.3 优势和劣势 Part.4 如何应用 Part.5 总结 Part.1这是什么风格?Bento Box(便当盒)源自日本,指的是一餐被分成各个组成部分并装在盒子里的饭盒。而由此命名的Bento UI或者说Bento Box设计风格,是通过将用户界面划分为明确的部分或区块,类似于传统的便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。 不管是微软的Metro UI,苹果的宣传片和网页,以及近期比较火的另一种设计风格“Linear风”的Linear官网中,都可以看到Bento Box风格的身影。 Part.2风格特点上文提到,Bento Box设计风格是一种以传统日本便当盒为灵感的设计风格,就像便当的隔层一样,将界面划分为多个隔间,通常结合“卡片”的表现形式,因此具有以下特点: 分隔的布局 Bento Box设计风格通过明确的分隔和隔层来组织界面。每个隔层通常用于放置特定的内容、功能或模块,使界面具有结构性和组织性。 清晰的分类通过将不同类型的内容或功能放置在各自的隔层中,实现了内容的清晰分类。这样,用户可以更快速地找到所需的信息或功能,提高了用户体验的效率和直观性。 视觉层次 视觉上一般通过大小、颜色、形状或样式等视觉元素来创建层次感,这种层次感可以帮助用户理解界面中不同元素的重要性和关系,并引导他们的注意力和操作逻辑。 直观的引导 Bento Box设计风格经常在每个隔层中提供可见的引导元素,如链接或按钮,使用户可以轻松地在不同内容之间交互、浏览,简化了界面对用户引导的方式和过程。 响应式布局 采用简单的网格布局,可以很好的适应不同的屏幕尺寸和设备,从而在开发中实现响应式布局,提供一致的用户体验。 Part.3优势和劣势优势
结构清晰
可扩展性
可视性强 劣势
限制设计创意
信息密集度
适应性挑战 Part.4如何应用内容判断首先需要分析、判断当前内容是否满足设计需要。当然,形式服务于内容,尽量不要为了某一风格去强行适配;关于是否可以使用该风格,在内容维度上划分了三个等级:完全满足、需要处理、不符合。
完全满足
需要处理
不符合 案例解析OK,我们从拿到内容开始,划分三步!um... 就拿珠峰的百度百科简单做一个网站首页吧。 在拿到内容后,不管是简单的还是复杂的,都可以使用以下方式进行梳理,最近搬家时用了很多纸箱来分类、收纳东西,那就叫它“纸箱归纳法”吧。
第一步:信息归纳
第二步:设计布局 进一步处理归纳的内容,使其符合页面的展示和交互逻辑。除了区分好内容的层级,可以构思一下“隔间”内的交互方式,以更好的表达内容,同时增加页面的趣味性。
第三步:样式设计 Part.5总结Bento UI或者说Bento Box设计风格,灵感源于便当盒,通过将用户界面划分为明确的部分或区块,类似于便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。
作者:NeilLeeeee 链接:https://www.zcool.com.cn/article/ZMTU3MzcwNA==.html 来源:站酷 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 |
【字体:大 中 小】 【关闭窗口】 |
上一篇:混到30岁才知道的顶级思维!读懂5条以上的都成了设计界大佬! 下一篇:Arial 是“坏”字体吗?一文读透 Helvetica 与 Arial 两大经典字体之异同 |
TIME: 2024/7/1 10:27:154
TIME: 2024/7/1 10:26:044
TIME: 2024/7/1 10:24:184
TIME: 2024/7/1 10:22:114
TIME: 2024/7/1 10:20:294
TIME: 2024/7/1 10:19:184
TIME: 2024/7/1 10:18:284
TIME: 2024/7/1 10:16:484
您还在迷茫不知道要干什么吗?选择蓝星室内设计培训学校解决您的就业创业难题