广东36选7每天开奖时间|广东36选7开奖公告不正常呢

Neumorphism(新擬態)UI設計趨勢嗎?

38天前發布

原創文章 / UI / 觀點
Frannnk 原創,如需商業用途或轉載請與Frannnk聯系,謝謝配合。

Neumorphism / soft ui 新擬態也有人叫同化、軟UI,這種風格是什么?是接下來的趨勢嗎?

Neumorphism / soft ui(新擬態也有人叫同化、軟UI)是什么?在前一段時間,大家即使沒有看過,但是應該也聽到過一些關于這種新風格的介紹,或者是在某某趨勢中有類似作品的出現,不太了解或者一看而過。簡單的介紹一下,標題并非判斷結果,而是希望同大家一起探尋一起交流,一起討論這種風格是否會是接下來的新趨勢...


起因是源于2019年11月5日,來自烏克蘭的設計師 Alexander Plyuto 在追波和ins上發布了下圖的一張作品,作者說明信息:

“讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣的,這是我的愿景?!?/span>

Dribbble-Alexander Plyuto的作品


目前作品在追波平臺收獲贊量4000+,瀏覽量23W+,一路飆升至追波2019年pop排行第一熱門的作品,同時在ins上的傳播也是異常的火爆,獲得很多設計的喜歡,評論頓時炸開了鍋,其中有設計師稱呼這種風格為“Neumorphism 新擬態”或者“Soft UI 軟UI”,于是這種叫法慢慢傳開,可能并不準確。


為什么這個風格會火?你怎么認為?

先拋開作品發布的平臺帶來的熱度,很多設計師認為這本身也是一種潛在的趨勢,隨處可見的C4D的輕質感在不同領域和不同方向的使用,IOS13更新后的部分拋棄了純扁平,重拾了3D的感覺。它會火的主要還是在視覺上,這種風格剛一出現,它是非常新穎的,在長達半年的幾乎高度一致的風格下,它是新的嘗試,讓人憧憬的方向。


能有不斷創新的設計師帶給我們不同的設計風格,首先需要感謝,其次再去以個人的視角看待它。那么多風格的作品,那么擬態就變成趨勢了?我們帶著這個問題,一起繼續探討(我們先把代碼實現等話題放在文章最后討論)。


帶著疑問,仔細看一下上面的作品,第一眼看有點像早期的寫實風格(如下圖),接近真實感,有強烈的質感和空間感......但是不同的是也帶了一點當前依舊流行的多彩模糊陰影的感覺。我們試著去找一下這種風格的特點有哪些......


IOS 13 圖片編輯界面


 by  Mike | Creative MintsMike


通過觀察,我們不難發現這種風格的一些基本特點:

  • 元素并不浮動

  • 元素色彩相對單一,與背景高度統一

  • 左上角亮色投影,右下角深色投影

  • 多以卡片樣式出現

  • 更加適合大圓角圖形

  • ...

        

克服恐懼最好的辦法就是 —— 臨摹它!

這種表現方式,其實并不難,去閱讀了幾乎全部相關的資料,也去查閱了作者相關的介紹和說明,試著去了解一下這種風格。首先我們先以按鈕為例,請看下圖:


這三個圖標,你更愿意點哪一個?

這是我們比較常見的三種也是相對比較流行的表現方式,我們分別從常規的頂部視角和側面視角去觀察它們:


  • 扁平的:首先在層級上,扁平的通常給我們的感知就是與背景是同為一個平面,視覺層級也沒有特別強烈的前后關系(不考慮圖標本身),對背景沒有太大的依賴,如果本身背景與畫面整體背景有區分,色彩就劃分了層級。  


  • 投影的:帶投影的給我們的感知就是漂浮起來的,單獨看它,它漂浮在背景之上,與扁平并列看,它還要高于扁平的,通常大家為了突出某些內容,某個模塊會去使用這種樣式。投影的使用對背景的依賴幾乎可以忽略,因為投影除了形狀可以調整,包括色彩、大小等都可以調整,且它是無邊界的漂浮著,即你可以隨意定義它的高度。  


  • 新擬態:頂面看,它似乎是介于扁平與投影之間,側面看,同樣也是漂浮的,但是它有厚度卻又沒有離開平面,它的范圍相對于投影的無邊界,似乎還有一些模糊的界定。對背景的有一定的依賴,需要幾乎相同的色值去實現。


