在網(wǎng)站設(shè)計(jì)中使用紋理的方法有很多,如果你希望采用更符合現(xiàn)代的方法,并遵循一些簡(jiǎn)單的規(guī)則,你將獲得更多有關(guān)背景的知識(shí)。這里有幾種技巧可以幫助你更好地只你的網(wǎng)頁(yè)設(shè)計(jì)中使用紋理背景。一.去繁存簡(jiǎn)一個(gè)恰到好處的背景紋理可能甚至不會(huì)引起用戶的過(guò)多關(guān)注。它應(yīng)該是一個(gè)幾乎無(wú)形的元素,但是有助于整體的可讀性和可用性,同時(shí)提供深度或視覺(jué)參考點(diǎn)。對(duì)于這一點(diǎn),使用簡(jiǎn)單而低調(diào)的背景紋理是完美的方式。
去年年底,GitHub在其Universe Conference的網(wǎng)站設(shè)計(jì)中使用了一個(gè)簡(jiǎn)單的黑色背景并搭配以白色的圓點(diǎn)。營(yíng)造出夜晚的星空效果不僅符合主題,而且有趣的梯度變化使得Logo和事件的信息都很容易找到。簡(jiǎn)單的背景紋理往往會(huì)使用一些小或緊湊的重復(fù)圖案,在顏色的選擇上并沒(méi)有過(guò)多的做限制。其主要的思想是這些背景紋理并不是作為焦點(diǎn),它們有助于將注意力轉(zhuǎn)移到設(shè)計(jì)的其余部分。二.大膽-膽大
或許保持低調(diào)并不適合你目前正在工作的項(xiàng)目。如果是這樣的話,選擇一個(gè)大而大膽的背景紋理或模式可能更加符合你現(xiàn)在的需求。這些反常規(guī)方式的設(shè)計(jì),偏向于使用前景更大的文本或用戶界面元素。使用這種類型的背景紋理可能會(huì)變得棘手,因?yàn)閯?chuàng)建一個(gè)幾乎不可見(jiàn)的平鋪模式,使用戶不會(huì)把過(guò)多的精力放在背景上,不使其變?yōu)檎麄€(gè)設(shè)計(jì)的焦點(diǎn),在這點(diǎn)上可能需要考慮很多的因素。為了確保你的超大背景紋理能夠更好的發(fā)揮效果,請(qǐng)留意分析用戶的習(xí)慣,并作出相應(yīng)的改變。流量或轉(zhuǎn)換率的急劇減少表明你的視覺(jué)表達(dá)形式并不能很好的讓用戶接受。三.結(jié)合設(shè)計(jì)趨勢(shì)
帶有流行設(shè)計(jì)趨勢(shì)的背景紋理可以讓你的設(shè)計(jì)感覺(jué)超現(xiàn)代和新鮮。用幾何圖形的使用幾乎成為現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中的主流視覺(jué)表現(xiàn),這也解釋了為什么Apacio的網(wǎng)站如此有吸引力。在深色背景下,顏色鮮艷的幾何圖形即便是混合在一起,也能創(chuàng)建一個(gè)很好的紋理效果和深度,幫助用戶專注于大文本并調(diào)用操作,因?yàn)檫@些元素與背景形成對(duì)比。文字-簡(jiǎn)單的無(wú)襯線字體-似乎遠(yuǎn)遠(yuǎn)優(yōu)于綠色的形狀。紋理的分層也有助于這個(gè)整體效果。請(qǐng)注意,背景中的黑暗元素通過(guò)兩層不同的元素將明亮的元素區(qū)別出來(lái)。四.使用圖像背景紋理不必是從素材站點(diǎn)下載下來(lái)的通用元素。一些好的背景紋理可以與品牌或主消息相關(guān)的圖像像結(jié)合,以增加視覺(jué)興趣和參與度。訣竅是如何有效地將圖像淡入到背景中。
在上面的例子中,Oxeva在其網(wǎng)站設(shè)計(jì)中采用了一種很有效的方式:它通過(guò)減低照片的明暗,使之背景圖片只有大致的輪廓可見(jiàn),通過(guò)使用大膽的色彩和特殊的字體處理,是圖像在前景中展示的部分更加自然和吸引人。這張照片的整體做了模糊處理,但在一些重要的細(xì)節(jié)上,有賦予了清晰可辨的細(xì)節(jié),這樣主次層級(jí)就出來(lái)了。五.用顏色強(qiáng)調(diào)變化
這是一種通過(guò)相似的顏色混合或匹配相應(yīng)色彩和色調(diào)來(lái)創(chuàng)建字體或形狀的一個(gè)大膽的紋理元素。顏色的變化,即使是在很相似的一個(gè)范圍內(nèi),都可以創(chuàng)造深度和視覺(jué)層次感。字體的使用以一種有趣的視覺(jué)組合并與顏色搭配來(lái)創(chuàng)建一個(gè)宏大的背景紋理。即使沒(méi)有使用過(guò)多的技術(shù)如梯度或陰影,從字形建立深度和平衡的同時(shí)幫助吸引眼球,背景中的顏色會(huì)襯托主標(biāo)題,以起到強(qiáng)調(diào)的作用。六.梯度變化(漸變使用)漸變是時(shí)尚的,并且在視覺(jué)上足夠吸引人。當(dāng)使用漸變作為背景紋理時(shí),你可以單獨(dú)使用它或者通過(guò)使用一張照片來(lái)起到分層的效果。幾乎所有的顏色組合都是如此,所以使用漸變來(lái)創(chuàng)建紋理和深度并不困難。
你可以在webgradients中找到一個(gè)你喜歡的漸變組合,如果你已經(jīng)空不出時(shí)間在規(guī)劃漸變組合選項(xiàng)的時(shí)候。Mobipad在其網(wǎng)站設(shè)計(jì)中使用了多紅漸變模式的搭配,微妙的背景漸變來(lái)創(chuàng)建深度和紋理。前景中的插圖動(dòng)畫(huà)幾乎會(huì)從漸變中消失,而深色的動(dòng)作調(diào)用使它們很容易被看到,漸變紋理中較亮和較暗的空間有助于用戶在設(shè)計(jì)中移動(dòng)。七.動(dòng)態(tài)化雖然許多技巧都集中在靜態(tài)背景元素上,但沒(méi)有一條規(guī)則說(shuō)背景不能是動(dòng)態(tài)的。為了充分利用這種背景紋理,運(yùn)動(dòng)應(yīng)該是微妙的,這樣它不會(huì)影響主圖像或消息傳遞。包括更簡(jiǎn)約或微妙的調(diào)色板,如上面的Latvian Alphabet案例,也樣處理也是一種很好的選擇。動(dòng)態(tài)效果可以是移動(dòng)、扭曲、旋轉(zhuǎn)或視頻元素。移動(dòng)是吸引用戶注意力的好方法,充分利用動(dòng)畫(huà)背景紋理,確保這個(gè)動(dòng)作不會(huì)干擾設(shè)計(jì)的前景元素。
一個(gè)好的背景紋理可以幫助網(wǎng)頁(yè)設(shè)計(jì)的整體添加深度和視覺(jué)興趣點(diǎn)。雖然許多設(shè)計(jì)師仍然使用更平坦的背景-如單一的顏色-添加紋理的提示可以使你的項(xiàng)目脫穎而出。使用紋理的最關(guān)鍵的一個(gè)技巧是,它們必須是微妙的,實(shí)際上落入背景中,以便前景元素易于閱讀和理解。本文章來(lái)源創(chuàng)新互聯(lián):網(wǎng)站設(shè)計(jì)公司
名稱欄目:網(wǎng)站設(shè)計(jì)如何使用背景紋理的技巧?(組件)
標(biāo)題網(wǎng)址:http://jinyejixie.com/news25/320875.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、App開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)