編者按：很多同學(xué)對紋理的印象還停留在“大一點的圖案”上，至于紋理的妙處，如何運用，哪里有免費的紋理資源等等都一知半解，今天@飛屋睿UIdesign同學(xué)摩拳擦掌，一次性把這些問題給講清楚了。對于這個能有效提高設(shè)計感的利器，得馬不停蹄學(xué)起來 >>>

紋理在網(wǎng)頁設(shè)計中已經(jīng)成為一個不可或缺的元素。它不僅僅是個趨勢，更是個增加網(wǎng)頁深度的快捷方法。設(shè)計師學(xué)會使用紋理，就能強化網(wǎng)頁感染力，可謂是網(wǎng)頁設(shè)計中必然要掌握的功法。而紋理本身就能通過引導(dǎo)用戶的視線來展示網(wǎng)頁的關(guān)鍵內(nèi)容。

然而，一直以來紋理似乎都被誤解為“GRUNGE”風(fēng)格設(shè)計,想了解GRUNGE可以去《設(shè)計中的搖滾樂！帶你認(rèn)識網(wǎng)頁設(shè)計中的GRUNGE（一）》看看。在許多網(wǎng)頁中我們可以看到，為了突出酷炫的效果時，被大量使用，甚至有濫用的嫌疑。濫用的結(jié)果就是它真正帶來的好處被埋沒。紋理的確可以增強網(wǎng)頁的感染力，但是絕不是網(wǎng)頁設(shè)計中的主角。

紋理 VS 圖案

在深入了解紋理之前，讓我們先把這一對容易混淆的概念區(qū)分一下。這兩個詞通常會被當(dāng)作一組同義詞。圖案通常會由一些細(xì)小的重復(fù)性的元素組成，具有一定的視覺節(jié)奏感。而紋理相對圖案由更大的元素組成，也不一定有重復(fù)性。如果用集合來表示這兩個概念，那么，紋理和圖案就會是兩個圓，只有小部分交集，其余部分都是相對獨立的。

紋理的功能

人們喜歡在網(wǎng)頁中使用紋理，基于設(shè)計的理由絕不能僅僅因為“看起來很美”就這樣去做，而應(yīng)該基于滿足某種功能，而紋理的使用目的大部分都會在于增強網(wǎng)頁的層次和視覺深度。還是讓我們來看看紋理具體有哪些功能吧。

吸引用戶點擊操作

圖標(biāo)、按鈕、標(biāo)題等元素都能運用上紋理。它能吸引用戶對相應(yīng)元素進(jìn)行點擊操作。這也許就是紋理運用盛行的原因。

最低限度地使用紋理就是將紋理運用在元素上，以便讓這些元素區(qū)別于網(wǎng)頁中的其他元素。引導(dǎo)用戶的視線進(jìn)入我們預(yù)期的下一步。這種方式也可以重點突出網(wǎng)頁中的品牌形象，例如在LOGO上使用紋理。

這里對LOGO使用紋理有兩種方式：第一是為你的LOGO使用紋理而搭配清晰背景，第二是保持清晰LOGO而運用紋理背景。如下面兩個截圖所示。

增強信息的視覺展示規(guī)則

紋理既然可以用以引導(dǎo)視線，就如同線條、方框和對比一樣，它也可以被用以排版，將內(nèi)容按照某種視覺規(guī)則進(jìn)行展示。與此同時，紋理的效果要運用得當(dāng)，與其他的視覺規(guī)則方式協(xié)調(diào)使用，最終輸出效果將會非常理想。

對于不同的內(nèi)容選用不同的紋理，這也符合了對比法則。用戶能根據(jù)不同的需求而進(jìn)入下一步操作，而不至于在主頁中層出不窮的信息中迷失了方向。

同時，紋理要完美搭配網(wǎng)站中的風(fēng)格和主題，例如手工的網(wǎng)站就搭配布紋，繪畫的網(wǎng)站搭配紙紋。所有這些元素都可以通過某種邏輯法則去體現(xiàn)網(wǎng)站的內(nèi)容，強化整體的信息展示。

營造氛圍和凸顯個性

現(xiàn)在，越來越多的客戶喜歡自己的網(wǎng)站能用界面設(shè)計來傳達(dá)自身更多的信息，他們希望網(wǎng)站凸顯出自己的個性，發(fā)揮品牌效應(yīng)。紋理也許能在某種程度上達(dá)到這一預(yù)期。

上面這個網(wǎng)頁可說是這方面的領(lǐng)銜之作。運用紋理去展示頭像，每個元素都用紋理發(fā)揮，配合也非常協(xié)調(diào)。沒有紋理，我想這個網(wǎng)頁的設(shè)計也可能沒有這樣出色。

