雖然網(wǎng)頁(yè)設(shè)計(jì)中紋理的使用方法有很多,但是想要營(yíng)造現(xiàn)代的設(shè)計(jì),只需要遵循一些相對(duì)簡(jiǎn)單的規(guī)則,就可以獲得相對(duì)不錯(cuò)的效果,下面的7個(gè)設(shè)計(jì)小技巧就是幫你做到這個(gè)事情的。
在網(wǎng)頁(yè)中使用紋理并不是什么新鮮事情,隨著扁平化設(shè)計(jì)的高度成熟,陰影、漸變和紋理也從某種意義上開(kāi)始回歸,并且在實(shí)際設(shè)計(jì)中越來(lái)越多地用到。什么樣的紋理可以適配當(dāng)前的項(xiàng)目呢?如果要自己定制一個(gè)紋理,那么有什么要注意的呢?今天的文章,就是來(lái)探討這個(gè)問(wèn)題的。
雖然網(wǎng)頁(yè)設(shè)計(jì)中紋理的使用方法有很多,但是想要營(yíng)造現(xiàn)代的設(shè)計(jì),只需要遵循一些相對(duì)簡(jiǎn)單的規(guī)則,就可以獲得相對(duì)不錯(cuò)的效果,下面的7個(gè)設(shè)計(jì)小技巧就是幫你做到這個(gè)事情的。
1. 簡(jiǎn)單易懂的紋理
真正優(yōu)秀的背景紋理,在絕大多數(shù)時(shí)候甚至是不會(huì)被用戶(hù)注意到的。它應(yīng)該是一個(gè)幾乎不可見(jiàn)的元素,并且有助于提高整體的可讀性和可用性,同時(shí)提供足夠的視覺(jué)深度。
簡(jiǎn)單而低調(diào)的背景紋理是提升整個(gè)設(shè)計(jì)的可用性的最佳方式。在去年的 Github 宇宙會(huì)議的頁(yè)面上,設(shè)計(jì)師就采用了簡(jiǎn)單的黑色背景加上白色圓點(diǎn)的紋理設(shè)計(jì),營(yíng)造出夜空的效果。在夜空的映襯之下,多彩的 LOGO 和漸變的按鈕有著良好的可識(shí)別度。
簡(jiǎn)單的背景紋理通常有著小而緊密的重復(fù)的圖案,它可以是任何顏色,這個(gè)思路讓背景紋理不會(huì)作為焦點(diǎn)存在,而是作為襯托其他元素的重要工具。
2. 紋理可以更大,更大膽
紋理可以很微妙,很小,但是也同樣可以很大。大膽一點(diǎn),選擇更大的紋理或者說(shuō)圖案,同樣能夠產(chǎn)生不錯(cuò)的效果。
這種超大的圖案所構(gòu)成的紋理能夠作為背景來(lái)使用,前景應(yīng)該有更重的元素,比如一定數(shù)量的文本,或者是圖片等相對(duì)較重的視覺(jué)內(nèi)容。這樣的背景紋理/圖案其實(shí)總體處理起來(lái)會(huì)比較棘手,因?yàn)樗幸欢ǖ臋C(jī)率會(huì)讓用戶(hù)注意到并且分散注意力。
為了確保這種超大的紋理圖案不影響正常的效果,最好是注意分析用戶(hù)習(xí)慣,并且匹配整體的內(nèi)容,如果頁(yè)面的流量或者轉(zhuǎn)化率下降那么一定是用戶(hù)沒(méi)有獲取到其中的信息。
3. 結(jié)合當(dāng)前設(shè)計(jì)趨勢(shì)的紋理
結(jié)合時(shí)下流行的設(shè)計(jì)趨勢(shì)來(lái)設(shè)計(jì)紋理,往往能夠讓整個(gè)設(shè)計(jì)呈現(xiàn)出富有時(shí)代感的體驗(yàn)。
幾何圖形元素是時(shí)下流行的設(shè)計(jì)元素之一,將幾何圖形融入到背景當(dāng)中,毫無(wú)疑問(wèn)可以非常吸引人。看看 Apacio 這個(gè)網(wǎng)站的設(shè)計(jì),深色的背景之上混合色彩鮮艷的幾何圖案,創(chuàng)建出富有深度且抓人眼球的視覺(jué),通過(guò)對(duì)比讓用戶(hù)將注意力集中在較大的文本和 CTA 元素上。文字采用了簡(jiǎn)約的非襯線(xiàn)體,這使得它們可以從黑色和綠色的背景中脫穎而出。
紋理的層次對(duì)于整體的效果是有所支撐的。值得注意的是,背景中的紋理和圖案、背景以及前景元素之間的對(duì)比。
4. 使用圖片來(lái)構(gòu)建紋理
背景紋理并不一定非得是那種精心制作的小圖案,有些細(xì)節(jié)豐富的圖片同樣可以作為背景紋理,它能夠增加視覺(jué)層次,提升吸引力。
這種設(shè)計(jì)的訣竅在于,圖片需要淡入到背景當(dāng)中。
在上面的案例當(dāng)中,Oxeva 這個(gè)網(wǎng)站通過(guò)兩種方式來(lái)做到融入背景的設(shè)計(jì),設(shè)計(jì)師一方面讓圖片的明度降低了,讓用戶(hù)能夠看到景觀的輪廓,然后設(shè)計(jì)師在前景疊加上了一個(gè)漸變色彩層,這使得整個(gè)背景顯得極為富有視覺(jué)表現(xiàn)力。圖片所提供的細(xì)節(jié)并不多,但是在視覺(jué)上依然可以分辨。
5. 使用色彩變化來(lái)創(chuàng)造紋理
使用不同明暗飽和度的同系色彩可以構(gòu)建出形狀或者文字,同樣能夠達(dá)到效果。色彩的變化同樣能夠創(chuàng)造出有深度的視覺(jué)效果。
Types of Type 這個(gè)網(wǎng)站就使用帶有色彩變化的巨大字母在背景中作為紋理,即使沒(méi)有用到漸變和陰影這樣的技巧,同樣也有深度,也足夠平衡。這樣的設(shè)計(jì)讓整個(gè)頁(yè)面顯得活潑而不乏味,對(duì)比使得整個(gè)設(shè)計(jì)主次分明。
6. 使用漸變來(lái)制造紋理效果
現(xiàn)如今的漸變幾乎成了時(shí)尚的代名詞,漸變色彩可以在背景中替代紋理存在,也能結(jié)合圖片和其他的元素來(lái)使用。
幾乎所有的色彩組合都能夠創(chuàng)造出漸變效果,想要借助漸變創(chuàng)造出視覺(jué)深度和紋理的體驗(yàn)并不難,如果你還沒(méi)有成型的配色方案,你可以直接從 WebGradients 中找你喜歡的配色方案。
Mobipad 這個(gè)網(wǎng)站在背景中使用了多個(gè)不同的漸變色來(lái)創(chuàng)造效果,合理的對(duì)比度控制讓前景的動(dòng)畫(huà)非常的明顯,深色的部分有著良好的可讀性,一目了然。
7. 讓背景動(dòng)起來(lái)
絕大多數(shù)的背景紋理的技巧都是靜態(tài)背景的設(shè)計(jì)技巧,但是背景和紋理同樣可以是動(dòng)態(tài)的。
為了避免喧賓奪主,動(dòng)態(tài)的背景紋理應(yīng)該是很微妙的,否則會(huì)影響前景主要信息的傳達(dá)。配色應(yīng)該是柔和的,就像上面這個(gè)名為 Latvian Alphabet 的網(wǎng)站一樣。
動(dòng)態(tài)的網(wǎng)站背景紋理可以是動(dòng)態(tài)的圖片或者被調(diào)整過(guò)的視頻。動(dòng)態(tài)的背景是吸引用戶(hù)注意力的好辦法,只不過(guò)要適度就好了。
結(jié)語(yǔ)
優(yōu)秀的背景紋理能夠增加整個(gè)網(wǎng)站在視覺(jué)上的深度和豐富度,盡管許多設(shè)計(jì)師仍在使用扁平風(fēng)的背景,比如單色的背景,但是合理的加入紋理能夠讓你的設(shè)計(jì)更加出彩。
在紋理的使用上,最主要的訣竅是要讓它足夠微妙,不影響前景的內(nèi)容,這樣才有足夠的可讀性。當(dāng)然,多微妙合適,需要探索和嘗試,只要讓整個(gè)設(shè)計(jì)足夠平衡就行。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)