轉(zhuǎn)載自：http://www.ui.cn/detail/131217.html

就在剛剛舉辦的 Microsoft Build 2017 中，微軟對(duì)外公布了它們最新的設(shè)計(jì)語言——“Fluent Design System”。

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

在視頻中，他們分別提出了 Light、Depth、Motion、Material、Scale 幾個(gè)理念，讓我們通過官網(wǎng)的解釋以及結(jié)合視頻看看這幾個(gè)理念分別表示什么。

另外，由于 Fluent Design 的官網(wǎng)是不兼容 Chrome 的（簡(jiǎn)直不可思議），所以需要通過 Safari 或者 Edge 瀏覽器查看。

1、Light

官方將 Light 解釋為“光”并且引入到了設(shè)計(jì)語言中，認(rèn)為光是一種能夠給用戶提供邀請(qǐng)的交互方式，通過照亮其他元素吸引用戶，同時(shí)因?yàn)樗旧砗w的“溫暖”特質(zhì)同樣能夠與“邀請(qǐng)”相輔相成。

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

2、Depth

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

3、Motion

動(dòng)效以及運(yùn)動(dòng)模式已經(jīng)成為了一個(gè)優(yōu)秀產(chǎn)品必不可少的一環(huán)，同樣也類似 Material Design Motion 一樣，Fluent Design 應(yīng)該也會(huì)在這塊提出更多的合理指導(dǎo)意見，從而讓自身平臺(tái)產(chǎn)品在運(yùn)動(dòng)模式這塊有更多參考。

4、Material

從官方解釋來看，Material 這個(gè)特性是為了強(qiáng)調(diào)設(shè)計(jì)語言中關(guān)于材料的概念，在符合條件的產(chǎn)品中采用自然界中與其相契合的材料表現(xiàn)（例如毛玻璃材料、紙張材料等），從而給用戶合理的心理感知和體驗(yàn)，這也是將設(shè)計(jì)與生活以及自然界結(jié)合的一種理念。

5、Scale

視頻在這里引入了幾個(gè)不同規(guī)模的交互場(chǎng)景（小屏幕觸控、VR 大場(chǎng)景交互），意義應(yīng)該是要表明該設(shè)計(jì)語言能夠 cover 住所有規(guī)模的場(chǎng)景設(shè)計(jì)需求（果然野心夠大），看了下官方對(duì)這個(gè)理念的解釋，基本契合。

最后我們?cè)倏纯匆曨l結(jié)尾的一些基于該設(shè)計(jì)語言制作的演示內(nèi)容：

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

轉(zhuǎn)載于:https://www.cnblogs.com/hwBeta/p/6971455.html

總結(jié)

以上是生活随笔為你收集整理的Microsoft Fluent Design System的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。