手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

網(wǎng)頁設(shè)計(jì)中紋理的運(yùn)用技巧

2014-3-28    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.88yangsc.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

texture界面設(shè)計(jì)中應(yīng)用已經(jīng)越發(fā)完善了。它將形成一種趨勢(shì),簡(jiǎn)單而有效的為web頁面設(shè)計(jì)添加幾分深度感。 充分發(fā)揮texture的威力是一份偉大的職責(zé)。它不僅能夠很好增強(qiáng)web設(shè)計(jì)的表現(xiàn)效果,對(duì)于設(shè)計(jì)師來說還是一個(gè)質(zhì)量上乘的好工具。它的美妙作用是可以引導(dǎo)瀏覽者的視線,強(qiáng)調(diào)關(guān)鍵元素的重要性。

然而,長(zhǎng)期以往texture似乎總和臟亂或者低劣UI設(shè)計(jì)為伍,它的濫用處處可見,像樂隊(duì)的website等,對(duì)于設(shè)計(jì)師來說,它遺留下來的滋味可不怎么樣!。 也正是由于以前的濫用,texture的優(yōu)勢(shì)長(zhǎng)期被人們所忽略。texture可以讓web設(shè)計(jì)更具整體感,但是前提是不要讓它滿屏皆是。

Texture(紋理)VS. Patterns(圖案)

在我們深入了解texture之前,先弄懂texturepattern之間的區(qū)別。這兩個(gè)詞經(jīng)常被誤認(rèn)為同義的。pattern通常是小的、重復(fù)的圖片元素,而texture更趨向于大一點(diǎn)的不重復(fù)的圖片。你可以想象兩個(gè)集合,左邊是pattern,右邊是texture,這兩個(gè)集合有一部分交集,也就是說在某些時(shí)候texture也是pattern。去tileabl這個(gè)網(wǎng)站逛一圈,也許你會(huì)有更清晰的印象。

Texture的功能

我們喜愛texture的理由可以有很多。設(shè)計(jì)時(shí)的選擇不止是簡(jiǎn)單說嗯,這樣看起來還不錯(cuò),設(shè)計(jì)是出于一種目的,而每一個(gè)對(duì)texture選擇應(yīng)該權(quán)衡利弊?,F(xiàn)在讓我們?yōu)g覽下使用texture到底有哪些好處呢?

獲取目光焦點(diǎn)

texture可以讓元素顯著起來,譬如titles、headings、iconsbuttons。它可以吸引眼球去傳達(dá)一個(gè)動(dòng)作指示或者告訴你這是主要的heading部分。這也許是最明確的一種方式去理解texture了。

限度的去使用texture,以便區(qū)分website中內(nèi)容和其他部分。它引導(dǎo)著瀏覽者的目光直接鎖向那些設(shè)計(jì)者有意安排的元素上。它可能是一種特別棒的方法讓關(guān)鍵商標(biāo)脫穎而出。

你可以用很多方法去吸引別人的注意力,然而這兩種常用的簡(jiǎn)單的方法,你不妨嘗試一下。一種是帶有紋理的logo和干凈的背景搭配,另外一種正好反過來,干凈的logo和帶有紋理的背景一起。

img1_1107

img2_1107

增強(qiáng)信息的筑造風(fēng)格

texture習(xí)慣于指導(dǎo)瀏覽行為。而例如線條、色塊和對(duì)比同樣習(xí)慣用于將內(nèi)容進(jìn)行邏輯區(qū)分。有效的將texture結(jié)合其他方式會(huì)更具表現(xiàn)力。使用texture的最終目的不是放棄其他的筑造風(fēng)格方式,而是要去加強(qiáng)它們的表現(xiàn)效果。

img3_1107

img4_1107

以上網(wǎng)站,個(gè)別的元素為了特殊的目的使用了texture。該網(wǎng)站把內(nèi)容劃分成幾個(gè)邏輯區(qū)域,讓用戶清楚的看到從哪開始,到哪結(jié)束。通過texture使得用戶能夠清晰準(zhǔn)確識(shí)別每個(gè)邏輯內(nèi)容塊,從而增強(qiáng)了頁面的信息筑造風(fēng)格。

