UI設(shè)計(jì)如何從日常生活中汲取新的靈感？設(shè)計(jì)師之后需要進(jìn)行哪些改進(jìn)來(lái)使其真正的得以應(yīng)用？

在DoGoodS*!t 活動(dòng)中，我們花了大概一個(gè)小時(shí)的時(shí)間制作出來(lái)的展示案例：

上周我們討論了有關(guān)UI設(shè)計(jì)中的一些新趨勢(shì)，其中有一個(gè)最近在Dribbble和Instagrame上都很火的風(fēng)格引起了大家的注意。Jason Kelley給這種新的設(shè)計(jì)趨勢(shì)命名為Neuomorphism，是將New和Skeuomorphism進(jìn)行組合得到的新名詞。我（Michal Malewicz）決定把其中的字母o去掉，直接叫它Neumorphism，這個(gè)新名稱就這樣誕生了。

（同時(shí)也感謝其它的精彩點(diǎn)評(píng)，我知道它跟Skeuomorphism總是分不開(kāi)的，它們都是設(shè)計(jì)師對(duì)于設(shè)計(jì)趨勢(shì)與現(xiàn)實(shí)生活的一些理解）

同時(shí)也建議大家閱讀我的下一篇文章：為什么我不認(rèn)為Neuomorphism這一設(shè)計(jì)趨勢(shì)會(huì)在2020年徹底爆發(fā)？

還有人在使用Skeuomorphism（擬真設(shè)計(jì)）風(fēng)格嗎？

盡管Skeuomorphism仍然存在于一些UI設(shè)計(jì)中（比如說(shuō)你桌面的垃圾桶圖標(biāo)），但是這種風(fēng)格中一些特定部分的趨勢(shì)更加明顯。

正如Kamil Falana所說(shuō)，設(shè)計(jì)形態(tài)從完全沒(méi)有生命的屏幕元素，開(kāi)始向我們現(xiàn)實(shí)生活中真實(shí)存在的物體靠攏。

同時(shí)我們也注意到，這種變化正在我們的身邊悄悄發(fā)生著。蘋果公司的設(shè)計(jì)就是一個(gè)很好的例子，他們?cè)跇O簡(jiǎn)扁平的基礎(chǔ)上加入了3D的質(zhì)感，用戶似乎對(duì)這種設(shè)計(jì)很有好感。

設(shè)計(jì)風(fēng)格的回歸，是否是更好的選擇？

整個(gè)趨勢(shì)始于下面這張?jiān)贒ribbble上一炮而紅的設(shè)計(jì)作品。

設(shè)計(jì)師alexplyuto在Dribbble上發(fā)表了這張作品，獲得了3000多個(gè)點(diǎn)贊，同時(shí)也推動(dòng)了這一趨勢(shì)的發(fā)展。之后類似風(fēng)格的作品開(kāi)始大量出現(xiàn)，我們也做了一組類似的設(shè)計(jì):-)

可以說(shuō)這組作品開(kāi)創(chuàng)了一種趨勢(shì)，盡管其中的某些部分并沒(méi)有多大實(shí)際意義（又把我們帶回過(guò)去了？），但是它激發(fā)了我們對(duì)于UI設(shè)計(jì)的熱情，感謝Alex！

Neumorphic與以往的設(shè)計(jì)有什么不同？

由于按鈕設(shè)計(jì)的變化并不是很大，因此讓我們將重點(diǎn)放在卡片的設(shè)計(jì)上，它賦予了這一元素新的視覺(jué)風(fēng)格。

Modern/Material 風(fēng)格的卡片

Modern/Material 風(fēng)格的卡片通常是為元素添加陰影，讓用戶感覺(jué)它們是漂浮在背景之上的。陰影可以體現(xiàn)一種空間縱深感，同時(shí)在元素沒(méi)有邊框的情況下還可以用來(lái)定義本身的形狀。

Neumorphic 風(fēng)格的卡片

然而Neumorphic 風(fēng)格的卡片，是一塊背景上的突起，采用的是與背景完全相同的材質(zhì)，當(dāng)我們從側(cè)面看它的時(shí)候，它不是懸浮在半空中的。

