全球訊息:設計師必看 | 背景處理的深入淺出
在內容化消費的今天,越來越多的應用開始強調針對內容的沉浸式設計,雖然只是很小的細節(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)
相關閱讀
-
世界熱推薦:今晚7:00直播丨下一個突破...
今晚19:00,Cocos視頻號直播馬上點擊【預約】啦↓↓↓在運營了三年... -
NFT周刊|Magic Eden宣布支持Polygon網...
Block-986在NFT這樣的市場,每周都會有相當多項目起起伏伏。在過去... -
環(huán)球今亮點!頭條觀察 | DeFi的興衰與...
在比特幣得到機構關注之后,許多財務專家預測世界將因為加密貨幣的... -
重新審視合作,體育Crypto的可靠關系才能雙贏
Block-987即使在體育Crypto領域,人們的目光仍然集中在FTX上。隨著... -
簡訊:前端單元測試,更進一步
前端測試@2022如果從2014年Jest的第一個版本發(fā)布開始計算,前端開發(fā)... -
焦點熱訊:劉強東這波操作秀
近日,劉強東發(fā)布京東全員信,信中提到:自2023年1月1日起,逐步為...