今天和大家聊聊設(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)粘ＴO(shè)計(jì)中，才算真正融匯貫通，希望在設(shè)計(jì)日記里，能夠與大家一起來(lái)挖掘最新的趨勢(shì)和方向！

原創(chuàng)： sky

公眾號(hào)：我們的設(shè)計(jì)日記