Neumorphism代表非常精細和精確的設計風格,高光、陰影、發光——這些細節的表現相當充分,讓人過目不忘且。Neumorphism已經給來自世界各地相當多的設計師帶來了靈感,在2020年很有可能成為最流行的UI設計趨勢。

























有關新擬物風格(Neuomorphism)的介紹和相關內容請訪問:
#p#副標題#e#
]]>

當第一部iphone問世時,在小型設備上采用多點觸碰的各種手勢進行交互的想法極為新穎。為了讓人們在使用時感覺更舒服,最早的UI界面設計應用了擬物化。

來回顧一下往昔時光吧。它看起來也許“過時”了,但絕對是可愛的。
擬物化主要是指采用來自“現實世界”的元素,就像木質書架,皮革筆記本和你瀏覽過的CD封面,這些元素會讓你對新的數字世界有所認識。通過使用人們熟悉的對象,它降低了新用戶的進入門檻。盡管這個界面不像你曾經見過的一切,但它讓你感到熟悉。
人們習慣了觸控設備。
然而,人們在一段時間后習慣了手機,那些木頭、金屬和皮革類的元素開始顯得陳舊乏味。我們渴望一些帶來新鮮感,靈活流暢,并且更接近數字化的東西。
我們之所以有這樣的需求,是因為意識到手機屏幕的“扁平”。偽3D效果與真實世界的紋理被放置于平滑的手機屏幕上,讓人在心理上產生沖突,從而感受到不協調。

因為我們手機的玻璃是100%平滑的,所以這個界面看起來像是內置了一個立體模型。
因此,隨著2013年iOS 7的發布,蘋果決定“擁抱扁平”。大部分陰影消失不見,按鈕也大多變成了文字鏈接,一切都變得純二維,沒有假象的三維元素。
人們討厭它!
扁平化傳遞了一個觀點:界面就應該是這樣-——一組 顯示在平滑表面上的像素 …這種說法盡管既準確又現代,不過人們意識到好像缺了點什么:少了些通過按下一個仿真“按鈕”而不是觸摸一個平面所獲得的樂趣。
Windows手機嘗試了這種大膽的形式(還非常漂亮),但這種“無趣”的感覺加上幾乎沒有足夠的app支持讓這個平臺加速死亡。
顯然,人們更喜歡欺騙自己。

扁平化使界面感覺離玻璃更近,但減少了好玩的趣味。
谷歌在2014年對此做出回應,它推出了“ 原質化設計語言” (Material Design)。這個最終基于安卓的數字產品設計系統的一般原則是使用“層級”。它不再依賴于單純的X和Y軸,而是又引入了Z軸的概念。
在卡片式設計的概念中,卡片作為其他界面元素(如按鈕和表單)堆疊其上的載體。這對于靈氣不在的扁平化iOS 7系統來說,是個不錯的升級。增加“深度”讓界面元素具備層次關系與設計目的。它還有助于我們更快地識別出它們是什么。投下陰影的按鈕會比普通的按鈕容易識別得多。

我們可以從側面看到每個物體在Z軸上占有自己的空間。
原質化設計讓一切更簡單。
簡單點兒說,原質化設計是一種混合物,它有著扁平和極簡(卡片)的風格,還融合了從擬物化時代精煉出的關于“深度”的概念。設計師們不再試圖把我們的界面偽裝成是由木頭、皮革或金屬制成的。它就是用“數字”卡片制作的,不過自帶一種空間感和深度感。
所以在某種程度上,它確實是前面兩種風格的混合,保持著極簡主義和信息清晰性,又增添了人們急需的“好玩”的元素。
因為它最初只基于安卓系統設計,所以我認為它并非一個完整的趨勢,而是向前沿設計趨勢發展的一個不錯的過渡。在那個時期,這是一個非常有必要的過渡。

在擁抱扁平化的變革時,大多數app外觀同質化的速度甚至越來越快
然而,原質化設計讓人乏味得更快。
因為原質化設計語言有著有著嚴格、齊全的文檔和易于遵循的原則,毫無疑問,很快它就在整個安卓系統中被完全采用。
因為有著有限的選擇(除了顏色,你真的沒辦法改變太多),這種設計很快就令人厭倦。它在兩年多的時間里變得非常乏味,谷歌公司更新了它,把“好玩”和能形成差異化的元素包含在內?,F在你可以添加各種裝飾和奇怪的角度,使你的產品在原則之內更具備屬于你自己的差異化特質。
不過這沒有多大幫助…

