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

設(shè)計(jì)趨勢(shì)來(lái)來(lái)去去，但一個(gè)普遍的趨勢(shì)已經(jīng)流行了很長(zhǎng)時(shí)間，那就是扁平化設(shè)計(jì)，現(xiàn)在也幾乎是無(wú)處不在，UI中的按鈕，Logo，圖形設(shè)計(jì)等等。

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

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

一、扁平化設(shè)計(jì)趨勢(shì)是怎么興起的？

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

從擬物到扁平，iOS 7 帶來(lái)了革命性的設(shè)計(jì)語(yǔ)言飛躍，顛覆了之前 iOS 的視覺(jué)風(fēng)格。蒂姆·庫(kù)克將其稱為 “iPhone 以來(lái) iOS 最大的變革”。

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

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問(wèn)題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒(méi)有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

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

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

對(duì)這段歷史感興趣的可以看看這篇10年前寫(xiě)的文章：https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設(shè)計(jì)刷新

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

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

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

三、MacOS Big Sur 圖標(biāo)

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

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

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

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

四、Airbnb 新版本設(shè)計(jì)

Airbnb在最近的夏冬主題設(shè)計(jì)更新里，玩了不少 3D 和復(fù)雜設(shè)計(jì)。就拿它們新出的“游客護(hù)照”來(lái)說(shuō)吧，圖標(biāo)就跟真“書(shū)”似的，點(diǎn)開(kāi)交互還有翻書(shū)動(dòng)畫(huà)，賊逼真。

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

Airbnb 在其他地方也玩兒 3D 了，比如“最受歡迎”那個(gè)地方，評(píng)分都立體起來(lái)了，還有那個(gè)改版后的“選月份”的按鈕，做得跟真表盤(pán)似的。

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

五、Shopify更新了設(shè)計(jì)系統(tǒng)

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

這次重設(shè)計(jì)也不是瞎改，當(dāng)初設(shè)計(jì)團(tuán)隊(duì)說(shuō)扁平化做能讓界面干凈，理解簡(jiǎn)單，用著還效率高?？蓵r(shí)間一長(zhǎng)，商家們就不樂(lè)意了，說(shuō)這界面整得“沒(méi)勁”、“乏味”還“單調(diào)”。

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

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

總結(jié)

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

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

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