设计系统大“PK” 

研究主题：设计系统合集

研究对象：5个品牌推出的UI设计系统

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

先与谷歌的设计师一起，感受 Material Design 诞生前后的点点滴滴：

不过今天，辞典酱想要分享一些在界面设计与体验方面，同样非常出色的设计系统，我们来看看它们都“长”什么样子吧！

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对于按钮也有自己的总结归纳，比如无修饰的常规应用按钮，对于边距，宽度高度都进行了详细标注。

／End. 

相关引用
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
-图片、GIF来自网络；封面动图 by Gur Margalit
-未经UX Pedia允许不得转载

UX辞典