When neumorphism was predicted to be one of the top 2020 UI design trends, I wanted to give it a shot. Having said that, I wanted to explore a type that had not gone overboard, neumorphism in Dark Mode.

當neumorphism預計為頂部2020的UI設計趨勢之一，我想給它一個鏡頭。 話雖如此，我想探索一種在黑暗模式下不會過分進化的類型。

為什么選擇Spotify？ (Why Spotify?)

Well while looking around for inspiration, I stopped at Spotify mainly because

在尋找靈感的同時，我之所以停在Spotify上，主要是因為

• Spotify has a user base of around 286M, a product also used by a lot of designers, increasing the probability of its reach.
  Spotify的用戶群約為286M，許多設計師也使用該產品，從而增加了其普及的可能性。
• Spotify has all the widgets right from cards, chips, lists, sliders to text fields, which makes it tricky to design for this style, considering hierarchy of elements.
  Spotify擁有從卡片，籌碼，列表，滑塊到文本字段的所有小部件，考慮到元素的層次結構，很難為這種樣式設計樣式。

• Spotify’s architecture is pretty straightforward in terms of defining key user flows and key screens making it the perfect use case for Neumorphism. (Since we all know by now that iIt’s not a style for all products)

  就定義關鍵用戶流和關鍵屏幕而言，Spotify的體系結構非常簡單，使其成為Neumorphism的完美用例。 (因為到目前為止我們都知道iIt并不是所有產品的風格)

“同質是簡單的話” (“Neumorphism is in simple words”)

It’s a minimal, soft UI with two core principles:

這是一個最小的， 柔軟的用戶界面，具有兩個核心原則 ：

• It uses highlights and shadows to define the shapes of objects on the screen.
  它使用高光和陰影來定義屏幕上對象的形狀。
• Contrast is generally reduced; full white or black aren’t used, which is what allows the highlights and shadows to stand out.
  對比度通常會降低； 不使用全白或全黑，這是使高光和陰影脫穎而出的原因。

讓我們開始！ (Let’s Begin!)

The first decision taken was to keep the colour palette, fonts and structure of the app pretty similar to what it is. If you look at the Splash and Login screen you will realise, I aimed at preserving the ways these elements already work by mixing it with other styles. In this way we can use Neumorphism so it’s not overwhelmingly “soft extruded plastic” everywhere, to complement already usable designs in non-invasive ways.

做出的第一個決定是保持應用程序的調色板，字體和結構與外觀非常相似。 如果您看到“啟動和登錄”屏幕，就會發現， 我的目標是 通過將其與其他樣式混合來 保留這些元素已經起作用 的方式。 通過這種方式，我們可以使用Neumorphism，從而不會在任何地方都壓倒性地“軟擠出塑料”，以非侵入性方式補充已經可用的設計。

On the splash screen around the Spotify logo, I introduced a lip/overlay to it, like on real buttons which has a slightly lifted edge all around. This gives the logo a more defined edge, while not taking away from the neumorphic charm. On the other hand, the logo is indented.

在圍繞Spotify徽標的啟動屏幕上，我向其引入了一個唇部/覆蓋層，就像在真正的按鈕 上四周略微抬起邊緣一樣。 這使徽標具有更清晰的邊緣，同時又不影響其外觀。 另一方面，徽標是縮進的。

The way to do this is simple. You need to give a light and dark inner shadow to the outer layer along with drop shadow.

這樣做的方法很簡單。 您需要給外層提供明暗的內部陰影以及陰影。

Here are the values I used for the outer layer

這是我用于外層的值

shadow 1: (color.dark, blur 10, x: -6, y: -6)

陰影1：(color.dark，blur 10，x：-6，y：-6)

shadow 2: (color.light, blur 10, x: 6, y: 6)

陰影2：(color.light，blur 10，x：6，y：6)

and flipped the shadows for the inner layer(Spotify logo), exchanging the light and dark X and Y values;

并翻轉內層的陰影(Spotify徽標)， 交換明暗X和Y值 ；

