網站設計如何使用背景紋理的技巧?
來源:尚品中國|
類型:網站百科|
時間:2018-10-09
在網站設計中使用紋理的方法有很多,如果你希望采用更符合現代的方法,并遵循一些簡單的規則,你將獲得更多有關背景的知識。這里有幾種技巧可以幫助你更好地只你的網頁設計中使用紋理背景。
一.去繁存簡
一個恰到好處的背景紋理可能甚至不會引起用戶的過多關注。它應該是一個幾乎無形的元素,但是有助于整體的可讀性和可用性,同時提供深度或視覺參考點。對于這一點,使用簡單而低調的背景紋理是完美的方式。
去年年底,GitHub在其Universe Conference的網站設計中使用了一個簡單的黑色背景并搭配以白色的圓點。營造出夜晚的星空效果不僅符合主題,而且有趣的梯度變化使得Logo和事件的信息都很容易找到。簡單的背景紋理往往會使用一些小或緊湊的重復圖案,在顏色的選擇上并沒有過多的做限制。其主要的思想是這些背景紋理并不是作為焦點,它們有助于將注意力轉移到設計的其余部分。
二.大膽-膽大
或許保持低調并不適合你目前正在工作的項目。如果是這樣的話,選擇一個大而大膽的背景紋理或模式可能更加符合你現在的需求。
這些反常規方式的設計,偏向于使用前景更大的文本或用戶界面元素。使用這種類型的背景紋理可能會變得棘手,因為創建一個幾乎不可見的平鋪模式,使用戶不會把過多的精力放在背景上,不使其變為整個設計的焦點,在這點上可能需要考慮很多的因素。為了確保你的超大背景紋理能夠更好的發揮效果,請留意分析用戶的習慣,并作出相應的改變。流量或轉換率的急劇減少表明你的視覺表達形式并不能很好的讓用戶接受。
三.結合設計趨勢
帶有流行設計趨勢的背景紋理可以讓你的設計感覺超現代和新鮮。用幾何圖形的使用幾乎成為現在網頁設計中的主流視覺表現,這也解釋了為什么Apacio的網站如此有吸引力。在深色背景下,顏色鮮艷的幾何圖形即便是混合在一起,也能創建一個很好的紋理效果和深度,幫助用戶專注于大文本并調用操作,因為這些元素與背景形成對比。文字-簡單的無襯線字體-似乎遠遠優于綠色的形狀。紋理的分層也有助于這個整體效果。請注意,背景中的黑暗元素通過兩層不同的元素將明亮的元素區別出來。
四.使用圖像
背景紋理不必是從素材站點下載下來的通用元素。一些好的背景紋理可以與品牌或主消息相關的圖像像結合,以增加視覺興趣和參與度。訣竅是如何有效地將圖像淡入到背景中。
在上面的例子中,Oxeva在其網站設計中采用了一種很有效的方式:它通過減低照片的明暗,使之背景圖片只有大致的輪廓可見,通過使用大膽的色彩和特殊的字體處理,是圖像在前景中展示的部分更加自然和吸引人。這張照片的整體做了模糊處理,但在一些重要的細節上,有賦予了清晰可辨的細節,這樣主次層級就出來了。
五.用顏色強調變化
這是一種通過相似的顏色混合或匹配相應色彩和色調來創建字體或形狀的一個大膽的紋理元素。顏色的變化,即使是在很相似的一個范圍內,都可以創造深度和視覺層次感。
字體的使用以一種有趣的視覺組合并與顏色搭配來創建一個宏大的背景紋理。即使沒有使用過多的技術如梯度或陰影,從字形建立深度和平衡的同時幫助吸引眼球,背景中的顏色會襯托主標題,以起到強調的作用。
六.梯度變化
(漸變使用)漸變是時尚的,并且在視覺上足夠吸引人。當使用漸變作為背景紋理時,你可以單獨使用它或者通過使用一張照片來起到分層的效果。幾乎所有的顏色組合都是如此,所以使用漸變來創建紋理和深度并不困難。
你可以在webgradients中找到一個你喜歡的漸變組合,如果你已經空不出時間在規劃漸變組合選項的時候。Mobipad在其網站設計中使用了多紅漸變模式的搭配,微妙的背景漸變來創建深度和紋理。前景中的插圖動畫幾乎會從漸變中消失,而深色的動作調用使它們很容易被看到,漸變紋理中較亮和較暗的空間有助于用戶在設計中移動。
七.動態化
雖然許多技巧都集中在靜態背景元素上,但沒有一條規則說背景不能是動態的。為了充分利用這種背景紋理,運動應該是微妙的,這樣它不會影響主圖像或消息傳遞。包括更簡約或微妙的調色板,如上面的Latvian Alphabet案例,也樣處理也是一種很好的選擇。動態效果可以是移動、扭曲、旋轉或視頻元素。移動是吸引用戶注意力的好方法,充分利用動畫背景紋理,確保這個動作不會干擾設計的前景元素。
一個好的背景紋理可以幫助網頁設計的整體添加深度和視覺興趣點。雖然許多設計師仍然使用更平坦的背景-如單一的顏色-添加紋理的提示可以使你的項目脫穎而出。使用紋理的最關鍵的一個技巧是,它們必須是微妙的,實際上落入背景中,以便前景元素易于閱讀和理解。
來源聲明:本文章系尚品中國編輯原創或采編整理,如需轉載請注明來自尚品中國。以上內容部分(包含圖片、文字)來源于網絡,如有侵權,請及時與本站聯系(010-60259772)。