現代化設計(Modern design)- 如何使材質更“親切”
現在我們幾乎無法知道到底是哪個dribbble上的設計師在2016年左右開創了“現代化設計”(Modern design)的潮流。
當然,最初它只是一個為得到更多點贊和關注的設計方案,不過看看我們現在——它變得流行起來了。
通過引入柔和、多彩的陰影和曲線,它創造了一種帶有某種積極的視覺氛圍的app風格。它從原質化設計大量借用了分層的方式,但它將純扁平的元素和顯得“突出”的重要元素混合在一起。這比原質化設計中乏味的卡片重疊更賞心悅目。
隨著iPhoneX的發布,現代化設計得到了改進,它將更大的圓角邊框以及通常過于復雜的動效包含在內了。
我們已經用了近3年的時間來探索各種現代化設計,現在我們正面臨這樣一個處境:如果你在Dribbble上搜索一個“app”,你會發現99%的它們看起來都是一樣的。
這個現代化的趨勢雖然看起來不錯,但我們卻又陷入了同樣的困境。

是時候讓果凍軟糖提前下崗了?
人們喜歡現代化設計,所以我們所有的設計中都堅持在光感漸變上使用柔和且彩色的陰影與粗體字。于是所有的設計又開始看起來一樣了。
不過在Dribbble之外這個潮流過了一陣子才流行起來,畢竟做好真正的產品要困難一點。但最終這種同質化的情況也發生了,越來越多的app開始看起來一樣,而有所不同的僅是它們選取的顏色。
我所說的新擬物化(New-Skeuomorphism)是一個會帶來差異化的潛在趨勢。它在現代化設計上有了進一步的超越,把一些偽3D元素帶回來了,盡管它的紋理感和現實感都不如以前。
這些app一旦增添了三維的真實,就又會脫穎而出,再次讓人感覺“新鮮”。

看看卷繞在卡片上的價格標簽,還有按鈕上非常細微的紋理。有一些額外的深度,但任何地方都沒有什么過度的紋理感。
我認為這是一個更有可能的UI設計走向。畢竟人們熱衷于自己騙自己,我們可能不會回到100%的扁平時代了。
不過,這里還存在一個非??苹玫倪x項。
偽3D的界面效果自出現在平滑的玻璃表面之下以后,或許一直以來我們都沒有用正確的方式去對待它?
要是我們能創造出某種流體/和觸覺有關/具有T-1000能力的變型玻璃,它不但能真的在屏幕上構建立體的對象,而且還能讓其稍微突出一些呢?接著,一個按鈕就可以輕易地“出現”在現實中,在界面上還會呈現出保證視覺連續性的陰影。我們在按這個按鈕時,不但能從觸感,而且還能通過實際運動,感受到玻璃被按壓著向下。

如果玻璃可以被三維的UI元素擠著向外彎曲會怎樣?
平面光滑的屏幕上有了能進行物理變形的鍵盤,這樣的變化肯定會提升打字技術。
但在此之前,我們可能會經歷幾次全新的趨勢(和一些熟悉的趨勢)。
這種新的設計風格正在顛覆讓我們審美疲勞的扁平風格,帶給我們新的視覺體驗,相信看完本篇,一定會對你有所幫助哦~
//////////原文內容//////////

上周,我們探討了一些潛在的UI設計新趨勢,其中一個趨勢最近在Dribbble和Instagram上獲得了大量關注。杰森·凱利在評論中稱這種設計為New skeuomorphism(新擬物風格)。而我決定簡化一下,直接叫它“Neuomorphism”
雖然各種形式的擬物風格一直都存在于界面設計中,但其中一種風格趨勢卻在最近更加受到歡迎。正如卡米爾·法拉納指出的那樣,UI設計正從“表象”設計到“狀態”設計再到真正的“現實”設計。

這種變化已經開始發生在我們周圍——蘋果就是一個很好的例子。扁平化風格開始受到抵制,而這種無紋理的3d風格卻受到了大眾的追捧。
新擬物趨勢的風靡似乎要從Dribbble上一張作品開始說起。