通過(guò)兩種陰影的疊加可以很輕松的實(shí)現(xiàn)這種效果，一個(gè)陰影為負(fù)值，另一個(gè)為正值即可。但是要注意的是，這時(shí)候我們的背景就不能用純黑或者純白色，至少需要有點(diǎn)顏色的變化，這樣淺色或者深色的陰影才能得以呈現(xiàn)。你可以選擇使用不同顏色的作為背景，冷色或者暖色都可以，只需要保證淺色或者深色的陰影能被用戶感知到即可。

這里是一個(gè)小小的參考數(shù)值，可以根據(jù)自己的設(shè)計(jì)案例來(lái)進(jìn)行相應(yīng)修改：

Neumorphic設(shè)計(jì)的優(yōu)缺點(diǎn)

這種新風(fēng)格的優(yōu)勢(shì)就是新鮮感（至少它接下來(lái)還會(huì)持續(xù)很長(zhǎng)一段時(shí)間），它為UI設(shè)計(jì)帶來(lái)了新的靈感，使這一行業(yè)煥發(fā)了新生。同時(shí)它也可以與其它的設(shè)計(jì)風(fēng)格進(jìn)行結(jié)合，所以也不會(huì)導(dǎo)致整個(gè)界面都是這種凹凸不平的質(zhì)感。

但是目前它也存在一些設(shè)計(jì)上的弊端，亟待解決，其中兩個(gè)主要的問(wèn)題就是：

• 產(chǎn)品可用性；
• 實(shí)際編程開(kāi)發(fā)難度。

產(chǎn)品可用性——可見(jiàn)性

可見(jiàn)性的問(wèn)題主要在于元素與背景之間的對(duì)比關(guān)系，當(dāng)采用同樣的質(zhì)感和顏色的時(shí)候，他們之間就會(huì)缺乏對(duì)比度，這時(shí)候我們就需要通過(guò)陰影來(lái)使其產(chǎn)生對(duì)比。在我們之前的案例嘗試中，我們得出了一些有效的參考數(shù)值。

可以看到的是，不論是Modern風(fēng)格的卡片還是Neuomorphic風(fēng)格的卡片，它們與背景之間的對(duì)比都不是很明顯，因?yàn)樗鼈兊闹饕δ苁怯脕?lái)展示內(nèi)容，而并不是為了與用戶交互，我們的主要任務(wù)，是得保證像按鈕這類交互控件在界面上足夠顯眼。

因?yàn)閮烧咧g的差異很小，所以如果我們想讓卡片有一個(gè)更明顯的對(duì)比，就得這樣做：

但是沒(méi)有人會(huì)使用這么重的陰影，所以我們就得想辦法去提高頁(yè)面元素的可用性。這種假設(shè)讓我們得出了一個(gè)結(jié)論就是，只要我們對(duì)重要的元素通過(guò)字體、組別、對(duì)比等方式進(jìn)行正確的層級(jí)劃分，那么這些卡片的重要性就不是很高了。

針對(duì)這一觀點(diǎn)我還沒(méi)有展開(kāi)測(cè)試（之后會(huì)找時(shí)間來(lái)進(jìn)行一下），但現(xiàn)在我們假設(shè)以下兩個(gè)元素都代表“確定”的意思，盡管有些用戶可能一開(kāi)始沒(méi)注意到圖標(biāo)周圍的陰影邊框，但是它仍舊有足夠的對(duì)比度，來(lái)讓用戶感知到，并且去點(diǎn)擊它。

產(chǎn)品可用性——易用性

盡管“按鈕元素”應(yīng)該看起來(lái)像一個(gè)按鈕，但是只要圖標(biāo)本身與背景有足夠的對(duì)比度，它就是有效的。因此，這里要明確的是，如果要使用這種風(fēng)格的設(shè)計(jì)，請(qǐng)確保你頁(yè)面中的重要元素足夠突出。

畢竟，大多數(shù)Modern風(fēng)格卡片的陰影也沒(méi)有達(dá)到足夠高的對(duì)比度。

只適用于卡片設(shè)計(jì)嗎？

可用性的一個(gè)主要問(wèn)題在于如果我們我們不是將它用于卡片，而是用在設(shè)計(jì)按鈕上。

