今天和大家聊聊設(shè)計(jì)中的白色,說(shuō)到白色不得不說(shuō)蘋(píng)果的白雪設(shè)計(jì)語(yǔ)言,在很多設(shè)計(jì)師心中,白雪設(shè)計(jì)是蘋(píng)果的設(shè)計(jì)巔峰期,也是蘋(píng)果設(shè)計(jì)最黃金時(shí)期。
▲ 當(dāng)年喬布斯就是靠著這款iMac把蘋(píng)果起死回生的,這款電腦設(shè)計(jì),采用了透明的設(shè)計(jì),也是蘋(píng)果白雪設(shè)計(jì)語(yǔ)言典型的代表作。
▲ 整個(gè)白雪語(yǔ)言不止是在硬件ID設(shè)計(jì),在蘋(píng)果的一系列軟件里面也大量運(yùn)用到,比如垃圾桶這個(gè)圖標(biāo),白色的設(shè)計(jì),但是細(xì)節(jié)卻是讓人過(guò)目難忘。
▲ 雖然蘋(píng)果iOS系統(tǒng)更新了幾個(gè)版本,但是白色的設(shè)計(jì)理念一直伴隨到現(xiàn)在,如上圖我們能看到一些細(xì)微的變化,比如白色由之前純白慢慢有些透明度變化。
▲ 新的備忘錄,從擬物變成扁平,但是整體的設(shè)計(jì)語(yǔ)言的延續(xù)還是很明顯的。
▲ Finder的設(shè)計(jì)也是延續(xù)之前,其實(shí)“最大化”按鈕已更改為“全屏”可以說(shuō)蘋(píng)果的設(shè)計(jì)一直都在變化,但是都有一個(gè)核心理念在延續(xù)著每一次的變化,就是白雪設(shè)計(jì)語(yǔ)言!
▲ 包括全球的一些知名應(yīng)用,整體的風(fēng)格也逐漸驅(qū)動(dòng),都以?xún)?nèi)容為主,設(shè)計(jì)輔助內(nèi)容,整體白色為主。那么今天我們一起來(lái)學(xué)習(xí)下,今天和大家研究的趨勢(shì)也是白色,不過(guò)我個(gè)人叫它為-晶白,因?yàn)樗粌H僅是純白,在白色的風(fēng)格基礎(chǔ)上,有很多微妙的變化。
什么是晶白風(fēng)格
簡(jiǎn)單來(lái)說(shuō),晶白就是在白色質(zhì)感下,通過(guò)一些透明度變化,投影,外發(fā)光等等,讓整體設(shè)計(jì)更加富有層次感!晶白不一定是純白,因?yàn)樗募?xì)節(jié)變化,使得在不同背景,不同場(chǎng)景會(huì)呈現(xiàn)出不一樣的設(shè)計(jì)細(xì)節(jié)!我們來(lái)看一些案例:
▲這個(gè)設(shè)計(jì)就是一個(gè)晶白風(fēng)格,整體視覺(jué)就是大拇指點(diǎn)贊的圖形,這個(gè)圖形整體為白色質(zhì)感,但是相對(duì)于扁平的純白色圖形,這種晶白質(zhì)感更有細(xì)節(jié),層次更加豐富,同時(shí)白色的質(zhì)感很好的和背景融為一體。
▲美拍早期的啟動(dòng)圖標(biāo),整體風(fēng)格同樣運(yùn)用的晶白處理,相對(duì)千篇一律的白色,這種質(zhì)感會(huì)顯得更加精致。
▲這套UI作品,采用晶白設(shè)計(jì)手法,來(lái)加強(qiáng)背景的Z空間,通過(guò)白色的疊加和前景白色形成一個(gè)很有層次的空間。
▲這套圖標(biāo)系列作品,上面線型圖標(biāo)雖然設(shè)計(jì)很棒,但是在線型圖標(biāo)爛大街的今天很難讓人過(guò)目不忘,設(shè)計(jì)師將新的風(fēng)格改成這種面型,同時(shí)質(zhì)感運(yùn)用這種晶白,通過(guò)透明度的處理,顯得非常有細(xì)節(jié)和層次感,每一個(gè)都很精致。
▲晶白除了運(yùn)用在圖形里面,在一些網(wǎng)站背景或者插圖都可以運(yùn)用,國(guó)外知名IT服務(wù)公司DigitalOcean的官網(wǎng)設(shè)計(jì)中,背景就是運(yùn)用這種晶白質(zhì)感,將抽象的IT服務(wù)變得更好理解。
晶白風(fēng)格特點(diǎn)
1.白色透明漸變
晶白最大一個(gè)特點(diǎn)就是運(yùn)用漸變,白色到透明的漸變,通過(guò)透明度來(lái)拉開(kāi)明暗差別,形成設(shè)計(jì)空間感。漸變可以是純白色變化,也可以是帶環(huán)境色的白色漸變,如上圖中,漸變白色就是帶有環(huán)境色的漸變過(guò)度!
▲一個(gè)網(wǎng)站設(shè)計(jì),整體輔助圖形運(yùn)用的抽象幾何圖形,呈現(xiàn)出秩序感,整體的圖形細(xì)節(jié)配合,白色透明度變化,很好的將每個(gè)圖形的背景色融于其中,細(xì)節(jié)豐富。
▲此圖形采用的立方塊設(shè)計(jì),整體也是從白色過(guò)度到透明,透明的白色透出深色的背景,整體呈現(xiàn)出高級(jí)感。
▲這個(gè)LOGO設(shè)計(jì),也是采用白色到透明運(yùn)用,很巧妙的通過(guò)一個(gè)漸變和字母轉(zhuǎn)折關(guān)聯(lián)起來(lái)。
2.多色透明漸變
▲這套插畫(huà)作品整體也是運(yùn)用的白色到透明質(zhì)感,但是除了運(yùn)用白色到透明,也充分運(yùn)用背景藍(lán)色,通過(guò)環(huán)境色運(yùn)用,整體層次更加豐富。
▲這組圖形的設(shè)計(jì),也是采用環(huán)境色運(yùn)用,重復(fù)運(yùn)用背景多色漸變,整體更加融合一體。
▲這組插畫(huà)設(shè)計(jì),插畫(huà)中核心人物太空人整體呈現(xiàn)白色質(zhì)感,但是在頭部以及白色的投影上重復(fù)運(yùn)用背景橙色,使得更加整體協(xié)調(diào)。
3.投影運(yùn)用
▲晶白風(fēng)格,還一個(gè)很重要特點(diǎn)就是運(yùn)用投影,來(lái)形成前后關(guān)系,上圖在桃心交叉點(diǎn),運(yùn)用透明處理,形成兩層空間感。
▲這個(gè)時(shí)鐘的圖標(biāo),運(yùn)用投影拉開(kāi)層次,讓整體沒(méi)有那么平淡。
▲這個(gè) LOGO就是一個(gè)很好運(yùn)用投影的案例,通過(guò)白色暗面,凸現(xiàn)白熊的立體感。
UI中運(yùn)用
▲這個(gè)數(shù)獨(dú)游戲設(shè)計(jì)中,頁(yè)面主圖形就是運(yùn)用晶白作為主圖形風(fēng)格,整體顏色清爽,細(xì)節(jié)豐富,其實(shí)白色透明幾何圖形作為背景,主圖形,運(yùn)用白色和環(huán)境色融合處理,整體呈現(xiàn)高級(jí)感。
▲航空公司的選座設(shè)計(jì),作者很好的將飛機(jī)運(yùn)用晶白設(shè)計(jì)手法,讓飛機(jī)整體有一定厚重感,然后將選座的操作行動(dòng)點(diǎn)融于其中。
▲在這個(gè)引導(dǎo)頁(yè)設(shè)計(jì)中,核心的主風(fēng)格插畫(huà),也是運(yùn)用晶白質(zhì)感,通過(guò)環(huán)境色處理,背景處理,整體既有空間感,也充滿細(xì)節(jié)。
▲這組引導(dǎo)頁(yè)設(shè)計(jì)中,核心色調(diào)也是圍繞白色處理,很好通過(guò)灰色調(diào)來(lái)體現(xiàn)生活場(chǎng)景感。
▲在UI中作為背景運(yùn)用,也是常用的一種方式,讓整體界面空間感更強(qiáng)。
▲這組卡片設(shè)計(jì)非常棒,作者很好的將這種晶白質(zhì)感和文案融合在一起,運(yùn)用幾何圖形的表現(xiàn)很好的讓整個(gè)背景生動(dòng)起來(lái),同時(shí)也不影響文案閱讀 。
▲運(yùn)用在頁(yè)面背景,簡(jiǎn)單干凈,如果你的背景太空,不知道放什么圖形,運(yùn)用這個(gè)風(fēng)格準(zhǔn)沒(méi)錯(cuò)。
▲Riko的這套作品就是很好將晶白作為整體的背景圖形處理,圖標(biāo),引導(dǎo)頁(yè)以及背景底紋都是運(yùn)用這個(gè)風(fēng)格,在配合干凈的配色,整體呈現(xiàn)出高級(jí)感。
▲Yar設(shè)計(jì)的官方榜單,很好的運(yùn)用晶白質(zhì)感效果作為背景,將榜單名詞凸現(xiàn)出來(lái),恰到好處。
圖 標(biāo) 中 運(yùn) 用
▲晶白在圖標(biāo)中運(yùn)用比較方法,能讓圖形更加更豐富,呈現(xiàn)出透明的細(xì)節(jié)質(zhì)感,無(wú)論是在圖標(biāo)運(yùn)用還是在界面運(yùn)用。
▲系統(tǒng)小圖標(biāo),相對(duì)傳統(tǒng)的線型圖標(biāo),這種帶透明度的小細(xì)節(jié)會(huì)讓圖形更加有層次感。
▲一組面的圖形運(yùn)用,簡(jiǎn)單的技法,讓你的圖標(biāo)差異性瞬間拉開(kāi)。
▲透明的變化有很多,可以是帶漸變,可以是純透明度變化,也可以在透明漸變中加一些立體感。
▲非常精致的一個(gè)設(shè)計(jì),巧妙的將讀書(shū)和頭像剪影融合在一起了,扁平和擬物的巧妙結(jié)合。
▲誰(shuí)說(shuō)扁平就一定要同質(zhì)化,一點(diǎn)點(diǎn)簡(jiǎn)單的變化讓簡(jiǎn)約而不簡(jiǎn)單。
▲很巧妙的背景融合,一個(gè)帶著環(huán)境色的漸變,讓整個(gè)圖形層次更加分明。
插 畫(huà) 中 運(yùn) 用
▲這只老鷹的插圖設(shè)計(jì),造型優(yōu)美對(duì)稱(chēng),技法上通過(guò)透明度運(yùn)用,讓整個(gè)羽毛充滿層次。
▲設(shè)計(jì)師很好的將抽象的幾何圖形,以及白色,藍(lán)色透明的融合,很好呈現(xiàn)出科技感。
▲脈脈的一組插畫(huà)設(shè)計(jì),整體運(yùn)用白色質(zhì)感,以及脈脈品牌藍(lán)色,非??帷?
總 結(jié)
趨勢(shì)的關(guān)注和研究,是設(shè)計(jì)師必備的技巧,我們只有通過(guò)大量閱讀提煉出有用風(fēng)格去學(xué)習(xí),運(yùn)用,落地到我們?nèi)粘TO(shè)計(jì)中,才算真正融匯貫通,希望在設(shè)計(jì)日記里,能夠與大家一起來(lái)挖掘最新的趨勢(shì)和方向!
原創(chuàng): sky
公眾號(hào):我們的設(shè)計(jì)日記
全站高品質(zhì)素材免費(fèi)下載!