當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內(nèi)容

網(wǎng)頁設計知識,紋理運用指南

來源:ifeiwu 作者:飛屋睿UIdesign 學習:8694人次

紋理在網(wǎng)頁設計中已經(jīng)成為一個不可或缺的元素。它不僅僅是個趨勢,更是個增加網(wǎng)頁深度的快捷方法。設計師學會使用紋理,就能強化網(wǎng)頁感染力,可謂是網(wǎng)頁設計中必然要掌握的功法。而紋理本身就能通過引導用戶的視線來展示網(wǎng)頁的關鍵內(nèi)容。

然而,一直以來紋理似乎都被誤解為“GRUNGE”風格設計,在許多網(wǎng)頁中我們可以看到,為了突出酷炫的效果時,被大量使用,甚至有濫用的嫌疑。濫用的結(jié)果就是它真正帶來的好處被埋沒。紋理的確可以增強網(wǎng)頁的感染力,但是絕不是網(wǎng)頁設計中的主角。

紋理 VS 圖案

在深入了解紋理之前,讓我們先把這一對容易混淆的概念區(qū)分一下。這兩個詞通常會被當作一組同義詞。圖案通常會由一些細小的重復性的元素組成,具有一定的視覺節(jié)奏感。而紋理相對圖案由更大的元素組成,也不一定有重復性。如果用集合來表示這兩個概念,那么,紋理和圖案就會是兩個圓,只有小部分交集,其余部分都是相對獨立的。

紋理的功能

人們喜歡在網(wǎng)頁中使用紋理,基于設計的理由絕不能僅僅因為“看起來很美”就這樣去做,而應該基于滿足某種功能,而紋理的使用目的大部分都會在于增強網(wǎng)頁的層次和視覺深度。還是讓我們來看看紋理具體有哪些功能吧。

吸引用戶點擊操作

圖標、按鈕、標題等元素都能運用上紋理。它能吸引用戶對相應元素進行點擊操作。這也許就是紋理運用盛行的原因。

最低限度地使用紋理就是將紋理運用在元素上,以便讓這些元素區(qū)別于網(wǎng)頁中的其他元素。引導用戶的視線進入我們預期的下一步。這種方式也可以重點突出網(wǎng)頁中的品牌形象,例如在LOGO上使用紋理。

這里對LOGO使用紋理有兩種方式:第一是為你的LOGO使用紋理而搭配清晰背景,第二是保持清晰LOGO而運用紋理背景。如下面兩個截圖所示。

網(wǎng)頁設計知識,紋理運用指南

網(wǎng)頁設計知識,紋理運用指南

增強信息的視覺展示規(guī)則

紋理既然可以用以引導視線,就如同線條、方框和對比一樣,它也可以被用以排版,將內(nèi)容按照某種視覺規(guī)則進行展示。與此同時,紋理的效果要運用得當,與其他的視覺規(guī)則方式協(xié)調(diào)使用,最終輸出效果將會非常理想。

網(wǎng)頁設計知識,紋理運用指南

對于不同的內(nèi)容選用不同的紋理,這也符合了對比法則。用戶能根據(jù)不同的需求而進入下一步操作,而不至于在主頁中層出不窮的信息中迷失了方向。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!