我們可以很容易的通過(guò)內(nèi)陰影將它轉(zhuǎn)換成一個(gè)按下的狀態(tài)，就像下面的案例呈現(xiàn)的那樣。

禁止這樣設(shè)計(jì)

其中的設(shè)計(jì)隱患就很大了。

這兩種狀態(tài)之間太類似了，不足以呈現(xiàn)它們之間的差異。所以我們需要考慮是否可以通過(guò)其他的表現(xiàn)形態(tài)來(lái)增強(qiáng)效果，使它傳達(dá)的含義始終明確。

這里有一些初步的想法，比如開(kāi)始狀態(tài)是線性icon，按下之后變成填充型icon、使用下畫線或者顏色填充。

一些設(shè)計(jì)想法，保證按鈕的狀態(tài)正確顯示。

在做設(shè)計(jì)的時(shí)候需要時(shí)刻銘記：人們都傾向于好看的設(shè)計(jì)，但是我們首先得保證它是好用的。

編程開(kāi)發(fā)

我們將開(kāi)發(fā)歸為一個(gè)新的類別，實(shí)際上它的CSS樣式編碼難度沒(méi)我們想象的那么大，雖然我們還沒(méi)在Swift和Kotlin中進(jìn)行嘗試，但是我不認(rèn)為它是個(gè)問(wèn)題。

當(dāng)然，你用逗號(hào)將兩個(gè)盒子陰影的數(shù)值合并為一行代碼。

一位前端開(kāi)發(fā)工程師Adam編寫了這個(gè)網(wǎng)站：https://neumorphism.io，你可以通過(guò)它來(lái)自動(dòng)生成CSS樣式代碼。

其他的影響

然而背景的形狀也是我們需要考慮的一部分，這種新的設(shè)計(jì)形式需要與大量的按鈕和開(kāi)關(guān)相結(jié)合，在一些案例中我們只需要簡(jiǎn)單的退回到之前的設(shè)計(jì)模式，并且將效果導(dǎo)出為位圖。這似乎是一種回歸，但是它其實(shí)完全沒(méi)有必要，現(xiàn)在可以輕松的用代碼來(lái)實(shí)現(xiàn)這些按鈕的樣式，用現(xiàn)代的技術(shù)來(lái)進(jìn)行完美呈現(xiàn)。

我們也做了這方面的練習(xí)（不久之后會(huì)發(fā)布出來(lái)）來(lái)測(cè)試有哪些簡(jiǎn)單的效果是可以實(shí)現(xiàn)的，盡管它目前看起來(lái)還是有點(diǎn)奇怪并且復(fù)古，但是讓按鈕真的看起來(lái)像一個(gè)按鈕還是挺有意思的。

我們真的需要它嗎？

這一設(shè)計(jì)趨勢(shì)的出現(xiàn)，無(wú)疑激發(fā)了許多設(shè)計(jì)師的靈感，與以前使用的卡片組件的可用性問(wèn)題相比，它的問(wèn)題其實(shí)并不是那么嚴(yán)重。

所以瘋狂大膽的去嘗試吧！順應(yīng)這一趨勢(shì)，并對(duì)其進(jìn)行調(diào)整，使它成為你自己的風(fēng)格。UI設(shè)計(jì)師的工作就是在拖動(dòng)方塊，因此每次方塊出現(xiàn)“差異”和“新奇”時(shí)，都會(huì)帶來(lái)一些喜悅之感。如果沒(méi)有這種不斷的探索的精神，那么所有的產(chǎn)品看起來(lái)都是一毛一樣。

讓我們找點(diǎn)樂(lè)子！

但同時(shí)也要記住，每個(gè)新趨勢(shì)都有一些潛在的陷阱，必須謹(jǐn)慎對(duì)待，才能讓它得以使用。

原作者：Michal Malewicz，是HYPE4的CEO | UX設(shè)計(jì)師 | 作家 | 演講人，他從1999年開(kāi)始從事網(wǎng)頁(yè)設(shè)計(jì)工作。

原文鏈接：https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

編譯：視覺(jué)派Pie

本文由 @視覺(jué)派Pie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議