當得知新擬態（ neumorphism ）成爲2020年UI設計的主要趨勢之一時，我就想嘗試一下。而且，我想探索一種在黑暗模式下的新擬態風格。
爲什麼選擇重設計 Spotify？
尋找靈感初期，我嘗試了很多應用，最終選擇 Spotify，主要是因爲：
1.Spotify 已經擁有了約爲2億8千多龐大的用戶羣，其中很多都是設計師，他們對新擬態這種設計語言比較熟悉，用戶認知度相對較高。
2.Spotify 的設計裏使用了包括從卡片、 標籤、列表、滑塊到文本字段的所有小部件，考慮到元素的層次結構，很難爲這些部件設計統一設計樣式。
3.就定義關鍵用戶使用流和關鍵頁面而言，Spotify的架構非常簡單，這爲推進 Neumorphism 提供了完美的先天條件。（畢竟新擬態風格不是適合所有的的產品）
新擬態是個非常簡單的詞
新擬態其實很簡單，只需要記住兩個核心原則：
1.使用高光和陰影來定義屏幕上對象的形狀
2.降低對比度，不使用全白或全黑，這樣可以突出顯示高光和陰影
現在開始！
首先需要確定調色板，字體和結構與 Spotify 的外觀完全相似。如果你看到“啓動和登錄”屏幕，就會意識到，我的目的是保證其與其他樣式混合來時，仍然可以保留這些元素。通過這種方式，我們可以保證在使用Neumorphism時，避免給人一種硬擠出來的“塑料感”，保證產品可用性的基礎上修改設計風格。
在圍繞 Spotify logo 的啓動頁上，我向其引入了一個層級的概念，就像在真正的按鈕上四周略微擡起邊緣一樣。這使 logo 具有更清晰的邊緣，同時又不影響其外觀。另一方面，logo是可縮放的。
以下是做出這樣效果的陰影參數
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
並翻轉內層的陰影（Spotify logo），交換明暗X和Y值；
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
在設計“登錄”頁時，我覺得不應該過度使用它，而要保持簡單，這就是爲什麼只有按鈕變成了 Neumorphism 樣式的原因，而屏幕的其餘部分則保持不變。當設計中包含重要CTA的按鈕時，通常需要考慮對比度，以使其醒目且易於辨認。保持按鈕原來的樣子不變，唯一添加了角度和各種柔和陰影。甚至對按鈕都應用了相同的樣式，並且讓它們拉伸到跟其他3個登錄入口點都具有同樣的視覺重量。
以下是做出這樣效果的陰影參數
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
翻轉內層的陰影，交換明暗X和Y值；
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
小實驗！
我認爲這是嘗試這種趨勢的絕佳機會，儘管要記住屏幕上的所有重要元素都應具有足夠高的對比度。我嘗試爲屏幕上所有可操作的圖標以及底部的導航圖標創建一個平滑的凹凸樣效果，以使其更加突出。除了這種“枕頭”效果，我還進行了其他三種嘗試，以幫助按鈕更突出。
1.即使它違背了 Neumorphism 設計的低對比度原則，我還是放棄了灰色圖標，取而代之的是白色，以保證凸顯重要的圖標。
2.在按鈕的按下/縮進狀態中添加了一個覆蓋層，不僅看起來更像是一個物理按鈕被平壓，而且還有助於區分其按下狀態和未按下狀態。
3.將疊加層添加到未按下狀態，只是爲了讓它看起來更像一個按鈕。
另一個問題是，怎麼表達按下時的按鈕。
僅靠縮進效果是不足夠的，並且可能使用戶懷疑哪個狀態是活動或不活動。我們嘗試更改顏色或圖標（或兩者）以確保用戶知道某些東西現在處於活動狀態。
因此，對於選中的選項卡，我更改了圖標的顏色，使其與未按下狀態有足夠的對比度。
相同的規則也應用於所有其他頁面。對於音樂播放器，中央卡，控件和滑桿均已採用 Neumorphism 風格 。中央卡從背景中擠出，而圖像並沒有賦予樣式，因爲它已經是屏幕上最大的元素，這樣讓它的存在非常微妙。所有控件都具有相同的凹凸效果，唯一的區別是未按下“播放”按鈕和“暫停”按鈕，並且顏色也不同，因爲這實際上視覺層次結構中交代重要層級時非常重要的。
所有卡片都是從背景中以低對比度擠出的，因爲如果我們通過排版，接近度和與重要元素的對比度來進行正確的層次劃分，這樣的低對比度也足夠。
爲了增加難度，我將背景設置爲漸變。具有用於 “Neumorphism ” 的漸變背景的挑戰在於，必須根據其在屏幕上的位置不斷更改卡片的材質以匹配背景。當我們沿着屏幕向下移動時，基礎顏色會不斷變化，這意味着淺色和深色陰影也會發生變化。
要記住的另一個關鍵點是，X和Y的值隨着陰影的元素的大小而增加或減少。
圖像，圖標和字體之間的層次結構必須清楚，間距必須明確定義。像播放列表一樣，我可以使單元格變成 Neumorphism 質感 ，但是這樣可以消除不必要的注意力。我沒有爲任何文本元素添加 Neumorphism 樣式。
要解決可用性問題，需要在 Neumorphism 風格和設計元素中找到平衡。
學習心得
使用 Neumorphism 中，其中大多數元素浮動並脫穎而出，在單個屏幕上相互爭奪注意力，因此需要保持其他元素的微妙性，這樣用戶就不難理解設計層次結構和焦點，從而保持用戶的決策過程以及他們的思維過程邏輯清晰。
每個應用 Neumorphism 的產品都可以根據其功能和要求有自己的U設計原則。
“作爲設計師，需要確保滿足標準的可用性需求。”