這7個(gè)技巧，幫你搞定頁(yè)面中背景紋理的設(shè)計(jì)

在頁(yè)面中使用紋理并不是什么奇怪事情，隨著扁平化設(shè)計(jì)的高度成熟，陰影、漸變和紋理也從某種意義上開(kāi)始回歸，并且在現(xiàn)實(shí)設(shè)計(jì)中越來(lái)越多地用到。什么樣的紋理可以適配當(dāng)前的項(xiàng)目呢？假如要本身定制一個(gè)紋理，那么有什么要細(xì)致的呢？今天的文章，就是來(lái)探究這個(gè)題目的。

雖然頁(yè)面設(shè)計(jì)中紋理的使用方法有許多，但是想要營(yíng)造當(dāng)代的設(shè)計(jì)，只必要遵循一些相對(duì)簡(jiǎn)單的規(guī)則，就可以獲得相對(duì)不錯(cuò)的結(jié)果，下面的7個(gè)設(shè)計(jì)小技巧就是幫你做到這個(gè)事情的。

1. 簡(jiǎn)單易懂的紋理

真正良好的背景紋理，在絕大多數(shù)時(shí)候甚至是不會(huì)被用戶細(xì)致到的。它應(yīng)該是一個(gè)幾乎不可見(jiàn)的元素，并且有助于進(jìn)步團(tuán)體的可讀性和可用性，同時(shí)提供充足的視覺(jué)深度。

簡(jiǎn)單而低調(diào)的背景紋理是提拔整個(gè)設(shè)計(jì)的可用性的最佳體例。在去年的 Github 宇宙會(huì)議的網(wǎng)頁(yè)上，設(shè)計(jì)師就采用了簡(jiǎn)單的黑色背景加上白色圓點(diǎn)的紋理設(shè)計(jì)，營(yíng)造出夜空的結(jié)果。在夜空的映襯之下，多彩的 LOGO 和漸變的按鈕有著優(yōu)秀的可識(shí)別度。

簡(jiǎn)單的背景紋理通常有著小而緊密的重復(fù)的圖案，它可以是任何顏色，這個(gè)思路讓背景紋理不會(huì)作為焦點(diǎn)存在，而是作為襯托其他元素的緊張工具。

2. 紋理可以更大，更勇敢

紋理可以很玄妙，很小，但是也同樣可以很大。勇敢一點(diǎn)，選擇更大的紋理或者說(shuō)圖案，同樣能夠產(chǎn)生不錯(cuò)的結(jié)果。

這種超大的圖案所構(gòu)成的紋理能夠作為背景來(lái)使用，前景應(yīng)該有更重的元素，比如肯定數(shù)量的文本，或者是圖片等相對(duì)較重的視覺(jué)內(nèi)容。如許的背景紋理/圖案其實(shí)總體處理起來(lái)會(huì)比較棘手，由于它有肯定的機(jī)率會(huì)讓用戶細(xì)致到并且分散細(xì)致力。

為了確保這種超大的紋理圖案不影響正常的結(jié)果，最好是細(xì)致分析用戶風(fēng)俗，并且匹配團(tuán)體的內(nèi)容，假如網(wǎng)頁(yè)的流量或者轉(zhuǎn)化率降落那么肯定是用戶沒(méi)有獲取到其中的信息。

3. 結(jié)合當(dāng)前設(shè)計(jì)趨勢(shì)的紋理

結(jié)應(yīng)時(shí)下賤行的設(shè)計(jì)趨勢(shì)來(lái)設(shè)計(jì)紋理，每每能夠讓整個(gè)設(shè)計(jì)呈現(xiàn)出富偶然代感的體驗(yàn)。

幾何圖形元素是時(shí)下賤行的設(shè)計(jì)元素之一，將幾何圖形融入到背景當(dāng)中，毫無(wú)疑問(wèn)可以特別很是吸引人?？纯?Apacio 這個(gè)網(wǎng)站的設(shè)計(jì)，深色的背景之上混合色彩美麗的幾何圖案，創(chuàng)建出富有深度且抓人眼球的視覺(jué)，通過(guò)對(duì)比讓用戶將細(xì)致力集中在較大的文本和 CTA 元素上。筆墨采用了簡(jiǎn)約的非襯線體，這使得它們可以從黑色和綠色的背景中脫穎而出。

