新擬物化會(huì)是2020年的UI設(shè)計(jì)趨勢(shì)嗎?

2020-2-14    資深UI設(shè)計(jì)者

我承認(rèn),為「這個(gè)激動(dòng)人心的新趨勢(shì)」共同命名(注:Neumorphism 新擬物化,即 New 和 Skeumorphism 的結(jié)合詞,最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user interface》的一位讀者提出)是件很有趣的事。但我沒(méi)想到它能被炒得這么火熱。

很多博客和 twitter 文聲稱它是「2020 年最值得期待的設(shè)計(jì)手法」。趁著它還沒(méi)膨脹,讓我先把這個(gè)幻想的泡泡戳破吧。

△ 以#neumorphism為主題的設(shè)計(jì)作品逐漸萌芽,但是大部分「淺色」設(shè)計(jì)看起來(lái)都相差無(wú)幾

論成為一個(gè)流行設(shè)計(jì)風(fēng)格,Neumorphism 并不夠多樣化,尤其對(duì)于現(xiàn)實(shí)中需要寫(xiě)代碼的產(chǎn)品。

當(dāng)然你可以將它使用在 Dark Mode 深色模式中,同時(shí)你可以選擇同一種類白色的背景顏色,我們可以依此設(shè)計(jì)出六種風(fēng)格,不過(guò)他們的區(qū)別甚微。

別用在按鈕上

當(dāng)前新擬物化設(shè)計(jì)被過(guò)度使用到各類元素中,例如卡片和按鈕,但他們大多都違背了我在另一篇文章《Neumorphism in user interface》中略述的設(shè)計(jì)規(guī)則。雖然我也認(rèn)同它將按鈕的選中狀態(tài)呈現(xiàn)得很美觀,但是對(duì)很多人而言,不同按鈕狀態(tài)間的微妙差別讓人難以分辨。

此處的「很多人」并不只是指患有視力障礙的群體,同時(shí)也包括使用設(shè)備的屏幕質(zhì)量較差或?qū)Ρ榷容^低的用戶。

按鈕可能是使用新擬物化風(fēng)格典型雙側(cè)陰影最糟糕的地方,尤其是在呈現(xiàn)按鈕的選中狀態(tài)時(shí)。很多人分辨不出不同狀態(tài)的差別,其相似程度就像圖中右邊那樣。

下圖將新擬物化、擬物化及扁平化風(fēng)格的按鈕進(jìn)行對(duì)比,我們可以明顯地看出,新擬物化風(fēng)格的按鈕看起來(lái)既不像按鈕,也沒(méi)有達(dá)到引導(dǎo)操作的作用。

△ 你會(huì)點(diǎn)選哪個(gè)呢?

用在卡片上如何?

卡片和滑動(dòng)條可能是這項(xiàng)趨勢(shì)的最佳使用場(chǎng)景。但是需要注意的是,卡片的結(jié)構(gòu)需要處理恰當(dāng)。需要確保圖片、圖標(biāo)和字體間的層級(jí)清晰,間距足夠明顯。測(cè)試卡片設(shè)計(jì)的最好方式就是將新擬物化風(fēng)格的背景去掉,優(yōu)秀的設(shè)計(jì)在去除背景后視覺(jué)上也沒(méi)問(wèn)題(尤其是在其他卡片并排在一起的時(shí)候)。

△ 要將新擬物化風(fēng)格的卡片呈現(xiàn)得好,需要確保即使將元素用框架呈現(xiàn)并去掉背景,它們也可被視為同一組

簡(jiǎn)而言之,可以從界面中移除而不造成影響的卡片設(shè)計(jì)就是好的設(shè)計(jì)。這建議聽(tīng)起來(lái)很不錯(cuò)吧?尤其是當(dāng)我們考慮到 Dieter Rams (德國(guó)著名工業(yè)設(shè)計(jì)師迪特·拉姆斯,提出「設(shè)計(jì)十誡」的那位)所提出的移除「不必要」的設(shè)計(jì)理念。

但是它真的很新穎

還記得 Pantone2019 年的年度色嗎?讓我來(lái)為你回顧一下這項(xiàng)在 2019 年 1 月提出的「2019 設(shè)計(jì)新趨勢(shì)」。

盡管最初我們可以看到很多應(yīng)用這種「鮮亮的珊瑚色」的設(shè)計(jì)案例,但其中的大多數(shù)在 2019 年 2 月初時(shí)看起來(lái)就像要過(guò)時(shí)了。

