




























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):
#p#副標(biāo)題#e#
]]>

當(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ì)書(shū)架,皮革筆記本和你瀏覽過(guò)的CD封面,這些元素會(huì)讓你對(duì)新的數(shù)字世界有所認(rèn)識(shí)。通過(guò)使用人們熟悉的對(duì)象,它降低了新用戶(hù)的進(jìn)入門(mén)檻。盡管這個(gè)界面不像你曾經(jīng)見(jiàn)過(guò)的一切,但它讓你感到熟悉。
人們習(xí)慣了觸控設(shè)備。
然而,人們?cè)谝欢螘r(shí)間后習(xí)慣了手機(jī),那些木頭、金屬和皮革類(lèi)的元素開(kāi)始顯得陳舊乏味。我們渴望一些帶來(lái)新鮮感,靈活流暢,并且更接近數(shù)字化的東西。
我們之所以有這樣的需求,是因?yàn)橐庾R(shí)到手機(jī)屏幕的“扁平”。偽3D效果與真實(shí)世界的紋理被放置于平滑的手機(jī)屏幕上,讓人在心理上產(chǎn)生沖突,從而感受到不協(xié)調(diào)。

因?yàn)槲覀兪謾C(jī)的玻璃是100%平滑的,所以這個(gè)界面看起來(lái)像是內(nèi)置了一個(gè)立體模型。
因此,隨著2013年iOS 7的發(fā)布,蘋(píng)果決定“擁抱扁平”。大部分陰影消失不見(jiàn),按鈕也大多變成了文字鏈接,一切都變得純二維,沒(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é)離玻璃更近,但減少了好玩的趣味。
谷歌在2014年對(duì)此做出回應(yīng),它推出了“ 原質(zhì)化設(shè)計(jì)語(yǔ)言” (Material Design)。這個(gè)最終基于安卓的數(shù)字產(chǎn)品設(shè)計(jì)系統(tǒng)的一般原則是使用“層級(jí)”。它不再依賴(lài)于單純的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ì)更“親切”
現(xiàn)在我們幾乎無(wú)法知道到底是哪個(gè)dribbble上的設(shè)計(jì)師在2016年左右開(kāi)創(chuàng)了“現(xiàn)代化設(shè)計(jì)”(Modern design)的潮流。
當(dāng)然,最初它只是一個(gè)為得到更多點(diǎn)贊和關(guān)注的設(shè)計(jì)方案,不過(guò)看看我們現(xiàn)在——它變得流行起來(lái)了。
通過(guò)引入柔和、多彩的陰影和曲線(xiàn),它創(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)了。
我們已經(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ì)又開(kāi)始看起來(lái)一樣了。
不過(guò)在Dribbble之外這個(gè)潮流過(guò)了一陣子才流行起來(lái),畢竟做好真正的產(chǎn)品要困難一點(diǎn)。但最終這種同質(zhì)化的情況也發(fā)生了,越來(lái)越多的app開(kā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),感受到玻璃被按壓著向下。

如果玻璃可以被三維的UI元素?cái)D著向外彎曲會(huì)怎樣?
平面光滑的屏幕上有了能進(jìn)行物理變形的鍵盤(pán),這樣的變化肯定會(huì)提升打字技術(shù)。
但在此之前,我們可能會(huì)經(jīng)歷幾次全新的趨勢(shì)(和一些熟悉的趨勢(shì))。
這種新的設(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)論中稱(chēng)這種設(shè)計(jì)為New skeuomorphism(新擬物風(fēng)格)。而我決定簡(jiǎn)化一下,直接叫它“Neuomorphism”
雖然各種形式的擬物風(fēng)格一直都存在于界面設(shè)計(jì)中,但其中一種風(fēng)格趨勢(shì)卻在最近更加受到歡迎。正如卡米爾·法拉納指出的那樣,UI設(shè)計(jì)正從“表象”設(shè)計(jì)到“狀態(tài)”設(shè)計(jì)再到真正的“現(xiàn)實(shí)”設(shè)計(jì)。

這種變化已經(jīng)開(kāi)始發(fā)生在我們周?chē)?mdash;—蘋(píng)果就是一個(gè)很好的例子。扁平化風(fēng)格開(kāi)始受到抵制,而這種無(wú)紋理的3d風(fēng)格卻受到了大眾的追捧。
新擬物趨勢(shì)的風(fēng)靡似乎要從Dribbble上一張作品開(kāi)始說(shuō)起。

Dribbble用戶(hù)alexplyuto的這張作品獲得了3000多個(gè)贊,在那之后,它開(kāi)始流行起來(lái),有越來(lái)越多的設(shè)計(jì)師爭(zhēng)相模仿類(lèi)似的概念。
這種風(fēng)格開(kāi)啟了一種趨勢(shì),雖然它有些部分并沒(méi)有太大的意義(比如滑動(dòng)的Back按鈕),但卻讓我們?cè)俅吸c(diǎn)燃了對(duì)UI的新鮮感和熱情。
由于按鈕變化不大,所以我們將重點(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)整:

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

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

顯而易見(jiàn),大多數(shù)人都不會(huì)選擇如此強(qiáng)烈的陰影,而是通過(guò)提高UI元素的對(duì)比度來(lái)滿(mǎn)足可訪問(wèn)性。那么既然我們可以通過(guò)版式,接近度和與重要元素的對(duì)比來(lái)進(jìn)行正確的等級(jí)劃分,卡片樣式如何似乎就并不是那么重要了。
假設(shè)下面幾個(gè)圖標(biāo)都表示“點(diǎn)贊”。即使軟陰影看不清,但圖標(biāo)本身仍然有足夠的對(duì)比度讓我們看到并使用它。

所以當(dāng)我們面對(duì)的是無(wú)需用戶(hù)重點(diǎn)關(guān)注的部分,那么只要保持圖形突出和足夠高的對(duì)比度即可。畢竟,大多數(shù)Material Design卡片也沒(méi)有通過(guò)陰影對(duì)比度測(cè)試。
雖然卡片設(shè)計(jì)對(duì)對(duì)比度似乎沒(méi)有太高的要求,但如果是類(lèi)似按鈕的操作組件呢?我們可以很容易地創(chuàng)建一個(gè)按下?tīng)顟B(tài)的反向內(nèi)部陰影,就像下面的例子。

但這里有很大的問(wèn)題。
這種受壓狀態(tài)的反差太小,無(wú)法表示有什么不同。當(dāng)界面的其余部分交付時(shí),卡片“消失”是可以的,但活動(dòng)元素需要隨時(shí)標(biāo)明它們的狀態(tài)。
我們想出了一些辦法,比如使用輪廓和填充圖標(biāo)、下劃線(xiàn)、甚至用顏色填充按下的狀態(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)度的按鈕和開(kāi)關(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ì)確實(shí)激發(fā)了許多設(shè)計(jì)師的靈感,但好在與以前使用過(guò)的卡片組件的可訪問(wèn)性問(wèn)題相比,它的問(wèn)題并不是那么嚴(yán)重。
所以去瘋狂吧!嘗試一下這種趨勢(shì),讓它成為你的新風(fēng)格。UI設(shè)計(jì)師的工作就是創(chuàng)造線(xiàn)框,當(dāng)這些線(xiàn)框每次變得“不同”和“新穎”時(shí),都會(huì)帶來(lái)一些樂(lè)趣。沒(méi)有這種不斷的探索,所有產(chǎn)品都將變得千篇一律。
讓我們找點(diǎn)樂(lè)子!但也要記住,每一個(gè)新趨勢(shì)都有其局限性,必須精心設(shè)計(jì)才能使用。