苹果是如何打造Soft-UI设计未来的?

上海/UI设计师/5年前/116浏览
苹果是如何打造Soft-UI设计未来的?

iOS、MacOS的UI设计更新,反映了怎样的行业发展方向?

iOS、MacOS的UI设计更新  

反映了怎样的行业发展方向?


6月23日,苹果在WWDC大会上将万众期待的iOS14、iPadOS14等全新系统如期发布,大多数苹果用户想必已经有所了解了。现在,先把技术放在一边,让我们关注一下在用户界面方面,它是如何改变的 👇



它通过Aqua完成了第一次位图表现,并用更现代的风格,构建了一个全新的、一致的设计语言。




主要的Mac OS设计风格


移动端和PC端操作系统的变化,某种程度上,表明了目前哪种设计风格最好。苹果的更新中,确实与微软UI设计有相似之处。有趣的是,十多年前,苹果嘲笑Windows Vista抄袭了他们的创意,而现在,他们却将微软的部分设计融入到了他们自己的产品中。


言归正传,接下来让我们谈谈,苹果这几年在UI上都有哪些改变吧~






01 更多的圆角 



一些新用户可能不记得这一点,但苹果一直倾向于圆角。在这个过程中,它们也确实变得越来越圆。


最初的iPhone操作系统有方形的按钮和面板。但我们都知道,由于原始的条件反射,我们的潜意识会把锋利的角作为“尖牙”。而这会让它们感觉更让人警惕,看起来也不那么友好。所以,苹果公司慢慢地改进了这些按钮,使之成为我们现在所熟知和喜爱的、更圆润的版本。


左:旧版本    右:更圆更自然。



但他们并没有就此止步,将图标的角半径也进行了修改。现在,类似风格的图标也出现在了Mac OS上。


UI开始匹配实物曲线



窗口、面板和操作列表也更圆了一些,这种变化主要始于iPhone X。它拥有一个非常圆润的显示屏,操作列表也就被相应的圆角化了。






02 透明与背景模糊 




在iOS7发布时,透明与背景模糊开始流行起来。很多人讨厌这种结合了超薄字体与极简主义的外观。但是,大多数人还是非常喜欢背景模糊效果的。


现在,无论是侧边栏(之前的几个Mac OS版本)还是工具提示中,背景模糊都变得越来越突出。在许多情况下,特别是侧边栏,通过部分背景的显示,背景模糊表现了某一窗口与整个操作系统的“连接”。


微软也使用了一种非常类似的,基于层的透明方法。



分层使用了相同的概念,即让更轻的表面更贴近用户,随之,更低的级别变得更暗。这样,即使没有半透明的效果,也显示出了层次结构。





03 统一图标(部分) 



我相信这种变化将是渐进的。苹果希望在Mac OS图标风格中保持足够的“现实主义”,同时使其更接近移动操作系统。


以下便是finder图标到目前为止的变化:

可以看出,图标显然是简化了。舍弃了矩形变成了统一的圆角正方形。由于某些原因,微笑变得更淡了(可能日后会更改)。同时,由于角度的变化,它看起来更加友好了。


Mac OS的工具栏图标也变得与典型的ios/ iPad OS图标更加一致。图标样式是圆形的、友好的、开放的。笔画足够粗,易于理解,也没有任何不必要的装饰。





04 Skeuomorphism? 



Mac OS是拟物元素的最后堡垒之一。现在它们被合并成了新拟物态,并与现代的扁平风相结合。这给予了操作系统一个现代的新外观,同时也保持了它特有的风格。


在一个更小限度的新设计出现之前,这可能是一个中间地带,毕竟我们喜欢自认为熟悉的东西,而一个彻底的改变可能会与IOS 7的情况类似。






05 其他方面 



之前的Mac OS版本也从移动操作系统中引入了深夜模式和San Francisco(字体)。似乎,现在苹果的设计系统,在所有平台上都倾向于接近一致。


而San Francisco作为一种现代的无衬线字体被广泛运用,也再一次证明了简约即正义。


作为一个拥有数百万用户的公司,其UI设计的总体方向总是有效的。像圆角、柔和的阴影、微妙的渐变等元素都在更新中被保留了下来。





当然,为“所有人”设计的产品需要遵循最常见的“友好原则”。但这并不意味着,我们在做任何事情时,都应该使用同样的规则。如果你在制作高度专业化的定向产品,你仍然可以使用尖角、完全不透明的图层等等。


但我不认为苹果没有做足功课,他们肯定对大多数人喜欢什么做了广泛的研究。所以,这正是一种行业趋势,即已经持续了一段时间的:现代Soft-UI


1
阅读原文
|
Report
|
收藏
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
马年IP设计 MA DUODUO
Homepage recommendation
相关收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
文创
文创
文创
文创
精选收藏夹
作品收藏夹
一些小动物
一些小动物
一些小动物
一些小动物
精选收藏夹
作品收藏夹
大家都在看
Log in