前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快速学习SoftUI趋势-苹果新UI风格设计欣赏与解析

快速学习SoftUI趋势-苹果新UI风格设计欣赏与解析

作者头像
用户5009027
发布2020-07-03 16:53:13
1.3K0
发布2020-07-03 16:53:13
举报
文章被收录于专栏:静Design静Design

今天,我们通过一些设计师的作品,来欣赏和学习一下SoftUI,提前感受,提前热身,为新风格的正式普及做好准备。

下图是新的Mac OS Big Sur的图标设计,对于阴影的使用还是很克制的,并不同于Dribbble设计师的演绎。从中我们可以看出,图标用了比较多的圆角矩形进行拘束。

对比下Mac OS 10.15老版本的,你会发现不少区别

这是苹果系统的图标与设计师演绎的图标对比,可以看出苹果的心风格图标更加克制和保守,阴影更加实,而设计师演绎的图标,阴影则更轻。

by Vikiiing

by Vikiiing

下面这一组真的很3D

by Alexander Shatov

其实SoftUI并不是新生事物,微软之前一直在FluentUI中使用这种风格,今天,微软在官方脸书中发表了新的Win 10开始菜单的截图,可以看出端倪。柔和的渐变,具有微立体风格的图标,会成为未来几年设计的主流。

继续来了看,这种具有陶瓷或者光滑塑料材质的图形,就是SoftUI的先驱者。

设计师为big Sur设计的新风格Zeplin图标

by Lucas Haas

by st. I

by Kamil Khadeyev

by Cappippuni

Spotify Icon,我都认不出来了

by Anmol Govinda Rao

设计师发散的Chrome图标,好像不太柔和

by Anmol Govinda Rao

Telegram Icon

by Anmol Govinda Rao

Figma的SoftUI效果,我觉得挺好看。

by David Liceaga

设计师发散的MacOS Big Sur图标

设计师发散的Photoshop图标

放在Dock上还是很和谐的

来自Mengto的UI设计

总结:SoftUI或者叫Big Sur风格,需要具备一下特质

  1. 微量的渐变
  2. 微量的质感表现,不需要太强列
  3. 加入提升空间感的阴影
  4. 更大的圆角,更圆润
  5. 运用背景模糊(毛玻璃效果)
  6. 材质较光滑,少用杂点等材质表现
  7. 克制阴影表现
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-06-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档