并且,texture完美的配合了網(wǎng)站的風(fēng)格和主題。所有元素猶如量身訂做般合理的表現(xiàn)了主題,因此強(qiáng)調(diào)了整個(gè)website的全部信息。

建立一種氛圍&個(gè)性化

越來越多的客戶希望網(wǎng)站設(shè)計(jì)不止是友好的表現(xiàn)頁面內(nèi)容,他們更希望能看到一些個(gè)性獨(dú)特,自己的標(biāo)志更易被用戶所識(shí)別的web設(shè)計(jì)。texture便可以通過很多方式實(shí)現(xiàn)這一目的。

img5_1107

上面這個(gè)網(wǎng)站設(shè)計(jì)便十分幫的表現(xiàn)了她的個(gè)人品牌。她使用了texture來更簡(jiǎn)潔的表現(xiàn)了頭像部分,如果沒有texture,該網(wǎng)站會(huì)顯得平淡無味,而且缺乏個(gè)性。texture無形中使得web設(shè)計(jì)中多了很多超棒的因素,讓website變得更具魅力。

提示和建議

從上面看來texture的確很不錯(cuò),但是使用中你也會(huì)想到如何才能避免技術(shù)濫用和思維定式的陷阱呢。

保證易讀性

千萬不要為了使用texture而犧牲了易讀性,這也是我們經(jīng)常犯的一個(gè)錯(cuò)誤。易讀性對(duì)于一個(gè)網(wǎng)站來說具有最高級(jí)別的重要性。

img6_1107

別死馬當(dāng)活馬醫(yī)

在印刷里,texture很難會(huì)被過渡使用,當(dāng)然有時(shí)也會(huì)因?yàn)榱髋刹煌煌H欢?/span>web領(lǐng)域,texture卻很容易出現(xiàn)濫用的情況。

img7_1107

實(shí)踐預(yù)示著提高

讓你的界面設(shè)計(jì)不斷的嘗試新的想法,平時(shí)從來不會(huì)添加texture的地方你也可以嘗試一把,說不準(zhǔn)會(huì)有意想不到的效果。

如果它不出于任何目的,請(qǐng)刪除

在用戶網(wǎng)站上使用texture之前,請(qǐng)精煉好你的技術(shù)。必須反復(fù)的確認(rèn)你使用texture出于某種有建設(shè)性的想法,如果你不能夠使得texture有助你整體設(shè)計(jì)的提升,請(qǐng)放棄。

沒有任何理由需要過渡使用textureweb的全部目的是為了傳播信息,當(dāng)然沒有必要去讓你的內(nèi)容毫無可讀性。所以,精煉和細(xì)微的紋理效果可以更好的幫助提高項(xiàng)目水平。

考慮你想達(dá)到什么樣的效果

從我們的經(jīng)驗(yàn)得知,肆無忌憚的使用texture是件多么容易的事。而在頭腦里一直想著你希望最終達(dá)到什么樣的效果可以有效的避免濫用情況的發(fā)生。如果你想要一個(gè)淡淡紋理效果的背景,那就馬上做,之后就去執(zhí)行下一步。否則的話,你可能再也不會(huì)完成它。

收集資源,這樣你不必在用時(shí)才去搜索

你需要花大量的時(shí)間去搜尋和下載那些對(duì)你來說有用的資源,保存資源是一項(xiàng)偉大的輔助工作。請(qǐng)相信我們,沒有什么比錯(cuò)過一個(gè)完美筆刷,再想用時(shí)已經(jīng)找不到地址時(shí)更加令人沮喪了。我們的筆刷列表既長(zhǎng)又多樣化,長(zhǎng)年累月的時(shí)間里,我們從類似deviantARTBrusheezy里收集各種各樣的筆刷,然后自定義成為自己的。

