国产精品夜色视频一级区_hh99m福利毛片_国产一区二区成人久久免费影院_伊人久久大香线蕉综合影院75_国产精品久久果冻传媒

您的位置:首頁 >聚焦 >

全球訊息:設計師必看 | 背景處理的深入淺出

2022-11-18 16:41:31    來源:程序員客棧

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

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

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


(資料圖片僅供參考)

#01

混沌分形理論

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

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

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

#02

生成式藝術

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

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

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

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

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

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

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

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

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

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

▲ B-Design Tool

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

▲右側的效果明顯是我們想要的預期結果

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

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

#03

算法創(chuàng)作

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

算法取主色填充

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

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

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

▲ 抖音長漸變的運用

▲Pinterest 延遲加載取圖主色

素材背景模糊處理

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

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

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

▲ 網易音樂封面背景放大模糊處理

寫在最后筆者也只是主觀分析,不代表其原本的實現(xiàn)方案也是這樣;歡迎大家一起探討下思路,或者你有什么想法也可以發(fā)表在評論里喲~

//////END //////

淘寶設計,一個服務于全球億萬消費者體驗的設計團隊,致力于讓設計觸動人心,讓商業(yè)美而簡單。歡迎加入我們,公眾號后臺回復“招聘”,了解最新招聘信息。

關鍵詞: 背景效果 混沌理論 動態(tài)系統(tǒng)

相關閱讀