在內(nèi)容化消費(fèi)的今天，越來(lái)越多的應(yīng)用開(kāi)始強(qiáng)調(diào)針對(duì)內(nèi)容的沉浸式設(shè)計(jì)，雖然只是很小的細(xì)節(jié)，但卻可以讓你的界面愈發(fā)的活力，甚至充滿情緒。

?

我們都知道iOS在一些諸如背景設(shè)計(jì)的處理上做得非常到位，那蘋(píng)果是怎么做到的呢？今天就簡(jiǎn)單為大家介紹下你之前可能不太熟悉的手段：混沌分形。

?

▲ 混沌動(dòng)態(tài)系統(tǒng) dynamical system

?

#01

混沌分形理論

?

?

不論混沌還是分型，其實(shí)都是對(duì)自然界某種運(yùn)動(dòng)形態(tài)的映射和描述，他們?cè)跀?shù)學(xué)、物理學(xué)、生物學(xué)、地質(zhì)學(xué)乃至股票波動(dòng)、基金漲落等許多自然與社會(huì)科學(xué)領(lǐng)域中都有廣泛應(yīng)用。

?

例如從上世紀(jì)后半葉開(kāi)始，混沌理論已經(jīng)逐漸滲透到音樂(lè)等相關(guān)創(chuàng)作領(lǐng)域中，慢慢的到近現(xiàn)代分型算法也開(kāi)始被廣泛地用于各類(lèi)藝術(shù)形式的創(chuàng)作和靈感表達(dá)等方面。

?

▲ 分形與混沌藝術(shù)-馬丁迭代&玫瑰線

?

#02

生成式藝術(shù)

?

?

上面我們提到過(guò)，混沌和分型在設(shè)計(jì)和藝術(shù)創(chuàng)作也被深入運(yùn)用了，我們一般稱(chēng)其為生成式藝術(shù)，特別是近些年計(jì)算機(jī)高度發(fā)展的當(dāng)下，隨著計(jì)算能力的提高，越來(lái)越多的生成式藝術(shù)作品出現(xiàn)在我們生活中。

?

讓我們一起看下iOS的播放器，同一張封面如果對(duì)比其他應(yīng)用來(lái)看，你是不是會(huì)發(fā)現(xiàn)背景設(shè)計(jì)的好像哪里有點(diǎn)不一樣？好像更模糊更虛化，伴隨著一種流動(dòng)感。

?

▲ iOS播放器背景有種說(shuō)不出的朦朧美

?

如果按照常規(guī)思路來(lái)處理這種背景效果，我們首先會(huì)把圖片放大填充到背景層，隨后給一個(gè)模糊參數(shù)，但是我們可以發(fā)現(xiàn)出來(lái)的效果跟iOS的背景并不一樣～

?

因此iOS的背景效果并不是直接把圖片放大處理后的效果，那這種是怎么實(shí)現(xiàn)的呢？筆者猜測(cè)極大概率是混沌分型的生成式藝術(shù)。

?

▲ 簡(jiǎn)單的放大模糊并沒(méi)發(fā)實(shí)現(xiàn)左側(cè)的效果

?

下面我們運(yùn)用混沌分形思路，簡(jiǎn)單嘗試復(fù)刻一下，如何把一張封面圖處理成類(lèi)似iOS的這種背景充滿不規(guī)則流動(dòng)形狀的效果。

?

第一步，我們通過(guò)對(duì)素材進(jìn)行取色邏輯處理，從而得到一個(gè)陣列范圍內(nèi)的色值集合。

?

▲ 針對(duì)封面圖進(jìn)行取色處理

?

接下來(lái)我們借助某種算法工具，比如這里我使用的是阿里云的呼吸工具B-Design Tool，在剛剛的色值集合中取出所需數(shù)量的色值，并填入其中，適當(dāng)調(diào)整一下算法的動(dòng)態(tài)參數(shù)，借助其生成我們最終所需要的分形紋理。

?

▲ B-Design Tool

?

通過(guò)對(duì)比兩種不同手段實(shí)現(xiàn)出來(lái)的背景效果，可以很明顯發(fā)現(xiàn)右側(cè)的更符合iOS的播放器效果，也側(cè)面證明蘋(píng)果的實(shí)現(xiàn)理論大致應(yīng)該如此。

?

▲ 右側(cè)的效果明顯是我們想要的預(yù)期結(jié)果

?

運(yùn)用這套模式我們繼續(xù)隨機(jī)找個(gè)素材，通過(guò)測(cè)試發(fā)現(xiàn)最后生成的背景設(shè)計(jì)幾乎是契合原版效果的！

?

當(dāng)然這種紋理其實(shí)是動(dòng)態(tài)的，也就是說(shuō)我們可以在其基礎(chǔ)上將背景設(shè)計(jì)進(jìn)一步提升表現(xiàn)形態(tài)，這里就不再具體展開(kāi)了。

?

?

?

#03

算法創(chuàng)作

?

?

拋開(kāi)混沌分形的技巧之外，回到應(yīng)用設(shè)計(jì)上，我們現(xiàn)在看到的關(guān)于背景的處理手法，通常可以總結(jié)為兩種手段，一種是算法取主色填充，另外一種是素材背景模糊處理。

?

算法取主色填充

?

通過(guò)將三維空間中的點(diǎn)進(jìn)行聚類(lèi)，進(jìn)而尋找到圖像的主色，這種方式相比較于固定色值，靈活性更高，感官上更為順暢。

?

某些應(yīng)用會(huì)提前根據(jù)自己品牌的色彩體系，批量拓展出一系列契合自身品牌表達(dá)的輔色，并將這些顏色隨機(jī)的應(yīng)用在各種背景設(shè)計(jì)上。

?

▲ 豆瓣對(duì)角線雙色漸變的運(yùn)用

?

▲ 抖音長(zhǎng)漸變的運(yùn)用

?

▲ Pinterest 延遲加載取圖主色

?

素材背景模糊處理

?

顧名思義把圖片放在背景上放大，并給一定的模糊和其他處理，就可以讓背景呈現(xiàn)出類(lèi)似毛玻璃的虛化效果，從而使其看起來(lái)有一種朦朧美，這種手段在正逐漸成為主流。

?

例如網(wǎng)易音樂(lè)播放封面、淘寶詳情主圖封面等，均是運(yùn)用這種思路保證整個(gè)界面等沉浸和整體感。

?

▲ 淘寶詳情頁(yè)背景放大模糊處理

?

▲ 網(wǎng)易音樂(lè)封面背景放大模糊處理

?

寫(xiě)在最后

?

筆者也只是主觀分析，不代表其原本的實(shí)現(xiàn)方案也是這樣；

歡迎大家一起探討下思路，

或者你有什么想法也可以發(fā)表在評(píng)論里喲～

來(lái)源網(wǎng)絡(luò)