確實，紋理為網(wǎng)頁界面設(shè)計增加一種“捉摸不定”的感覺，它帶來一種視覺上的新鮮感，同時，也為網(wǎng)頁增加了懷舊的魅力。

使用紋理的Tips

雖然紋理的使用帶來很多好處，但與此同時，使用時也有很多需要注意的陷阱。

保持易讀性

易讀性是一個網(wǎng)頁必須要維持的底線，就算是做得再漂亮的網(wǎng)頁，如果易讀性不佳，用戶也不會繼續(xù)使用下去。一定要避免就像如下圖所示的這種情況。

有節(jié)制的使用紋理

在印刷品設(shè)計時，紋理效果通常都比較夸張。而在網(wǎng)頁中，我們就需要有所節(jié)制，不要大面積的使用，以免干擾到用戶對主要內(nèi)容的注意力。

練習(xí)就是升級

在使用紋理時，多進(jìn)行嘗試。只有經(jīng)過試用后，你才知道最終效果。把紋理放置于你不曾想到的地方，也許就會有不同的發(fā)現(xiàn)。

有目的性地使用它

在為實際項目進(jìn)行設(shè)計前，你也需要大量的練習(xí)。通常，我們在習(xí)作時，往往會因為某個紋理好看就用上。這不利于設(shè)計的最終目的。如果你無法判斷這個元素為何使用紋理的目的，那就放棄這樣做。

有目的性且意味著有重點，它的出現(xiàn)是為了烘托主題。如果過度使用造成搶鏡的情況，那么也要放棄紋理。同時，我建議盡量使用比較弱的紋理圖案，若隱若現(xiàn)，這樣的效果會讓紋理的優(yōu)勢發(fā)揮更好。

為最終效果服務(wù)

經(jīng)驗告訴我們，設(shè)計時玩紋理玩得過火是常有之事，而時刻記得最終我們要實現(xiàn)的效果就能克服這一點。比如，我們設(shè)計一個網(wǎng)頁，運用上滿意的弱紋理背景后，如果已經(jīng)符合了最終效果，那就繼續(xù)設(shè)計下一個元素。

平時收集資源

為了在設(shè)計時節(jié)省大量時間，相信我，在平時做好后備資源是最好的解決方式了。那種下載、收集資源的時間如果用于設(shè)計過程，恐怕會讓你面臨時限的壓力。

飛屋同學(xué)私人珍藏的設(shè)計資源庫之（紋理+筆刷）>>>?www.ifeiwu.com?能提供給大家很多資源。

另外200個寶庫網(wǎng)站請看：《一網(wǎng)打盡！200+值得收藏的設(shè)計師資源站》

使用蒙版

紋理可以結(jié)合蒙版一起使用，可以創(chuàng)作出更多的新奇效果。

不要為了縮短加載時間而在紋理品質(zhì)上打折扣

有很多縮短頁面加載時間的辦法，因此，紋理還是要保持高保真。使用無縫的重復(fù)小圖案作為紋理平鋪開來是最佳的選擇，這樣就能避免了大的圖片加載。

使用紋理的理由

當(dāng)然，選用某個紋理，盡量選擇和你整個設(shè)計存在某種內(nèi)部聯(lián)系的紋理。就好像我在該篇文章中的一個例子，釣魚俱樂部的網(wǎng)站，那么他們就大量使用了船木作為背景紋理。

怎樣生成或獲取紋理

如果是需要自己生成紋理，在此提供兩個網(wǎng)頁背景紋理設(shè)計教程給大家。

第一個：《AI新手教程！手把手教你創(chuàng)建細(xì)膩的網(wǎng)頁紋理背景》

第二個：《AI新手教程！教你創(chuàng)建細(xì)膩的網(wǎng)頁斜紋紋理背景》

如果你懶得自己做，又想有獨一無二的特制紋理，這個肯定合你心意：《私人定制！13個在線紋理生成資源網(wǎng)站》

想深入學(xué)習(xí)優(yōu)秀作品的同學(xué)，右戳 >>> 《別具匠心！20個案例教你如何在網(wǎng)頁中使用紋理圖案》

【新年首月最熱資源排行榜】

最適合新年設(shè)計的中文字體免費下載！
《春節(jié)特供中文字體！10款年味十足的書法字體打包免費下載》

幫你快速高效搞定邏輯工作的神器！
《做你大腦中的記號筆！15款為設(shè)計師而生的思維導(dǎo)圖工具》

去年最受歡迎的十款交互設(shè)計工具出爐！
《姍姍來遲的總結(jié)！2014年最佳的十款交互設(shè)計工具》

原文地址：ifeiwu
作者：@飛屋睿UIdesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量90萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege