扁平化设计趋势的兴起与现代设计的变更

2023-12-2909:39:31UI设计Comments611 views字数 1890阅读模式

设计趋势来来去去,但一个普遍的趋势已经流行了很长时间,那就是扁平化设计,现在也几乎是无处不在,UI中的按钮,Logo,图形设计等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

最近感觉设计风向有点变啊,我碰到几个例子感觉挺有意思的,似乎是印证了这波转变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

在这篇文章里,我主要聚焦在UI设计领域,看看设计趋势在这方面都经历了哪些变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

一、扁平化设计趋势是怎么兴起的?

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

2013 年苹果推出 iOS 7 后,扁平化设计火得一塌糊涂,界面设计方向一夜之间发生了转变。虽然苹果也是借鉴了其他制造商已经应用的元素,但其作为行业风向标的影响力依然无人能及。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

从拟物到扁平,iOS 7 带来了革命性的设计语言飞跃,颠覆了之前 iOS 的视觉风格。蒂姆·库克将其称为 “iPhone 以来 iOS 最大的变革”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

看上图就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了许多元素的 3D 效果,整体扁平了很多。其实改成这样是有道理的,毕竟拟物设计当初是为了让用户更快上手新界面,现在大家都习惯了,设计语言也需要更新迭代了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

十年过去了,绝大部分现代界面设计依然在用这种设计语言。然而,随着设计逐渐追求更多复杂性和立体感(是的,又是3D,回到拟物设计),一些方面也开始出现变化。让我们来看看几个近期的例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

值得说的是,尽管苹果公司在引领扁平化设计趋势方面发挥了重要作用,但其实灵感还是来自Windows Mobile 和 Android 等产品。Windows Mobile 才是先在主流制造商中第一个用扁平化设计的大厂。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

对这段历史感兴趣的可以看看这篇10年前写的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

二、Reddit 品牌设计刷新

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

先一起看看最近的一个大厂设计改版案例,Reddit最近刷新了它的Logo。你能从上面的图中看到,相比于旧版,新的设计有了一些3D风格化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

一直以来,扁平化logo是主流,但随着像Pentagram这样的设计大厂都开始探索3D化设计风格,预示着扁平化的时代就快要过去了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

现代的品牌logo设计大多是扁平的,因为这样既清晰易读又方便调整大小。真想看看其他公司接下来会怎么玩品牌设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

三、MacOS Big Sur 图标

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

回到2020年,在那年的11月,苹果刷新了它们的MacOS图标风格。我个人认为,这是在细节设计上搭配更多3D效果这股趋势的源头,我在网上看到了很多这样的讨论。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

从 Big Sur 开始,苹果就在图标上下功夫,给原生应用图标加料,让它们看起来不那么乏味。你看上面那些,阴影也深了,渐变也多了,整个图标更有立体感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

一看苹果都整 3D 了,不少第三方应用开发商也坐不住了,纷纷改起了自家图标,看起来更立体了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

苹果在界面设计上向来引领潮流,这次的新趋势,又不知道多少公司和个人会跟着玩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

四、Airbnb 新版本设计

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

Airbnb在最近的夏冬主题设计更新里,玩了不少 3D 和复杂设计。就拿它们新出的“游客护照”来说吧,图标就跟真“书”似的,点开交互还有翻书动画,贼逼真。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

游客护照打开后,顶部卡片加了阴影,看着更有立体感,一点都不扁了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

Airbnb 在其他地方也玩儿 3D 了,比如“最受欢迎”那个地方,评分都立体起来了,还有那个改版后的“选月份”的按钮,做得跟真表盘似的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

最后,他们冬天的新版本里,插画也搞起了等角投影风格,给你们看下面他们那个新版本宣传片就知道了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

五、Shopify更新了设计系统

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

Shopify 对深受好评的设计系统 Polaris 进行了重大更新,换了套新花样!以前那些扁平的按钮,现在缩小了,还更带感了,按着贼舒服。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

这次重设计也不是瞎改,当初设计团队说扁平化做能让界面干净,理解简单,用着还效率高。可时间一长,商家们就不乐意了,说这界面整得“没劲”、“乏味”还“单调”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

改设计主要是为了把软件界面打造成 “专业工具”,更加高大上。改动之后,按钮在点击时更爽了一些,就像商家们平时在用的物理按键一般。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

扁平化设计趋势的兴起与现代设计的变更文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

探索的2种不同设计风格文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

总结

上面这些案例展示了现代设计趋势的演变,从扁平化设计向更加注重细节的方向过渡。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

扁平化设计固然拥有清晰高效等优点,但现代设计更倾向于展现层次和深度。设计师和开发者应当密切关注这一趋势,并做好准备将相关元素融入自身系统,尤其是在大型品牌和产品中逐渐成为趋势的情况下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

设计趋势真是一个轮回。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

原文作者:Chan Karunaratne(本文翻译已获得作者的正式授权)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

原文:https://uxdesign.cc/is-the-flat-design-trend-finally-over-1e531ceb0ffa文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

译者:彩云Sky,公众号:彩云译设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58418.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ui/58418.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定