在網頁中使用(yong)紋理(li)并(bing)不(bu)是什么(me)新鮮事(shi)情，隨(sui)著扁平化設(she)計的(de)(de)高(gao)度成熟，陰(yin)影、漸變和紋理(li)也從某種意義(yi)上開始回歸，并(bing)且(qie)在實際(ji)設(she)計中越來越多地用(yong)到(dao)。什么(me)樣的(de)(de)紋理(li)可以適(shi)配(pei)當前的(de)(de)項(xiang)目呢？如果(guo)要(yao)自己定制一個(ge)(ge)紋理(li)，那么(me)有什么(me)要(yao)注意的(de)(de)呢？今天的(de)(de)文章，就是來探(tan)討這個(ge)(ge)問題的(de)(de)。

雖然網頁設計中(zhong)紋(wen)理的使用方法有很多，但是(shi)想(xiang)要(yao)營(ying)造現代(dai)的設計，只(zhi)需要(yao)遵循一些(xie)相對簡(jian)單(dan)的規則(ze)，就可以獲得相對不錯的效(xiao)果，下(xia)面的7個(ge)設計小技巧就是(shi)幫你做到這個(ge)事(shi)情的。

1. 簡單易懂的紋理

真正優秀的背景紋理，在絕大多數時候甚至是(shi)不(bu)會(hui)被用(yong)戶注意(yi)到的。它應(ying)該是(shi)一個(ge)幾乎(hu)不(bu)可(ke)見的元(yuan)素(su)，并且(qie)有助于提高整體的可(ke)讀性和可(ke)用(yong)性，同時提供足夠的視覺深度。

簡單而低調的(de)背(bei)景(jing)紋(wen)理是提升整個設(she)計(ji)的(de)可(ke)用性的(de)最佳方式。在去年的(de) Github 宇宙會議的(de)頁面上，設(she)計(ji)師就采用了簡單的(de)黑色背(bei)景(jing)加上白(bai)色圓點的(de)紋(wen)理設(she)計(ji)，營造出夜空(kong)的(de)效果。在夜空(kong)的(de)映(ying)襯之下，多彩的(de) LOGO 和漸變的(de)按鈕有(you)著良好的(de)可(ke)識別度。

簡單的背(bei)景紋(wen)理通常有(you)著小而(er)緊密的重復的圖案(an)，它可以(yi)是任何顏(yan)色，這個思路(lu)讓背(bei)景紋(wen)理不會(hui)作(zuo)(zuo)為焦點存在，而(er)是作(zuo)(zuo)為襯托其他元素(su)的重要(yao)工具。

2. 紋理可(ke)以(yi)更大，更大膽

紋理可以很(hen)微妙，很(hen)小，但是(shi)也同樣可以很(hen)大。大膽一(yi)點，選(xuan)擇(ze)更大的(de)(de)紋理或者說圖案，同樣能夠產生不錯的(de)(de)效果。

這種超大(da)的(de)圖案所構成的(de)紋(wen)理能(neng)夠作(zuo)為背(bei)(bei)景(jing)來使用(yong)，前景(jing)應該有更(geng)重(zhong)的(de)元素，比(bi)如(ru)一定(ding)(ding)數量的(de)文本(ben)，或者是圖片等(deng)相(xiang)對(dui)較重(zhong)的(de)視覺內容(rong)。這樣的(de)背(bei)(bei)景(jing)紋(wen)理/圖案其實總(zong)體處理起來會比(bi)較棘手，因為它有一定(ding)(ding)的(de)機率會讓(rang)用(yong)戶注(zhu)意到并且分散注(zhu)意力。

為了確保這種超大的(de)紋理圖(tu)案不影響正常的(de)效(xiao)果，最好是(shi)注意分析用戶習慣，并且(qie)匹配整體的(de)內容，如果頁面(mian)的(de)流量或者轉(zhuan)化率下降那么一定是(shi)用戶沒有獲取到其中的(de)信(xin)息。

3. 結(jie)合當前設計趨(qu)勢(shi)的(de)紋理

結(jie)合時(shi)下流行的(de)(de)設(she)計(ji)(ji)趨勢(shi)來設(she)計(ji)(ji)紋理，往往能夠讓整個設(she)計(ji)(ji)呈現出富有時(shi)代感(gan)的(de)(de)體驗(yan)。

幾何(he)圖形元(yuan)素(su)是時下(xia)流(liu)行的(de)設計(ji)元(yuan)素(su)之(zhi)一，將(jiang)幾何(he)圖形融入(ru)到背(bei)(bei)景(jing)(jing)當(dang)中，毫無疑(yi)問(wen)可以非常吸(xi)引(yin)人。看(kan)看(kan) Apacio 這(zhe)個(ge)網站的(de)設計(ji)，深(shen)(shen)色(se)的(de)背(bei)(bei)景(jing)(jing)之(zhi)上(shang)混合色(se)彩鮮艷(yan)的(de)幾何(he)圖案，創(chuang)建出富有深(shen)(shen)度(du)且(qie)抓人眼球(qiu)的(de)視覺，通過(guo)對比讓用戶將(jiang)注意力集中在較(jiao)大的(de)文本和(he) CTA 元(yuan)素(su)上(shang)。文字采用了(le)簡約(yue)的(de)非襯(chen)線體，這(zhe)使得(de)它們(men)可以從黑色(se)和(he)綠(lv)色(se)的(de)背(bei)(bei)景(jing)(jing)中脫穎(ying)而出。

