你知道UI設(shè)計和3D是如何結(jié)合的嗎

　　有人調(diào)侃藝術(shù)是有輪回的，至于年限，說十年也有，二十年也有。人們總在喜新厭舊，然后再把舊的拿出來當新事物，謂之“復古”。
 

　　曾經(jīng)我們一度追尋扁平風，因為它簡潔、清爽，但就像我前面講到的，當大多數(shù)設(shè)計開始同質(zhì)化，萬物皆偏平的時候，3D又回來了。
 

　　今天AAA教育郭老師就有一篇UI設(shè)計與3D的文章，一起來看一下吧，來不及一次性閱讀的朋友，建議收藏先哦。

 

　　在2020 年的蘋果全球開發(fā)者大會(WWDC)，蘋果發(fā)布了新的 macOS 11(又名 Big Sur)。其中在UI視覺方面macOS Big Sur 系統(tǒng)最大的變化就是圖標上， Big Sur更新了很多新設(shè)計風格的應用圖標。

 

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

 

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

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

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

 

　　其中以Instagram的換標作為扁平風盛行時代的里程碑
 

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

 

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

 

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

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

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

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

 

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

 

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

 

　　所以當下如果你的產(chǎn)品中想要吸引目光就要有點與眾不同的東西，要么是獨門的功能，要么就是吸晴的設(shè)計。
 

　　顯然扁平的彩色圖標現(xiàn)在已經(jīng)達不到這個效果了，而以前的擬物又顯得有點過時，在這種時代背景下，新的風格必然就會被碰撞出來。
 

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

 

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

　　“哪怕這種提升只是成功獲取到了用戶的注意力，那這個設(shè)計就是有價值的。”沒毛病!各位加油!
 

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

 

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

 

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

 

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

 

　　3D設(shè)計圖標的確有一些天然的優(yōu)勢，特別是在質(zhì)感和光感的表達準確度上，是絕對超過2D的。

　　但是2D圖標在一些風格的設(shè)計也是很難替代的，比如線性圖標和漸變風格圖標。

 

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

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

　　當然趨勢不可避免，效率也會提升，且方法總是有的，降低門檻，提升效率一直是我們的追求! 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。