網(wǎng)頁設(shè)計(jì)理論知識

第頁網(wǎng)頁設(shè)計(jì)理論知識〔網(wǎng)頁〔制定〕〕理論知識

以下就是網(wǎng)頁制定理論知識等等的介紹，希望為您帶來幫助。

網(wǎng)頁是向網(wǎng)站訪問者傳達(dá)信息的人機(jī)交互界面，是網(wǎng)站的重要組成部分之一，是網(wǎng)站中的信息載體。網(wǎng)頁以超文本和超媒體技術(shù)為基礎(chǔ)，通過超文本技術(shù)可以在網(wǎng)頁中嵌入超級鏈接，在瀏覽器中通過單擊網(wǎng)頁中的超級鏈接即可跳轉(zhuǎn)到存儲于其他任何地方的網(wǎng)頁。

1.網(wǎng)頁的功能即信息傳遞功能和信息的交互功能。

2.網(wǎng)站的分類：依據(jù)網(wǎng)站的性質(zhì)我們可以把網(wǎng)站分為幾大類，門戶類網(wǎng)站，游戲類網(wǎng)站，搜索類網(wǎng)站，企業(yè)類網(wǎng)站，電子商務(wù)類網(wǎng)站，政府、組織類網(wǎng)站，個(gè)人網(wǎng)站。

門戶網(wǎng)站:為訪問者提供一站式的服務(wù)模式以及提供全面、綜合網(wǎng)絡(luò)信息或?qū)I(yè)的網(wǎng)絡(luò)信息等功能的web網(wǎng)站。門戶類又分綜合類門戶網(wǎng)站和專業(yè)性門戶類網(wǎng)站。綜合類門戶網(wǎng)站最大的特點(diǎn)是可以對龐大的信息進(jìn)行整合，分類，是訪問者能從中找到所必須要的信息。這類網(wǎng)站在網(wǎng)站首頁中提供了搜索引擎，電子郵件服務(wù)，聊天室，娛樂資詢相關(guān)下載等服務(wù)功能，更對各種不同類別的的信息內(nèi)容進(jìn)行分類。專業(yè)性門戶網(wǎng)站的特點(diǎn)是為那些在某個(gè)領(lǐng)域或行業(yè)具有專業(yè)性和權(quán)威性的企業(yè)提供信息發(fā)布平臺。這類站點(diǎn)是為專門研究某個(gè)領(lǐng)域的訪問群來提供專業(yè)信息，規(guī)模不一定很大，但信息針對性非常強(qiáng)。

游戲類網(wǎng)站:商業(yè)性網(wǎng)站中最富有活力的網(wǎng)站類型之一電子游戲在網(wǎng)絡(luò)娛樂服務(wù)中有著龐大的市場空間。也最具有市場價(jià)值。

搜索類網(wǎng)站：以提供搜索功能為特點(diǎn)。訪問者在搜索信息時(shí)，只要輸入所要查找的信息的關(guān)鍵字，搜索引擎就可以把它與關(guān)鍵字有關(guān)的信息查找出來供訪問者選擇。

企業(yè)類網(wǎng)站：為宣揚(yáng)企業(yè)產(chǎn)品，展示企業(yè)形象，提供在線服務(wù)，發(fā)布企業(yè)信息等目的而建立的網(wǎng)站。

電子商務(wù)類網(wǎng)站:從分利用網(wǎng)絡(luò)多媒體技術(shù)，可以讓訪問者從網(wǎng)站了解所必須要購買物品的性能，價(jià)格信息。特別是網(wǎng)站中的商品可能因?yàn)檫M(jìn)貨渠道或銷售方式等與實(shí)體購物市場不同，所以在價(jià)格上有更大優(yōu)勢。

政府類網(wǎng)站：主要以個(gè)人以及企業(yè)為服務(wù)對象，以為民服務(wù)，方便百姓辦事提升行政辦事效率為目的，提供權(quán)威的政府信息發(fā)布，行政服務(wù)和便民信息查詢。

個(gè)人類網(wǎng)站：制依據(jù)自己的興趣愛好而制定的網(wǎng)站它包括信息發(fā)布型和個(gè)人形象網(wǎng)兩大類信息發(fā)布個(gè)人網(wǎng)站的信息內(nèi)容豐富，制必須要花大量的時(shí)間和精力，在資金上有較多投入網(wǎng)站建設(shè)者必須要懂得網(wǎng)頁制作，html語言，圖形處理，網(wǎng)頁發(fā)布等相關(guān)技術(shù)。

網(wǎng)頁制定理論之如何使用紋理效果

紋理VS圖案

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

紋理的功能

人們喜愛在網(wǎng)頁中使用紋理，基于制定的理由絕不能僅僅因?yàn)?看起來很美'就這樣去做，而應(yīng)該基于滿足某種功能，而紋理的使用目的大部分都會在于加強(qiáng)網(wǎng)頁的層次和視覺深度。還是讓我們來看看紋理具體有哪些功能吧。

吸引用戶點(diǎn)擊操作

圖標(biāo)、按鈕、標(biāo)題等元素都能運(yùn)用上紋理。它能吸引用戶對相應(yīng)元素進(jìn)行點(diǎn)擊操作。這或許就是紋理運(yùn)用盛行的原因。

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

這里對LOGO使用紋理有兩種方式：第一是為你的LOGO使用紋理而搭配清楚背景，第二是堅(jiān)持清楚LOGO而運(yùn)用紋理背景。

加強(qiáng)信息的視覺展示規(guī)則

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

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

同時(shí)，紋理要完美搭配網(wǎng)站中的風(fēng)格和主題，例如手工的網(wǎng)站就搭配布紋，繪畫的網(wǎng)站搭配紙紋。所有這些元素都可以通過某種邏輯法則去體現(xiàn)網(wǎng)站的內(nèi)容，強(qiáng)化整體的信息展示。

營造氛圍和凸顯個(gè)性

現(xiàn)在，越來越多的客戶喜愛自己的網(wǎng)站能用界面制定來傳達(dá)自身更多的信息，他們希望網(wǎng)站凸顯出自己的個(gè)性，發(fā)揮品牌效應(yīng)。紋理或許能在某種程度上達(dá)到這一預(yù)期。

上面這個(gè)網(wǎng)頁可說是這方面的領(lǐng)銜之作。運(yùn)用紋理去展示頭像，每個(gè)元素都用紋理發(fā)揮，配合也非常協(xié)調(diào)。沒有紋理，我想這個(gè)網(wǎng)頁的制定也可能沒有這樣出色。

確實(shí)，紋理為網(wǎng)頁界面制定增加一種"捉摸不定'的感覺，它帶來一種視覺上的新鮮感，同時(shí)，也為網(wǎng)頁增加了懷舊的魅力。

使用紋理的TIPS

雖然紋理的使用帶來很多好處，但與此同時(shí)，使用時(shí)也有很多必須要注意的陷阱。

堅(jiān)持易讀性

易讀性是一個(gè)網(wǎng)頁必須要維持的底線，就算是做得再美麗的網(wǎng)頁，如果易讀性不佳，用戶也不會持續(xù)使用下去。一定要避免就像如下列圖所示的這種狀況。

有克制的使用紋理

在印刷品制定時(shí)，紋理效果通常都比較夸張。而在網(wǎng)頁中，我們就必須要有所克制，不要大面積的使用，以免干擾到用戶對主要內(nèi)容的注意力。

學(xué)習(xí)就是升級

在使用紋理時(shí)，多進(jìn)行嘗試。只有經(jīng)過試用后，你才知道最終效果。把紋理放置于你不曾想到的地方，或許就會有不同的發(fā)現(xiàn)。

有目的性地使用它

在為實(shí)際項(xiàng)目進(jìn)行制定前，你也必須要大量的學(xué)習(xí)。通常，我們在習(xí)作時(shí)，往往會因?yàn)槟硞€(gè)紋理好看就用上。這不利于制定的最終目的。如果你無法推斷這個(gè)元素為何使用紋理的目的，那就放棄這樣做。

有目的性且意味著有重點(diǎn)，它的出現(xiàn)是為了烘托主題。如果過度使用造成搶鏡的狀況，那么也要放棄紋理。同時(shí)，我建議盡量使用比較弱的紋理圖案，假設(shè)隱假設(shè)現(xiàn)，這樣的效果會讓紋理的優(yōu)勢發(fā)揮更好。

為最終效果服務(wù)

經(jīng)驗(yàn)告訴我們，制定時(shí)玩紋理玩得過火是常有之事，而隨時(shí)記得最終我們要實(shí)現(xiàn)的效果就能克服這一點(diǎn)。比如，我們制定一個(gè)網(wǎng)頁，運(yùn)用上滿意的弱紋理背景后，如果已經(jīng)符合了最終效果，那就持續(xù)制定下一個(gè)元素。

平常收集資源

為了在制定時(shí)節(jié)省大量時(shí)間，相信我，在平常做好后備資源是最好的解決方式了。那種下載、收集資源的時(shí)間如果用于制定過程，恐怕會讓你面臨時(shí)限的壓力。

使用蒙版

紋理可以結(jié)合蒙版一起使用，可以創(chuàng)作出更多的新奇效果。

不要為了縮短加載時(shí)間而在紋理品質(zhì)上打折扣

有很多縮短頁面加載時(shí)間的辦法，因此，紋理還是要堅(jiān)持高保真。使用無縫的重復(fù)小圖案作為紋理平鋪開來是最正確的選擇，這樣就能避免了大的圖片加載。

使用紋理的理由

當(dāng)然，選用某個(gè)紋理，盡量選擇和你整個(gè)制定存在某種內(nèi)部聯(lián)系的紋理。就好像我在該篇文章中的一個(gè)例子，釣魚俱樂部的網(wǎng)站，那么他們就大量使用了船木作為背景紋理。

