說起谷歌的 Material Design，在UI/UX設(shè)計(jì)界里應(yīng)該是無人不知，無人不曉了。它以嚴(yán)謹(jǐn)遵從實(shí)際的物理原則而著名 ，使手機(jī)、電腦和平板的界面語言高度統(tǒng)一，就像是蘋果向開發(fā)者提出的設(shè)計(jì)原則一樣。最重要的是，它幫助飽受割裂、碎片化困擾的Android平臺(tái)獲得新生。

不過今天，25學(xué)堂將要分享一些在界面設(shè)計(jì)與體驗(yàn)方面，同樣非常出色的設(shè)計(jì)系統(tǒng)，我們來看看它們都“長(zhǎng)”什么樣子吧！

01 Microsoft Design

Fluent Design System，即微軟的流暢設(shè)計(jì)體系，這套全新的設(shè)計(jì)語言共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動(dòng)畫）、Material（材質(zhì)）和 Scale（縮放）。

Lignt

光照，它指的是點(diǎn)擊或 Hover 的動(dòng)作上面加入光照的效果，或是像柔和的光源灑落在空間中，可以去反應(yīng)物體本身的反光質(zhì)感，它和 Material Design 強(qiáng)調(diào)的光影的擴(kuò)散的光影效果是不同的概念。

Depth

深度，其實(shí)它的概念從 Material Design 開始就已經(jīng)被強(qiáng)調(diào)了，但是 Fluent Design System 希望是用更多的方式去呈現(xiàn)，比如井深的模糊效果，視差滾動(dòng)的動(dòng)態(tài)效果，物件彼此的大小與位置等等。

Motion

動(dòng)效，其實(shí)它想強(qiáng)調(diào)的動(dòng)態(tài)效果更接近真實(shí)的世界，更強(qiáng)調(diào)細(xì)膩的變化，比如李安的電影“比利·林恩的中場(chǎng)戰(zhàn)事”，這個(gè)電影拍攝的幀數(shù)與以往傳統(tǒng)電影不一樣，看起來的感覺會(huì)更加的流暢自然，你體驗(yàn)過之后會(huì)很難回去之后那種電影呈現(xiàn)效果了。而 Windows 強(qiáng)調(diào)的 Motion 也是一樣的，比起這種單調(diào)的動(dòng)作，它也會(huì)去強(qiáng)調(diào)每個(gè)設(shè)計(jì)對(duì)象彼此之間的動(dòng)態(tài)效果的時(shí)間差，看起來會(huì)更加的流暢自然。而且與真實(shí)空間中前景后景的物理概念一樣，不同的時(shí)間差會(huì)更容易凸顯出想要凸顯的主題效果，也會(huì)更加的聚焦。

Material

材質(zhì)，其實(shí)在 Windows 提出的 Fluent Design System 里面，它會(huì)出現(xiàn)大量的模糊，透明的背景。也就是模擬毛玻璃的材質(zhì)感。通常也會(huì)代入一些微光源的效果。除了能夠吸睛，吸引你的視覺之外呢，其實(shí)在 AR、VR 的界面上面感知空間中的物件是很重要的，所以模糊的背景的利用可以在不影響觀看內(nèi)容情況下，還能起到背景暗示的作用。其實(shí)毛玻璃效果在 Windows 系統(tǒng)中已經(jīng)被運(yùn)用到了，但是由于當(dāng)時(shí)的效能以及干擾視線的問題僅僅運(yùn)用在了一些小區(qū)域，而這次 Fluent Design System 的特效就成為了最強(qiáng)烈的視覺焦點(diǎn)，其實(shí)同樣的 iOS 和 Mac iOS 系統(tǒng)里面在最近的更新也大量使用了模糊效果。

Scale

縮放，在視覺上眼前的物體大，后面的物體小，所以縮放也是來營(yíng)造空間感、縱深感，尺度感的這樣一個(gè)設(shè)計(jì)特性。

關(guān)于應(yīng)用，其實(shí)你無需考慮兼容性，它強(qiáng)大到可以在多個(gè)系統(tǒng)平臺(tái)運(yùn)行。

你可以選擇你正在應(yīng)用的平臺(tái)，微軟會(huì)介紹關(guān)于布局、格式、色彩等詳細(xì)數(shù)據(jù)，以及代碼實(shí)操，點(diǎn)擊要下載的就好嘍。

不同信息的提示顏色

02 Spotify Design

