關(guān)于 Big Sur 的新圖標(biāo)的討論很多，很多都在激烈爭(zhēng)論。人們對(duì)蘋果公司沒有將完全扁平設(shè)計(jì)引入 Mac 感到松了一口氣，但分歧并未停止。有些人認(rèn)為這引領(lǐng)一種新的圖標(biāo)表現(xiàn)方式，而有些人則認(rèn)為這是丑到了天際。

但蘋果的設(shè)計(jì)就是這樣，不管你你喜不喜歡，過一段時(shí)間他總會(huì)流行起來。就像iPhone11剛面世時(shí)，背面的攝像頭組被無數(shù)人吐槽一樣，而現(xiàn)在這個(gè)設(shè)計(jì)已經(jīng)成了高端機(jī)的標(biāo)板。

大家還能想起來UI扁平化設(shè)計(jì)已經(jīng)流行了多少年了嗎？

從2013年6月11日蘋果發(fā)布iOS7算起，現(xiàn)在已經(jīng)將近8年了，這8年時(shí)間扁平化像颶風(fēng)一般席卷了整個(gè)UI設(shè)計(jì)圈，一夜間幾乎所有的APP UI都被拍扁了。

其中以Instagram的換標(biāo)作為扁平盛行時(shí)代的里程碑

但扁平化設(shè)計(jì)的確已經(jīng)一統(tǒng)江湖太久了，人們似乎已經(jīng)有點(diǎn)厭倦了。其實(shí)設(shè)計(jì)風(fēng)格就是這樣，并沒有絕對(duì)的好與不好，只要審美不疲勞，就可以繼續(xù)流行下去，至于流行多久我們經(jīng)常會(huì)用一個(gè)詞去形容---耐看度。

扁平化帶給我們的是畫面的輕盈和設(shè)計(jì)的高效率，但是缺點(diǎn)也是明顯的，場(chǎng)景表現(xiàn)過于單一的問題，設(shè)計(jì)感體現(xiàn)較為有限，于是很多設(shè)計(jì)師都在嘗試用新的設(shè)計(jì)風(fēng)格替代或者進(jìn)化現(xiàn)在的扁平化設(shè)計(jì)風(fēng)格，今天我們就來探討一下新擬物背景下3D與平面的結(jié)合設(shè)計(jì)，能在UI中擦出什么樣的火花。

2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html

現(xiàn)在這樣的風(fēng)格會(huì)被我們稱之為重度擬物風(fēng)格，他不好看了？技術(shù)落后了嗎？當(dāng)然不是！只是目前不流行了！

他的特點(diǎn)是強(qiáng)調(diào)光影對(duì)比與物理質(zhì)感，色彩都會(huì)比較偏“暗”，而且伴隨設(shè)計(jì)的往往是難和慢！刻畫一個(gè)細(xì)節(jié)需要很久，在強(qiáng)調(diào)設(shè)計(jì)效率組件化的今天，這種費(fèi)時(shí)又難學(xué)的設(shè)計(jì)方法必然不會(huì)成為主流。

當(dāng)前的UI流行趨勢(shì)是強(qiáng)調(diào)高飽和的色彩搭配（在沒有光影細(xì)節(jié)之下也只有色彩可以玩了），這種風(fēng)格明顯也不符合趨勢(shì)，被“淘汰”也就難免了。

從設(shè)計(jì)角度上解析，圖標(biāo)主要是由四方面構(gòu)成：構(gòu)圖+光影+色彩+紋理

而擬物風(fēng)格圖標(biāo)在這四方面更加強(qiáng)調(diào)構(gòu)圖、光影和紋理，而色彩則是更多去搭配紋理質(zhì)感，所以你看到多數(shù)擬物風(fēng)格圖標(biāo)在質(zhì)感上很棒，但是色彩卻沒有那么豐富。

說到新的擬物風(fēng)格，這只是一個(gè)概念，也有稱之為輕擬物，輕偏平，這里并沒有通用的稱呼和預(yù)設(shè)的設(shè)計(jì)方法，一切的UI設(shè)計(jì)風(fēng)格都是為產(chǎn)品本身服務(wù)，如果新的設(shè)計(jì)風(fēng)格能讓產(chǎn)品整體體驗(yàn)得到“提升”，哪怕這種提升只是成功獲取到了用戶的注意力，那這個(gè)設(shè)計(jì)就是有價(jià)值的。