shadow 1: (color.dark, blur 10, x: 6, y: 6)

陰影1：(color.dark，blur 10，x：6，y：6)

shadow 2: (color.light, blur 10, x: -6, y: -6)

陰影2：(color.light，blur 10，x：-6，y：-6)

Coming to the Login screen, I felt we shouldn’t overdo it but keep it simple which is why only the buttons are made neumorphic while the rest of the screen is left as is. When you design a button with an important CTA, you often consider and take note on the contrast ratio to make it stand out, as well as easily legible. Keeping the fact intact, I kept the buttons as is. The only thing that’s added is angles and a variety of soft shadows. The same technique is applied even for the buttons but instead of giving them an indented look, I made them extrude giving equal importance to all 3 login entry points. Here are the values I used for button outer layer

進入“登錄”屏幕，我覺得我們不應該過度使用它，而要保持簡單 ，這就是為什么只有按鈕變成了同形的原因，而屏幕的其余部分則保持不變 。 當設計帶有重要CTA的按鈕時，您通常會考慮并注意對比度，以使其突出并易于辨認。 保持事實不變，我將按鈕保持原樣。 唯一添加的是角度和各種柔和陰影。 甚至對按鈕都應用了相同的技術，但是我沒有給它們縮進的外觀，而是讓它們進行拉伸，使其對所有3個登錄入口點都具有同等的重要性。 這是我用于按鈕外層的值

shadow 1: (color.dark, blur 10, x: 6, y: 6)

陰影1：(color.dark，blur 10，x：6，y：6)

shadow 2: (color.light, blur 10, x: -6, y: -6)

陰影2：(color.light，blur 10，x：-6，y：-6)

and flipped the shadows for the inner layer, exchanging the light and dark X and Y values;

翻轉內層的陰影，交換明暗X和Y值；

shadow 1: (color.dark, blur 10, x: -6, y: -6)

陰影1：(color.dark，blur 10，x：-6，y：-6)

shadow 2: (color.light, blur 10, x: 6, y: 6)

陰影2：(color.light，blur 10，x：6，y：6)

一點實驗！ (A Little Experimentation!)

I thought this is a great opportunity to experiment with this trend, though keeping in mind that all the important elements on the screen should have high enough contrast. I tried to create a smooth bump-like effect for all the actionable icons on the screen along with the bottom nav icons, to give them more prominence. Along with this ‘pillow’ effect, I tried out three changes to help the buttons stand out a little more.

我認為這是嘗試這種趨勢的絕佳機會，盡管要記住屏幕上的所有重要元素都應具有足夠高的對比度。 我嘗試為屏幕上的所有可操作圖標以及底部的導航圖標創建一個平滑的凹凸樣效果 ，以使它們更加突出。 除了這種“枕頭”效果外，我還嘗試了三種更改以幫助按鈕更突出。

• even though it goes against the low-contrast principle of neumorphic design, I still ditched the grey icon and went with white instead, so that it really stands out.

  即使它違背了亞態設計的低對比度原理， 我還是放棄了灰色圖標，而改用白色 ，這樣它才真正脫穎而出。

• added an overlay to the pressed/indented state for the button, not only does it look more like a physical button being pressed flat but it also helps distinguish its pressed state from its unpressed state.

  在按鈕的按下/縮進狀態中添加了一個覆蓋層，它不僅看起來更像是物理按下的按鈕，而且還有助于區分其按下狀態和未按下狀態。

• added an overlay to the unpressed state, just to help mark that it’s a button.

  將疊加層添加到未按下狀態，只是為了幫助標記它是一個按鈕。

Another issue is what to show when the button is pressed.

另一個問題是按下按鈕時顯示什么。

The indented effect may not be enough on its own and may leave users wondering which state is active or inactive. I think this is when we could change the colour or icon (or both) in use to ensure the user knows something is now active.

僅靠縮進效果可能不足，并且可能使用戶懷疑哪個狀態是活動或不活動。 我認為這是我們可以更改使用的顏色或圖標(或兩者)以確保用戶知道某些東西現在處于活動狀態的時候。