回到上面的問題,這三個你會更傾向于點哪個?當然上面的案例沒有示意在不同色彩下的情況,也有認為拋開體感上,前面兩張白色背景的已經高于新擬態,因為它與背景的高度融合,在對比度上已經弱了很多。


可能這時候有人會有疑惑,單獨看這一個按鈕不是很有對比性,尤其是在視覺上體現的也不明顯。所以我們簡單繪制了一些卡片試試在作為信息承載的時候,這種風格的效果如何,同時也去將不同的樣式融合,看看脫離背景的約束,局部是否可用與協調。



我們可以從上圖看出,當這種風格用做內容承載時候,不管是文字圖片按鈕或者圖標,僅僅在用做卡片的時候,效果還是蠻好的,它同前面兩種風格一樣,仍然可以清晰的區別內容層次、間距等,但是親測如果大面積使用,頁面會變的更加復雜,整體的層級較難清晰劃分,那么局部使用效果如何?



局部使用在某種特定的場景是可以用的,如下圖的計算器界面。在的卡片、按鈕、進度條等樣式下也能得以很好的展現。但是它比起投影卡片,除了視覺上,點擊感、移動效果......差了很多。



看的這里,大家應該會有一個自我評定標準,這應該(目前)不會是一個大趨勢,至少明年不會,雖然這種風格很受人喜歡,但是這種風格還存在很多弊端:


  • 首先,除了卡片等樣式,它不能有效的提高信息的傳達,頁面內容密集,過多使用容易導致混亂,如果靠投影的大小或深淺來區分,即使達到效果,畫面會變得復雜沉重。

  • 按鈕的凸起和凹陷的狀態,絕大部分需要通過投影來識別,這是比較困難也是比較嚴重的問題,這樣是幾乎很難區分點擊的前后狀態的。

  • 背景色的依賴太大,色彩對比度較低,相對于白卡投影等形式的應用,目前的樣式不能讓內容與背景產生良好的對比,不利于信息傳遞。


實現問題,其實現實難度到還真不難,話筒交給你們......


所以這種風格就涼了嗎?

這種風格其實在某些局部地方還是可以使用的,小面積的和其他風格進行混合使用。無數的可能性需要大家去做更多的嘗試和創新。通過對趨勢的了解,結合我們認知范圍內正確的組合和排列,說不定會創造一個意想不到的“船新版本”。


我們只有在這樣的思考和創造的過程中,獲得更多的靈感。不能不考慮實現問題,但是我們更需要順應趨勢,不管這個趨勢能火多久,在將來能否得到應用,只有不斷的探索更多更新的東西,設計才會變得更加美好。動起手來吧~


下面還是簡單的分享一下實現的方法,并分享一下相關的源文件與作者的源文件供大家學習交流哦!


凸起部分:

第一步:確定配色,最好是淺色或者是深色,選取高光色和投影色(非同色系的不同組合大家可以多去嘗試)

第二部:創建對象,更加適合圓角的對象,可以是純色,或者輕微的漸變效果也更好

第三部:添加投影,投最好是X和Y軸的位移是一致的,至于角度,大家自由發揮吧,這里建議亮色投影和深色投影分別復制一份制作,如果是在同一圖層上做,交界處效果不理想,更模糊。


凹陷部分:

步驟幾乎一致,投影換成內陰影做對角線的深淺添加可以。

這里說一下,凹陷部分完全按照這種風格去實現,顯示效果其實不好,作者包括其他設計師都在這里做了優化,優化后的實現方式上已經不屬于這個風格了,因為最后的實現效果,側面觀察它已經是脫離背景的,如果融合背景也可以,只是邊界會更加模糊,所以仔細觀察作品,細心的同學應該已經發現是如何處理的:其實就是添加一個邊框,再讓投影充當淺色高光。


最后希望大家能時刻洞察每一種可能的趨勢,即將興起的趨勢,不斷的去嘗試與創新。評論分享給大家一個快速生成Soft UI的網站。


附件提?。何恼路饷嬖次募?、文中測試源文件、作者源文件(僅供學習交流用)


1021
- 17位站酷推薦設計師推薦 -

    文章信息

    • 文章標簽

    沒有新消息



    广东36选7每天开奖时间