跳槽進(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)粘TO(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ā)揮!