Neumorphism代表非常精細(xì)和精確的設(shè)計(jì)風(fēng)格，高光、陰影、發(fā)光——這些細(xì)節(jié)的表現(xiàn)相當(dāng)充分，讓人過(guò)目不忘且。Neumorphism已經(jīng)給來(lái)自世界各地相當(dāng)多的設(shè)計(jì)師帶來(lái)了靈感，在2020年很有可能成為最流行的UI設(shè)計(jì)趨勢(shì)。
有關(guān)新擬物風(fēng)格(Neuomorphism)的介紹和相關(guān)內(nèi)容請(qǐng)?jiān)L問(wèn)：
]]>
從擬物化到現(xiàn)代化設(shè)計(jì)及其以后的變遷
?沉寂是如何被打破的 ?
當(dāng)?shù)谝徊縤phone問(wèn)世時(shí)，在小型設(shè)備上采用多點(diǎn)觸碰的各種手勢(shì)進(jìn)行交互的想法極為新穎。為了讓人們?cè)谑褂脮r(shí)感覺(jué)更舒服，最早的UI界面設(shè)計(jì)應(yīng)用了擬物化。
來(lái)回顧一下往昔時(shí)光吧。它看起來(lái)也許“過(guò)時(shí)”了，但絕對(duì)是可愛(ài)的。
擬物化主要是指采用來(lái)自“現(xiàn)實(shí)世界”的元素，就像木質(zhì)書架，皮革筆記本和你瀏覽過(guò)的CD封面，這些元素會(huì)讓你對(duì)新的數(shù)字世界有所認(rèn)識(shí)。通過(guò)使用人們熟悉的對(duì)象，它降低了新用戶的進(jìn)入門檻。盡管這個(gè)界面不像你曾經(jīng)見過(guò)的一切，但它讓你感到熟悉。
人們習(xí)慣了觸控設(shè)備。
然而，人們?cè)谝欢螘r(shí)間后習(xí)慣了手機(jī)，那些木頭、金屬和皮革類的元素開始顯得陳舊乏味。我們渴望一些帶來(lái)新鮮感，靈活流暢，并且更接近數(shù)字化的東西。
來(lái)點(diǎn)扁平的？
我們之所以有這樣的需求，是因?yàn)橐庾R(shí)到手機(jī)屏幕的“扁平”。偽3D效果與真實(shí)世界的紋理被放置于平滑的手機(jī)屏幕上，讓人在心理上產(chǎn)生沖突，從而感受到不協(xié)調(diào)。
因?yàn)槲覀兪謾C(jī)的玻璃是100%平滑的，所以這個(gè)界面看起來(lái)像是內(nèi)置了一個(gè)立體模型。
?扁平化來(lái)了 ?
因此，隨著2013年iOS 7的發(fā)布，蘋果決定“擁抱扁平”。大部分陰影消失不見，按鈕也大多變成了文字鏈接，一切都變得純二維，沒(méi)有假象的三維元素。
人們討厭它！
扁平化傳遞了一個(gè)觀點(diǎn)：界面就應(yīng)該是這樣-——一組 顯示在平滑表面上的像素 …這種說(shuō)法盡管既準(zhǔn)確又現(xiàn)代，不過(guò)人們意識(shí)到好像缺了點(diǎn)什么：少了些通過(guò)按下一個(gè)仿真“按鈕”而不是觸摸一個(gè)平面所獲得的樂(lè)趣。
Windows手機(jī)嘗試了這種大膽的形式(還非常漂亮)，但這種“無(wú)趣”的感覺(jué)加上幾乎沒(méi)有足夠的app支持讓這個(gè)平臺(tái)加速死亡。
顯然，人們更喜歡欺騙自己。
扁平化使界面感覺(jué)離玻璃更近，但減少了好玩的趣味。
? 我們需要真實(shí)的“質(zhì)感” ?
谷歌在2014年對(duì)此做出回應(yīng)，它推出了“ 原質(zhì)化設(shè)計(jì)語(yǔ)言” （Material Design）。這個(gè)最終基于安卓的數(shù)字產(chǎn)品設(shè)計(jì)系統(tǒng)的一般原則是使用“層級(jí)”。它不再依賴于單純的X和Y軸，而是又引入了Z軸的概念。
在卡片式設(shè)計(jì)的概念中，卡片作為其他界面元素(如按鈕和表單)堆疊其上的載體。這對(duì)于靈氣不在的扁平化iOS 7系統(tǒng)來(lái)說(shuō)，是個(gè)不錯(cuò)的升級(jí)。增加“深度”讓界面元素具備層次關(guān)系與設(shè)計(jì)目的。它還有助于我們更快地識(shí)別出它們是什么。投下陰影的按鈕會(huì)比普通的按鈕容易識(shí)別得多。
我們可以從側(cè)面看到每個(gè)物體在Z軸上占有自己的空間。
原質(zhì)化設(shè)計(jì)讓一切更簡(jiǎn)單。
簡(jiǎn)單點(diǎn)兒說(shuō)，原質(zhì)化設(shè)計(jì)是一種混合物，它有著扁平和極簡(jiǎn)(卡片)的風(fēng)格，還融合了從擬物化時(shí)代精煉出的關(guān)于“深度”的概念。設(shè)計(jì)師們不再試圖把我們的界面?zhèn)窝b成是由木頭、皮革或金屬制成的。它就是用“數(shù)字”卡片制作的，不過(guò)自帶一種空間感和深度感。
所以在某種程度上，它確實(shí)是前面兩種風(fēng)格的混合，保持著極簡(jiǎn)主義和信息清晰性，又增添了人們急需的“好玩”的元素。
因?yàn)樗畛踔换诎沧肯到y(tǒng)設(shè)計(jì)，所以我認(rèn)為它并非一個(gè)完整的趨勢(shì)，而是向前沿設(shè)計(jì)趨勢(shì)發(fā)展的一個(gè)不錯(cuò)的過(guò)渡。在那個(gè)時(shí)期，這是一個(gè)非常有必要的過(guò)渡。
在擁抱扁平化的變革時(shí)，大多數(shù)app外觀同質(zhì)化的速度甚至越來(lái)越快
然而，原質(zhì)化設(shè)計(jì)讓人乏味得更快。
因?yàn)樵|(zhì)化設(shè)計(jì)語(yǔ)言有著有著嚴(yán)格、齊全的文檔和易于遵循的原則，毫無(wú)疑問(wèn)，很快它就在整個(gè)安卓系統(tǒng)中被完全采用。
因?yàn)橛兄邢薜倪x擇(除了顏色，你真的沒(méi)辦法改變太多)，這種設(shè)計(jì)很快就令人厭倦。它在兩年多的時(shí)間里變得非常乏味，谷歌公司更新了它，把“好玩”和能形成差異化的元素包含在內(nèi)。現(xiàn)在你可以添加各種裝飾和奇怪的角度，使你的產(chǎn)品在原則之內(nèi)更具備屬于你自己的差異化特質(zhì)。
不過(guò)這沒(méi)有多大幫助…
現(xiàn)代化設(shè)計(jì)（Modern design）- 如何使材質(zhì)更“親切”
? Dribbble來(lái)力挽狂瀾 ?
現(xiàn)在我們幾乎無(wú)法知道到底是哪個(gè)dribbble上的設(shè)計(jì)師在2016年左右開創(chuàng)了“現(xiàn)代化設(shè)計(jì)”（Modern design）的潮流。
當(dāng)然，最初它只是一個(gè)為得到更多點(diǎn)贊和關(guān)注的設(shè)計(jì)方案，不過(guò)看看我們現(xiàn)在——它變得流行起來(lái)了。
通過(guò)引入柔和、多彩的陰影和曲線，它創(chuàng)造了一種帶有某種積極的視覺(jué)氛圍的app風(fēng)格。它從原質(zhì)化設(shè)計(jì)大量借用了分層的方式，但它將純扁平的元素和顯得“突出”的重要元素混合在一起。這比原質(zhì)化設(shè)計(jì)中乏味的卡片重疊更賞心悅目。
隨著iPhoneX的發(fā)布，現(xiàn)代化設(shè)計(jì)得到了改進(jìn)，它將更大的圓角邊框以及通常過(guò)于復(fù)雜的動(dòng)效包含在內(nèi)了。
? 下一個(gè)趨勢(shì)是什么 ?
我們已經(jīng)用了近3年的時(shí)間來(lái)探索各種現(xiàn)代化設(shè)計(jì)，現(xiàn)在我們正面臨這樣一個(gè)處境：如果你在Dribbble上搜索一個(gè)“app”，你會(huì)發(fā)現(xiàn)99%的它們看起來(lái)都是一樣的。
這個(gè)現(xiàn)代化的趨勢(shì)雖然看起來(lái)不錯(cuò)，但我們卻又陷入了同樣的困境。
是時(shí)候讓果凍軟糖提前下崗了？
人們喜歡現(xiàn)代化設(shè)計(jì)，所以我們所有的設(shè)計(jì)中都堅(jiān)持在光感漸變上使用柔和且彩色的陰影與粗體字。于是所有的設(shè)計(jì)又開始看起來(lái)一樣了。
不過(guò)在Dribbble之外這個(gè)潮流過(guò)了一陣子才流行起來(lái)，畢竟做好真正的產(chǎn)品要困難一點(diǎn)。但最終這種同質(zhì)化的情況也發(fā)生了，越來(lái)越多的app開始看起來(lái)一樣，而有所不同的僅是它們選取的顏色。
? 新擬物化來(lái)了 ?
我所說(shuō)的新擬物化（New-Skeuomorphism）是一個(gè)會(huì)帶來(lái)差異化的潛在趨勢(shì)。它在現(xiàn)代化設(shè)計(jì)上有了進(jìn)一步的超越，把一些偽3D元素帶回來(lái)了，盡管它的紋理感和現(xiàn)實(shí)感都不如以前。
這些app一旦增添了三維的真實(shí)，就又會(huì)脫穎而出，再次讓人感覺(jué)“新鮮”。
看看卷繞在卡片上的價(jià)格標(biāo)簽，還有按鈕上非常細(xì)微的紋理。有一些額外的深度，但任何地方都沒(méi)有什么過(guò)度的紋理感。
我認(rèn)為這是一個(gè)更有可能的UI設(shè)計(jì)走向。畢竟人們熱衷于自己騙自己，我們可能不會(huì)回到100%的扁平時(shí)代了。
不過(guò)，這里還存在一個(gè)非常科幻的選項(xiàng)。
? 可變形的屏幕 ?
偽3D的界面效果自出現(xiàn)在平滑的玻璃表面之下以后，或許一直以來(lái)我們都沒(méi)有用正確的方式去對(duì)待它？
要是我們能創(chuàng)造出某種流體/和觸覺(jué)有關(guān)/具有T-1000能力的變型玻璃，它不但能真的在屏幕上構(gòu)建立體的對(duì)象，而且還能讓其稍微突出一些呢？接著，一個(gè)按鈕就可以輕易地“出現(xiàn)”在現(xiàn)實(shí)中，在界面上還會(huì)呈現(xiàn)出保證視覺(jué)連續(xù)性的陰影。我們?cè)诎催@個(gè)按鈕時(shí)，不但能從觸感，而且還能通過(guò)實(shí)際運(yùn)動(dòng)，感受到玻璃被按壓著向下。
（譯者注： T-1000 是《終結(jié)者》里的角色，由思想控制的液態(tài)記憶金屬構(gòu)成，是一個(gè)極其復(fù)雜的電子機(jī)體，全身可以隨意變形。）
如果玻璃可以被三維的UI元素?cái)D著向外彎曲會(huì)怎樣？
平面光滑的屏幕上有了能進(jìn)行物理變形的鍵盤，這樣的變化肯定會(huì)提升打字技術(shù)。
但在此之前，我們可能會(huì)經(jīng)歷幾次全新的趨勢(shì)(和一些熟悉的趨勢(shì))。
文章來(lái)源：應(yīng)謀鬼計(jì)
原文作者：Michal Malewicz
原文鏈接：https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
譯者：blisstong
]]>這種新的設(shè)計(jì)風(fēng)格正在顛覆讓我們審美疲勞的扁平風(fēng)格，帶給我們新的視覺(jué)體驗(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ì)上，這是一種非常好的視覺(jué)樣式。
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)了新的感覺(jué)，使其脫穎而出。還可以與其他風(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ì)才能使用。