超全面的新擬態(tài)設(shè)計(jì)的詳細(xì)講解

“新擬態(tài)設(shè)計(jì)之父”Alexander Plyuto在追波和ins上發(fā)布了一張作品后突然爆火，瀏覽超30W+，獲得眾多設(shè)計(jì)師的喜愛，并被追波收錄到2020設(shè)計(jì)趨勢預(yù)測里面。有設(shè)計(jì)師稱這種設(shè)計(jì)叫Neumorphism（新擬態(tài)）或者Soft UI（軟UI），之后新擬態(tài)就慢慢傳開了。

2020年2月11日舉行的三星視覺發(fā)布會也使用新擬態(tài)的設(shè)計(jì)手法，新擬態(tài)也被眾人所熟知。

新擬態(tài)設(shè)計(jì)風(fēng)格的處理方式

從設(shè)計(jì)作品中可以看出，擬態(tài)設(shè)計(jì)主要特點(diǎn)就是在可點(diǎn)區(qū)域做了一些「浮雕」的效果。通過觀察，總結(jié)新擬態(tài)設(shè)計(jì)風(fēng)格的處理方式有以下4點(diǎn)。

?左上角亮色投影，右下角深色投影（有且只有一個(gè)光源照射）

?元素與背景對比度比較弱

?常常用于按鈕組件和卡片

?按鈕狀態(tài)，視覺上凸出代表未選中，凹進(jìn)去表示已選中狀態(tài)

擬態(tài)設(shè)計(jì)作品最大的一個(gè)特點(diǎn)就是有且只有一個(gè)光源照射。因此在進(jìn)行設(shè)計(jì)時(shí)，可以想象在組件的左上方有一束光，斜著照射在組件上，導(dǎo)致左上角呈現(xiàn)亮色，右下角呈現(xiàn)深色投影。

因?yàn)樾聰M態(tài)的光源是唯一的，是從左上角照射的，所以就很容易理解，或者分析得到，左上角亮色投影，右下角深色投影。而這一基礎(chǔ)規(guī)律，不單單適用于新擬態(tài)風(fēng)格的按鈕，它還適用于所有新擬態(tài)風(fēng)格表現(xiàn)手法的視覺組件?？梢钥吹较聢D中，卡片、轉(zhuǎn)盤、按鈕，他們的受光面都是在左上角。

為了加深對新擬態(tài)設(shè)計(jì)的更進(jìn)一步了解，可以把它與UI設(shè)計(jì)師常用的另一種設(shè)計(jì)風(fēng)格-扁平化做對比。

以上圖為例，我們最常熟知的蘋果界面就屬于扁平化設(shè)計(jì)風(fēng)格。它的外觀更簡單，同時(shí)又使其用戶易于理解。一直到今天，扁平化設(shè)計(jì)風(fēng)格仍然是UI設(shè)計(jì)的標(biāo)準(zhǔn)。新擬態(tài)風(fēng)格與扁平化風(fēng)格完全相反，可以理解成“加高光、加漸變、加陰影”，其原理是為界面的UI元素賦予真實(shí)感，是一種具有流線感的設(shè)計(jì)風(fēng)格，介于扁平與投影之間。

新擬態(tài)設(shè)計(jì)方法

說了那么多理論，相信大家已經(jīng)完全理解新擬態(tài)設(shè)計(jì)風(fēng)格了，那么就動手實(shí)操演示一下吧。

步驟1. 使用Pixso繪制畫板，選擇一個(gè)非純黑或非純白的背景顏色

背景顏色的選擇是新擬態(tài)設(shè)計(jì)中非常重要的一步，主要是為了區(qū)別之后需要表現(xiàn)的高光和陰影。我們可以在Pixso的畫板上繪制三個(gè)相同的形狀，中間的形狀填充上你想要的顏色，左側(cè)填充稍淺的顏色，右側(cè)填充稍深的顏色。然后將三個(gè)圖形居中，將淺色和深色圖層分別像左上和左下移動相同像素，得到三者重疊的圖形。為方便觀察，以顏色填充作為演示，實(shí)際應(yīng)用中建議使用與背景色較為相近的顏色。

步驟2.給圖層加上模糊和內(nèi)陰影效果，具體步驟如下圖：

凹陷步驟則是將內(nèi)陰影的高光和陰影位置互換，得到以下效果：

以上就是快速制作新擬態(tài)設(shè)計(jì)作品的方法，技術(shù)方面，完全可以通過Pixso來實(shí)現(xiàn)。設(shè)計(jì)方面，適用于一些功能承載率要求不是很高的界面，比如登陸頁；更適用于智能家居等與新擬態(tài)形式比較近似的產(chǎn)品，像淘寶這樣的電商產(chǎn)品，要求頁面承載率比較高，商品內(nèi)容也各式各樣，不太適合大面積使用新擬態(tài)?？傊?，新擬態(tài)風(fēng)格是設(shè)計(jì)上非常好的嘗試和突破，但是若想要在UI設(shè)計(jì)中落地應(yīng)用還有待優(yōu)化和改善。

審核編輯：符乾江