紋理的條理對(duì)于團(tuán)體的結(jié)果是有所支撐的。值得細(xì)致的是，背景中的紋理和圖案、背景以及前景元素之間的對(duì)比。

4. 使用圖片來(lái)構(gòu)建紋理

背景紋理并不肯定非得是那種精心制作的小圖案，有些細(xì)節(jié)雄厚的圖片同樣可以作為背景紋理，它能夠增長(zhǎng)視覺(jué)條理，提拔吸引力。

這種設(shè)計(jì)的訣竅在于，圖片必要淡入到背景當(dāng)中。

在上面的案例當(dāng)中，Oxeva 這個(gè)網(wǎng)站通過(guò)兩種體例來(lái)做到融入背景的設(shè)計(jì)，設(shè)計(jì)師一方面讓圖片的明度降低了，讓用戶能夠看到景觀的輪廓，然后設(shè)計(jì)師在前景疊加上了一個(gè)漸變色彩層，這使得整個(gè)背景顯得極為富有視覺(jué)體現(xiàn)力。圖片所提供的細(xì)節(jié)并不多，但是在視覺(jué)上依然可以分辨。

5. 使用色彩轉(zhuǎn)變來(lái)創(chuàng)造紋理

使用不同明暗飽和度的同系色彩可以構(gòu)建出外形或者筆墨，同樣能夠達(dá)到結(jié)果。色彩的轉(zhuǎn)變同樣能夠創(chuàng)造出有深度的視覺(jué)結(jié)果。

Types of Type 這個(gè)網(wǎng)站就使用帶有色彩轉(zhuǎn)變的偉大字母在背景中作為紋理，即使沒(méi)有效到漸變和陰影如許的技巧，同樣也有深度，也充足平衡。如許的設(shè)計(jì)讓整個(gè)網(wǎng)頁(yè)顯得活潑而不乏味，對(duì)比使得整個(gè)設(shè)計(jì)主次分明。

6. 使用漸變來(lái)制造紋理結(jié)果

現(xiàn)現(xiàn)在的漸變幾乎成了時(shí)尚的代名詞，漸變色彩可以在背景中替換紋理存在，也能結(jié)合圖片和其他的元素來(lái)使用。

幾乎所有的色彩組合都能夠創(chuàng)造出漸變結(jié)果，想要借助漸變創(chuàng)造出視覺(jué)深度和紋理的體驗(yàn)并不難，假如你還沒(méi)有成型的配色方案，你可以直接從 WebGradients 中找你喜好的配色方案。

Mobipad 這個(gè)網(wǎng)站在背景中使用了多個(gè)不同的漸變色來(lái)創(chuàng)造結(jié)果，合理的對(duì)比度控制讓前景的動(dòng)畫(huà)特別很是的顯明，深色的部分有著優(yōu)秀的可讀性，一覽無(wú)余。

7. 讓背景動(dòng)起來(lái)

絕大多數(shù)的背景紋理的技巧都是靜態(tài)背景的設(shè)計(jì)技巧，但是背景和紋理同樣可以是動(dòng)態(tài)的。

為了避免喧賓奪主，動(dòng)態(tài)的背景紋理應(yīng)該是很玄妙的，否則會(huì)影響前景重要信息的傳達(dá)。配色應(yīng)該是柔和的，就像上面這個(gè)名為 Latvian Alphabet 的網(wǎng)站一樣。

動(dòng)態(tài)的網(wǎng)站背景紋理可以是動(dòng)態(tài)的圖片或者被調(diào)整過(guò)的視頻。動(dòng)態(tài)的背景是吸引用戶細(xì)致力的好辦法，只不過(guò)要適度就好了。

結(jié)語(yǔ)

良好的背景紋理能夠增長(zhǎng)整個(gè)網(wǎng)站在視覺(jué)上的深度和雄厚度，盡管很多設(shè)計(jì)師仍在使用扁平風(fēng)的背景，比如單色的背景，但是合理的加入紋理能夠讓你的設(shè)計(jì)更加出彩。

在紋理的使用上，最重要的訣竅是要讓它充足玄妙，不影響前景的內(nèi)容，如許才有充足的可讀性。當(dāng)然，多玄妙合適，必要探索和嘗試，只要讓整個(gè)設(shè)計(jì)充足平衡就行。