在我看來(lái),等到我們把所有可行的新擬物化設(shè)計(jì)組合都發(fā)掘得差不多了,我們就可能會(huì)選擇第一版了。

2020年設(shè)計(jì)方向會(huì)有哪些?

并不是說(shuō)新擬物化設(shè)計(jì)就此湮沒(méi)了。

只是說(shuō),僅僅是用這種風(fēng)格,不足以讓整個(gè)產(chǎn)品成功。確實(shí),最初采用這種風(fēng)格的幾款產(chǎn)品可能會(huì)獲得成功,但是一段時(shí)間后,它將會(huì)比 Material 設(shè)計(jì)更令人厭倦。

將新擬物化設(shè)計(jì)和其他風(fēng)格各取特點(diǎn),加以結(jié)合,勢(shì)必會(huì)成為 2020 年及今后的趨勢(shì)走向。

想要兼顧產(chǎn)品的美觀度和功能性就意味著,在兩個(gè)方面都不要做得太極端。即使是當(dāng)前流行的柔和彩色陰影也僅僅在按鈕或圖標(biāo)上才行得通。想象一下,把它用在整個(gè)產(chǎn)品上會(huì)有多不適?

下面作者探討了六種將新擬物化風(fēng)格和其他風(fēng)格相結(jié)合的設(shè)計(jì)方向。

1. 深色模式

不管我們接受與否,深色模式一定會(huì)是大勢(shì)所趨。不過(guò)它不局限于我們隨處可見(jiàn)的采用低飽和度灰藍(lán)色的深色模式。

自從 OLED 屏幕的推出,純黑色低耗能的特性就很顯著了。所以如果采用深色模式的目的在于節(jié)約電量,我們應(yīng)當(dāng)會(huì)開(kāi)始看到更多極簡(jiǎn),注重功能性的界面以黑色作為主色,而非深灰。

采取深色模式的另一個(gè)主要原因在于緩解視覺(jué)壓力。在這種情況下,柔和的深色模式必然美觀得多。

△ 許多應(yīng)用的界面都采用了淺色和深色的雙模式設(shè)計(jì)

2. 插圖和3D

我們勢(shì)必需要更多樣的插圖設(shè)計(jì)。作為當(dāng)前最流行的風(fēng)格,略不成比例的身體結(jié)構(gòu)和松散的線條已然隨處可見(jiàn)。但這很快就會(huì)造成審美疲勞。

△ 這些插圖看起來(lái)都不錯(cuò),但是過(guò)于相似

然而插圖其實(shí)是突出畫(huà)面最好的方式之一,前提是我們要嘗試多種方案以免同質(zhì)化。

3D 反而更容易設(shè)計(jì)出不同的風(fēng)格。不過(guò)它也難做得多,需要下更多工夫。這也就說(shuō)明,如果將時(shí)間投入到制作 3D 渲染上,我們更容易做出高質(zhì)量、符合品牌調(diào)性的作品。

△ 品牌風(fēng)格圖的優(yōu)秀案例 Pitch.com

3. 動(dòng)畫(huà)

過(guò)渡和場(chǎng)景搭建會(huì)在今年更受重視。它的催化劑之一是很多令人激動(dòng)人心的 JS 庫(kù)的推出,它們極大程度上方便了復(fù)雜 2D 和 3D 過(guò)渡效果的制作。

是的,現(xiàn)在可以更輕松地用代碼寫(xiě)出「很酷的東西」了,但建議不要過(guò)度使用。

我們要將這種扁平化設(shè)計(jì)用在平面上,再讓其旋轉(zhuǎn)起來(lái),就像在游戲菲斯中(注:FEZ 菲斯,以復(fù)古的像素畫(huà)為風(fēng)格,結(jié)合了 2D 橫向卷軸和 3D 效果,詳情可自行百度)。

4. 等軸設(shè)計(jì)

在 2019 年,我在搭建我們的加密貨幣分析平臺(tái)期間,花了些時(shí)間分析超過(guò) 2000 個(gè)和加密有關(guān)的網(wǎng)站的設(shè)計(jì),并逐一對(duì)其設(shè)計(jì)質(zhì)量、原創(chuàng)性和一致性進(jìn)行評(píng)分。

△ 這個(gè)設(shè)計(jì)真的很漂亮,但同時(shí)相似的圖片到處都是,真的很無(wú)趣

