新擬物化,會是2020年的UI設計趨勢嗎?

2020-12-14 人人都是產品經理

新擬物化最近被炒得很是火熱,它會是2020年的UI設計趨勢嗎?本文作者從多個方面對此進行了分析,並總結了6種將新擬物化風格和其他風格相結合的設計方向,與大家分享。

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

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

以#neumorphism為主題的設計作品逐漸萌芽,但是大部分「淺色」設計看起來都相差無幾。

論成為一個流行設計風格,Neumorphism並不夠多樣化,尤其對於現實中需要寫代碼的產品。

當然你可以將它使用在Dark Mode深色模式中,同時你可以選擇一種類白色的背景顏色,我們可以依此設計出六種風格,不過他們的區別甚微。

別用在按鈕上!

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

此處的「很多人」並不只是指有患有視力障礙的群體,同時也包括使用設備的屏幕質量較差或對比度較低的用戶。

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

下圖將新擬物化、擬物化、及扁平化風格的按鈕進行對比,我們可以明顯地看出,新擬物化風格的按鈕看起來既不像按鈕,也沒有達到引導操作的作用。

你會點選哪個呢?

用在卡片上如何?

卡片和滑動條可能是這項趨勢的最佳使用場景。但是需要注意的是,卡片的結構需要處理恰當。需要確保圖片、圖標和字體間的層級清晰,間距足夠明顯。測試卡片設計的最好方式就是將新擬物化風格的背景去掉,優秀的設計在去除背景後視覺上也沒問題(尤其是在其他卡片並排在一起的時候)。

要將新擬物化風格的卡片呈現的好,需要確保即使將元素用框架呈現並去掉背景,它們也可被視為同一組。

簡而言之,可以從界面中移除而不造成影響的卡片設計就是好的設計。這建議聽起來很不錯吧?尤其是當我們考慮到Dieter Rams (德國著名工業設計師迪特·拉姆斯,提出「設計十誡」的那位)所提出的移除「不必要」的設計理念。

如果你想嘗試一些新擬物化風格的設計,可以在公眾號回復「新擬物風格」得到一份sketch模板源文件。

但是它真的很新穎!

還記得Pantone2019年的年度色嗎?讓我來為你回顧一下這項在2019年1月提出的「2019設計新趨勢」。

儘管最初我們可以看到很多應用這種「鮮亮的珊瑚色」的設計案例,但其中的大多數在2019年2月初看起來就好像要過時了。

在我看來,等到我們把所有可行的新擬物化設計組合都發掘的差不多了,我們就可能會選擇第一版了。

2020年設計方向會有哪些?

並不是說新擬物化設計就此湮沒了。

只是說,僅僅是用這種風格,不足以讓整個產品成功。確實,最初採用這種風格的幾項產品可能會獲得成功,但是一段時間後,它將會比Material設計更令人厭倦。

將新擬物化設計和其他風格各取特點,加以結合,勢必會成為2020年及今後的趨勢走向。

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

下面作者探討了六種將新擬物化風格和其他風格相結合的設計方向。

1. 深色模式

不管我們接受與否,深色模式一定會是重大的設計趨勢。不過它不局限於我們隨處可見的採用低飽和度灰藍色的深色模式。

自從OLED屏幕的推出,純黑色低耗能的特性就很顯著了。所以如果採用深色模式的目的在於節約電量,我們應當會開始看到更多極簡,注重功能性的界面以黑色作為主色,而非深灰。

採取深色模式的另一個主要原因在於緩解視覺壓力。在這種情況下,柔和的深色模式必然美觀的多了。

許多應用的界面都採用了淺色和深色的雙模式設計

2. 插圖和3D

我們勢必需要更多樣的插圖設計。作為當前最流行的風格,略不成比例的身體結構和鬆散的線條已然隨處可見。但這很快就會造成審美疲勞。

這些插圖看起來都不錯,但是過於相似

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

3D反而更容易設計出不同的風格。不過它也難做的多,需要下更多工夫。這也就說明,如果將時間投入到製作3D渲染上,我們更容易做出高質量、符合品牌調性的作品。

品牌風格圖的優秀案例 Pitch.com

3. 動畫

過渡和場景搭建會在今年更受重視。它的催化劑之一是很多令人激動人心的JS庫的推出,它們極大程度上方便了複雜2D和3D過渡效果的製作。