所以當(dāng)下如果你的產(chǎn)品中想要吸引目光就要有點(diǎn)與眾不同的東西，要么是獨(dú)門的功能，要么就是吸晴的設(shè)計(jì)。
顯然扁平的彩色圖標(biāo)現(xiàn)在已經(jīng)達(dá)不到這個(gè)效果了，而以前的擬物又顯得有點(diǎn)過時(shí)，在這種時(shí)代背景下，新的風(fēng)格必然就會(huì)被碰撞出來。

于是乎我們就會(huì)看到以下的一些大廠“創(chuàng)新”，你不止能看到輕擬物設(shè)計(jì)，還能看到“實(shí)物”設(shè)計(jì)......

不得不說，各位設(shè)計(jì)師們還真是拼了...

“哪怕這種提升只是成功獲取到了用戶的注意力，那這個(gè)設(shè)計(jì)就是有價(jià)值的。”沒毛?。「魑患佑?！

當(dāng)然蘋果BigSur帶給我們的圖標(biāo)設(shè)計(jì)創(chuàng)新更加有趨勢(shì)意義，這種3D+平面的設(shè)計(jì)組合方法更加能給我們一些設(shè)計(jì)啟迪和思考，并且這種3D圖標(biāo)與之前的擬物風(fēng)格有著明顯的視覺區(qū)別

我用3D重構(gòu)了一個(gè)計(jì)算器icon，以此為例來進(jìn)行分解，如下：

與2D設(shè)計(jì)方法設(shè)計(jì)圖標(biāo)一致，都是先勾畫圖形（建模），然后填色、加材質(zhì)和燈光，但不同的是在3D環(huán)境下，這一切都比2D環(huán)境下簡(jiǎn)單了，而且視覺效果更佳，整體畫面感更佳立體，質(zhì)感更加飽滿，并且根據(jù)渲染器的參數(shù)調(diào)節(jié)和材質(zhì)質(zhì)感的不同，即使是在同一模型下，也能制造出很多種不同的視覺體驗(yàn)。

圖標(biāo)背板的選擇上，由于選擇了3D作為主體表現(xiàn)，3D背板過于搶視線，圖標(biāo)為了突出主體而非背景，建議使用2D平面背板與3D前景圖標(biāo)進(jìn)行結(jié)合。

3D設(shè)計(jì)圖標(biāo)的確有一些天然的優(yōu)勢(shì)，特別是在質(zhì)感和光感的表達(dá)準(zhǔn)確度上，是絕對(duì)超過2D的。
但是2D圖標(biāo)在一些風(fēng)格的設(shè)計(jì)也是很難替代的，比如線性圖標(biāo)和漸變風(fēng)格圖標(biāo)。

3D設(shè)計(jì)的確可以提升UI整體的視覺氛圍，并且現(xiàn)在在一些APP中已經(jīng)可以看到小范圍3D案例了（比如支付寶），但是多是以插畫的形式出現(xiàn)，其實(shí)與產(chǎn)品UI還是有一定距離的。

未來3D設(shè)計(jì)一定會(huì)是UI中大展身手，但是目前的常見的3D設(shè)計(jì)軟件實(shí)在是太龐大了，我與許多3D行業(yè)的同行聊天的時(shí)候，大家普遍的認(rèn)知是現(xiàn)在的3D軟件（包括C4D）的實(shí)際最佳場(chǎng)景依然是動(dòng)畫設(shè)計(jì)，UI的中的3D屬于非常輕量級(jí)的，用現(xiàn)在主流的3D設(shè)計(jì)軟件做UI應(yīng)用案例，有點(diǎn)用巡航導(dǎo)彈打蚊子的感覺，而且這個(gè)蚊子還是距離一米以內(nèi)。這有點(diǎn)像當(dāng)年的PS來做UI，雖然可以完成但是效率不高，學(xué)習(xí)曲線也高，于是Sketch和Figma這樣的產(chǎn)品順理成章的取代了PS在UI界的地位。

當(dāng)然趨勢(shì)不可避免，效率也會(huì)提升，且方法總是有的，降低門檻，提升效率一直是我們的追求！

原文地址：站酷
作者：殘酷de樂章

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司