您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

這7個技巧,幫你搞定頁面中背景紋理的設計

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

雖然頁面設計中紋理的使用方法有許多,但是想要營造當代的設計,只必要遵循一些相對簡單的規(guī)則,就可以獲得相對不錯的結果,下面的7個設計小技巧就是幫你做到這個事情的。

1. 簡單易懂的紋理

真正良好的背景紋理,在絕大多數(shù)時候甚至是不會被用戶細致到的。它應該是一個幾乎不可見的元素,并且有助于進步團體的可讀性和可用性,同時提供充足的視覺深度。

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

簡單的背景紋理通常有著小而緊密的重復的圖案,它可以是任何顏色,這個思路讓背景紋理不會作為焦點存在,而是作為襯托其他元素的緊張工具。

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

紋理可以很玄妙,很小,但是也同樣可以很大。勇敢一點,選擇更大的紋理或者說圖案,同樣能夠產生不錯的結果。

這種超大的圖案所構成的紋理能夠作為背景來使用,前景應該有更重的元素,比如肯定數(shù)量的文本,或者是圖片等相對較重的視覺內容。如許的背景紋理/圖案其實總體處理起來會比較棘手,由于它有肯定的機率會讓用戶細致到并且分散細致力。

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

3. 結合當前設計趨勢的紋理

結應時下賤行的設計趨勢來設計紋理,每每能夠讓整個設計呈現(xiàn)出富偶然代感的體驗。

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

紋理的條理對于團體的結果是有所支撐的。值得細致的是,背景中的紋理和圖案、背景以及前景元素之間的對比。

4. 使用圖片來構建紋理

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

這種設計的訣竅在于,圖片必要淡入到背景當中。

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

5. 使用色彩轉變來創(chuàng)造紋理

使用不同明暗飽和度的同系色彩可以構建出外形或者筆墨,同樣能夠達到結果。色彩的轉變同樣能夠創(chuàng)造出有深度的視覺結果。

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

6. 使用漸變來制造紋理結果

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

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

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

7. 讓背景動起來

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

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

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

結語

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

在紋理的使用上,最重要的訣竅是要讓它充足玄妙,不影響前景的內容,如許才有充足的可讀性。當然,多玄妙合適,必要探索和嘗試,只要讓整個設計充足平衡就行。


[教程作者:互聯(lián)網(wǎng)]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3996.html
內部教程!超細致的付出寶設計規(guī)范之線下字體篇
騰訊實戰(zhàn)經(jīng)驗!如何搭建有用的設計規(guī)范?
圖趣網(wǎng)微信
建議反饋
×