打 造 自 己 的 設(shè) 計 風(fēng) 格 庫? ?

熟悉我的設(shè)計師朋友都知道的，我工作中一直有一個習(xí)慣，就是定期會去歸納總結(jié)一些好的設(shè)計風(fēng)格和趨勢在我的花瓣和pinterest里面，從我職業(yè)生涯最早期就養(yǎng)成了這個習(xí)慣。

我一直覺得設(shè)計師成長本身就是一個產(chǎn)品，需要每天去更新我們的系統(tǒng)，更新設(shè)計資料庫，讓它像百科全書一樣全，豐富，能幫助我們?nèi)ブ笇?dǎo)設(shè)計方向。

大家回想一下，在我們的學(xué)生時代，當(dāng)我們學(xué)習(xí)或生活中遇見困難可以去請教老師，讓我們更快的成長，但是工作后，職場上卻是很殘酷的，靠的更多是自己，職場上的叢林法則，優(yōu)勝劣敗，你身邊的同事即是合作又是競爭關(guān)系，能遇見一個幫你的同事不求回報的，真的很難得，所以說我們需要自己去找到學(xué)習(xí)的榜樣。

▲比如他們有一個頻道叫emartmall,類似國內(nèi)天貓超市，他們團(tuán)隊就建立了一個名為emartmall style的文件夾，把相關(guān)生活類的設(shè)計放到這個文件夾。然后在日常工作設(shè)計中，他們都會往這個方向去沉淀相關(guān)的設(shè)計風(fēng)格，保證風(fēng)格的一致性和流行感。

▲他們pin文件夾素材

▲emart官網(wǎng)的banner，有一段時間，他們的文件夾里面出現(xiàn)了大量水果或食品局部特寫，結(jié)合文字排版的圖片，不久在他們的電商頁面就出現(xiàn)了，類似這樣風(fēng)格的設(shè)計。

我們不難發(fā)現(xiàn)，這些優(yōu)秀的團(tuán)隊，都是定期更新著團(tuán)隊的素材庫，設(shè)計風(fēng)格指南庫，去指導(dǎo)他們設(shè)計團(tuán)隊的設(shè)計方向，所以設(shè)計風(fēng)格指南庫，尤其重要，它就是工作和職場中陪伴我們成長的榜樣和導(dǎo)師！

柔 光 風(fēng) 格 的 特 點(diǎn)? ?

之前有提到，現(xiàn)在很多設(shè)計師風(fēng)格局限，技法同質(zhì)化，作品集呈現(xiàn)風(fēng)格雷同，差異性不大!其實(shí)UI發(fā)展到今天有很多新的風(fēng)格在出現(xiàn)，只不過我們沒有留意到，今天和大家分析的一個就是柔光風(fēng)格，故名思議，柔光就是整體視覺風(fēng)格呈現(xiàn)光的折射特征，顏色層次豐富，有明顯的光的流動和方向性，在設(shè)計手法上常用漸變，光斑，流動，疊加透明等手法，它的整體視覺感受是年輕，流動，潮流，青春活力等視覺感受！是目前比較新的一種設(shè)計手法。

1.騷氣的色彩流動感

柔光風(fēng)格很大一個特點(diǎn)就是色彩流動感，背景上一般采用多色融合，色彩里面有層次，有流動液體變化，有深淺過度，而不是簡單一個漸變，這種色彩光感更像我們生活中自然光，它是豐富多彩。

2.顏色規(guī)律的疊加

▲?這個設(shè)計在主圖形上運(yùn)用這種漸變疊加，通過透明度，角度變化疊加在一起，像一只綻放的花一樣呈現(xiàn)多樣的層次，按鈕上也是比較明亮騷氣的漸變，同時在底部的曲線上也運(yùn)用大光斑作為光的點(diǎn)綴，是一個典型柔光的設(shè)計案例。

▲?這個案例干凈清爽，色彩上一個小清新的漸變，同樣三角形部分運(yùn)用這種白色透明度疊加處理方式，細(xì)節(jié)簡單細(xì)膩。

▲?這是我非常喜歡的一個作品，色彩虛實(shí)有加，色彩和圖形有方向的運(yùn)動疊加，一個很有空間未來的一個設(shè)計。

3.光斑光暈?zāi)：龖?yīng)用

▲?柔光設(shè)計里面很重要的點(diǎn)，光暈，光在設(shè)計中一般以圓形呈現(xiàn)，伴隨這邊緣的模糊，虛化，形成層次。

▲?光斑的運(yùn)用，簡單有效，透過白色光斑很好形成界面里面空間層次和流動感。

▲?這是一個典型運(yùn)用光斑來形成整體柔光感的案例，主圖形就頂部一個紫色的光斑，在白色背景上，運(yùn)用一個粉色的光斑效果，底部的三個核心圖形同樣運(yùn)用這種設(shè)計手法，整體配額色協(xié)調(diào)，頁面信息干凈。

