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