用戶界面中的Neumorphism(新擬物風格)設計

0 評論 1.1萬 瀏覽 16 收藏 13 分鐘

UI設計如何從日常生活中汲取新的靈感?設計師之后需要進行哪些改進來使其真正的得以應用?

在DoGoodS*!t 活動中,我們花了大概一個小時的時間制作出來的展示案例:

用戶界面中的Neumorphism

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

(同時也感謝其它的精彩點評,我知道它跟Skeuomorphism總是分不開的,它們都是設計師對于設計趨勢與現實生活的一些理解)

同時也建議大家閱讀我的下一篇文章:為什么我不認為Neuomorphism這一設計趨勢會在2020年徹底爆發?

還有人在使用Skeuomorphism(擬真設計)風格嗎?

盡管Skeuomorphism仍然存在于一些UI設計中(比如說你桌面的垃圾桶圖標),但是這種風格中一些特定部分的趨勢更加明顯。

正如Kamil Falana所說,設計形態從完全沒有生命的屏幕元素,開始向我們現實生活中真實存在的物體靠攏。

用戶界面中的Neumorphism

同時我們也注意到,這種變化正在我們的身邊悄悄發生著。蘋果公司的設計就是一個很好的例子,他們在極簡扁平的基礎上加入了3D的質感,用戶似乎對這種設計很有好感。

設計風格的回歸,是否是更好的選擇?

整個趨勢始于下面這張在Dribbble上一炮而紅的設計作品。

用戶界面中的Neumorphism

設計師alexplyuto在Dribbble上發表了這張作品,獲得了3000多個點贊,同時也推動了這一趨勢的發展。之后類似風格的作品開始大量出現,我們也做了一組類似的設計:-)

可以說這組作品開創了一種趨勢,盡管其中的某些部分并沒有多大實際意義(又把我們帶回過去了?),但是它激發了我們對于UI設計的熱情,感謝Alex!

Neumorphic與以往的設計有什么不同?

由于按鈕設計的變化并不是很大,因此讓我們將重點放在卡片的設計上,它賦予了這一元素新的視覺風格。

用戶界面中的Neumorphism

Modern/Material 風格的卡片

Modern/Material 風格的卡片通常是為元素添加陰影,讓用戶感覺它們是漂浮在背景之上的。陰影可以體現一種空間縱深感,同時在元素沒有邊框的情況下還可以用來定義本身的形狀。

Neumorphic 風格的卡片

然而Neumorphic 風格的卡片,是一塊背景上的突起,采用的是與背景完全相同的材質,當我們從側面看它的時候,它不是懸浮在半空中的。

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

這里是一個小小的參考數值,可以根據自己的設計案例來進行相應修改:

用戶界面中的Neumorphism

Neumorphic設計的優缺點

這種新風格的優勢就是新鮮感(至少它接下來還會持續很長一段時間),它為UI設計帶來了新的靈感,使這一行業煥發了新生。同時它也可以與其它的設計風格進行結合,所以也不會導致整個界面都是這種凹凸不平的質感。

但是目前它也存在一些設計上的弊端,亟待解決,其中兩個主要的問題就是:

  • 產品可用性;
  • 實際編程開發難度。

產品可用性——可見性

可見性的問題主要在于元素與背景之間的對比關系,當采用同樣的質感和顏色的時候,他們之間就會缺乏對比度,這時候我們就需要通過陰影來使其產生對比。在我們之前的案例嘗試中,我們得出了一些有效的參考數值。

用戶界面中的Neumorphism

可以看到的是,不論是Modern風格的卡片還是Neuomorphic風格的卡片,它們與背景之間的對比都不是很明顯,因為它們的主要功能是用來展示內容,而并不是為了與用戶交互,我們的主要任務,是得保證像按鈕這類交互控件在界面上足夠顯眼。

因為兩者之間的差異很小,所以如果我們想讓卡片有一個更明顯的對比,就得這樣做:

用戶界面中的Neumorphism

但是沒有人會使用這么重的陰影,所以我們就得想辦法去提高頁面元素的可用性。這種假設讓我們得出了一個結論就是,只要我們對重要的元素通過字體、組別、對比等方式進行正確的層級劃分,那么這些卡片的重要性就不是很高了。

針對這一觀點我還沒有展開測試(之后會找時間來進行一下),但現在我們假設以下兩個元素都代表“確定”的意思,盡管有些用戶可能一開始沒注意到圖標周圍的陰影邊框,但是它仍舊有足夠的對比度,來讓用戶感知到,并且去點擊它。

用戶界面中的Neumorphism

產品可用性——易用性

盡管“按鈕元素”應該看起來像一個按鈕,但是只要圖標本身與背景有足夠的對比度,它就是有效的。因此,這里要明確的是,如果要使用這種風格的設計,請確保你頁面中的重要元素足夠突出。

畢竟,大多數Modern風格卡片的陰影也沒有達到足夠高的對比度。

只適用于卡片設計嗎?

可用性的一個主要問題在于如果我們我們不是將它用于卡片,而是用在設計按鈕上。

我們可以很容易的通過內陰影將它轉換成一個按下的狀態,就像下面的案例呈現的那樣。

用戶界面中的Neumorphism

禁止這樣設計

其中的設計隱患就很大了。

這兩種狀態之間太類似了,不足以呈現它們之間的差異。所以我們需要考慮是否可以通過其他的表現形態來增強效果,使它傳達的含義始終明確。

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

用戶界面中的Neumorphism

一些設計想法,保證按鈕的狀態正確顯示。

在做設計的時候需要時刻銘記:人們都傾向于好看的設計,但是我們首先得保證它是好用的。

編程開發

我們將開發歸為一個新的類別,實際上它的CSS樣式編碼難度沒我們想象的那么大,雖然我們還沒在Swift和Kotlin中進行嘗試,但是我不認為它是個問題。

用戶界面中的Neumorphism

當然,你用逗號將兩個盒子陰影的數值合并為一行代碼。

一位前端開發工程師Adam編寫了這個網站:https://neumorphism.io,你可以通過它來自動生成CSS樣式代碼。

其他的影響

然而背景的形狀也是我們需要考慮的一部分,這種新的設計形式需要與大量的按鈕和開關相結合,在一些案例中我們只需要簡單的退回到之前的設計模式,并且將效果導出為位圖。這似乎是一種回歸,但是它其實完全沒有必要,現在可以輕松的用代碼來實現這些按鈕的樣式,用現代的技術來進行完美呈現。

用戶界面中的Neumorphism

我們也做了這方面的練習(不久之后會發布出來)來測試有哪些簡單的效果是可以實現的,盡管它目前看起來還是有點奇怪并且復古,但是讓按鈕真的看起來像一個按鈕還是挺有意思的。

我們真的需要它嗎?

這一設計趨勢的出現,無疑激發了許多設計師的靈感,與以前使用的卡片組件的可用性問題相比,它的問題其實并不是那么嚴重。

所以瘋狂大膽的去嘗試吧!順應這一趨勢,并對其進行調整,使它成為你自己的風格。UI設計師的工作就是在拖動方塊,因此每次方塊出現“差異”和“新奇”時,都會帶來一些喜悅之感。如果沒有這種不斷的探索的精神,那么所有的產品看起來都是一毛一樣。

讓我們找點樂子!

但同時也要記住,每個新趨勢都有一些潛在的陷阱,必須謹慎對待,才能讓它得以使用。

 

原作者:Michal Malewicz,是HYPE4的CEO | UX設計師 | 作家 | 演講人,他從1999年開始從事網頁設計工作。

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

編譯:視覺派Pie

本文由 @視覺派Pie 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!