起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識用戶界面中的Neumorphism（新擬物風格）設計
UI設計如何從日常生活中汲取新的靈感？設計師之后需要進行哪些改進來使其真正的得以應用？
在DoGoodS*!t 活動中，我們花了大概一個小時的時間制作出來的展示案例：
上周我們討論了有關UI設計中的一些新趨勢，其中有一個最近在Dribbble和Instagrame上都很火的風格引起了大家的注意。Jason Kelley給這種新的設計趨勢命名為Neuomorphism，是將New和Skeuomorphism進行組合得到的新名詞。我（Michal Malewicz）決定把其中的字母o去掉，直接叫它Neumorphism，這個新名稱就這樣誕生了。
（同時也感謝其它的精彩點評，我知道它跟Skeuomorphism總是分不開的，它們都是設計師對于設計趨勢與現實生活的一些理解）
同時也建議大家閱讀我的下一篇文章：為什么我不認為Neuomorphism這一設計趨勢會在2020年徹底爆發？
還有人在使用Skeuomorphism（擬真設計）風格嗎？
盡管Skeuomorphism仍然存在于一些UI設計中（比如說你桌面的垃圾桶圖標），但是這種風格中一些特定部分的趨勢更加明顯。
正如Kamil Falana所說，設計形態從完全沒有生命的屏幕元素，開始向我們現實生活中真實存在的物體靠攏。
同時我們也注意到，這種變化正在我們的身邊悄悄發生著。蘋果公司的設計就是一個很好的例子，他們在極簡扁平的基礎上加入了3D的質感，用戶似乎對這種設計很有好感。
設計風格的回歸，是否是更好的選擇？
整個趨勢始于下面這張在Dribbble上一炮而紅的設計作品。
設計師alexplyuto在Dribbble上發表了這張作品，獲得了3000多個點贊，同時也推動了這一趨勢的發展。之后類似風格的作品開始大量出現，我們也做了一組類似的設計:-)
可以說這組作品開創了一種趨勢，盡管其中的某些部分并沒有多大實際意義（又把我們帶回過去了？），但是它激發了我們對于UI設計的熱情，感謝Alex！
Neumorphic與以往的設計有什么不同？
由于按鈕設計的變化并不是很大，因此讓我們將重點放在卡片的設計上，它賦予了這一元素新的視覺風格。
Modern/Material 風格的卡片
Modern/Material 風格的卡片通常是為元素添加陰影，讓用戶感覺它們是漂浮在背景之上的。陰影可以體現一種空間縱深感，同時在元素沒有邊框的情況下還可以用來定義本身的形狀。
Neumorphic 風格的卡片
然而Neumorphic 風格的卡片，是一塊背景上的突起，采用的是與背景完全相同的材質，當我們從側面看它的時候，它不是懸浮在半空中的。
通過兩種陰影的疊加可以很輕松的實現這種效果，一個陰影為負值，另一個為正值即可。但是要注意的是，這時候我們的背景就不能用純黑或者純白色，至少需要有點顏色的變化，這樣淺色或者深色的陰影才能得以呈現。你可以選擇使用不同顏色的作為背景，冷色或者暖色都可以，只需要保證淺色或者深色的陰影能被用戶感知到即可。
這里是一個小小的參考數值，可以根據自己的設計案例來進行相應修改：
Neumorphic設計的優缺點
這種新風格的優勢就是新鮮感（至少它接下來還會持續很長一段時間），它為UI設計帶來了新的靈感，使這一行業煥發了新生。同時它也可以與其它的設計風格進行結合，所以也不會導致整個界面都是這種凹凸不平的質感。
但是目前它也存在一些設計上的弊端，亟待解決，其中兩個主要的問題就是：
- 產品可用性；
- 實際編程開發難度。
產品可用性——可見性
可見性的問題主要在于元素與背景之間的對比關系，當采用同樣的質感和顏色的時候，他們之間就會缺乏對比度，這時候我們就需要通過陰影來使其產生對比。在我們之前的案例嘗試中，我們得出了一些有效的參考數值。
可以看到的是，不論是Modern風格的卡片還是Neuomorphic風格的卡片，它們與背景之間的對比都不是很明顯，因為它們的主要功能是用來展示內容，而并不是為了與用戶交互，我們的主要任務，是得保證像按鈕這類交互控件在界面上足夠顯眼。
因為兩者之間的差異很小，所以如果我們想讓卡片有一個更明顯的對比，就得這樣做：
但是沒有人會使用這么重的陰影，所以我們就得想辦法去提高頁面元素的可用性。這種假設讓我們得出了一個結論就是，只要我們對重要的元素通過字體、組別、對比等方式進行正確的層級劃分，那么這些卡片的重要性就不是很高了。
針對這一觀點我還沒有展開測試（之后會找時間來進行一下），但現在我們假設以下兩個元素都代表“確定”的意思，盡管有些用戶可能一開始沒注意到圖標周圍的陰影邊框，但是它仍舊有足夠的對比度，來讓用戶感知到，并且去點擊它。
產品可用性——易用性
盡管“按鈕元素”應該看起來像一個按鈕，但是只要圖標本身與背景有足夠的對比度，它就是有效的。因此，這里要明確的是，如果要使用這種風格的設計，請確保你頁面中的重要元素足夠突出。
畢竟，大多數Modern風格卡片的陰影也沒有達到足夠高的對比度。
只適用于卡片設計嗎？
可用性的一個主要問題在于如果我們我們不是將它用于卡片，而是用在設計按鈕上。
我們可以很容易的通過內陰影將它轉換成一個按下的狀態，就像下面的案例呈現的那樣。
禁止這樣設計
其中的設計隱患就很大了。
這兩種狀態之間太類似了，不足以呈現它們之間的差異。所以我們需要考慮是否可以通過其他的表現形態來增強效果，使它傳達的含義始終明確。
這里有一些初步的想法，比如開始狀態是線性icon，按下之后變成填充型icon、使用下畫線或者顏色填充。
一些設計想法，保證按鈕的狀態正確顯示。
在做設計的時候需要時刻銘記：人們都傾向于好看的設計，但是我們首先得保證它是好用的。
編程開發
我們將開發歸為一個新的類別，實際上它的CSS樣式編碼難度沒我們想象的那么大，雖然我們還沒在Swift和Kotlin中進行嘗試，但是我不認為它是個問題。
當然，你用逗號將兩個盒子陰影的數值合并為一行代碼。
一位前端開發工程師Adam編寫了這個網站：https://neumorphism.io，你可以通過它來自動生成CSS樣式代碼。
其他的影響
然而背景的形狀也是我們需要考慮的一部分，這種新的設計形式需要與大量的按鈕和開關相結合，在一些案例中我們只需要簡單的退回到之前的設計模式，并且將效果導出為位圖。這似乎是一種回歸，但是它其實完全沒有必要，現在可以輕松的用代碼來實現這些按鈕的樣式，用現代的技術來進行完美呈現。
我們也做了這方面的練習（不久之后會發布出來）來測試有哪些簡單的效果是可以實現的，盡管它目前看起來還是有點奇怪并且復古，但是讓按鈕真的看起來像一個按鈕還是挺有意思的。
我們真的需要它嗎？
這一設計趨勢的出現，無疑激發了許多設計師的靈感，與以前使用的卡片組件的可用性問題相比，它的問題其實并不是那么嚴重。
所以瘋狂大膽的去嘗試吧！順應這一趨勢，并對其進行調整，使它成為你自己的風格。UI設計師的工作就是在拖動方塊，因此每次方塊出現“差異”和“新奇”時，都會帶來一些喜悅之感。如果沒有這種不斷的探索的精神，那么所有的產品看起來都是一毛一樣。
讓我們找點樂子！
但同時也要記住，每個新趨勢都有一些潛在的陷阱，必須謹慎對待，才能讓它得以使用。
原作者：Michal Malewicz，是HYPE4的CEO | UX設計師 | 作家 | 演講人，他從1999年開始從事網頁設計工作。
原文鏈接：https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
編譯：視覺派Pie
本文由 @視覺派Pie 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