學(xué)會(huì)蒙版技術(shù)

學(xué)習(xí)使用圖層蒙版會(huì)為你在工作節(jié)省下大量的時(shí)間,同時(shí)也會(huì)成為你的利器之一。圖層蒙版也是一個(gè)超棒的方式而不會(huì)破壞任何原圖設(shè)計(jì)。網(wǎng)絡(luò)上有大量關(guān)于蒙版的技術(shù)文章,這里有個(gè)快速搜索鏈接,如果你需要的話。

不要為了減少下載時(shí)間而犧牲質(zhì)量

這里有很多有趣的辦法可以在保持使用texture的同時(shí)也不犧牲下載時(shí)間。但是千萬別一味的降低texture的質(zhì)量,因?yàn)榕c其顯示得專業(yè),慢一點(diǎn)兒不別讓網(wǎng)站剛剛面世就已經(jīng)過時(shí)。平鋪紋理圖案是個(gè)比較好的辦法去節(jié)省下載時(shí)間。

當(dāng)然,我們還是希望能夠設(shè)計(jì)出腦袋想要的效果來,但愿隨著全球網(wǎng)絡(luò)速度的提高,下載時(shí)間將會(huì)不再是你考慮的主要問題。盡管如此,還是讓你的texture使用理由充足吧,一個(gè)網(wǎng)頁設(shè)計(jì)如果使用過多的texture仍然會(huì)不可避免的下載緩慢。使用平鋪的小圖案作為背景吧,Tileables已經(jīng)開始實(shí)踐,你不妨跟他們學(xué)一學(xué)。另外我們還有CSS Sprites技術(shù),或者使用雅虎的圖片無損壓縮Smush來減少圖片的加載時(shí)間。

texture-quality

合理選擇texture

最后,和保證可讀性一樣重要的是,為你的設(shè)計(jì)選擇合理的texture。如果你是幫助一家家具店做頁面設(shè)計(jì),那種生銹效果的紋理顯然非常不合適。texture是為了營造一種特性,而不是迷惑了來訪者,無論不管這些texture看起來有多好看。實(shí)用性永遠(yuǎn)應(yīng)該優(yōu)先考慮。

如何 DIY texture

獲取一個(gè)texture最常用的辦法是自己去制作。而且我們強(qiáng)烈建議你這么做,因?yàn)檫@種方法不僅省時(shí)而且常常會(huì)意想不到的出彩。其實(shí)自己動(dòng)手制作方法十分簡(jiǎn)單。

拍攝照片

最簡(jiǎn)單的辦法就是抓起你的數(shù)碼相機(jī)去拍你身邊可見各種紋理,特別是那些你從來未曾考慮過會(huì)成為紋理的物件。比如,蛋糕的表面或者水池里的泡沫。如果你環(huán)顧四周,原來你不屑的那些東西也會(huì)是很棒的texture,像倒塌的建筑,水泥墻面,生銹的金屬,樹皮,風(fēng)化的木質(zhì)等。它們都是超級(jí)棒的樣本。而一件普通的數(shù)碼相機(jī),或者帶攝像頭的手機(jī)就已完全夠用。

在拍攝的時(shí)候,使用自動(dòng)模式,關(guān)掉閃光燈,耐心的照出清晰滿意的紋理效果,然后稍微進(jìn)行下后期處理即可使用。我們?nèi)巳硕伎梢猿蔀閳D片編輯。

掃描儀

另外一個(gè)很好的工具就是掃描儀。(在生活中比較少會(huì)用到,這里省略)

錦上添花

你還可以通過加工這些原料形成新的texture。在PS中使用圖層混合模式,你可以組合各種各樣的texture制作新的texture,看看 lostandtaken這個(gè)網(wǎng)站,也許不是難事。

信或不信,PS里有很多濾鏡同樣可以制作texture。比如噪點(diǎn)濾鏡,通過設(shè)置噪點(diǎn)值來獲取一種紋理效果,也許這正是你所需要的。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