“新擬態設計之父”Alexander Plyuto在追波和ins上發布了一張作品后突然爆火,瀏覽超30W+,獲得眾多設計師的喜愛,并被追波收錄到2020設計趨勢預測里面。有設計師稱這種設計叫Neumorphism(新擬態)或者Soft UI(軟UI),之后新擬態就慢慢傳開了。
2020年2月11日舉行的三星視覺發布會也使用新擬態的設計手法,新擬態也被眾人所熟知。
新擬態設計風格的處理方式
從設計作品中可以看出,擬態設計主要特點就是在可點區域做了一些「浮雕」的效果。通過觀察,總結新擬態設計風格的處理方式有以下4點。
?左上角亮色投影,右下角深色投影(有且只有一個光源照射)
?元素與背景對比度比較弱
?常常用于按鈕組件和卡片
?按鈕狀態,視覺上凸出代表未選中,凹進去表示已選中狀態
擬態設計作品最大的一個特點就是有且只有一個光源照射。因此在進行設計時,可以想象在組件的左上方有一束光,斜著照射在組件上,導致左上角呈現亮色,右下角呈現深色投影。
因為新擬態的光源是唯一的,是從左上角照射的,所以就很容易理解,或者分析得到,左上角亮色投影,右下角深色投影。而這一基礎規律,不單單適用于新擬態風格的按鈕,它還適用于所有新擬態風格表現手法的視覺組件。可以看到下圖中,卡片、轉盤、按鈕,他們的受光面都是在左上角。
為了加深對新擬態設計的更進一步了解,可以把它與UI設計師常用的另一種設計風格-扁平化做對比。
以上圖為例,我們最常熟知的蘋果界面就屬于扁平化設計風格。它的外觀更簡單,同時又使其用戶易于理解。一直到今天,扁平化設計風格仍然是UI設計的標準。新擬態風格與扁平化風格完全相反,可以理解成“加高光、加漸變、加陰影”,其原理是為界面的UI元素賦予真實感,是一種具有流線感的設計風格,介于扁平與投影之間。
新擬態設計方法
說了那么多理論,相信大家已經完全理解新擬態設計風格了,那么就動手實操演示一下吧。
步驟1. 使用Pixso繪制畫板,選擇一個非純黑或非純白的背景顏色
背景顏色的選擇是新擬態設計中非常重要的一步,主要是為了區別之后需要表現的高光和陰影。我們可以在Pixso的畫板上繪制三個相同的形狀,中間的形狀填充上你想要的顏色,左側填充稍淺的顏色,右側填充稍深的顏色。然后將三個圖形居中,將淺色和深色圖層分別像左上和左下移動相同像素,得到三者重疊的圖形。為方便觀察,以顏色填充作為演示,實際應用中建議使用與背景色較為相近的顏色。
步驟2.給圖層加上模糊和內陰影效果,具體步驟如下圖:
凹陷步驟則是將內陰影的高光和陰影位置互換,得到以下效果:
以上就是快速制作新擬態設計作品的方法,技術方面,完全可以通過Pixso來實現。設計方面,適用于一些功能承載率要求不是很高的界面,比如登陸頁;更適用于智能家居等與新擬態形式比較近似的產品,像淘寶這樣的電商產品,要求頁面承載率比較高,商品內容也各式各樣,不太適合大面積使用新擬態。總之,新擬態風格是設計上非常好的嘗試和突破,但是若想要在UI設計中落地應用還有待優化和改善。
審核編輯:符乾江
-
設計
+關注
關注
4文章
818瀏覽量
69888 -
ui
+關注
關注
0文章
204瀏覽量
21369
發布評論請先 登錄
相關推薦
評論