今天和大家聊聊設(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)白熊的立體感。
U I 中 運(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ì)和方向侣监！
相關(guān)閱讀：
跳槽進(jìn)大廠溢十，這些設(shè)計(jì)技法必須會(huì) | 技法系列第三彈-柔光風(fēng)格
跳槽進(jìn)大廠，這些設(shè)計(jì)技法必須會(huì) | 技法系列第二彈-卡通簡(jiǎn)筆風(fēng)格
跳槽進(jìn)大廠达吞，這些設(shè)計(jì)技法必須會(huì) | 技法系列第一彈
作者：sky张弛，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys）
本文由 @我們的設(shè)計(jì)日記 原創(chuàng)發(fā)布于簡(jiǎn)書(shū)。未經(jīng)許可，禁止轉(zhuǎn)載吞鸭。