網(wǎng)頁制定之色彩學(xué)問

網(wǎng)頁制定涉及到的技術(shù)至關(guān)重要，它實(shí)質(zhì)上更多的是一門藝術(shù)。出色的網(wǎng)頁制定能夠給用戶留下深入的印象，包括整個(gè)頁面的布局，圖片展示以及內(nèi)容編輯等，都影響著用戶對網(wǎng)頁的評價(jià)，但是所有的網(wǎng)頁元素制定都離不開色彩的搭配學(xué)問，因?yàn)榫W(wǎng)站的整體格調(diào)，版面效果等是由顏色決定的，也是用戶產(chǎn)生視覺共鳴的第一要素。

我們常常所說的一個(gè)新穎充滿創(chuàng)意的網(wǎng)頁往往不是因?yàn)樗娴挠卸嗵貏e，而是因?yàn)樗蒙蚀钆涓淖兞巳藗儗λ恼w印象，帶給用戶的視覺沖擊力極深引起的驚嘆。有時(shí)候，光有一個(gè)不錯(cuò)的制定形態(tài)是很難得到用戶的肯定的，只有用色彩方案賦予網(wǎng)頁該有的品質(zhì)才是一個(gè)好的網(wǎng)頁制定。

色彩搭配雖然是一種抽象的東西，但它關(guān)于網(wǎng)頁制定來說并不是那么困難，相信大多數(shù)用戶對某種網(wǎng)站的主題和顏色的印象已經(jīng)形成了一種定向，搭配起來容易得多。即使沒有足夠的理論知識和經(jīng)驗(yàn)，甚至是色感，只要遵循以下幾個(gè)方面，就可在網(wǎng)頁上運(yùn)用自如。

網(wǎng)頁配色選擇

用戶對顏色的認(rèn)知絕大多數(shù)是類似的，無論是哪一類的網(wǎng)頁，如果太過花哨不僅不會帶給用戶視覺的享受，還會干擾視覺，那么很顯然，網(wǎng)頁在顯眼的顏色方面配色最好不要超過三種，以免造成頁面視覺體驗(yàn)的混亂。

許多人認(rèn)為不懂顏色搭配，就應(yīng)找專業(yè)的顏色搭配來參照，從網(wǎng)絡(luò)上搜集大量的配色工具來幫助制定，事實(shí)上這種方式會阻礙配色思維的發(fā)揮，甚至被誤導(dǎo)。

關(guān)于主色，只要選擇色相差異顯然的，在對比色、臨近色、冷暖色調(diào)之間能夠達(dá)到互補(bǔ)就可以了，或者在自己選擇好的主色中參照類似網(wǎng)站案例，就可以簡單完成配色。

靈活運(yùn)用色調(diào)變幻技巧

在選擇的顏色當(dāng)中，善用透明度、柔光，顏色加深等方法來調(diào)試顏色的搭配，哪怕只選擇黑白色，也可通過這種方式讓顏色看起來不失光彩。

給顏色加上特效

顏色特效包括陰影，扭曲漸變，高光，線條映襯等，注重顏色的細(xì)節(jié)往往還是配色的成功之道，顏色種類無論單調(diào)，但在特效上運(yùn)用得當(dāng)，也能彰顯網(wǎng)頁藝術(shù)特性。

當(dāng)然，在網(wǎng)頁制定選擇色彩之前，一定要先綜合考量網(wǎng)站的特性，前期工作固然不可忽略，免得最終制定的效果與用戶的期待不相符，造成用戶體驗(yàn)不佳的結(jié)果。

說到這個(gè)，也即是網(wǎng)站的定位和受眾目標(biāo)的合計(jì)，例如：科技類的網(wǎng)站用戶印象中都是充滿神秘的，那么黑色，藍(lán)色估計(jì)是比較容易接受的網(wǎng)站風(fēng)格，最好迎合用戶的認(rèn)知習(xí)慣;再如，生態(tài)環(huán)保類網(wǎng)站，用戶可能首先想到的是綠色，那就不能選擇出入太大的顏色作為主色調(diào)。

網(wǎng)頁制定配色學(xué)問，說難不難，說其容易也不簡單，選擇對的顏色搭配或許是成功的一半，它能抓住用戶對網(wǎng)站的第一感覺，傳遞信任感，讓用戶更容易記住。

網(wǎng)頁色彩搭配的技巧

文章寫到這里，有心急的網(wǎng)友要問了：到底用什么色彩搭配好看呢?你能不能推舉幾種配色方案?別急，這里有一點(diǎn)技巧，可以幫助你迅速成為調(diào)色大師:)

1.用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。

2.用兩種色彩。先選定一種色彩，然后選擇它的對比色(在〔photoshop〕里按ctrl+shift+I)。我的主頁用藍(lán)色和黃色就是這樣確定的。整個(gè)頁面色彩豐富但不花稍。

3.用一