網(wǎng)頁(yè)設計中背景紋理的設計特點(diǎn)
在網(wǎng)頁(yè)中使用紋理并不是什么新鮮事情,隨著(zhù)扁平化設計的高度成熟,陰影、漸變和紋理也從某種意義上開(kāi)始回歸,并且在實(shí)際設計中越來(lái)越多地用到。什么樣的紋理可以適配當前的項目呢?如果要自己定制一個(gè)紋理,那么有什么要注意的呢?今天的文章,就是來(lái)探討這個(gè)問(wèn)題的。
雖然網(wǎng)頁(yè)設計中紋理的使用方法有很多,但是想要營(yíng)造現代的設計,只需要遵循一些相對簡(jiǎn)單的規則,就可以獲得相對不錯的效果,下面的7個(gè)設計小技巧就是幫你做到這個(gè)事情的。
1. 簡(jiǎn)單易懂的紋理
真正優(yōu)秀的背景紋理,在絕大多數時(shí)候甚至是不會(huì )被用戶(hù)注意到的。它應該是一個(gè)幾乎不可見(jiàn)的元素,并且有助于提高整體的可讀性和可用性,同時(shí)提供足夠的視覺(jué)深度。
簡(jiǎn)單而低調的背景紋理是提升整個(gè)設計的可用性的最佳方式。在去年的 Github 宇宙會(huì )議的頁(yè)面上,設計師就采用了簡(jiǎn)單的黑色背景加上白色圓點(diǎn)的紋理設計,營(yíng)造出夜空的效果。在夜空的映襯之下,多彩的 LOGO 和漸變的按鈕有著(zhù)良好的可識別度。
簡(jiǎn)單的背景紋理通常有著(zhù)小而緊密的重復的圖案,它可以是任何顏色,這個(gè)思路讓背景紋理不會(huì )作為焦點(diǎn)存在,而是作為襯托其他元素的重要工具。
2. 紋理可以更大,更大膽
紋理可以很微妙,很小,但是也同樣可以很大。大膽一點(diǎn),選擇更大的紋理或者說(shuō)圖案,同樣能夠產(chǎn)生不錯的效果。
這種超大的圖案所構成的紋理能夠作為背景來(lái)使用,前景應該有更重的元素,比如一定數量的文本,或者是圖片等相對較重的視覺(jué)內容。這樣的背景紋理/圖案其實(shí)總體處理起來(lái)會(huì )比較棘手,因為它有一定的機率會(huì )讓用戶(hù)注意到并且分散注意力。
為了確保這種超大的紋理圖案不影響正常的效果,最好是注意分析用戶(hù)習慣,并且匹配整體的內容,如果頁(yè)面的流量或者轉化率下降那么一定是用戶(hù)沒(méi)有獲取到其中的信息。
3. 結合當前設計趨勢的紋理
結合時(shí)下流行的設計趨勢來(lái)設計紋理,往往能夠讓整個(gè)設計呈現出富有時(shí)代感的體驗。
幾何圖形元素是時(shí)下流行的設計元素之一,將幾何圖形融入到背景當中,毫無(wú)疑問(wèn)可以非常吸引人。看看 Apacio 這個(gè)網(wǎng)站的設計,深色的背景之上混合色彩鮮艷的幾何圖案,創(chuàng )建出富有深度且抓人眼球的視覺(jué),通過(guò)對比讓用戶(hù)將注意力集中在較大的文本和 CTA 元素上。文字采用了簡(jiǎn)約的非襯線(xiàn)體,這使得它們可以從黑色和綠色的背景中脫穎而出。
紋理的層次對于整體的效果是有所支撐的。值得注意的是,背景中的紋理和圖案、背景以及前景元素之間的對比。
4. 使用圖片來(lái)構建紋理
背景紋理并不一定非得是那種精心制作的小圖案,有些細節豐富的圖片同樣可以作為背景紋理,它能夠增加視覺(jué)層次,提升吸引力。
這種設計的訣竅在于,圖片需要淡入到背景當中。
在上面的案例當中,Oxeva 這個(gè)網(wǎng)站通過(guò)兩種方式來(lái)做到融入背景的設計,設計師一方面讓圖片的明度降低了,讓用戶(hù)能夠看到景觀(guān)的輪廓,然后設計師在前景疊加上了一個(gè)漸變色彩層,這使得整個(gè)背景顯得極為富有視覺(jué)表現力。圖片所提供的細節并不多,但是在視覺(jué)上依然可以分辨。
5. 使用色彩變化來(lái)創(chuàng )造紋理
使用不同明暗飽和度的同系色彩可以構建出形狀或者文字,同樣能夠達到效果。色彩的變化同樣能夠創(chuàng )造出有深度的視覺(jué)效果。
Types of Type 這個(gè)網(wǎng)站就使用帶有色彩變化的巨大字母在背景中作為紋理,即使沒(méi)有用到漸變和陰影這樣的技巧,同樣也有深度,也足夠平衡。這樣的設計讓整個(gè)頁(yè)面顯得活潑而不乏味,對比使得整個(gè)設計主次分明。
<< 上一篇:網(wǎng)站建設人性化設計的特點(diǎn) | >> 下一篇:2018年較新網(wǎng)頁(yè)設計流行趨勢分析 |
- 2018-04-10學(xué)習網(wǎng)頁(yè)設計的心得體會(huì )
- 2018-04-10網(wǎng)頁(yè)設計中的標準尺寸規范
- 2018-03-19網(wǎng)頁(yè)設計中如何系統的畫(huà)原型
- 2018-03-10網(wǎng)頁(yè)設計中的css用法特點(diǎn)注意事項
- 2018-03-09網(wǎng)頁(yè)設計師必須要學(xué)習的視覺(jué)層級技巧
- 2018-03-08響應式網(wǎng)頁(yè)設計的9項基本原則
- 2018-03-04網(wǎng)頁(yè)設計常用的技能手法:色彩疊加
- 2018-02-21網(wǎng)頁(yè)設計手機移動(dòng)端設計稿寬度多少
- 2018-02-08人工智能網(wǎng)頁(yè)設計的特點(diǎn)和優(yōu)勢
- 2018-02-052018年較新流行的網(wǎng)頁(yè)設計趨勢
- 2018-02-05響應式網(wǎng)頁(yè)設計與自適應網(wǎng)頁(yè)設計有什么區別
- 2018-02-01網(wǎng)頁(yè)設計制作簡(jiǎn)化網(wǎng)頁(yè)設計的方法
- 2018-01-29網(wǎng)頁(yè)設計領(lǐng)域中的開(kāi)放式布局
- 2018-01-29影響網(wǎng)頁(yè)設計的5個(gè)關(guān)鍵因素
- 2018-01-22網(wǎng)頁(yè)設計師如何和客戶(hù)理解與溝通
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16