是的,現在可以更輕鬆的用代碼寫出「很酷的東西」了,但建議不要過度使用哦。

我們要將這種扁平化設計用在平面上,再讓其旋轉起來,就像在遊戲菲斯中(註:FEZ 菲斯,以復古的像素畫為風格,結合了2D橫向捲軸和3D效果,詳情可自行百度)。

4. 等軸設計

在2019年,我在搭建我們的加密貨幣分析平臺期間,花了些時間分析超過2000個和加密有關的網站的設計,並逐一對其設計質量、原創性和一致性進行評分。

這個設計真的很漂亮,但同時相似的圖片到處都是,真的很無趣

很觸動我的一點是在近乎1/4的網站中具有某種等軸測的圖片。他們都採用不同卻似曾相識的風格,以至於一段時間後我竟然不確定他們是不是出自同一個免費庫。

這種風格可以被呈現的很棒,但是如果你僅僅打算將流行設計照搬到自己的設計中,我勸你還是放棄這個念頭吧。它已經成了2019年最被濫用的設計之一(僅次於彩色陰影之後)。

5. 能充實內心的極簡主義設計

這項趨勢初露苗頭,也許只會停留在一個小群體中。今年我和周圍的許多人一樣陷入了電子產品戒癮的怪圈,使用了一些設計更極簡化的產品。

左:Mudita Pure,右:Light Phone 2。兩個產品我均有購入,目前正在使用Light Phone2,設計非常清新。

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

6. 語音界面

我在今年參加的一場論壇上,聽到過這樣一句話:

不要在學習UI了。在不久的將來我們大多會使用聲音識別與設備對話。

雖然這有些未來主義,並且在某些場景中適用(例如駕駛和運動中)。但是我認為有兩個原因導致語音界面至少在目前還不足以居於主導地位。

人工智慧存在的嚴重隱私問題,並且可能會造成驚悚事件。不久之前Alexa向它的用戶提出自殺建議,原因是這是阻止全球變暖、保護地球的最好方式。雖然這在邏輯上也許說得通,但是這絕對成為了一則標題黨性質的頭條。它讓人們不禁思考,智能音箱多麼令人厭惡,它竊聽著我們的一字一句,秘密地搭建著下一代天網。

在很多情況下,對著手機說話(尤其是在公共場合)真的很奇怪。幾次快速的點擊既保證私密性又快速。所以直到我們發展出腦機接口技術(使得人能夠通過自身的腦電信號與他們周圍環境進行交互),在公交車上對著手機說話來發出一條消息不會成為主流的互動方式。

所以會流行什麼呢?

此處唯一的正確答案是,我也不知道。可能我的判斷失誤,未來我們會有很多突出的軟塑料風格(新擬物化設計的特點之一),或者我們的手機屏幕會採用擠壓玻璃以呈現更逼真的設計。

將如上探討的所有風格進行疊加的嘗試

但是很可能發生的事情是,沒有單一一種風格會成為今年的主導。

最優秀的設計一如既往的會恰當地結合當下趨勢並採用優秀的字體風格。你可以在卡片上採取不同風格的陰影,但如果其中的文字呈現的雜亂而古怪,任何流行風格都不會讓設計看起來美觀。

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

祝大家新年快樂!保持健康,保持好奇,享受設計!

作者:Michal Malewicz

原文:https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc

本文由 @許小涵 翻譯發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • 新擬物化UI設計怎麼做?
    身為一名 UI、UX 設計師,也趁著這波疫情足不出戶自我隔離期,一起加入了這挑起爭端的行列,這篇文章會以改造的口罩 3.0 界面教大家怎麼製作擬物化風格的界面。口罩實名制3.0與擬物化設計的挑戰雖然在這次的嘗試中,頁面 flow 不是設計重點,wireframe 的部分也是以原本的 APP 作為原型,但我還是有將主頁的功能鍵做了一些調整,有將可以主打這支 APP 的超實用功能放到了主頁面,因為真的是超棒的功能,不主打不行。
  • iOS7後的UI設計之爭:再談扁平化與擬物化
    由扁平化與擬物化兩種風格所引發的設計之爭正愈演愈烈,而這一趨勢隨著iOS 7測試版的發布而進入白熱化。儘管技術圈內早已吵得不可開交,但很多朋友可能還沒聽說過這兩個名詞、或者對其背後的含義不甚明了。今天,我們將共同探討扁平化設計的關鍵特點,了解這種設計理念與擬物化的區別所在。
  • 新擬物化UI設計怎麼做?我完成了一個APP改版練習
    身為一名 UI、UX 設計師,也趁著這波疫情足不出戶自我隔離期,一起加入了這挑起爭端的行列,這篇文章會以改造的口罩 3.0 界面教大家怎麼製作擬物化風格的界面。口罩實名制3.0與擬物化設計的挑戰雖然在這次的嘗試中,頁面 flow 不是設計重點,wireframe 的部分也是以原本的 APP 作為原型,但我還是有將主頁的功能鍵做了一些調整,有將可以主打這支 APP 的超實用功能放到了主頁面,因為真的是超棒的功能,不主打不行。
  • 新擬物化設計風格App改版案例,設計經驗分享!
    身為一名 UI、UX 設計師,趁著有空的時候寫下設計案例分享,下面這篇文章會以改造的口罩 3.0 界面教大家怎麼製作擬物化風格的UI界面。疫情期間,數位轉型成功帶給民眾的安心感在年前疫情當中,從一開始坊間的防疫機器人、敗口罩,以及疾管部門與 DeepQ 從 2017 年就開始就研發的「疾管家」(@taiwancdc),都在這段期間內幫用戶減低了不少的焦慮。
  • 學UI設計需要會手繪嗎
    經常有很多人在問:學ui設計需要手繪嗎?一直以來都有人問類似的問題。那麼到底ui設計需要手繪能力嗎?手繪不好是不是不能做UI?不是科班出身,沒有手繪基礎怎麼學UI?今天我就針對UI設計要不要手繪能力做一些回答。
  • 唬人的扁平化擬物化之爭,不就是設計的質感嗎 | 獵雲網
    扁平化不僅僅炫光、色塊以及簡單排版這幾個看家本領,毛玻璃特效是嗎?剖面特效是嗎?融合進過渡動畫後,每個骨架線條都可以做出不同的動態效果。這是擬物化設計難以達到的。而扁平化設計也真就那麼封建,任何陰影紋理都不許沾麼?兩家成世仇了嗎?
  • 2020年北大青鳥學ui設計好找工作嗎?
    2020年學ui設計有發展前景嗎?2019年接近尾聲,是時候為2020年開始籌謀。視聽時代,ui設計開始盛行,許多公司都急需ui設計人才,因此現在開始了解UI設計正是時候。北大青鳥魯廣校區老師為大家介紹,從研究發現未來的界面設計趨勢,包括今年一些受歡迎的設計系統,從中提取一些未來可能的設計風格走向。探索明年趨勢走向。那麼對於界面,同樣的我們需要提前掌握大致設計風格走向,為未來更好地工作做一些設計儲備。
  • 「熱火朝天」的新擬物設計趨勢,你需要理性看待
    研究主題:設計風格趨勢 研究對象:新擬物化設計風格 新擬物化——Neumorphism ,這麼說可能不容易理解,但如果說「新擬物風格」,想必 UI 界的設計師們就知道這股「風頭」,在2020年刮的多麼兇猛了
  • 「新擬物化」過時了!此刻你最應該擁抱的是「玻璃擬物化」!
    」在某些方面和「新擬物化」是一脈相承的,但是它有著相對更加具體的視覺隱喻,也就是我們日常接觸的「玻璃」。 如果你和經常翻看 Dribbble 或者 Behance ,你會注意到有很多設計師在有意識地採用「玻璃擬物化」美學的設計。
  • 我用新擬物化設計風格,做了一個App改版案例
    身為一名 UI、UX 設計師,也趁著這波疫情足不出戶自我隔離期,一起加入了這挑起爭端的行列,這篇文章會以改造的口罩 3.0 界面教大家怎麼製作擬物化風格的界面。我相信這部分的功能是可以再去做分層的,可以針對年齡或者使用習慣不同,將用戶會優先用到的功能移至首頁。口罩實名制3.0與擬物化設計的挑戰雖然在這次的嘗試中,頁面 flow 不是設計重點,wireframe 的部分也是以原本的 APP 作為原型,但我還是有將主頁的功能鍵做了一些調整,有將可以主打這支 APP 的超實用功能放到了主頁面,因為真的是超棒的功能,不主打不行。
  • 這8種UI/UX設計趨勢你知道嗎?
    作為設計師,我們需要了解現有和即將到來的設計趨勢,不斷學習,改進和擴大我們的知識儲備,以便與時俱進。根據研究、經驗和觀察,我們非常仔細地選擇了8種UI / UX設計趨勢。那就讓我們開始吧~8種UI / UX設計趨勢1.
  • 新擬態——國外設計師分析的全新UI趨勢
    相信最近很多小夥伴在逛Dribbble時候,發現最近流行一波新的設計風格,和以往不同的是,這次趨勢又回到之前擬物化了,但它與純擬物化還是有區別的,現在它有一個流行詞語叫「新擬態」,今天就和大家分享下國外一位設計師對這個趨勢的看法!譯文如下:一、擬態化是什麼?
  • 瑞士鐵道鍾與蘋果擬物化設計 | 愛範兒
    而且,它也成為瑞士的文化符號之一,1986 年瑞士設計廠牌 Mondaine 獲得鐵路鐘的設計圖紙,然後將其中的設計元素融入鐘錶設計中,生產出獨具特色的瑞士國鐵表。瑞士鐵道鍾成為蘋果 「擬物化設計」 又一典型例子——iOS 6 中的擬物化設計很多,比如最近 iOS 6 音樂應用中播放界面的那顆調節音樂進度和音量的圓形金屬按鈕。
  • 2021年UI設計趨勢指南
    -2021-637ac038cb99 譯文地址:非科班設計(公眾號) 譯者:逗砂 我們終於還有一個月就要告別魔幻的2020年了,uxdesign又寫了一篇趨勢指南。
  • 擬在這個扁平化當道的年代,我還是愛著擬物化
    「擬物化不是扁平化的對立面,而是作為扁平化的一部分永存。」——村上春樹,《挪威的森林》好啦,不騙你了,其實原文是「死」和「生」。當蘋果公司於2013年推出iOS 7系統,許多人都說它宣判了擬物化設計的死刑。
  • UI設計中有哪些常見的視覺風格
    UI設計中有哪些常見的視覺風格?設計師掌握一些比較常見的設計風格,對於自身的設計工作具有一定程度的幫助。然而相當一部分零基礎學UI設計的小夥伴並不清楚ui設計有哪些風格,那麼接下來優行者小編就給大家簡單講下這個問題。
  • 2020 UX/UI 設計的5個趨勢
    從過渡到全新的「設計領域」(如支持語音的UI,或AR/VR設計),再到UI設計的趨勢(如動畫、自定義圖像等)。2019年對於UX/UI設計而言是偉大的一年。我們看到抽屜、圓角和導航欄切換已經擺脫傳統形式了,而且效果很好。這意味著世界在變化,設計也在發生不斷的變化,甚至在很多情況下,設計引領了世界的變化。
  • [新] 2020年最佳移動應用UI設計趨勢
    換句話說,好的設計是不需要用戶思考很多的,而是更加重視情感,動機和需求的滿足。如果你想設計出技術先進的,直戳用戶痛點,理解用戶心聲的產品, 看這篇文章就對了!在這篇文章中,你將看到2020年最好的行動應用程式設計實例及趨勢,了解他們是如何擴大銷售,留著用戶的。現如今,每個人都被裹挾在源源不斷的信息潮流中,想要創作一款足夠吸引人注意力的產品越來越難。
  • 擬物化風格的APP改良
    身為一名 UI、UX 設計師,也趁著這波疫情足不出戶自我隔離期,一起加入了這挑起爭端的行列,這篇文章會以改造的口罩 3.0 界面教大家怎麼製作擬物化風格的界面。我相信這部分的功能是可以再去做分層的,可以針對年齡或者使用習慣不同,將用戶會優先用到的功能移至首頁。口罩實名制3.0與擬物化設計的挑戰雖然在這次的嘗試中,頁面 flow 不是設計重點,wireframe 的部分也是以原本的 APP 作為原型,但我還是有將主頁的功能鍵做了一些調整,有將可以主打這支 APP 的超實用功能放到了主頁面,因為真的是超棒的功能,不主打不行。
  • UI設計網站 | 常用的UI設計網站大集合
    好多小夥伴知道的UI設計網站可能也就那麼幾個,今天給大家整理了一些經常跟新的UI學習網站,每天堅持瀏覽這些網站,多看大神的作品和文章,可以快速的提升你的UI設計水平,切記,不要只是看,要一邊看一邊動手一邊臨摹,不要覺得臨摹就是抄襲,每個人都是從這個階段過來的。