Dribbble用戶alexplyuto的這張作品獲得了3000多個贊,在那之后,它開始流行起來,有越來越多的設計師爭相模仿類似的概念。
這種風格開啟了一種趨勢,雖然它有些部分并沒有太大的意義(比如滑動的Back按鈕),但卻讓我們再次點燃了對UI的新鮮感和熱情。
由于按鈕變化不大,所以我們將重點放在卡片設計上,這是一種非常好的視覺樣式。

Material Design或Modern UI中的卡片設計通常是一個漂浮在背景之上、能投射陰影的平面。這種陰影不僅賦予了卡片深度,很大程度上也定義了卡片本身的形狀——因為很多時候卡片是無邊框的。
然而,新擬物卡片設計看起來卻像是背景的一部分。它是一個凸起的形狀,所使用的材質也和背景完全一致。所以當我們從側面看它時,它不是“浮動”的。
雖然這種效果很容易通過一正一負兩個陰影來實現,但如果想真正實現效果,還必須注意我們的背景不能是純黑或純白色,否則將無法表現陰影效果。不管是溫暖、寒冷、還是理性的色調,我們都必須要在背景中可以略微看到淺色和深色的陰影。
下面是示例——你可以根據自己喜好進行調整:

這種風格最主要的好處是“新鮮”。它給界面帶來了新的感覺,使其脫穎而出。還可以與其他風格混合使用,打造出非常靈活的風格。
不過,它也有一些弊端。到目前為止,我們發現一共兩個主要問題:
1.可訪問性
2.有效編碼的方法
圖形與背景對比度是其中一個主要問題,我們分別測量Material 卡片和新擬物卡片的對比度,得到了以下對比值。

如你所見,Material卡片和新擬物卡片的對比度都很低。那如果我們讓Material 卡片擁有更高的對比度呢?可以這樣做:

顯而易見,大多數人都不會選擇如此強烈的陰影,而是通過提高UI元素的對比度來滿足可訪問性。那么既然我們可以通過版式,接近度和與重要元素的對比來進行正確的等級劃分,卡片樣式如何似乎就并不是那么重要了。
假設下面幾個圖標都表示“點贊”。即使軟陰影看不清,但圖標本身仍然有足夠的對比度讓我們看到并使用它。

所以當我們面對的是無需用戶重點關注的部分,那么只要保持圖形突出和足夠高的對比度即可。畢竟,大多數Material Design卡片也沒有通過陰影對比度測試。
雖然卡片設計對對比度似乎沒有太高的要求,但如果是類似按鈕的操作組件呢?我們可以很容易地創建一個按下狀態的反向內部陰影,就像下面的例子。

但這里有很大的問題。
這種受壓狀態的反差太小,無法表示有什么不同。當界面的其余部分交付時,卡片“消失”是可以的,但活動元素需要隨時標明它們的狀態。
我們想出了一些辦法,比如使用輪廓和填充圖標、下劃線、甚至用顏色填充按下的狀態。

所有人都喜歡“好看”,但設計師需要謹記,“易于使用”更重要。
在這里把編碼當作額外的部分,因為它實際上比我們想象的更容易在CSS中實現“凸出”外觀。我們尚未研究Swift和Kotlin,但我認為這不應該成為問題。

除了背景形狀外,這種新風格還會有更多的不同強度的按鈕和開關。在很多情況下,我們只需要回到“美好的過去”,使用位圖。雖然這似乎是一種退步,但完全不必擔心。你可以輕松地將具有完全可編碼功能的現代按鈕和這些卡片形狀組合在一起,從而獲得很好的效果。
我們為此進行了一些練習(即將發布),同時看到了可以達到的簡單效果。盡管看起來很古怪且“復古”,但制作看起來像按鈕的按鈕還是很有趣的;)

最近這一新趨勢確實激發了許多設計師的靈感,但好在與以前使用過的卡片組件的可訪問性問題相比,它的問題并不是那么嚴重。
所以去瘋狂吧!嘗試一下這種趨勢,讓它成為你的新風格。UI設計師的工作就是創造線框,當這些線框每次變得“不同”和“新穎”時,都會帶來一些樂趣。沒有這種不斷的探索,所有產品都將變得千篇一律。
讓我們找點樂子!但也要記住,每一個新趨勢都有其局限性,必須精心設計才能使用。