扁平化設(shè)計終結(jié)?新趨勢來了?

資訊頻道 - 觀點(diǎn)·話題 來源:人人都是產(chǎn)品經(jīng)理 作者:dayue 2023-12-27

扁平化設(shè)計這一趨勢已經(jīng)流行了挺長時間,而現(xiàn)在,設(shè)計風(fēng)向似乎要有所轉(zhuǎn)變了,這或許可以從一些設(shè)計案例中透露出來。這篇文章里,作者就從案例出發(fā),展示了設(shè)計趨勢的演變,一起來看看吧。


設(shè)計趨勢來來去去,但一個普遍的趨勢已經(jīng)流行了很長時間,那就是扁平化設(shè)計,現(xiàn)在也幾乎是無處不在,UI 中的按鈕,logo,圖形設(shè)計等等。

最近感覺設(shè)計風(fēng)向有點(diǎn)變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉(zhuǎn)變。

在這篇文章里,我主要聚焦在 UI 設(shè)計領(lǐng)域,看看設(shè)計趨勢在這方面都經(jīng)歷了哪些變化。

 01/

扁平化設(shè)計趨勢是怎么興起的?


2013 年蘋果推出 iOS 7 后,扁平化設(shè)計火得一塌糊涂,界面設(shè)計方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素,但其作為行業(yè)風(fēng)向標(biāo)的影響力依然無人能及。

從擬物到扁平,iOS 7 帶來了革命性的設(shè)計語言飛躍,顛覆了之前 iOS 的視覺風(fēng)格。蒂姆 · 庫克將其稱為 "iPhone 以來 iOS 最大的變革 "。


看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實(shí)改成這樣是有道理的,畢竟擬物設(shè)計當(dāng)初是為了讓用戶更快上手新界面,現(xiàn)在大家都習(xí)慣了,設(shè)計語言也需要更新迭代了。

十年過去了,絕大部分現(xiàn)代界面設(shè)計依然在用這種設(shè)計語言。然而,隨著設(shè)計逐漸追求更多復(fù)雜性和立體感(是的,又是 3D,回到擬物設(shè)計),一些方面也開始出現(xiàn)變化。讓我們來看看幾個近期的例子。

值得說的是,盡管蘋果公司在引領(lǐng)扁平化設(shè)計趨勢方面發(fā)揮了重要作用,但其實(shí)靈感還是來自 Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個用扁平化設(shè)計的大廠。

02/

Reddit 品牌設(shè)計刷新


先一起看看最近的一個大廠設(shè)計改版案例,Reddit 最近刷新了它的 logo。你能從上面的圖中看到,相比于舊版,新的設(shè)計有了一些 3D 風(fēng)格化。

一直以來,扁平化 logo 是主流,但隨著像 Pentagram 這樣的設(shè)計大廠都開始探索 3D 化設(shè)計風(fēng)格,預(yù)示著扁平化的時代就快要過去了。

現(xiàn)代的品牌 logo 設(shè)計大多是扁平的,因?yàn)檫@樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設(shè)計

03/

MacOS Big Sur 圖標(biāo)


回到 2020 年,在那年的 11 月,蘋果刷新了它們的 MacOS 圖標(biāo)風(fēng)格。我個人認(rèn)為,這是在細(xì)節(jié)設(shè)計上搭配更多 3D 效果這股趨勢的源頭,我在網(wǎng)上看到了很多這樣的討論。

從 Big Sur 開始,蘋果就在圖標(biāo)上下功夫,給原生應(yīng)用圖標(biāo)加料,讓它們看起來不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個圖標(biāo)更有立體感。

一看蘋果都整 3D 了,不少第三方應(yīng)用開發(fā)商也坐不住了,紛紛改起了自家圖標(biāo),看起來更立體了。

蘋果在界面設(shè)計上向來引領(lǐng)潮流,這次的新趨勢,又不知道多少公司和個人會跟著玩。

04/

Airbnb 新版本設(shè)計


Airbnb 在最近的夏冬主題設(shè)計更新里,玩了不少 3D 和復(fù)雜設(shè)計。就拿它們新出的 " 游客護(hù)照 " 來說吧,圖標(biāo)就跟真 " 書 " 似的,點(diǎn)開交互還有翻書動畫,賊逼真。

游客護(hù)照打開后,頂部卡片加了陰影,看著更有立體感,一點(diǎn)都不扁了。


Airbnb 在其他地方也玩兒 3D 了,比如 " 最受歡迎 " 那個地方,評分都立體起來了,還有那個改版后的 " 選月份 " 的按鈕,做得跟真表盤似的。

最后,他們冬天的新版本里,插畫也搞起了等角投影風(fēng)格,給你們看下面他們那個新版本宣傳片就知道了。

05/

Shopify 更新了設(shè)計系統(tǒng)


Shopify 對深受好評的設(shè)計系統(tǒng) Polaris 進(jìn)行了重大更新,換了套新花樣!以前那些扁平的按鈕,現(xiàn)在縮小了,還更帶感了,按著賊舒服。

這次重設(shè)計也不是瞎改,當(dāng)初設(shè)計團(tuán)隊說扁平化做能讓界面干凈,理解簡單,用著還效率高?蓵r間一長,商家們就不樂意了,說這界面整得 " 沒勁 "、" 乏味 " 還 " 單調(diào) "。

設(shè)計主要是為了把軟件界面打造成 " 專業(yè)工具 ",更加高大上。改動之后,按鈕在點(diǎn)擊時更爽了一些,就像商家們平時在用的物理按鍵一般。


探索的 2 種不同設(shè)計風(fēng)格

總結(jié)

上面這些案例展示了現(xiàn)代設(shè)計趨勢的演變,從扁平化設(shè)計向更加注重細(xì)節(jié)的方向過渡。

扁平化設(shè)計固然擁有清晰高效等優(yōu)點(diǎn),但現(xiàn)代設(shè)計更傾向于展現(xiàn)層次和深度。設(shè)計師和開發(fā)者應(yīng)當(dāng)密切關(guān)注這一趨勢,并做好準(zhǔn)備將相關(guān)元素融入自身系統(tǒng),尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。

設(shè)計趨勢真是一個輪回。

















聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點(diǎn)。

全部評論

暫無相關(guān)推薦