大概去年一、二月時，就關注到Dribbble上突然很火紅的新擬物化設計(Neumorphism, 又名Soft UI)，不得不說，第一眼看到就有眼睛為之一亮的感覺，馬上讚嘆著：
好美！我愛這種簡單乾淨的風格！
但靜下來思考並稍微觀察細節後，發現可能會有以下問題：
- 區塊(按鈕)之間的對比度不高，不好辨識
→以做成按鈕來說，正常狀態(enable)和點擊後狀態(active)兩者區分的辨識度不高，無法給予使用者良好回饋，也會導致按鈕被點擊的慾望降低 - 整體視覺平平的，缺少層次，不利引導使用者
→因為陰影效果偏柔和，層次感不高，導致整個介面會看不到資訊的重點，不利於引導使用者進行下個操作步驟 - 為了補足上面兩個問題，反而要花費更多時間在做視覺設計
→光上面那二個視覺問題可能就夠讓設計師頭痛了，且實際上設計師應是要花更多時間在「原本要解決的問題」上，若再加上視覺問題(Ex: 可利用顏色、底色、框線…等去加強)，反而會模糊原本的問題根本
原本想馬上來學，但光先想到上面那幾點問題就讓我卻步了，結果一個卻步就卻步了快一年 XD
但無論如何，總覺得有些東西還是要自己真正嘗試後才會瞭解其中
● 凸面按鈕製作流程 ↓
1.隨意的拉出一個矩形後，再複製二個一模一樣的矩形出來，三個矩形重疊在一起，並依序命名：按鈕、陰影、高光(命名只是方便說明和辨識)
2.將矩形「按鈕」的顏色Fill改成跟背景一樣的顏色，並將Border設為不顯示
＊ 注意：做Neumorphism設計有個必要限制：背景絕對不能全黑(#000000)和全白(#FFFFFF)
3.將矩形「陰影」的Shadow設為顯示，依個人需求去調整陰影顏色(暗色)、透明度、XY座標(正值)和羽化
＊ 注意：X和Y值必為「正值」，Shadow才會顯示在右下
4.將矩形「高光」的Shadow設為顯示，再去調整陰影顏色(亮色)、透明度、XY座標(負值)和羽化
＊ 注意：X和Y值必為「負值」，Shadow才會顯示在左上
5.凸面按鈕大功告成！
● 凹面按鈕製作流程 ↓
1.跟凸面的步驟1一樣，隨意的拉出一個矩形後，再複製二個一模一樣的矩形出來，三個矩形重疊在一起，並依序命名：按鈕、陰影、高光
2.將矩形「按鈕」的顏色改成任一顏色，並將Border設為不顯示
＊ Tip：因為這個最上層的矩形最後會被剪裁遮色掉(就不會看到最上層矩形的顏色)，所以這裡改成任何顏色都沒差，只是方便辨識用
3.將矩形「陰影」的寬度和高度【向右下】拉長一點(拉出的範圍要大於矩形「按鈕」)，並將顏色Fill設為不顯示
再調整矩形的Border的粗細、顏色(暗色)、透明度
接著先勾選Background Blur，再換成勾選「Object Blur」的模糊效果
4.將矩形「高光」的寬度和高度【向左上】拉長一點(拉出的範圍要大於矩形「按鈕」)，並將顏色Fill設為不顯示
再調整矩形的Border的粗細、顏色(亮色)、透明度
接著先勾選Background Blur，再換成勾選「Object Blur」的模糊效果
5.最後，將三個矩形同時選取後，按右鍵選擇Mask with shape(剪裁遮色片)，或是按快捷鍵command+shift+M
凹面按鈕大功告成！
凸面按鈕蠻簡單也蠻好做的！
凹面按鈕相對來說就繁雜了一點
不過整體來說都不會到很難做～也藉此把所有製作過程記錄起來，以防自己以後忘記：）
既然都學了怎麼做新擬物化設計，當然就要來實作UI看看呈現如何～
所以這次就參考Spotify的搜尋介面來做新擬物化的改版設計
若先不考慮好不好實作、按鈕辨識性、易用性…等，就外觀來看，個人還是覺得挺美、乾淨、舒服的～
Hi~~~dear friends
或許我不認識你，但很開心你能看到最後!
如果看完覺得對這篇有好感的話，歡迎你拍手支持👏👏👏
