1. 程式人生 > >Microsoft Fluent Design System

Microsoft Fluent Design System

block 理念 sig 引用 ria 官網 基礎上 道路 開始

轉載自:http://www.ui.cn/detail/131217.html

就在剛剛舉辦的 Microsoft Build 2017 中,微軟對外公布了它們最新的設計語言——“Fluent Design System”。

就在剛剛舉辦的 Microsoft Build 2017 中,微軟對外公布了它們最新的設計語言——“Fluent Design System”,這一消息給廣大設計師又帶來了一針強心劑,作為軟件大鱷的微軟也開始要在設計語言的道路上扮演一個指路人的角色了嗎?

在視頻中,他們分別提出了 Light、Depth、Motion、Material、Scale 幾個理念,讓我們通過官網的解釋以及結合視頻看看這幾個理念分別表示什麽。

另外,由於 Fluent Design 的官網是不兼容 Chrome 的(簡直不可思議),所以需要通過 Safari 或者 Edge 瀏覽器查看。

1、Light

技術分享

技術分享

官方將 Light 解釋為“光”並且引入到了設計語言中,認為光是一種能夠給用戶提供邀請的交互方式,通過照亮其他元素吸引用戶,同時因為它本身涵蓋的“溫暖”特質同樣能夠與“邀請”相輔相成。

Material Design 通過光引入了 Shadow,而 Fluent Design 引入了 Light,不得不說它們都希望把自己的設計語言立意在大自然的基礎上,從而更貼近人們的生活,在交互中盡可能調用用戶的“自主心智”理解設計。

2、Depth

技術分享

技術分享

對 Depth 的理解與官方解釋基本一致,Fluent Design 同樣打破平面理念引入了三維空間的概念,將 Z 軸也考慮到了設計和交互中(類似 Material Design 的 Elevation),從而增加設計載體的空間,讓更多設計的交互體現方式與生活相輔相成,同樣也是為了在 VR/AR 中能夠采用這套設計規範。

3、Motion

技術分享

技術分享

動效以及運動模式已經成為了一個優秀產品必不可少的一環,同樣也類似 Material Design Motion 一樣,Fluent Design 應該也會在這塊提出更多的合理指導意見,從而讓自身平臺產品在運動模式這塊有更多參考。

4、Material

技術分享

技術分享

從官方解釋來看,Material 這個特性是為了強調設計語言中關於材料的概念,在符合條件的產品中采用自然界中與其相契合的材料表現(例如毛玻璃材料、紙張材料等),從而給用戶合理的心理感知和體驗,這也是將設計與生活以及自然界結合的一種理念。

5、Scale

技術分享

技術分享

視頻在這裏引入了幾個不同規模的交互場景(小屏幕觸控、VR 大場景交互),意義應該是要表明該設計語言能夠 cover 住所有規模的場景設計需求(果然野心夠大),看了下官方對這個理念的解釋,基本契合。

最後我們再看看視頻結尾的一些基於該設計語言制作的演示內容:

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

演示中甚至涵蓋了 VR 和 AR,看來微軟這次確實在下一盤大棋,雖然有些都是概念設計,但是設計界就是需要有這樣的突破性思維和想法,才有可能創造出更富有前瞻性的設計語言。

Microsoft Fluent Design System