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

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

?

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

????

#01

混沌分形理論

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

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

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

#02

生成式藝術(shù)

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

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

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

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

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

▲ 簡單的放大模糊并沒發(fā)實現(xiàn)左側(cè)的效果

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

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

▲ 針對封面圖進行取色處理

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

▲ B-Design Tool

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

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

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

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

#03

算法創(chuàng)作

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

算法取主色填充

通過將三維空間中的點進行聚類，進而尋找到圖像的主色，這種方式相比較于固定色值，靈活性更高，感官上更為順暢。

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

▲ 豆瓣對角線雙色漸變的運用

▲ 抖音長漸變的運用

▲?Pinterest 延遲加載取圖主色

素材背景模糊處理

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

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

▲ 淘寶詳情頁背景放大模糊處理

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

本文內(nèi)容為轉(zhuǎn)載 僅供個人學(xué)習(xí)使用