4.發(fā)光

▲?既然是光感的設(shè)計，就一定得有光，外發(fā)光，內(nèi)發(fā)光，當(dāng)然光能做到干凈通透是很考驗設(shè)計師技法的點(diǎn)，一不小心就會糊成一片，上圖就是光處理的非常干凈利索的案例。

▲?非常典型的韓國設(shè)計，背景用色大膽，特別綠色光在底部，讓整個頁面洋氣十足。

▲?很科技，很未來的設(shè)計，伴隨著顏色光影的運(yùn)用，siri剛出來的時候，那個光影動效就驚艷到我了，看國外這些大師把顏色和光影融合的鬼斧神工。

▲?線條的光運(yùn)用，光暈的運(yùn)動，方向色彩的變化，都是柔光設(shè)計的很重要細(xì)節(jié)。

U I 中 的 運(yùn) 用? ??

▲?在（左圖）掃描頁面中，核心圖形運(yùn)用波浪透明疊加線條作為頁面核心焦點(diǎn)，背景底部運(yùn)用騷氣漸變和光暈，形成豐富層次，(右圖）的背景和插畫部分也是大量運(yùn)用這種手法。

▲?三角形的光影，圓形的光影，曲線，點(diǎn)的內(nèi)文發(fā)光，背景的細(xì)節(jié)柔光處理，讓頁面呈現(xiàn)出科技夢幻視覺感受。

▲?光的運(yùn)用，光暈，內(nèi)外光的運(yùn)用以及撞色光影運(yùn)用，頁面讓人過目難忘。

▲?同樣的手法，運(yùn)用到白色，黑色背景都能呈現(xiàn)出不一樣效果。

▲?一組天氣的設(shè)計，同樣運(yùn)用重疊，顏色疊加的手法配合動效的運(yùn)用，讓天氣像花一樣綻放

▲?水的透明，光的璀璨奪目，眼前一亮的設(shè)計，在白色的背景上也能呈現(xiàn)出這種高級感。

▲?光影的運(yùn)用，特別喜歡底部那個行動按鈕，是整個頁面的亮點(diǎn)所在，頁面滑上去時后面背景的虛實(shí)變化特別細(xì)膩。

▲?這種風(fēng)格在營銷頁面中也運(yùn)用比較多，手法也不是一成不變，可以結(jié)合畫面特別去靈活調(diào)整，更多案例可以去我pinterest去圍觀。

圖 標(biāo) 中 的 運(yùn) 用?

??

▲?在圖標(biāo)設(shè)計中，這種手法也是常見的，圖標(biāo)本身配合簡單的幾何圖形讓整個設(shè)計印象深刻。

這些騷氣的表現(xiàn)技法，我想大家都見過，但是你是否有去掌握，去練習(xí)？其實(shí)去畫都不難，關(guān)鍵是學(xué)以致用，我們怎么樣才能把這種技法發(fā)揮到極致，好的趨勢需要我們在項目中落地實(shí)踐。

▲?在圖形中其實(shí)稍加這么一點(diǎn)點(diǎn)細(xì)節(jié)和透明度，柔光進(jìn)去，圖標(biāo)就會細(xì)膩許多。

平 面 中 的 運(yùn) 用???

?

▲?電商促銷海報中，在背景上運(yùn)用這種柔光設(shè)計，設(shè)計顯得更加年輕趣味。

▲?sweet官網(wǎng)設(shè)計，充滿了甜蜜的味道，特別是冰棒的設(shè)計，通透有質(zhì)感，色彩豐富。

▲?海報的設(shè)計，有角度圖形透明穿插，仿佛打開未來之門一樣，科技和未來感十足。

插 畫 中 的 運(yùn) 用? ?

?

▲?這套插畫應(yīng)該很多人看到過，非常有設(shè)計感一套，作者對于光感和透明度的運(yùn)用細(xì)膩逼真，每一個作品都呈現(xiàn)出很美的設(shè)計感，對于光影的運(yùn)用也是很細(xì)膩和極致。

▲?ghanipradita的系列插畫里，我們也能發(fā)現(xiàn)這種通過光的運(yùn)用，讓頁面呈現(xiàn)出細(xì)節(jié)更豐富視覺效果。

▲?光暈重疊，騷氣漸變構(gòu)成了時尚的一組插畫設(shè)計

最 后? ?

當(dāng)下越來越多的設(shè)計師作品風(fēng)格雷同，如何在設(shè)計里面找到自己定位，設(shè)計手法多樣性是需要每個設(shè)計師去思考的，大家一定要跳出自己擅長的舒適區(qū)域，去多學(xué)一些你不會的，像產(chǎn)品一樣去迭代自己，讓自己變的更好！

作者：sky，微信公眾號：我們的設(shè)計日記（ID：helloskys）

本文由 @我們的設(shè)計日記 原創(chuàng)發(fā)布于簡書。未經(jīng)許可，禁止轉(zhuǎn)載。