很觸動(dòng)我的一點(diǎn)是在近乎 1/4 的網(wǎng)站中都具有某種等軸測(cè)的圖片。他們都采用不同卻似曾相識(shí)的風(fēng)格,以至于一段時(shí)間后我竟然不確定他們是不是出自同一個(gè)免費(fèi)庫(kù)。

這種風(fēng)格可以被呈現(xiàn)得很棒,但是如果你僅僅打算將流行設(shè)計(jì)照搬到自己的設(shè)計(jì)中,我勸你還是放棄這個(gè)念頭吧。它已經(jīng)成了 2019 年最被濫用的設(shè)計(jì)之一(僅次于彩色陰影之后)。

5. 能充實(shí)內(nèi)心的極簡(jiǎn)主義設(shè)計(jì)

這種趨勢(shì)初露苗頭,也許只會(huì)停留在一個(gè)小群體中。今年我和周圍的許多人一樣陷入了電子產(chǎn)品戒癮的怪圈,使用了一些設(shè)計(jì)更極簡(jiǎn)化的產(chǎn)品。

左:Mudita Pure,右:Light Phone 2。兩個(gè)產(chǎn)品我均有購(gòu)入,目前正在使用 Light Phone2,設(shè)計(jì)非常清新。

許多產(chǎn)品諸如 Mudita Pure 和 Light Phone 2 傳達(dá)出簡(jiǎn)潔、黑白、極端簡(jiǎn)化的界面。如果我們將使用的 app 看做是一定要滿足某種功能的工具,極簡(jiǎn)的界面設(shè)計(jì)就有一定意義了。當(dāng)然不是所有的 app 都可以用這種風(fēng)格(想象一下純文字的 Instagram)。

6. 語(yǔ)音界面

我在今年參加的一場(chǎng)論壇上,聽(tīng)到過(guò)這樣一句話:不要再學(xué)習(xí) UI 了。在不久的將來(lái)我們大多會(huì)使用聲音識(shí)別與設(shè)備對(duì)話。

雖然這有些未來(lái)主義,并且在某些場(chǎng)景中適用(例如駕駛和運(yùn)動(dòng)中)。但是我認(rèn)為有兩個(gè)原因?qū)е抡Z(yǔ)音界面至少在目前還不足以居于主導(dǎo)地位。

  • 人工智能存在的嚴(yán)重隱私問(wèn)題,并且可能會(huì)造成驚悚事件。不久之前 Alexa 向它的用戶提出自殺建議,原因是這是阻止全球變暖、保護(hù)地球的最好方式。雖然這在邏輯上也許說(shuō)得通,但是這絕對(duì)成為了一則標(biāo)題黨性質(zhì)的頭條。它讓人們不禁思考,智能音箱多么令人厭惡,它竊聽(tīng)著我們的一字一句,秘密地搭建著下一代天網(wǎng)。
  • 在很多情況下,對(duì)著手機(jī)說(shuō)話(尤其是在公共場(chǎng)合)真的很奇怪。幾次快速的點(diǎn)擊既保證私密性又快速。所以直到我們發(fā)展出腦機(jī)接口技術(shù)(使得人能夠通過(guò)自身的腦電信號(hào)與他們周圍環(huán)境進(jìn)行交互),在公交車上對(duì)著手機(jī)說(shuō)話來(lái)發(fā)出一條消息不會(huì)成為主流的互動(dòng)方式。

所以會(huì)流行什么呢?

此處唯一的正確答案是,我也不知道??赡芪业呐袛嗍д`,未來(lái)我們會(huì)有很多突出的軟塑料風(fēng)格(新擬物化設(shè)計(jì)的特點(diǎn)之一),或者我們的手機(jī)屏幕會(huì)采用擠壓玻璃以呈現(xiàn)更逼真的設(shè)計(jì)。

△ 將如上探討的所有風(fēng)格進(jìn)行疊加的嘗試

但是很可能發(fā)生的事情是,沒(méi)有單一風(fēng)格會(huì)成為今年的主導(dǎo)。

最優(yōu)秀的設(shè)計(jì)一如既往會(huì)恰當(dāng)?shù)亟Y(jié)合當(dāng)下趨勢(shì)并采用優(yōu)秀的字體風(fēng)格。你可以在卡片上采取不同風(fēng)格的陰影,但如果其中的文字呈現(xiàn)得雜亂而古怪,任何流行風(fēng)格都不會(huì)讓設(shè)計(jì)看起來(lái)美觀。

可讀即美觀。在 2020 年記住這句話!


文章來(lái)源:優(yōu)設(shè)   作者:彩云譯設(shè)計(jì)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