技術(shù)資訊
網(wǎng)頁中背景紋理的7個設(shè)計技巧
2018-05-11 16:43:38
隨著扁平化設(shè)計的普及,在網(wǎng)頁實際設(shè)計中越來越多地用到陰影、漸變和紋理等元素。什么樣的紋理可以適配當前的網(wǎng)站項目呢?優(yōu)秀的背景紋理能夠增加整個網(wǎng)站在視覺上的深度和豐富度,盡管許多設(shè)計師仍在使用扁平風的背景,比如單色的背景,但是合理的加入紋理能夠讓你的設(shè)計更加出彩。
在紋理的使用上,最主要的訣竅是要讓它足夠微妙,不影響前景的內(nèi)容,這樣才有足夠的可讀性。當然,多微妙合適,需要探索和嘗試,只要讓整個設(shè)計足夠平衡就行。一起來看看如下7個小技巧。
1、結(jié)合當前設(shè)計趨勢的紋理
結(jié)合時下流行的設(shè)計趨勢來設(shè)計紋理,往往能夠讓整個設(shè)計呈現(xiàn)出富有時代感的體驗。
幾何圖形元素是時下流行的設(shè)計元素之一,將幾何圖形融入到背景當中,毫無疑問可以非常吸引人。
紋理的層次對于整體的效果是有所支撐的。值得注意的是,背景中的紋理和圖案、背景以及前景元素之間的對比。
2、簡單易懂的紋理
真正優(yōu)秀的背景紋理,在絕大多數(shù)時候甚至是不會被用戶注意到的。它應(yīng)該是一個幾乎不可見的元素,并且有助于提高整體的可讀性和可用性,同時提供足夠的視覺深度。
簡單而低調(diào)的背景紋理是提升整個設(shè)計的可用性的最佳方式。在去年的 Github 宇宙會議的頁面上,設(shè)計師就采用了簡單的黑色背景加上白色圓點的紋理設(shè)計,營造出夜空的效果。在夜空的映襯之下,多彩的 LOGO 和漸變的按鈕有著良好的可識別度。
簡單的背景紋理通常有著小而緊密的重復(fù)的圖案,它可以是任何顏色,這個思路讓背景紋理不會作為焦點存在,而是作為襯托其他元素的重要工具。
3、紋理可以更大,更大膽
紋理可以很微妙,很小,但是也同樣可以很大。大膽一點,選擇更大的紋理或者說圖案,同樣能夠產(chǎn)生不錯的效果。
這種超大的圖案所構(gòu)成的紋理能夠作為背景來使用,前景應(yīng)該有更重的元素,比如一定數(shù)量的文本,或者是圖片等相對較重的視覺內(nèi)容。這樣的背景紋理/圖案其實總體處理起來會比較棘手,因為它有一定的機率會讓用戶注意到并且分散注意力。
為了確保這種超大的紋理圖案不影響正常的效果,最好是注意分析用戶習慣,并且匹配整體的內(nèi)容,如果頁面的流量或者轉(zhuǎn)化率下降那么一定是用戶沒有獲取到其中的信息。
4、使用圖片來構(gòu)建紋理
背景紋理并不一定非得是那種精心制作的小圖案,有些細節(jié)豐富的圖片同樣可以作為背景紋理,它能夠增加視覺層次,提升吸引力。
這種設(shè)計的訣竅在于,圖片需要淡入到背景當中。
5、使用色彩變化來創(chuàng)造紋理
使用不同明暗飽和度的同系色彩可以構(gòu)建出形狀或者文字,同樣能夠達到效果。色彩的變化同樣能夠創(chuàng)造出有深度的視覺效果。
6、讓背景動起來
絕大多數(shù)的背景紋理的技巧都是靜態(tài)背景的設(shè)計技巧,但是背景和紋理同樣可以是動態(tài)的。
為了避免喧賓奪主,動態(tài)的背景紋理應(yīng)該是很微妙的,否則會影響前景主要信息的傳達。配色應(yīng)該是柔和的。
動態(tài)的網(wǎng)站背景紋理可以是動態(tài)的圖片或者被調(diào)整過的視頻。動態(tài)的背景是吸引用戶注意力的好辦法,只不過要適度就好了。
7、 使用漸變來制造紋理效果
現(xiàn)如今的漸變幾乎成了時尚的代名詞,漸變色彩可以在背景中替代紋理存在,也能結(jié)合圖片和其他的元素來使用。
幾乎所有的色彩組合都能夠創(chuàng)造出漸變效果,想要借助漸變創(chuàng)造出視覺深度和紋理的體驗并不難。
優(yōu)秀網(wǎng)站案例展示:http://www.ihaomai.cn/kehuminglu/index.html
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2012-11-18 16:33:27] 交互設(shè)計在網(wǎng)頁設(shè)計中的應(yīng)用
- [2009-04-07 08:31:00] 中文Web設(shè)計中的著重號
- [2008-03-04 13:34:00] 膚淺網(wǎng)頁設(shè)計
- [2012-12-28 12:30:13] 網(wǎng)頁切圖的技巧與優(yōu)化
- [2011-11-14 09:24:58] 如何做好網(wǎng)站內(nèi)鏈優(yōu)化 讓網(wǎng)站權(quán)重飛起來
- [2016-08-25 14:15:00] 如何利用微信高級接口?
- [2011-10-10 22:00:38] 青島網(wǎng)站建設(shè)之網(wǎng)頁如何提高加載速度
- [2012-08-26 17:36:20] 網(wǎng)頁加載速度研究
- [2013-03-02 23:07:00] 黑色網(wǎng)頁設(shè)計
- [2011-09-10 23:13:10] 青島網(wǎng)站建設(shè)哪家好?
- [2012-02-19 21:04:27] 網(wǎng)頁設(shè)計細節(jié)的處理
- [2009-04-08 08:53:00] 對網(wǎng)頁寬度設(shè)計的問題應(yīng)如何討論?
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
網(wǎng)站SEO 青島抖音小程序開發(fā) 用戶界面 青島網(wǎng)站建設(shè)基礎(chǔ)知識 圖形網(wǎng)格 網(wǎng)站制作 如何做網(wǎng)站優(yōu)化 集團官網(wǎng) 網(wǎng)站動畫 H5 力圖數(shù)字科技 微信開發(fā) html和css 青島網(wǎng)站建設(shè) 視覺靈感 青島不錯的英文網(wǎng)站建設(shè)公司 robots 青島高端網(wǎng)站設(shè)計公司哪家好 集團性網(wǎng)站 力圖 官網(wǎng)建設(shè) php程序 青島flash網(wǎng)站 搜索引擎 微信小程序 網(wǎng)站改版 網(wǎng)站設(shè)計 交互設(shè)計 網(wǎng)站策劃 頁面設(shè)計