本文為大家分享了大廠常用的設(shè)計(jì)風(fēng)格之一——紋理風(fēng)格，通過(guò)研究，相信你也一定能夠從中收獲些許設(shè)計(jì)心得！

本周和大家分享一些大廠常用的設(shè)計(jì)風(fēng)格，這些風(fēng)格大家可能平時(shí)有見(jiàn)過(guò)，但是可能沒(méi)有系統(tǒng)了解，今天先和大家?guī)?lái)第一個(gè)風(fēng)格——紋理風(fēng)格，特別是很多韓國(guó)設(shè)計(jì)種，他們的作品中大量運(yùn)用了這種設(shè)計(jì)手法，簡(jiǎn)單的線條，點(diǎn)線的運(yùn)用，讓頁(yè)面充滿了細(xì)節(jié)，在國(guó)內(nèi)電商中也運(yùn)用比較多，我們一起來(lái)研究下！

它的用法并不難，常用做法就是基于品牌衍生出一套品牌輔助圖形，用在界面中，背景中或者作為肌理效果，它可以是線，也可以是點(diǎn)，也可以是面！用法也很多變化，那么今天我們一起來(lái)研究下這種風(fēng)格是如何使用的。

紋理風(fēng)格特點(diǎn)

1. 強(qiáng)運(yùn)用：氛圍背景

它可以作為背景，讓整個(gè)畫(huà)面不那么單調(diào)，同時(shí)如果紋理運(yùn)用的好，反而會(huì)顯得很高級(jí)，呈現(xiàn)那種低調(diào)的高級(jí)感！點(diǎn)線面其實(shí)一直是設(shè)計(jì)中很重要的點(diǎn)，只是如今大家都玩扁平化，反而很多設(shè)計(jì)忽略了這些。

▲?如上圖某電商公司的輔助圖形，可以看出是由三角形，正方形，圓形，五角星，六邊形等組合而成然后基于這些基本圖形衍生出一系列組合方式去應(yīng)用到頁(yè)面各個(gè)場(chǎng)景，如海報(bào)，banner等，形成統(tǒng)一的輔助圖形符號(hào)。

▲?這種底紋在設(shè)計(jì)師手里被賦予了魔法，出現(xiàn)在海報(bào)里，營(yíng)銷(xiāo)頁(yè)面上，形成統(tǒng)一的風(fēng)格和調(diào)性。

▲?在banner中，這種輔助圖形做為底紋豐富了背景，讓背景更加有層次細(xì)節(jié)

▲ 在這個(gè)海報(bào)中，背景的漩渦以及數(shù)字的圓點(diǎn)效果都很好的將品牌紋理融于到背景中去。

▲?這種手法運(yùn)用起來(lái)不用那么單調(diào)，完全也可以結(jié)合設(shè)計(jì)師想象力去發(fā)揮，去延展出很多不一樣的效果，同時(shí)很好的達(dá)成一致性。有心的同學(xué)可以去留意每年的電商設(shè)計(jì)，在背景上都會(huì)有這些統(tǒng)一的底紋細(xì)節(jié)在里面，這些不是設(shè)計(jì)師隨意加的，而是有一套系統(tǒng)的品牌體系在里面！

2. 強(qiáng)運(yùn)用-主圖形

▲?Facebook 8周年的KV設(shè)計(jì)，設(shè)計(jì)師將底紋作為主要圖形，當(dāng)主視覺(jué)去運(yùn)用，在這個(gè)工牌設(shè)計(jì)中，運(yùn)用了輔助圖形來(lái)形成整個(gè)品牌視覺(jué)語(yǔ)言，再結(jié)合很年輕的色彩，統(tǒng)一而不單調(diào)。

▲?第54界金馬獎(jiǎng)的主LOGO，非常有特點(diǎn)，設(shè)計(jì)師將54這幾個(gè)字母很好的通過(guò)圖形表現(xiàn)出來(lái)，這個(gè)LOGO圖形由4個(gè)不同圖形組成，這些輔助圖形也分別作為主視覺(jué)運(yùn)用到其他的設(shè)計(jì)上。

▲?海報(bào)的設(shè)計(jì)，簡(jiǎn)潔有力，配合抽象的圖片，讓人充滿了期待。

▲?在2018年雙11潮流盛典的整體設(shè)計(jì)中，同樣放射重復(fù)性的正方形，底紋不斷出現(xiàn)在海報(bào)上，形成整體的風(fēng)格調(diào)性。

▲?在主會(huì)場(chǎng)上，同樣運(yùn)用3D正方形重復(fù)作為整個(gè)舞臺(tái)來(lái)渲染，讓整體設(shè)計(jì)記憶點(diǎn)得到強(qiáng)化。

▲?在海報(bào)上，背景的肌理效果貫穿始終，形成整體一套的設(shè)計(jì)風(fēng)格。

3. 弱運(yùn)用-頁(yè)面輔助

前面兩種，底紋都用作主氛圍背景，主圖形，那么在很多時(shí)候，這些輔助元素運(yùn)用也可以弱一些，使用面積也比較小，它的存在很多時(shí)候能夠讓頁(yè)面細(xì)節(jié)更加豐富。

▲?在平面設(shè)計(jì)中比較常見(jiàn)的用法，紋理和底紋作為輔助圖形，讓頁(yè)面的細(xì)節(jié)和氛圍更加豐富。

▲?在UI設(shè)計(jì)中也常常會(huì)出現(xiàn)，如果你的主體是內(nèi)容，背景稍微有點(diǎn)空洞，那么就可以使用這種手法，讓背景更加有層次一些。

