微軟最新設計Fluent Design System初體驗

微軟最新設計Fluent Design System初體驗

本文圖片不全！建議移步知乎專欄查看！！！

https://zhuanlan.zhihu.com/p/30582886

 

 

原創 2017-11-06 MSP-李桑鬱 MSPrecious成長薈

 

微軟

 

在1709此次秋季創意者大更新中，微軟終於將Fluent Design System作的像模像樣了。以前只有部分，例如計算器、照片等App有FDS的影子，如今設置也有了。使得你們Windows10愈發的漂亮了（之前很醜）

Fluent Design System是微軟最新的設計，是「一套基於平面化的、創新的、標準化的、自洽的設計邏輯」。

本質上與之前因蘋果而流行起來的物化設計或者win8以後的平面化設計同樣，都是一種設計風格+交互邏輯。（交互成分是次要的，知足審美需求是主要目的）
—— https://www.zhihu.com/question/59724483

 

而我認爲初期的FDS就是亞克力材質與像手電筒同樣的光照

昨晚（2017/10/29）我試着將本身以前作的一個圖書館查書的UWP，改了下樣式，看看FDS到底怎麼樣。

 

 

實施步驟：

1.我先上官網看了下
https://fluent.microsoft.com/

2.看到上面有設計資源，轉到了https://developer.microsoft.com/zh-cn/windows/apps/design

3.能夠看到上來就是添加亞克力材料，話很少說咱們上來就加！

4.前面有很是囉嗦的介紹，想知道亞克力是幹嗎的你就看看，不想看，咱就翻到紅色標記的地方，直接上代碼。

睜大眼睛！醒醒！就是這一行！就能夠了！快試試！

5.將Background修改後你會發現，你的窗口透明瞭。不太滿意您先別急，這裏還有不少默認的樣式。

若是你想自定義透明度等設置，能夠看看下面的內容

7.把標題欄也幹掉

8.好了，這頁基本講完了。咱們能夠看到文尾有講顯示（Reveal）的，是教你把Button等控件加上手電筒效果的。

https://docs.microsoft.com/zh-cn/windows/uwp/style/reveal

這裏給你們放一個CommandBar的

9.在我看Reveal的時候我還注意到自動使用的控件。因此我索性直接用了NavigationView（NavigationView真是好東西，懶人福音）

10.NavigationView大體細分爲三個部分 - 左側是用於導航的窗格，右側是標題和內容區域

文檔的這些地方很是重要必定要好好看

而後文檔還說了怎麼使用NavigationView

能夠說是很是詳細了。什麼？你不會？給我複製粘貼上去就行！

 

11.給你們說幾個坑（我的狀況）

代碼裏在NavigationView加載的時候，Add了NavigationViewItem有點問題，因此你們直接註釋掉。

直接在佈局裏寫

而xaml.cs裏只用下面的Invoked就能夠。

這個Invoked也有點問題，它讀不到Tag，因此我直接用的Content。

還有一點是Item的高度不夠，我修改不了，作不到Groove音樂那麼美觀。

（多是要用自定義？）

 

最後給你們看看效果

 

 

敢不敢點開閱讀原文啊？

 

 

 

微信掃一掃關注該公衆號