Spotify是一家在線音樂流服務(wù)平臺(tái)，2006年4月由Daniel Ek和Martin Lorentzon在瑞典創(chuàng)立，它是目前全球最大的流音樂服務(wù)商之一，可以自行腦補(bǔ)成國(guó)內(nèi)的網(wǎng)易云，蝦米等在線音樂播放平臺(tái)。

Spotify Design是公司旗下介紹品牌設(shè)計(jì)理念和設(shè)計(jì)方法論的網(wǎng)站頁面，配色主打清新風(fēng)。主頁中，以藍(lán)、白、黑3種顏色將各欄目簡(jiǎn)潔隔斷，伴隨出現(xiàn)的交互也非常有趣。

這是一群樂于分享設(shè)計(jì)心得的可愛團(tuán)隊(duì)，在右上角的Stories菜單中，可以看到Spotify設(shè)計(jì)師們對(duì)于技術(shù)、產(chǎn)品和未來趨勢(shì)思索與探討，放松之余不妨讀一讀這些文章。

下拉文章瀏覽時(shí)，頂部會(huì)有進(jìn)度條提示

在Tools菜單還分享了團(tuán)隊(duì)使用的設(shè)計(jì)工具，設(shè)計(jì)啟動(dòng)前的調(diào)研，提供了下載鏈接。

03 Uber Design

打車應(yīng)用Uber在自己官網(wǎng)中介紹了組成品牌體系的9個(gè)核心要素。記得先打開這個(gè)小按鈕，一鍵開啟柵格（16列網(wǎng)格，邊距46px），專治強(qiáng)迫癥。

對(duì)Logo的介紹，像是Uber的“自娛自樂”——將首字母U作丈量依據(jù)，提示用戶正確地應(yīng)用距離。比如Logo聯(lián)名時(shí)，不同標(biāo)識(shí)之間的距離隔著兩個(gè)“UU”就差不多了，真是機(jī)智。

插畫也歸納了3種使用場(chǎng)景，更凸顯人性化。

用幾何圖形塑造插畫

04 Audi Design

Audi，德國(guó)跨國(guó)豪華汽車制造商，作為世界上豪華汽車品牌之一，在自家的官網(wǎng)中推出了一套簡(jiǎn)潔UI設(shè)計(jì)系統(tǒng)。在Basics菜單中，關(guān)于品牌Logo展示位置、品牌定位、顏色、版式布局結(jié)構(gòu)、配圖、示例與動(dòng)畫都進(jìn)行了詳細(xì)注解。

“4個(gè)圈兒”擺放位置說明

奧迪的用戶界面因用途而異——從網(wǎng)站到特定服務(wù)的應(yīng)用程序都有各自特點(diǎn)。從應(yīng)用程序到車輛的多樣化解決方案，全面提升用戶體驗(yàn)，其界面由多類組件、模塊和動(dòng)畫共同組合。

響應(yīng)式頁面的設(shè)定，可以使用戶在多端感受audi車的魅力，而響應(yīng)頁面的代碼撰寫，設(shè)計(jì)規(guī)范也通通有執(zhí)行標(biāo)準(zhǔn)，辭典醬真真切切的感受到了德企的嚴(yán)謹(jǐn)性。

頁面代碼規(guī)范

響應(yīng)式設(shè)計(jì)規(guī)范舉例

對(duì)于界面中的圖標(biāo)，Audi也有自己的見解。他們?cè)O(shè)立了Icon  Library，將305個(gè)icon以大小尺寸，深淺模式自選查看，非常直觀。

還有微信，微博，知乎和優(yōu)酷的Icon都支持下載，免費(fèi)的不了解一下？

圖標(biāo)可下載不同格式文件，還能查看樣式與代碼

05 Gojek Design

Go-Jek是位于印尼的共享出行服務(wù)商，公司為了確保所有產(chǎn)品調(diào)性一致，Asphalt設(shè)計(jì)語言系統(tǒng)應(yīng)運(yùn)而生。通過建立豐富的實(shí)時(shí)更新元件庫，可以直接將元素拖進(jìn)sketch中應(yīng)用。

Asphalt標(biāo)識(shí)

安卓庫

iOS庫

icon庫

Asphalt對(duì)于按鈕也有自己的總結(jié)歸納，比如無修飾的常規(guī)應(yīng)用按鈕，對(duì)于邊距，寬度高度都進(jìn)行了詳細(xì)標(biāo)注。

相關(guān)素材：

相關(guān)引用

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

原文來自微信公眾號(hào)：UX辭典