▲?在88會(huì)員的頁(yè)面中，會(huì)員的輔助元素作為背景出現(xiàn)在一些需要背景氛圍的設(shè)計(jì)中，能很好的將頁(yè)面設(shè)計(jì)元素豐富起來(lái)。

UI中運(yùn)用

紋理風(fēng)格應(yīng)用場(chǎng)景也很豐富，從上面案例其實(shí)可以看出，無(wú)論是平面還是營(yíng)銷(xiāo)設(shè)計(jì)，品牌設(shè)計(jì)，UI設(shè)計(jì)中都可以去靈活運(yùn)用，關(guān)鍵是看你如何運(yùn)用。

▲?網(wǎng)易考拉的輔助圖形非常棒，都是基于圓形去延展的，運(yùn)用場(chǎng)景也比較豐富，在官方的方案呈現(xiàn)中，這個(gè)輔助圖形，從始至終的應(yīng)用到頁(yè)面每個(gè)場(chǎng)景。

▲?在頁(yè)面的海報(bào)和傳播頁(yè)面中，基于圓形的輔助圖形很好的承載了背景，簡(jiǎn)潔的排版也很符合產(chǎn)品整體調(diào)性。

▲?官網(wǎng)的設(shè)計(jì)中，輔助圖形圓形也巧妙的運(yùn)用在設(shè)計(jì)中

▲?在APP的界面啟動(dòng)頁(yè)，營(yíng)銷(xiāo)設(shè)計(jì)，會(huì)員頁(yè)面，輔助圖形都很巧妙融合在品牌之中，詳細(xì)效果大家可以在http://www.plus-ex.com/#kaola中查看。

▲?在上圖設(shè)計(jì)中，設(shè)計(jì)師將線條和圓形很好的融于到整個(gè)背景，讓原本平淡的頁(yè)面充滿層次和細(xì)節(jié)。

▲?在很多這種頭部為主核心的頁(yè)面設(shè)計(jì)中，如果只一個(gè)單獨(dú)的卡片或者按鈕會(huì)稍顯得冷淡，設(shè)計(jì)師將自己的品牌logo或者品牌輔助線條很巧妙融合到背景和卡片中，細(xì)節(jié)頓時(shí)豐富起來(lái)。

▲?這種肌理效果很多時(shí)候也可以傳遞出品牌的氣質(zhì)，品牌的調(diào)性，左側(cè)那個(gè)音樂(lè)播放界面的默認(rèn)圖片，就特別有品質(zhì)感。右側(cè)電商主界面背景，清晰干凈，后面的線條背景恰到好處。

▲?在這種大面積背景上，添加這種點(diǎn)線面，或者幾何紋理背景能讓頁(yè)面不那么單調(diào)，同時(shí)也能傳遞一些品牌元素

網(wǎng)頁(yè)中運(yùn)用

▲?在很多設(shè)計(jì)中，底紋可以起到構(gòu)圖作用，同時(shí)也可以做為背景細(xì)節(jié)去運(yùn)用

▲?網(wǎng)站的底紋運(yùn)用，深色背景下能增強(qiáng)光感，淺色背景下能增加空間

▲?同時(shí)在很多場(chǎng)景，它的手法可以是底紋，也可以是漸變也可以是立體的效果，可以根據(jù)畫(huà)面需要效果進(jìn)行調(diào)整。

平面中運(yùn)用

▲?品牌宣傳海報(bào)，如果老板下班前告訴你需要做一個(gè)高級(jí)的海報(bào)，那么用這種底紋簡(jiǎn)潔效果肯定沒(méi)錯(cuò)，效果好，還容易出彩。

▲?各種科技類(lèi)大會(huì)邀請(qǐng)，簡(jiǎn)單的點(diǎn)線面運(yùn)用，配合一些網(wǎng)格的排版，效果也不會(huì)很差。

▲?品牌包裝，包括我們熟知的大牌LV,BV等都是運(yùn)用一個(gè)底紋圖案去作為品牌主圖形，簡(jiǎn)單高級(jí)。

圖形怎么來(lái)？

看到這里很多人可能會(huì)疑惑，這個(gè)圖形輔助形怎么來(lái)呢，一定不是網(wǎng)上隨便下載或者自己隨便畫(huà)！這里需要注意是圖形一定是從你們本身的產(chǎn)品LOGO品牌里面抽取出來(lái)，然后去做演變！

▲?如上圖，DOOTA電商的輔助圖形一定是從DOOTA整個(gè)LOGO品牌體系中推導(dǎo)出來(lái)的，一定是有一個(gè)設(shè)計(jì)原點(diǎn)在里面。

▲?考拉的輔助圖形同樣也是從LOGO中提取出來(lái)的

所以這里很重要的一點(diǎn)是，我們?cè)谑褂脠D形或者圖案時(shí)候，一定不是憑空而來(lái)，一定是和我們整個(gè)品牌體系有關(guān)，你可以是LOGO中提取的輔助圖形，你也可以是你們產(chǎn)品定位里面功能服務(wù)等等，總之一定需要一個(gè)理由來(lái)證明這個(gè)圖形是正確的！

今天和大家分享只是拋轉(zhuǎn)引玉，關(guān)于這個(gè)風(fēng)格有很多組合和技巧需要大家多去嘗試！希望可以幫助到大家，下周見(jiàn)。

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

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

題圖來(lái)自Unsplash, 基于CC0協(xié)議。