IT之家學院：教你Win10下用PPT繪製微軟Fluent流暢設計體系概念圖

特別鳴謝：技術指導@WindyChatin 美術指導 @心的旅行

請注意：該教程需要【Office2016】與【Windows10創意者更新】支持。步驟中有截圖操作。如果是Win10創意者更新以下的版本，不能用Win+Shift+S截圖，那麼請打開QQ/TIM。

微軟流暢設計體系（Fluent Design System）好看不好看？答案是肯定的，好看到要加以「保護性差評」的程度。稍顯遺憾的是，目前支持酷炫的透明效果的應用，只有微軟自家的Groove音樂、地圖、錄音機、人脈等等。那麼，你想不想讓自己喜歡的UWP華麗蛻變，也擁有流暢設計的加持？我猜你當然想。可惜，你我都不能做到。更新應用，落實設計語言，是開發者的工作。但我們普通用戶完全可以設（yì）計（yín）出一副概念圖，以大飽眼福。什麼？那些高大上的製圖軟體你全都不會用？不要緊，今天的教程，就來告訴你怎麼用PPT來繪製精美的流暢設計概念圖。

請注意：先說操作，再放圖示，每一段描述對應的圖是描述下方的哦。

1.打開PPT，新建空白演示文稿，插入一張圖片。（我這一張是昨天的必應美圖）。

2.選中圖片，在圖片工具（格式）選項卡中找到剪裁。把圖片剪裁到合適大小。這個矩形的大小相當於應用左邊第一欄（稱之為新聞欄）。

3.在幻燈片空白處右擊，選擇設置背景格式，選擇同一張圖片作為背景。

4.選中剪裁後的圖片，在圖片工具（格式）選項卡里，找到藝術效果，選擇虛化效果，虛化半徑15%。

5.插入一個矩形，調整它的大小到跟剪裁-虛化部分一樣大（請開啟智能參考線功能方便操作：幻燈片上右鍵，選擇網格和參考線，啟用智能參考線）。

6.把矩形設置成無形狀輪廓，顏色設置成系統主題色（方法：截一張開始菜單的磁貼的截圖，插入幻燈片中，然後取色器大法好），並將透明度調到35%。把這個矩形覆蓋在剪裁-虛化部分上，就實現了亞克力透明效果。

7.製作標題欄。插入一個長矩形，無輪廓，顏色為主題色，不透明。雙擊矩形，可以鍵入文字。鍵入應用的名稱，設置好字體（微軟雅黑light）、字型大小（10）。

8.繼續製作標題欄。先來製作返回鍵。把上一步的矩形複製過來，調整到合適大小。插入一個箭頭。注意箭頭樣式要選擇圖示的這種。箭頭調整長度和粗細後，移到小矩形上，組合，並移動到對的位置。

9.繼續製作標題欄。目光轉向右上角的三大按鈕。新建一個小矩形，b值和標題欄一樣，a值根據實際來。連著複製兩下（請善用Crtl+Shift+左右拖動）。

10.另外畫好三大按鈕。因為有智能參考線，能方便地把它們分別拖放到各自所在矩形的居中位置。位置確定後，三個矩形沒用了，刪去。

11.製作右邊的一欄（內容欄）。插入萬年不變的最初那張圖片，依然是剪裁到對的大小，然後虛化。這次虛化半徑是30%。

12.繼續製作內容欄。插入大小和剪裁-虛化部分一樣的矩形，無輪廓，顏色白色，25%透明。覆蓋在剪裁-虛化部分上。然後將應用的Logo（需要另外繪製，這裡不演示了）覆蓋在白色矩形上。特別要求：Logo要用灰色，但有些灰色使圖樣很難辨認，所以這裡要多試幾次配色，直到能看清楚。

13.強化新聞欄。插入如圖所示的白色矩形，無邊框，透明度40%。這個矩形一放上去，就分割出新的一欄——菜單欄，最左邊。它的右邊，即剛剛插入的矩形，才是真正的新聞欄。用文本框添加應用名到新聞欄上方。接下來，豐富菜單欄。

14.在插入選項卡找到「圖標」，點擊。多選想要的圖標，選好後點擊插入。下載下來的圖標默認都是黑色的，可以根據需要在圖形工具（格式）中填充為白色。

15.調整這些圖標。有些圖標風格很不一致，看起來不順眼，也不符合微軟的UWP設計規範。該修改的修改，不能修改的替換掉（一定要完美主義）。調整的過程就不演示了。

16.整齊排列這些圖標。UWP的控制項可以豎著排列在漢堡菜單/菜單欄，也可以橫著排列在頂欄/底欄。排列圖標是有技巧的，針對橫豎兩種情況，方法也不一樣。

先說豎的。把圖標排列到大致正確的位置（利用智能參考線，這很容易），然後按住CTRL多選。多選完畢後，在圖形工具（格式）中找到對齊，點擊縱向分布即可。

17.整齊排列橫向圖標。還記得怎麼處理標題欄的三大按鈕嗎？先繪製矩形，然後藉助矩形，確定圖標要放在哪。這裡也是一樣的方法。但這次，需要在一個已經確定的距離中，準確密鋪進三個全等的矩形。所以應該繪製一個矩形，先連著複製兩次，再全選這三個矩形，一起調整大小（請善用CTRL+左右縮放）到適合。然後將圖標居中放置。完畢後，刪掉左起第二、第三個矩形，把第一個矩形設置成白色，無輪廓，透明度60%。

18.畫一條線。畫一條線有什麼好講的？但這確實有難度。為了畫好它，使它完美地與小矩形對齊，請善用Shift、Shift+Alt，並把端點設為正方形。畫好後，顏色設為主題色。

19.填充新聞欄的內容。繪製矩形，無邊框，白色，透明度60%，從最上面一路複製下來（請善用Shift+Ctrl+上下拖動），各矩形間保持較小的相等間距（聽智能參考線的准沒錯）。最後把最上面的矩形改為灰度為35%的白色，透明度仍為60%。複製上一步中的直線，旋轉（Alt+方向鍵）成豎直方向的，放在第一個矩形的左邊。

20.繼續填充新聞欄。內容是圖文混排，圖片可以從應用中截取到（請善用截圖工具），而文字，如果你願意也可以照搬過來，我這裡統一用」xxxxxx「（方便複製粘貼ww）。

21.製作新聞欄的滾動條。把19步中的直線複製過來就行了，長度調到適合，端點類型要改成圓形。

22.新建一個矩形。大小與整個窗口（包括標題欄）一樣大。填充色什麼的無所謂，什麼都行。無邊框。在圖形工具（格式）中找到形狀效果→陰影→陰影選項。選擇預設效果中的「偏移：中」，然後各種參數調到如圖。

23.將矩形移到底層。

24.啟動幻燈片放映，觀賞效果吧！可以用Ctrl+滾輪縮放，以便欣賞細節。

效果是不是很酷炫呢？有了這種操作，你就可以隨意YY任何你喜歡的UWP未來的模樣了！

想看到更多這類內容？去APP商店搜IT之家，天天都有小歡喜。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！