5个比Material Design还好用的品牌UI设计系统推荐

今天25学堂将要分享一些在界面设计与体验方面,同样非常出色的设计系统,我们来看看它们都“长”什么样子吧!

说起谷歌的 Material Design,在UI/UX设计界里应该是无人不知,无人不晓了。它以严谨遵从实际的物理原则而著名 ,使手机、电脑和平板的界面语言高度统一,就像是苹果向开发者提出的设计原则一样。最重要的是,它帮助饱受割裂、碎片化困扰的Android平台获得新生。

不过今天,25学堂将要分享一些在界面设计与体验方面,同样非常出色的设计系统,我们来看看它们都“长”什么样子吧!

01 Microsoft Design

Fluent Design System,即微软的流畅设计体系,这套全新的设计语言共有五大核心元素,包括Light(光感)、Depth(深度)、Motion(动画)、Material(材质)和 Scale(缩放)。

Lignt

光照,它指的是点击或 Hover 的动作上面加入光照的效果,或是像柔和的光源洒落在空间中,可以去反应物体本身的反光质感,它和 Material Design 强调的光影的扩散的光影效果是不同的概念。

Depth

深度,其实它的概念从 Material Design 开始就已经被强调了,但是 Fluent Design System 希望是用更多的方式去呈现,比如井深的模糊效果,视差滚动的动态效果,物件彼此的大小与位置等等。

Motion

动效,其实它想强调的动态效果更接近真实的世界,更强调细腻的变化,比如李安的电影“比利·林恩的中场战事”,这个电影拍摄的帧数与以往传统电影不一样,看起来的感觉会更加的流畅自然,你体验过之后会很难回去之后那种电影呈现效果了。而 Windows 强调的 Motion 也是一样的,比起这种单调的动作,它也会去强调每个设计对象彼此之间的动态效果的时间差,看起来会更加的流畅自然。而且与真实空间中前景后景的物理概念一样,不同的时间差会更容易凸显出想要凸显的主题效果,也会更加的聚焦。

Material

材质,其实在 Windows 提出的 Fluent Design System 里面,它会出现大量的模糊,透明的背景。也就是模拟毛玻璃的材质感。通常也会代入一些微光源的效果。除了能够吸睛,吸引你的视觉之外呢,其实在 AR、VR 的界面上面感知空间中的物件是很重要的,所以模糊的背景的利用可以在不影响观看内容情况下,还能起到背景暗示的作用。其实毛玻璃效果在 Windows 系统中已经被运用到了,但是由于当时的效能以及干扰视线的问题仅仅运用在了一些小区域,而这次 Fluent Design System 的特效就成为了最强烈的视觉焦点,其实同样的 iOS 和 Mac iOS 系统里面在最近的更新也大量使用了模糊效果。

Scale

缩放,在视觉上眼前的物体大,后面的物体小,所以缩放也是来营造空间感、纵深感,尺度感的这样一个设计特性。

关于应用,其实你无需考虑兼容性,它强大到可以在多个系统平台运行。

你可以选择你正在应用的平台,微软会介绍关于布局、格式、色彩等详细数据,以及代码实操,点击要下载的就好喽。

不同信息的提示颜色

02 Spotify Design

Spotify是一家在线音乐流服务平台,2006年4月由Daniel Ek和Martin Lorentzon在瑞典创立,它是目前全球最大的流音乐服务商之一,可以自行脑补成国内的网易云,虾米等在线音乐播放平台。

Spotify Design是公司旗下介绍品牌设计理念和设计方法论的网站页面,配色主打清新风。主页中,以蓝、白、黑3种颜色将各栏目简洁隔断,伴随出现的交互也非常有趣。

这是一群乐于分享设计心得的可爱团队,在右上角的Stories菜单中,可以看到Spotify设计师们对于技术、产品和未来趋势思索与探讨,放松之余不妨读一读这些文章。

下拉文章浏览时,顶部会有进度条提示

在Tools菜单还分享了团队使用的设计工具,设计启动前的调研,提供了下载链接。

03 Uber Design

打车应用Uber在自己官网中介绍了组成品牌体系的9个核心要素。记得先打开这个小按钮,一键开启栅格(16列网格,边距46px),专治强迫症。

对Logo的介绍,像是Uber的“自娱自乐”——将首字母U作丈量依据,提示用户正确地应用距离。比如Logo联名时,不同标识之间的距离隔着两个“UU”就差不多了,真是机智。


插画也归纳了3种使用场景,更凸显人性化。

用几何图形塑造插画

04 Audi Design

Audi,德国跨国豪华汽车制造商,作为世界上豪华汽车品牌之一,在自家的官网中推出了一套简洁UI设计系统。在Basics菜单中,关于品牌Logo展示位置、品牌定位、颜色、版式布局结构、配图、示例与动画都进行了详细注解。

“4个圈儿”摆放位置说明

奥迪的用户界面因用途而异——从网站到特定服务的应用程序都有各自特点。从应用程序到车辆的多样化解决方案,全面提升用户体验,其界面由多类组件、模块和动画共同组合。

响应式页面的设定,可以使用户在多端感受audi车的魅力,而响应页面的代码撰写,设计规范也通通有执行标准,辞典酱真真切切的感受到了德企的严谨性。

页面代码规范

响应式设计规范举例

对于界面中的图标,Audi也有自己的见解。他们设立了Icon  Library,将305个icon以大小尺寸,深浅模式自选查看,非常直观。

还有微信,微博,知乎和优酷的Icon都支持下载,免费的不了解一下?

图标可下载不同格式文件,还能查看样式与代码

05 Gojek Design

Go-Jek是位于印尼的共享出行服务商,公司为了确保所有产品调性一致,Asphalt设计语言系统应运而生。通过建立丰富的实时更新元件库,可以直接将元素拖进sketch中应用。

Asphalt标识

安卓库

iOS库

icon库

Asphalt对于按钮也有自己的总结归纳,比如无修饰的常规应用按钮,对于边距,宽度高度都进行了详细标注。



相关素材:


相关引用

Microsoft Design--https://www.microsoft.com/design/fluent/#/

Spotify Design--https://spotify.design/

Uber Design--https://brand.uber.com/

Audi Design--https://www.audi.com/ci/en/intro/brand-appearance.html#

Gojek Design--https://asphalt.gojek.io



原文来自微信公众号:UX辞典

         

每天更新,
全站高品质素材免费下载!