Hence, for selected tabs, I changed the color of the icon giving it enough contrast against the unpressed states.

因此，對于選定的選項卡，我更改了圖標的顏色，使其與未按下狀態有足夠的對比度 。

The same rule of thought has been applied to all the other screens. For the Music Player, the central card, controls and sliders are made neumorphic. The central card is extruded from the background while the images have been given absolutely no effects making its presence very subtle since its already the largest element on the screen. All the controls are given the same pillow effect while the only difference is the Play button is unpressed and Pause button is pressed and the color is different since that’s essentially the most important action interns of the visual hierarchy.

相同的思想規則已應用于所有其他屏幕。 對于音樂播放器，中央卡，控件和滑桿已變成中性。 中央卡從背景中擠出，而圖像完全沒有效果，因為它已經是屏幕上最大的元素，所以它的存在非常微妙。 所有控件都具有相同的枕頭效果，唯一的區別是未按下“播放”按鈕和“暫停”按鈕，并且顏色不同，因為這實際上是視覺層次結構中最重要的動作實習生。

All cards are extruded from the background with low contrast since they are not really that important if we do the right hierarchy through typography, proximity and contrast with the important elements.

所有卡片都是從背景中以低對比度擠出的，因為如果我們通過排版，接近度和與重要元素的對比度來進行正確的層次劃分，它們并不是那么重要 。

To make my life more difficult I made the background in gradient. The challenge with having a gradient background for Neumorphism is that you have to keep changing the material of the cards depending on its position on the screen to match the background. The base color keeps changing as we go down the screen which means the light and the dark shadow colours change as well.

為了使我的生活更加困難，我將背景設置為漸變。 具有用于“同態”的漸變背景的挑戰是，您必須根據其在屏幕上的位置來不斷更改卡片的材質以匹配背景。 當我們沿著屏幕向下移動時，基礎顏色會不斷變化，這意味著淺色和深色陰影的顏色也會發生變化。

Another key point to remember is that the values of X and Y increases or decreases depending on the size of the element you’re assigning shadows to.

要記住的另一個關鍵點是，X和Y的值根據要為其分配陰影的元素的大小而增加或減少。

The hierarchies between images, icons and fonts need to be clear and the spacings well defined. Like for the Playlists, I could make the cells neumorphic cards but that would take away all the attention which is unnecessary here. I have not introduced neumorphic style for any text elements as well.

圖像，圖標和字體之間的層次結構必須清楚，間距應明確定義。 像播放列表一樣，我可以使單元格變成神經質卡，但是這樣可以消除所有注意力，而這在這里是不必要的。 我也沒有為任何文本元素介紹過神經變形樣式。

To solve the accessibility issues, you need to strike a proper balance between the elements you’re making neumorphic.

要解決可訪問性問題，您需要在使神經變形的元素之間取得適當的平衡。

學問 (Learnings)

With Neumorphism, where most of the elements float and stand out, competing with one another on a single screen, you need to keep the other elements subtle so its not harder for the user to perceive the design hierarchy and focal point, retaining the significant effect on the user’s decision-making process, as well as their thought process.

使用Neumorphism，其中大多數元素浮動并脫穎而出，在單個屏幕上彼此競爭，因此您需要保持其他元素的微妙性，這樣用戶就不難理解設計層次和焦點，從而保持了顯著效果關于用戶的決策過程以及他們的思考過程。

Every product that applies Neumorphism could have their own rule of UI stages depending on the product’s function and requirements.

每個應用Neumorphism的產品都可以根據其功能和要求有自己的UI階段規則。

“As a designer, you need to ensure standard accessibility needs are met.”

“作為設計師，您需要確保滿足標準的可訪問性需求。”

Thanks for reading! Check out the visual case study on Behance, interactions on Dribbble.

謝謝閱讀！ 查看有關Behance的視覺案例研究，以及Dribbble上的交互作用 。