哈嘍小伙伴們~2020年各個(gè)設(shè)計(jì)領(lǐng)域的流行趨勢(shì)已經(jīng)出來(lái)一段時(shí)間了，其中有一些我們已經(jīng)很熟悉了，但也有一些剛剛嶄露頭角卻還未被我們真正關(guān)注到。今天小編在UX Collective上看到了一篇干貨文章，作者M(jìn)ichal Malewicz為我們分析了最近在Dribbble和Instagram上引起了相當(dāng)多關(guān)注的一種新UI趨勢(shì)——新擬物風(fēng)格。
這種新的設(shè)計(jì)風(fēng)格正在顛覆讓我們審美疲勞的扁平風(fēng)格，帶給我們新的視覺體驗(yàn)，相信看完本篇，一定會(huì)對(duì)你有所幫助哦~
//////////原文內(nèi)容//////////
上周，我們探討了一些潛在的UI設(shè)計(jì)新趨勢(shì)，其中一個(gè)趨勢(shì)最近在Dribbble和Instagram上獲得了大量關(guān)注。杰森·凱利在評(píng)論中稱這種設(shè)計(jì)為New skeuomorphism（新擬物風(fēng)格）。而我決定簡(jiǎn)化一下，直接叫它“Neuomorphism”
Skeuomorphism（擬物設(shè)計(jì)）要回歸了？
雖然各種形式的擬物風(fēng)格一直都存在于界面設(shè)計(jì)中，但其中一種風(fēng)格趨勢(shì)卻在最近更加受到歡迎。正如卡米爾·法拉納指出的那樣，UI設(shè)計(jì)正從“表象”設(shè)計(jì)到“狀態(tài)”設(shè)計(jì)再到真正的“現(xiàn)實(shí)”設(shè)計(jì)。
這種變化已經(jīng)開始發(fā)生在我們周圍——蘋果就是一個(gè)很好的例子。扁平化風(fēng)格開始受到抵制，而這種無(wú)紋理的3d風(fēng)格卻受到了大眾的追捧。
它從何而來(lái)?
新擬物趨勢(shì)的風(fēng)靡似乎要從Dribbble上一張作品開始說(shuō)起。
Dribbble用戶alexplyuto的這張作品獲得了3000多個(gè)贊，在那之后，它開始流行起來(lái)，有越來(lái)越多的設(shè)計(jì)師爭(zhēng)相模仿類似的概念。
這種風(fēng)格開啟了一種趨勢(shì)，雖然它有些部分并沒(méi)有太大的意義(比如滑動(dòng)的Back按鈕)，但卻讓我們?cè)俅吸c(diǎn)燃了對(duì)UI的新鮮感和熱情。
新擬物設(shè)計(jì)有什么變化?
由于按鈕變化不大，所以我們將重點(diǎn)放在卡片設(shè)計(jì)上，這是一種非常好的視覺樣式。
Material Design或Modern UI中的卡片設(shè)計(jì)通常是一個(gè)漂浮在背景之上、能投射陰影的平面。這種陰影不僅賦予了卡片深度，很大程度上也定義了卡片本身的形狀——因?yàn)楹芏鄷r(shí)候卡片是無(wú)邊框的。
然而，新擬物卡片設(shè)計(jì)看起來(lái)卻像是背景的一部分。它是一個(gè)凸起的形狀，所使用的材質(zhì)也和背景完全一致。所以當(dāng)我們從側(cè)面看它時(shí)，它不是“浮動(dòng)”的。
雖然這種效果很容易通過(guò)一正一負(fù)兩個(gè)陰影來(lái)實(shí)現(xiàn)，但如果想真正實(shí)現(xiàn)效果，還必須注意我們的背景不能是純黑或純白色，否則將無(wú)法表現(xiàn)陰影效果。不管是溫暖、寒冷、還是理性的色調(diào)，我們都必須要在背景中可以略微看到淺色和深色的陰影。
下面是示例——你可以根據(jù)自己喜好進(jìn)行調(diào)整:
優(yōu)缺點(diǎn)
這種風(fēng)格最主要的好處是“新鮮”。它給界面帶來(lái)了新的感覺，使其脫穎而出。還可以與其他風(fēng)格混合使用，打造出非常靈活的風(fēng)格。
不過(guò)，它也有一些弊端。到目前為止，我們發(fā)現(xiàn)一共兩個(gè)主要問(wèn)題：
1.可訪問(wèn)性
2.有效編碼的方法
可訪問(wèn)性
圖形與背景對(duì)比度是其中一個(gè)主要問(wèn)題，我們分別測(cè)量Material 卡片和新擬物卡片的對(duì)比度，得到了以下對(duì)比值。
如你所見，Material卡片和新擬物卡片的對(duì)比度都很低。那如果我們讓Material 卡片擁有更高的對(duì)比度呢？可以這樣做：
顯而易見，大多數(shù)人都不會(huì)選擇如此強(qiáng)烈的陰影，而是通過(guò)提高UI元素的對(duì)比度來(lái)滿足可訪問(wèn)性。那么既然我們可以通過(guò)版式，接近度和與重要元素的對(duì)比來(lái)進(jìn)行正確的等級(jí)劃分，卡片樣式如何似乎就并不是那么重要了。
假設(shè)下面幾個(gè)圖標(biāo)都表示“點(diǎn)贊”。即使軟陰影看不清，但圖標(biāo)本身仍然有足夠的對(duì)比度讓我們看到并使用它。
所以當(dāng)我們面對(duì)的是無(wú)需用戶重點(diǎn)關(guān)注的部分，那么只要保持圖形突出和足夠高的對(duì)比度即可。畢竟，大多數(shù)Material Design卡片也沒(méi)有通過(guò)陰影對(duì)比度測(cè)試。
操作組件
雖然卡片設(shè)計(jì)對(duì)對(duì)比度似乎沒(méi)有太高的要求，但如果是類似按鈕的操作組件呢？我們可以很容易地創(chuàng)建一個(gè)按下狀態(tài)的反向內(nèi)部陰影，就像下面的例子。
但這里有很大的問(wèn)題。
這種受壓狀態(tài)的反差太小，無(wú)法表示有什么不同。當(dāng)界面的其余部分交付時(shí)，卡片“消失”是可以的，但活動(dòng)元素需要隨時(shí)標(biāo)明它們的狀態(tài)。
我們想出了一些辦法，比如使用輪廓和填充圖標(biāo)、下劃線、甚至用顏色填充按下的狀態(tài)。
所有人都喜歡“好看”，但設(shè)計(jì)師需要謹(jǐn)記，“易于使用”更重要。
編碼
在這里把編碼當(dāng)作額外的部分，因?yàn)樗鼘?shí)際上比我們想象的更容易在CSS中實(shí)現(xiàn)“凸出”外觀。我們尚未研究Swift和Kotlin，但我認(rèn)為這不應(yīng)該成為問(wèn)題。
其他影響
除了背景形狀外，這種新風(fēng)格還會(huì)有更多的不同強(qiáng)度的按鈕和開關(guān)。在很多情況下，我們只需要回到“美好的過(guò)去”，使用位圖。雖然這似乎是一種退步，但完全不必?fù)?dān)心。你可以輕松地將具有完全可編碼功能的現(xiàn)代按鈕和這些卡片形狀組合在一起，從而獲得很好的效果。
我們?yōu)榇诉M(jìn)行了一些練習(xí)（即將發(fā)布），同時(shí)看到了可以達(dá)到的簡(jiǎn)單效果。盡管看起來(lái)很古怪且“復(fù)古”，但制作看起來(lái)像按鈕的按鈕還是很有趣的；）
我們真的需要了解新擬物設(shè)計(jì)嗎?
最近這一新趨勢(shì)確實(shí)激發(fā)了許多設(shè)計(jì)師的靈感，但好在與以前使用過(guò)的卡片組件的可訪問(wèn)性問(wèn)題相比，它的問(wèn)題并不是那么嚴(yán)重。
所以去瘋狂吧！嘗試一下這種趨勢(shì)，讓它成為你的新風(fēng)格。UI設(shè)計(jì)師的工作就是創(chuàng)造線框，當(dāng)這些線框每次變得“不同”和“新穎”時(shí)，都會(huì)帶來(lái)一些樂(lè)趣。沒(méi)有這種不斷的探索，所有產(chǎn)品都將變得千篇一律。
讓我們找點(diǎn)樂(lè)子！但也要記住，每一個(gè)新趨勢(shì)都有其局限性，必須精心設(shè)計(jì)才能使用。
