無極登錄平台_2020 年最火的新擬物化如何落地應用?來看高手的思路

最近關於新擬物化 Neumorphism 的風太大,簡直是傳遍大江南北無人不知。對於它的看法大家也都眾說紛紜,大部分的觀點都集中於:第一看過去非常的高大上,再仔細琢磨一下就感覺只能是飛機稿中的戰鬥稿。對此我表示非常的理解,畢竟在國內體制下的用戶界面設計基本都延續商業設計的命脈──低效能、不實用、不能帶來良好轉化的東西統統給我丟掉,哪怕是用戶體驗也是建立在商業目標驅動下的存在。

儘管觀點如此,我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個身,它並非空穴來風,也並非完全無法落地使用,相反如果合理加以優化應該能達到意想不到的雙贏效果。

2020 年最火的新擬物化設計趨勢,快來了解下!

用一篇文章來了解一下短時間內風靡設計圈,被稱為擬物風格 2.0 ,引起廣泛熱議、使用的風格 —— Neumorphism。

閱讀文章 >>

新擬物化的由來

一切的開始都源於一個叫 Alexander Plyuto 的設計師在各平台發布了一個他的新作品──「Skeuomorph Mobile Banking(擬物化手機銀行)」。

在去年末的時候這名設計師還一直沿用 Skeuomorph(擬物化)這個名詞來命名自己的一系列設計作品,直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關於此風格的文章,並賦予了它一個新名詞 Neumorphism(New+Skeuomorphism),自此之後大家就都照着這個新名詞進行傳播了。

在詳解新風格之前,先讓我們回憶一下這些年移動端用戶界面設計風格的演變歷程。自 2013 年蘋果推出了 iOS7 之後開始颳起的扁平風潮,所有走在設計前沿的大廠都開始不約而同地對自己家的 app 進行了大刀闊斧的改版。

這扁平風一刮就是 7 年,仔細分析一下就能明白為何 ta 如此長壽:內容優先的認知簡約,不僅拓展性強且具有高效能的特性,解放了一大堆「手活」不是那麼好的設計師,讓他們有更多時間專註在設計解決問題的命題上。

但就算一個風格再適應市場的需求,用戶和時代還是會對它逐漸疲憊,審美疲勞和新的市場需求都會催生新的變革。

新擬物化設計語言解析

1. 新擬物化≠輕擬物

第一次看到這個風格介紹的時候險些以為就是曾經的輕擬物重返江湖了,但仔細看看原設計師輸出的設計原則,發現確實是完全不同的 2 種定義。

輕擬物從本質上來說是 Y 軸面原質化層級分離的,而新擬物是在 Y 軸面不分離的情況下物理化擬態。

來看一個輕擬物與新擬物卡片的比對:

從上圖可以感受到新擬物在保留輕質感的同時,更貼近事物的物理還原,但真實感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風格低了很多,這也是它被大家吐槽飛機稿中的戰鬥稿的重要原因之一。

2. 新擬物化控件示例

原設計師對新擬物化的「淺色版」控件規範如下,基本涵蓋了核心的界面設計控件,整體對於控件的定義就在於良好使用投影和漸變來打造物理化界面肌理。

另外還有可以良好適配當前流行黑色模式的「黑色版」。

新擬物化的改良與應用

在了解新擬物化的設計語言特點之後,大家應該都發現這種風格的設計是有一定局限性的,它並不適用於一部分商業產品,大部分時候也不適合全局控件應用。那麼如果我們想要把新擬物化應用到我們的落地項目設計中,需要注意哪些地方,並進行什麼樣的改良呢?

1. 深淺模式疊加解決弱可視難題

新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕,如果繼續沿用淺色按鈕,且不說色弱用戶的可視問題,普通用戶的操作行為也會大打折扣,所以這裏我們建議將新擬物的深淺模式疊加來使用,如下圖:

2. 局部高光使用解決層級難辨問題

如果將新擬物化全控制使用,確實容易造成界面層級混亂的問題,因為畢竟它的設計語言就是 Y 軸面不分離的設計定義,但如果我們合理選擇它來作為局部高光,應該大部分情況下還是不錯的。如下圖,我們僅在銀行卡部分使用新擬物化(深淺雙模式均可用),其他的控件部分保持扁平,使用 2 個風格相融合的方式可以良好保障層級的劃分:

3. 拿什麼解決開發崩潰的問題?

之前看到很多文章在轉發一個生成新擬物化 css 代碼的網站:Neumorphism.io,說是用這個就可以輕鬆解決開發的問題。

2020 年最火的新擬物化設計怎麼做?這個在線神器一鍵生成!

今天分享的 Neumorphism 在線生成新擬物化 UI 工具,可以通過這個工具分解出新擬物化 UI 是如何設計的,此外它還能生成 CSS 代碼並應用到網頁上。

閱讀文章 >>

然而事實的真相總是令人落淚的,這個網站提供的 css 代碼只是網頁代碼,移動端是完全用不了的。而且就算有對應的 css 代碼,對於開發來說也是遠不夠的,他們還是要寫框架來支持這套 css 代碼,不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢?

很簡單,就是給他們切圖。按鈕的軟點擊切兩張狀態圖,卡片背景只需要切一張,ppduck 壓縮走一波,對 app 性能的影響基本可以忽略不計(因為上文我也說過了這種風格不大可能大面積或者全界面應用)。

至於新擬物風不適用的場景大家應該都心知肚明了,信息承載大,層級關係複雜,我就不一一舉例了,基本就涵蓋了大部分現在市面上主流的產品的大部分場景。但即便如此我們還是需要對新的設計保有一絲激情與希望,不要輕易的去否定,畢竟新生事物總是有它的魅力與獨到之處。

歡迎關注作者的微信公眾號:「Nana的設計錦囊」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極登錄平台_2020 年最火的新擬物化如何落地應用?來看高手的思路

赞 (0)