常常在想…
為什麼有些人的UI可以做的這麼好看、有質感、有科技感？
明明就都是用一樣的物件在設計，到底都是差在哪裡？
原來都是藏在「細節」裡
一直以來，自己對於外觀設計比較沒那麼多的琢磨，比起外觀我更重視的是，設計是否簡單明瞭、功能是否能達到、操作是否合乎邏輯…等，思考邏輯問題我個人覺得比較好玩多了！(也可能跟本身是資管出身有關)
但視覺外觀還是得加減練習一下，每天上班還是會花一點時間，來看看有什麼新穎的設計當作培養美感，而前幾個禮拜剛好在YT看到霧面毛玻璃效果(Glassmorphism)的教學，雖說早就已經知道Adobe Xd如何做出霧面毛玻璃效果，但在觀看教學中，發現有些「細節」的設計是我之前沒注意到的，所以這次就來筆記Adobe Xd如何做出霧面毛玻璃效果(Glassmorphism)
霧面毛玻璃化的設計，算是一個蠻有效提升UI視覺的效果，再加上漸層顏色去做搭配，整體UI的美感和質感會再更提升一個Level！
1.先在畫版上，用Linear Gradient(線型漸變顏色)做出漸層背景(色碼#FBC8D4→#9795F0)，也可以上網找一張背景圖片
2.隨意拉出一個矩形，並調整圓角為37
3.選取矩形後，用Linear Gradient(線型漸變顏色)將兩邊顏色都調成白色，但透明度不同，一邊透明度調為40%；另一邊透明度調為20%
4.勾選矩形的Border(邊框)，將顏色調成白色、粗度為5、透明度為20%
5.勾選矩形的background blur(模糊背景)，將模糊度調成20、亮度調成0、透明度調成100%
6.勾選矩形的Shadow(陰影)，在X座標輸入24、Y座標輸入24、B羽化輸入19
以上，就大功告成囉！
其實最重要的是第五步驟的「勾選background blur」，可以在Adobe Xd很輕鬆的做到霧面毛玻璃化(Glassmorphism)的效果，但若只是將矩形勾選background blur而已的話，整體的質感是還不夠的，所以還要再透過一些細節去完善，例如：圓角、透明度、陰影、配色、邊框…等
最後，為了更凸顯霧面毛玻璃化的「模糊效果」
在後面再加上圓形來看看～
