設計規(guī)范

5個比Material Design還好用的品牌UI設計系統(tǒng)推薦

今天25學堂將要分享一些在界面設計與體驗方面，同樣非常出色的設計系統(tǒng)，我們來看看它們都“長”什么樣子吧！

4946

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

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

01 Microsoft Design

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

Lignt

光照，它指的是點擊或 Hover 的動作上面加入光照的效果，或是像柔和的光源灑落在空間中，可以去反應物體本身的反光質感，它和 Material Design 強調的光影的擴散的光影效果是不同的概念。

Depth

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

Motion

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

Material

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