2020-2-14 資深UI設計者
我承認,為「這個激動人心的新趨勢」共同命名(注:Neumorphism 新擬物化,即 New 和 Skeumorphism 的結合詞,最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user interface》的一位讀者提出)是件很有趣的事。但我沒想到它能被炒得這么火熱。
很多博客和 twitter 文聲稱它是「2020 年最值得期待的設計手法」。趁著它還沒膨脹,讓我先把這個幻想的泡泡戳破吧。
△ 以#neumorphism為主題的設計作品逐漸萌芽,但是大部分「淺色」設計看起來都相差無幾
論成為一個流行設計風格,Neumorphism 并不夠多樣化,尤其對于現(xiàn)實中需要寫代碼的產(chǎn)品。
當然你可以將它使用在 Dark Mode 深色模式中,同時你可以選擇同一種類白色的背景顏色,我們可以依此設計出六種風格,不過他們的區(qū)別甚微。
當前新擬物化設計被過度使用到各類元素中,例如卡片和按鈕,但他們大多都違背了我在另一篇文章《Neumorphism in user interface》中略述的設計規(guī)則。雖然我也認同它將按鈕的選中狀態(tài)呈現(xiàn)得很美觀,但是對很多人而言,不同按鈕狀態(tài)間的微妙差別讓人難以分辨。
此處的「很多人」并不只是指患有視力障礙的群體,同時也包括使用設備的屏幕質量較差或對比度較低的用戶。
按鈕可能是使用新擬物化風格典型雙側陰影最糟糕的地方,尤其是在呈現(xiàn)按鈕的選中狀態(tài)時。很多人分辨不出不同狀態(tài)的差別,其相似程度就像圖中右邊那樣。
下圖將新擬物化、擬物化及扁平化風格的按鈕進行對比,我們可以明顯地看出,新擬物化風格的按鈕看起來既不像按鈕,也沒有達到引導操作的作用。
△ 你會點選哪個呢?
卡片和滑動條可能是這項趨勢的最佳使用場景。但是需要注意的是,卡片的結構需要處理恰當。需要確保圖片、圖標和字體間的層級清晰,間距足夠明顯。測試卡片設計的最好方式就是將新擬物化風格的背景去掉,優(yōu)秀的設計在去除背景后視覺上也沒問題(尤其是在其他卡片并排在一起的時候)。
△ 要將新擬物化風格的卡片呈現(xiàn)得好,需要確保即使將元素用框架呈現(xiàn)并去掉背景,它們也可被視為同一組
簡而言之,可以從界面中移除而不造成影響的卡片設計就是好的設計。這建議聽起來很不錯吧?尤其是當我們考慮到 Dieter Rams (德國著名工業(yè)設計師迪特·拉姆斯,提出「設計十誡」的那位)所提出的移除「不必要」的設計理念。
還記得 Pantone2019 年的年度色嗎?讓我來為你回顧一下這項在 2019 年 1 月提出的「2019 設計新趨勢」。
盡管最初我們可以看到很多應用這種「鮮亮的珊瑚色」的設計案例,但其中的大多數(shù)在 2019 年 2 月初時看起來就像要過時了。
在我看來,等到我們把所有可行的新擬物化設計組合都發(fā)掘得差不多了,我們就可能會選擇第一版了。
并不是說新擬物化設計就此湮沒了。
只是說,僅僅是用這種風格,不足以讓整個產(chǎn)品成功。確實,最初采用這種風格的幾款產(chǎn)品可能會獲得成功,但是一段時間后,它將會比 Material 設計更令人厭倦。
將新擬物化設計和其他風格各取特點,加以結合,勢必會成為 2020 年及今后的趨勢走向。
想要兼顧產(chǎn)品的美觀度和功能性就意味著,在兩個方面都不要做得太極端。即使是當前流行的柔和彩色陰影也僅僅在按鈕或圖標上才行得通。想象一下,把它用在整個產(chǎn)品上會有多不適?
下面作者探討了六種將新擬物化風格和其他風格相結合的設計方向。
1. 深色模式
不管我們接受與否,深色模式一定會是大勢所趨。不過它不局限于我們隨處可見的采用低飽和度灰藍色的深色模式。
自從 OLED 屏幕的推出,純黑色低耗能的特性就很顯著了。所以如果采用深色模式的目的在于節(jié)約電量,我們應當會開始看到更多極簡,注重功能性的界面以黑色作為主色,而非深灰。
采取深色模式的另一個主要原因在于緩解視覺壓力。在這種情況下,柔和的深色模式必然美觀得多。
△ 許多應用的界面都采用了淺色和深色的雙模式設計
2. 插圖和3D
我們勢必需要更多樣的插圖設計。作為當前最流行的風格,略不成比例的身體結構和松散的線條已然隨處可見。但這很快就會造成審美疲勞。
△ 這些插圖看起來都不錯,但是過于相似
然而插圖其實是突出畫面最好的方式之一,前提是我們要嘗試多種方案以免同質化。
3D 反而更容易設計出不同的風格。不過它也難做得多,需要下更多工夫。這也就說明,如果將時間投入到制作 3D 渲染上,我們更容易做出高質量、符合品牌調(diào)性的作品。
△ 品牌風格圖的優(yōu)秀案例 Pitch.com
3. 動畫
過渡和場景搭建會在今年更受重視。它的催化劑之一是很多令人激動人心的 JS 庫的推出,它們極大程度上方便了復雜 2D 和 3D 過渡效果的制作。
是的,現(xiàn)在可以更輕松地用代碼寫出「很酷的東西」了,但建議不要過度使用。
我們要將這種扁平化設計用在平面上,再讓其旋轉起來,就像在游戲菲斯中(注:FEZ 菲斯,以復古的像素畫為風格,結合了 2D 橫向卷軸和 3D 效果,詳情可自行百度)。
4. 等軸設計
在 2019 年,我在搭建我們的加密貨幣分析平臺期間,花了些時間分析超過 2000 個和加密有關的網(wǎng)站的設計,并逐一對其設計質量、原創(chuàng)性和一致性進行評分。
△ 這個設計真的很漂亮,但同時相似的圖片到處都是,真的很無趣
很觸動我的一點是在近乎 1/4 的網(wǎng)站中都具有某種等軸測的圖片。他們都采用不同卻似曾相識的風格,以至于一段時間后我竟然不確定他們是不是出自同一個免費庫。
這種風格可以被呈現(xiàn)得很棒,但是如果你僅僅打算將流行設計照搬到自己的設計中,我勸你還是放棄這個念頭吧。它已經(jīng)成了 2019 年最被濫用的設計之一(僅次于彩色陰影之后)。
5. 能充實內(nèi)心的極簡主義設計
這種趨勢初露苗頭,也許只會停留在一個小群體中。今年我和周圍的許多人一樣陷入了電子產(chǎn)品戒癮的怪圈,使用了一些設計更極簡化的產(chǎn)品。
左:Mudita Pure,右:Light Phone 2。兩個產(chǎn)品我均有購入,目前正在使用 Light Phone2,設計非常清新。
許多產(chǎn)品諸如 Mudita Pure 和 Light Phone 2 傳達出簡潔、黑白、極端簡化的界面。如果我們將使用的 app 看做是一定要滿足某種功能的工具,極簡的界面設計就有一定意義了。當然不是所有的 app 都可以用這種風格(想象一下純文字的 Instagram)。
6. 語音界面
我在今年參加的一場論壇上,聽到過這樣一句話:不要再學習 UI 了。在不久的將來我們大多會使用聲音識別與設備對話。
雖然這有些未來主義,并且在某些場景中適用(例如駕駛和運動中)。但是我認為有兩個原因導致語音界面至少在目前還不足以居于主導地位。
此處唯一的正確答案是,我也不知道??赡芪业呐袛嗍д`,未來我們會有很多突出的軟塑料風格(新擬物化設計的特點之一),或者我們的手機屏幕會采用擠壓玻璃以呈現(xiàn)更逼真的設計。
△ 將如上探討的所有風格進行疊加的嘗試
但是很可能發(fā)生的事情是,沒有單一風格會成為今年的主導。
最優(yōu)秀的設計一如既往會恰當?shù)亟Y合當下趨勢并采用優(yōu)秀的字體風格。你可以在卡片上采取不同風格的陰影,但如果其中的文字呈現(xiàn)得雜亂而古怪,任何流行風格都不會讓設計看起來美觀。
可讀即美觀。在 2020 年記住這句話!
文章來源:優(yōu)設 作者:彩云譯設計