紋理的(de)層次對于整(zheng)體的(de)效果是(shi)有所支(zhi)撐的(de)。值得注意的(de)是(shi)，背景(jing)(jing)中的(de)紋理和圖(tu)案、背景(jing)(jing)以及前(qian)景(jing)(jing)元素(su)之(zhi)間的(de)對比。

4. 使用圖(tu)片來構建紋理

背景紋(wen)理(li)并(bing)不(bu)一定(ding)非得是那種(zhong)精心制作的小圖案，有些細節(jie)豐富的圖片同樣可以(yi)作為(wei)背景紋(wen)理(li)，它能夠(gou)增加(jia)視覺層次(ci)，提升吸引力(li)。

這(zhe)種設(she)計的訣竅在于，圖(tu)片需要(yao)淡入到背景當中。

在(zai)上(shang)面(mian)的(de)(de)(de)案例當中，Oxeva 這個網(wang)站通過兩種方式(shi)來做到融(rong)入背(bei)景(jing)的(de)(de)(de)設計，設計師一方面(mian)讓圖(tu)片的(de)(de)(de)明度(du)降低了(le)，讓用(yong)戶能夠看(kan)到景(jing)觀的(de)(de)(de)輪廓，然后設計師在(zai)前景(jing)疊加(jia)上(shang)了(le)一個漸變色(se)彩層(ceng)，這使(shi)得整個背(bei)景(jing)顯得極(ji)為富有視覺表(biao)現力。圖(tu)片所提(ti)供的(de)(de)(de)細節并不多，但是在(zai)視覺上(shang)依然可以分辨。

5. 使用色(se)彩(cai)變化來創(chuang)造紋(wen)理

使用不(bu)同(tong)明暗(an)飽和度(du)的(de)同(tong)系色彩可以構(gou)建出(chu)形(xing)狀(zhuang)或者文字，同(tong)樣(yang)能夠(gou)達(da)到效果。色彩的(de)變化同(tong)樣(yang)能夠(gou)創造出(chu)有深度(du)的(de)視(shi)覺效果。

Types of Type 這(zhe)(zhe)個(ge)網站就使用帶有(you)色(se)彩變化(hua)的巨大字母在背(bei)景(jing)中作為紋理，即使沒(mei)有(you)用到漸變和陰(yin)影這(zhe)(zhe)樣(yang)(yang)的技巧，同樣(yang)(yang)也有(you)深度，也足夠平衡。這(zhe)(zhe)樣(yang)(yang)的設(she)計(ji)讓整(zheng)個(ge)頁面顯得活潑而不乏味，對比使得整(zheng)個(ge)設(she)計(ji)主(zhu)次分(fen)明。

6. 使(shi)用漸(jian)變來制造(zao)紋理效果

現如今的漸變(bian)幾乎成了時尚(shang)的代名詞，漸變(bian)色彩(cai)可以在背景(jing)中替代紋理存在，也能結(jie)合圖片(pian)和其他(ta)的元素來使用。

幾乎所有(you)的色(se)彩組合都能夠創造(zao)出漸(jian)變效果(guo)，想要(yao)借助(zhu)漸(jian)變創造(zao)出視覺深度和紋理的體(ti)驗(yan)并不(bu)難(nan)，如果(guo)你還(huan)沒有(you)成型的配(pei)色(se)方(fang)案，你可以直接從 WebGradients 中找你喜歡的配(pei)色(se)方(fang)案。

Mobipad 這個網站在背景中使用了(le)多個不同的漸變色(se)來創造效果，合理的對比度控制讓前景的動畫非(fei)常(chang)的明(ming)顯，深色(se)的部(bu)分有著良好(hao)的可(ke)讀性，一目了(le)然。

7. 讓背景動起(qi)來(lai)

絕大多數(shu)的(de)背(bei)景紋理(li)的(de)技(ji)巧都(dou)是(shi)(shi)靜態(tai)背(bei)景的(de)設計技(ji)巧，但是(shi)(shi)背(bei)景和(he)紋理(li)同樣可以是(shi)(shi)動態(tai)的(de)。

為(wei)了避免喧(xuan)賓奪主，動(dong)態(tai)的(de)(de)背景紋理應(ying)該是(shi)(shi)很微(wei)妙的(de)(de)，否則會影(ying)響前景主要信(xin)息的(de)(de)傳達。配色(se)應(ying)該是(shi)(shi)柔和的(de)(de)，就像上面這個名為(wei) Latvian Alphabet 的(de)(de)網(wang)站一(yi)樣。

動態的(de)網(wang)站背(bei)景(jing)紋理可以(yi)是動態的(de)圖片或者被調(diao)整過的(de)視頻(pin)。動態的(de)背(bei)景(jing)是吸引(yin)用戶注意力(li)的(de)好辦(ban)法，只不過要適度就(jiu)好了。

結語

優秀的(de)背景紋(wen)理能夠增加整個(ge)網站(zhan)在視(shi)覺上的(de)深度和豐富度，盡管許多(duo)設(she)計師仍在使(shi)用扁(bian)平風的(de)背景，比(bi)如單色的(de)背景，但是合(he)理的(de)加入紋(wen)理能夠讓(rang)你的(de)設(she)計更(geng)加出(chu)彩(cai)。

在(zai)紋理的(de)(de)使用(yong)上，最主要的(de)(de)訣竅是要讓它(ta)足(zu)夠微(wei)妙(miao)，不(bu)影響前景的(de)(de)內容，這(zhe)樣才(cai)有足(zu)夠的(de)(de)可讀性。當(dang)然，多(duo)微(wei)妙(miao)合適(shi)，需要探索和(he)嘗試，只要讓整(zheng)個設計(ji)足(zu)夠平衡就(jiu)行。