設計中擬物設計、擬態設計、扁平化設計風格

2020-02-08     千鋒IT技術學習課堂

做UI設計稍微久一點的設計都知道,早些年一種叫做「擬物設計」的風格曾風靡一時。


所謂擬物設計,就是現實生活中的物件長什麼樣子,我們在設計中就要儘量去模擬它,模擬它的質感、光影以及運動方式等等。


比如說你要做一個讀書APP介面,那你就應該將看看現實生活中的書架長什麼樣子,然後儘量去模擬它。這樣做的好處就是可以讓用戶很容易看懂你的設計,無需思考即可上手。


來看看擬物設計的集大成者iOS6:



看到這樣的介面,你完全不用看文字,就能知道每個圖標是做什麼的。


當然,擬物設計帶來的問題也是很明顯的,那就是介面太「重」了。


各種繁複的高光、陰影、紋理疊加在一起,使得介面本身過於搶眼球,讓用戶的視線無法聚焦在內容上,簡單點說,就是設計大於內容,喧賓奪主了。


於是乎,扁平化設計應運而生。


一開始很多人抨擊扁平化設計太醜,無法接受。但是他們沒明白的是,擬物和扁平不是兩種設計風格之爭,而是兩種設計理念之爭。


是設計優先,還是內容優先?


只要能稍微能冷靜思考一下的設計師,都會做出正確的選擇吧。


後來的事情大家都知道了,扁平化設計一路披棘斬荊,將擬物設計打得落花流水,一敗塗地。


然而,總有些人想當異類,要逆流而上。比如說下面這個號稱喬布斯接班人的胖子,他就宣稱要將設計界帶回到擬物化的正確道路上。



後來的事情大家也知道了,歷史的洪流滾滾向前,不會因為你是一個胖子就停下,只會把你沖得更遠。


看到這裡你可能覺得有點奇怪,我為什麼要給你講這麼過時的話題。


我當然不是要給你普及設計歷史,而是要向你介紹一種新UI設計理念。


這就要從扁平化設計缺點說起,自從扁平化設計一統江湖之後,各家的APP就越來越長得雷同,變得難以辨認。



是不是像同一個模子裡出來的?


這還真不是這幾家的設計師偷賴,更說不上抄襲,這是極簡的扁平化設計帶來的必然結果。


正是因為這個原因,所以dribbble上一幫設計師最近搗鼓出一種新的設計思路,他們稱這種設計為「擬態設計」。


先上幾張圖大家感受一下。



上面這些作品分別來自dribbble上不同設計師的作品,但是明顯是相同的風格。


看完之後,你可能覺得挺特別,但又說不上來好在哪裡的感覺。。。


擬態設計,是個啥玩意,好像是一個可以用來忽悠甲方的新名詞。


除了用來忽悠甲方,這裡面還真的有著很多關於設計趨勢的思考,聽我慢慢給你分析。


那啥是擬態設計呢?


首先,擬態設計是對擬物設計的一種回歸。


相對於擬物設計的重質感,它是一種輕質感,在不干擾內容的前提下,做適當的修飾。

相對於扁平化設計,擬態設計通過漸變色、高光陰影等方式,刻畫出恰到好處的重量感。



其次,擬態設計強調的是表現出物體的狀態。


比如說一個按鈕,它就應該有凸起來和凹下去的狀態,這樣才能給用戶最清晰的反饋。



對事物狀態的精準表達,這是擬態設計的核心,也是它的名字的由來。


第三、擬態設計是一種設計理念、思考方式。


順著這種思路,你在做設計的時候,要思考設計的目的是什麼,要用什麼方式來表達出來,而不是一味的因為扁平化流行 ,就做扁平化。



最後我再給你簡單總結一下啥是擬態設計:


擬態設計是一種新的設計理念。

在視覺上,它回歸擬物化,但是不會像擬物設計那樣全盤模擬真實世界,而是通過恰當的高光陰影刻畫出輕量的畫面質感。


在交互上,它強調對物件的狀態精準還原,畫面中可以操作的地方必須像真實世界那樣體現出來。


那麼,這種風格適合哪些類型的APP呢?


一、工具類。

工具類的APP內容相對固定,不需要時時更新,這樣設計師在視覺風格方面的表達空間更大一些。

我們可以看到,現在大部分的設計案例都是工具類的介面。



二、簡單的功能性頁面。

和工具類APP一樣,這些類頁面上運營性質的東西相對較少,內容的形式相對可控。



最後,估計你也看出來,這是一種不太成熟的設計風格,在實際應用中會局限性會比較大,其實就是dribbble上一幫設計師做的概念型的設計。不過它還是引起了很大的關注,越來越多的設計師參與了這種風格的探索。總之,它背後的思考方式還是值得我們去了解和學習的。


好了,你會考慮將這種風格應用到自己的項目中嗎?

來源:龐門正道
編輯:千鋒UI設計

文章來源: https://twgreatdaily.com/zh-tw/PbPKJXAB3uTiws8KVDHa.html