<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 2020 年最火的新擬物化如何落地應用?

          2020-3-22    濤濤

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

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

          新擬物化的由來

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

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

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

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

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

          新擬物化設計語言解析

          1. 新擬物化≠輕擬物

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

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

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

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

          2. 新擬物化控件示例

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

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

          新擬物化的改良與應用

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

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

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

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

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

          3. 拿什么解決開發(fā)崩潰的問題?

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

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

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

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

          文章來源:優(yōu)設    作者:Nana的設計錦囊

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          亚洲一本综合久久| 久久久久久亚洲精品无码| 久久精品国产亚洲AV久| 精品久久久久久久中文字幕| 欧美久久天天综合香蕉伊| 国产精品久久久久久五月尺| 欧洲成人午夜精品无码区久久| 久久久久这里只有精品| 精品多毛少妇人妻AV免费久久| 思思久久99热只有频精品66| 亚洲AV无码久久寂寞少妇| 99久久婷婷国产综合亚洲| 久久婷婷国产麻豆91天堂| 久久久久99这里有精品10| 亚洲狠狠久久综合一区77777| 免费精品久久久久久中文字幕| 久久人妻AV中文字幕| 欧美亚洲国产精品久久蜜芽| 亚洲国产成人久久一区久久| 72种姿势欧美久久久久大黄蕉| 久久久WWW成人| 国产精品久久国产精品99盘| 久久人人爽人人爽人人片av麻烦| 99久久久精品| 久久综合九色综合网站| 欧美精品国产综合久久| 亚洲国产日韩欧美综合久久| 久久久久综合网久久| 人妻少妇久久中文字幕| 国产精品久久久香蕉| 欧美日韩中文字幕久久久不卡| 久久99精品国产99久久6| 亚洲综合伊人久久大杳蕉| 亚洲精品无码久久毛片| 久久久久亚洲精品中文字幕| 国产精品亚洲综合专区片高清久久久 | 国产精品毛片久久久久久久| 亚洲欧美日韩中文久久| 久久久久久国产精品美女| 日本久久中文字幕| 久久久亚洲裙底偷窥综合 |