




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)-網(wǎng)頁(yè)布局正如您現(xiàn)在看到的,網(wǎng)頁(yè)的布局變得越來(lái)越重要。訪問(wèn)者不愿意再看到只注 重內(nèi)容的站點(diǎn)。雖然內(nèi)容很重要,但只有當(dāng)網(wǎng)頁(yè)布局和網(wǎng)頁(yè)內(nèi)容成功結(jié)合時(shí),這 種網(wǎng)頁(yè)或者站點(diǎn)才是招人喜歡的。 缺任何一面你都無(wú)法留住太過(guò) “挑剔”的訪問(wèn) 者。網(wǎng)頁(yè)布局的基本理念最開(kāi)始網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯,它就好像一張白紙,它需要揮灑你的設(shè)計(jì) 才華。假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣, 那么你可以在此基礎(chǔ)上加上自己的東西。 總結(jié)出來(lái)就是先鋒在線網(wǎng)站制作人員對(duì) 網(wǎng)頁(yè)布局的設(shè)計(jì)理念:.頁(yè)面尺寸:一般分辨率在800X 600的情況下,頁(yè)面顯示尺寸為780X 428象素;分辨率 在640X
2、480的情況下頁(yè)面顯示尺寸為 620 X 311象素;分辨率在1024X 768的情 況下,頁(yè)面顯示尺寸為1007X 600o分辨率越高頁(yè)面尺寸越大。我們經(jīng)常看到有 的網(wǎng)頁(yè)上的說(shuō)明:本網(wǎng)頁(yè)適合在1024X 768分辨率下瀏覽不要搞成這樣!永遠(yuǎn) 不要讓瀏覽者調(diào)整分辨率去適應(yīng)你的網(wǎng)頁(yè)尺寸, 而是應(yīng)該自動(dòng)適應(yīng)瀏覽者的分辨 率尺寸,這就是使用者(瀏覽者)優(yōu)先原則。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。 一般目前的瀏覽器的工具欄都可 以取消或者增加,那么當(dāng)你顯示全部的工具欄時(shí),和關(guān)閉全部工具欄時(shí),頁(yè)面的 尺寸是不一樣的。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中,向下拖動(dòng)頁(yè)面大概是惟一給網(wǎng)頁(yè)增加更多內(nèi)容 (尺寸)的 方法。但我想
3、提醒大家除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng), 否則不要讓訪 問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。雖然現(xiàn)在很多鼠標(biāo)都有滾輪設(shè)計(jì), 但是網(wǎng)頁(yè)的設(shè)計(jì)布局 是越少用到鼠標(biāo)越好。.整體形象:是圖形與文本的結(jié)合應(yīng)該是層疊有序的整體。 雖然,顯示器和瀏覽器都是矩 形,但對(duì)于頁(yè)面的造型,你可以充分運(yùn)用自然界中的其它形狀以及它們的組合: 矩形、圓形、三角形、菱形等輪廓。對(duì)于不同的形狀,它們所代表的意義是不同的。比如矩形代表著正式,規(guī)則, 你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型;圓形輪廓代表柔和,團(tuán)結(jié), 溫暖,安全等,許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型輪廓;三角形、梯形代 表著力量,權(quán)威,牢固,侵略等,許多大型的
4、商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三 角形為頁(yè)面整體造型;菱形代表著平衡,協(xié)調(diào),公平,一些交友站點(diǎn)常運(yùn)用菱形 作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義,但目前的網(wǎng)頁(yè)制作多數(shù)是接 合多個(gè)圖形設(shè)計(jì),只是其中某種圖形的比例可能占的多一些。.頁(yè)眉和頁(yè)腳:頁(yè)頭又稱為頁(yè)眉,頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù) 都顯示在頁(yè)眉里。這樣,訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。 頁(yè)頭是整個(gè)頁(yè) 面設(shè)計(jì)的關(guān)鍵,它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站 點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。 頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方,而頁(yè)腳是放置公司信息或者作者信息的地方,如:本網(wǎng)頁(yè)由某某制作
5、維護(hù).先鋒在線制作的網(wǎng)頁(yè)通常不在此處放置作者信息。.文本和圖片:文本在頁(yè)面中出現(xiàn)多數(shù)以行或者塊(段落)出現(xiàn),它們的擺放位置決定整個(gè)頁(yè) 面布局的可視性。以前因?yàn)轫?yè)面制作技術(shù)的局限,文本位置的靈活性非常小,而 隨著DHTML的興起,文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素,缺一不可。如何處理好圖片和文本的位置成了 整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。.多媒體除了文本和圖片,還有聲音,動(dòng)畫,視頻等等其它媒體。雖然它們不是經(jīng)常 能被利用到,但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起,它們?cè)诰W(wǎng)頁(yè)布局上也將變得很重要,但是 flash動(dòng)畫不利于搜索引擎的爬蟲(chóng)找到和識(shí)別。網(wǎng)頁(yè)設(shè)
6、計(jì)的原則一、使用者優(yōu)先:無(wú)論什么時(shí)候,不管是著手準(zhǔn)備設(shè)計(jì)網(wǎng)頁(yè)之前、正在設(shè)計(jì)之中或者已經(jīng)設(shè)計(jì) 完畢,有一個(gè)最高準(zhǔn)則就是:使用者優(yōu)先。 因?yàn)闆](méi)有使用者去光顧或者不方便使 用者瀏覽,任何自認(rèn)再好的網(wǎng)頁(yè)都是沒(méi)有意義的。二、考慮大多數(shù)人的連線狀況國(guó)內(nèi)互聯(lián)網(wǎng)還處于初級(jí)階段,帶寬不足,而且經(jīng)常塞車嚴(yán)重,所以設(shè)計(jì)網(wǎng)頁(yè) 時(shí)必需以這種普遍狀況為設(shè)計(jì)考量,不要放置一堆會(huì)加重網(wǎng)絡(luò)擁擠或讓人等得發(fā) 火的東西。完成之后最好自己透過(guò) Modem撥號(hào)上網(wǎng)的方式來(lái)親自測(cè)試一下。 三、考慮使用者的瀏覽器如果要讓所有的人都可以毫無(wú)障礙地觀看您的網(wǎng)頁(yè),那就最好使用所有瀏覽 器都可以閱讀的格式,不要使用只有部份瀏覽器可以支持的 HTM
7、L格式或程序 技巧。如果既想展現(xiàn)自己的高超技術(shù)又不想放棄一些潛在觀眾, 可以考慮在主頁(yè) 中設(shè)置幾種不同的觀賞模式選項(xiàng)(例如純文字模式、Frame模式、Java模式等等) 供瀏覽者自行選擇。四、內(nèi)容永遠(yuǎn)第一內(nèi)容可以是任何東西,包括文字、圖片、影像、聲音等等,但一定要跟這個(gè) 網(wǎng)站所要提供的訊息有關(guān)系。一個(gè)好的網(wǎng)站在進(jìn)行實(shí)際的 HomePage建置之前,首先應(yīng)考慮的就是上面的 四個(gè)要點(diǎn)。下面是在著手網(wǎng)頁(yè)制作過(guò)程中,所應(yīng)該掌握的幾個(gè)重點(diǎn)原則: 五、著手規(guī)劃、確定特色、鎖定目標(biāo)規(guī)劃時(shí)必須確定網(wǎng)站的性質(zhì)、內(nèi)容、目標(biāo)客戶、受眾,然后根據(jù)本身的條件 來(lái)設(shè)置范圍。網(wǎng)絡(luò)的特色是及時(shí)、新鮮、豐富、熱鬧,這是吸引大家
8、上網(wǎng)的條件, 如果本身?xiàng)l件強(qiáng)大,可以根據(jù)上述原則使自己網(wǎng)站成為一個(gè)全方位的信息提供 者,如果不足,就做單方面資源的提供者;止匕外,還可以在特殊議題或主題上加 以突出,進(jìn)一步鎖定目標(biāo)觀眾,四個(gè)字:揚(yáng)長(zhǎng)避短。六、首頁(yè)很重要雖然是廢話,還是要強(qiáng)調(diào)一下,因?yàn)樗蔷W(wǎng)站的第一印象。最好第一頁(yè)就有 很清楚的類別選項(xiàng),而且盡量符合人性化,讓參觀者可以很快找到需要的主題。 在設(shè)計(jì)上最好秉持干凈清爽的原則。 若無(wú)需要,盡量不要放置大型圖形文件或加 上不適當(dāng)?shù)某绦?,那樣?huì)增加下載時(shí)間,導(dǎo)致訪問(wèn)者失去耐心;注意畫面不要太 過(guò)雜亂無(wú)序。七、分類可以按主題分類、按性質(zhì)分類、按機(jī)關(guān)組織分類,或按人類思考直覺(jué)式地分 類等等,
9、一般而言,按人類的直覺(jué)式思考會(huì)比較親切。但無(wú)論哪一種分類方法, 都要讓使用者可以很容易找到目標(biāo)。 而且分類方法最好盡量保持一致,若要混用 多種分類方法也要掌握不讓使用者搞混的原則。此外,在每個(gè)分類選項(xiàng)的旁邊或 下一行,最好也加上這個(gè)選項(xiàng)內(nèi)容的簡(jiǎn)要說(shuō)明。八、互動(dòng)好網(wǎng)站必須與使用者有良好的互動(dòng), 包括在整個(gè)設(shè)計(jì)呈現(xiàn)、使用界面導(dǎo)引等 等,都應(yīng)掌握互動(dòng)的原則,讓使用者感覺(jué)他的每一步都確實(shí)得到適當(dāng)?shù)幕貞?yīng), 這 部分需要一些設(shè)計(jì)上的技巧。事實(shí)上,好的網(wǎng)站設(shè)計(jì)必須加上個(gè)人技巧、 經(jīng)驗(yàn)累 積以及軟硬件技術(shù)的配合運(yùn)用等。九、圖形應(yīng)用技巧圖形帶有醒目、吸引人以及傳達(dá)訊息的功能,好的圖形應(yīng)用可以讓網(wǎng)頁(yè)設(shè)計(jì) 增色不少
10、,但不當(dāng)?shù)膱D形應(yīng)用則會(huì)帶來(lái)反效果, 而其中又以大量使用無(wú)意義及大 型的圖形為最大敗筆。先鋒在線建議:應(yīng)盡量縮小或省略圖形。目前國(guó)內(nèi)的網(wǎng)絡(luò) 傳輸資源有限,使用圖形時(shí)一定要考慮傳輸時(shí)間的問(wèn)題。 根據(jù)經(jīng)驗(yàn)與統(tǒng)計(jì),使用 者可以忍受的最長(zhǎng)等待時(shí)間大約是 90秒鐘。因此必須依據(jù)HTML文件、圖形文 件的大小,考慮傳輸速率、延遲時(shí)間、網(wǎng)絡(luò)狀況,以及服務(wù)端與使用者終端的軟 硬件條件,估算網(wǎng)頁(yè)的傳輸與顯示時(shí)間。在圖形使用上,盡量采用一般瀏覽器均 可支持的壓縮圖形格式,例如 JPG與GIF等,可以節(jié)省傳輸時(shí)間。 十、網(wǎng)頁(yè)背景不少人喜歡在網(wǎng)頁(yè)加上背景圖案,認(rèn)為可以增加美感,但這樣會(huì)耗費(fèi)傳輸時(shí) 間,而且容易影響閱讀視
11、覺(jué),反而給使用者不好的印象。筆者建議,若沒(méi)有絕對(duì) 必要,最好避免使用背景圖案,保持干凈清爽的本文。但如果真的喜歡使用背景, 那么最好使用單一色系,而且要跟前景的文字可以明顯區(qū)別, 最忌諱使用花俏多 色的背景,這樣會(huì)嚴(yán)重混亂使用者的閱讀。H一、HTML格式的注意事項(xiàng)如果本身網(wǎng)站想讓別人可以透過(guò)搜尋站來(lái)找到,那么千萬(wàn)不要忘了在Title指令中加上可供搜尋的關(guān)鍵字。在PC系統(tǒng)下,文件的大小寫不用區(qū)分,但在UNIX系統(tǒng)下,則大小寫有區(qū)分,需要注意。十二、避免濫用技術(shù)好的技術(shù)運(yùn)用會(huì)讓網(wǎng)頁(yè)栩栩如生,嘆為觀止;但不當(dāng)?shù)募夹g(shù)則適得其反,反 而成為網(wǎng)頁(yè)設(shè)計(jì)的敗筆。首先使用技術(shù)時(shí)一定要考慮傳輸時(shí)間,不要成為他人觀
12、 看的沉重負(fù)擔(dān);其次,技術(shù)一定要與本身網(wǎng)站的性質(zhì)及內(nèi)容相配合,不要耍一大堆不相干的技術(shù)。Java小程序也是目前網(wǎng)絡(luò)上的常見(jiàn)技術(shù),它長(zhǎng)于動(dòng)態(tài)物象的呈 現(xiàn),雖然只要瀏覽器支持就可以動(dòng),但同樣,也需要考慮傳輸時(shí)間,以及電腦系 統(tǒng)負(fù)荷等問(wèn)題。最后,技術(shù)最好不要用得太過(guò)多樣而復(fù)雜, 有些人似乎不表現(xiàn)一 下自己就不快樂(lè),卻忽略了原則上應(yīng)適可而止才能恰到好處。 十三、經(jīng)常更新、維護(hù)大家都想看新鮮的東西,沒(méi)人對(duì)過(guò)時(shí)信息有興趣,所以資料一定要注意時(shí)效 性。先鋒在線建議,不妨每隔一陣子就對(duì)頁(yè)面設(shè)計(jì)做一次小翻新,時(shí)時(shí)保持新鮮感。最后,須考量的就是事后維護(hù)管理的問(wèn)題, 個(gè)人性質(zhì)的網(wǎng)站在維護(hù)管理上比 較簡(jiǎn)單,公司網(wǎng)站的
13、維護(hù)更新就更重要了。疏可走馬,密不容針在國(guó)畫中,有一句描述布局的話比較經(jīng)典,叫做“計(jì)白當(dāng)黑”,所謂“疏可走馬,密不容針”,就是說(shuō)空著的地方和著了墨的地方一樣,都是整體的組成部 分。一枝筆、一張紙,計(jì)黑當(dāng)白,也計(jì)白當(dāng)黑,用現(xiàn)代人的觀點(diǎn)說(shuō),無(wú)非是一種 藝術(shù)的造型與空間的分割。這是書家畫手孜孜追求的一種境界。可見(jiàn)留白是非常 重要的,網(wǎng)頁(yè)設(shè)計(jì)上要想空白的地方但看起來(lái)舒服,還是要下點(diǎn)功夫的。網(wǎng)頁(yè)上的空白部分,同其它頁(yè)面內(nèi)容如文本、圖片、動(dòng)畫等一樣,都是設(shè)計(jì) 制作網(wǎng)頁(yè)時(shí)要通盤斟酌的。設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)也就是在和瀏覽者做交流, 好的設(shè)計(jì)師能夠同瀏覽者進(jìn) 行心理的對(duì)話 一一不僅僅通過(guò)文字、圖片、動(dòng)畫.同時(shí)也借
14、助留白進(jìn)行表達(dá), 只有照顧了整個(gè)頁(yè)面空間的分配,留白才能表現(xiàn)出一定的活力,其實(shí)在排版布局 中,我們經(jīng)常在不知不覺(jué)地利用著留白, 試想如果頁(yè)面上充滿了圖片和文字,一 點(diǎn)空隙都不留,那就根本談不上韻律,利用留白來(lái)使頁(yè)面布局平衡,在一種不平 衡中營(yíng)造平衡,達(dá)到錯(cuò)落有致的效果,這樣就會(huì)使頁(yè)面生動(dòng)起來(lái)。我們應(yīng)該在網(wǎng)頁(yè)中通過(guò)留白的作用,使整個(gè)內(nèi)容排布得松緊有度。網(wǎng)站顏色搭配技巧顏色的使用在網(wǎng)頁(yè)制作中起著非常關(guān)鍵的作用,有很多網(wǎng)站以其成功的色彩 搭配令人過(guò)目不忘。但是對(duì)于剛開(kāi)始學(xué)習(xí)制作網(wǎng)頁(yè)的人來(lái)說(shuō), 往往不容易駕馭好 網(wǎng)頁(yè)的顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外,筆者認(rèn)為多學(xué)習(xí)一些著名 網(wǎng)站的用色方法,對(duì)
15、于我們制作美麗的網(wǎng)頁(yè)可以起到事半功倍的作用。所以,筆者總結(jié)了一些著名網(wǎng)站的顏色搭配方法,這些方法可以讓我們的學(xué)習(xí)少走彎路, 快速提高我們的網(wǎng)頁(yè)制作水平。一、網(wǎng)頁(yè)顏色原理和象征意義我們所有網(wǎng)頁(yè)上顏色,在 HTML下看到的是以顏色英文單詞或者十六進(jìn)制 的表示方法(如#000000表示為黑色)。不同的顏色有著不同的含義,給人各種 豐富的感覺(jué)和聯(lián)想。紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥、奔放、喜悅、莊嚴(yán)橙色代表光明、華麗、興奮、甜蜜、快樂(lè)黃色代表明朗、愉快、高貴、希望、富有、燦爛、活潑黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽、夜晚、沉著白色代表純潔、純真、樸素、神圣、明快、簡(jiǎn)單、潔凈藍(lán)色代表深遠(yuǎn)、永
16、恒、沉靜、理智、誠(chéng)實(shí)、寒冷、天空、清爽、科技綠色代表新鮮、平靜、和平、柔和、安逸、青春、植物、生命、生機(jī)灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞、莊重、沉穩(wěn) 紫色代表優(yōu)雅、高貴、魅力、自傲、浪漫、富貴棕色:大地、厚樸二、網(wǎng)頁(yè)顏色的使用風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)格,也有著自己不同的顏色。網(wǎng)站使用顏色大 概分為幾種類型:1、公司色在現(xiàn)在企業(yè)中,公司的CI形象顯得尤其重要,每一個(gè)公司的 CI設(shè)計(jì)必然要 有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色,同時(shí)形象宣傳、海報(bào)、廣告使用的顏色都和網(wǎng)站的顏色一致。 再比如國(guó)富投資公司的主 色調(diào)是C: 100%, M: 60%, Y:
17、 0%, K: 0%0這樣的顏色使用到網(wǎng)站上顯得色 調(diào)自然、底蘊(yùn)深厚。2、風(fēng)格色許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的 綠色,即充滿朝氣有不失自己的創(chuàng)新精神。 女性網(wǎng)站使用粉紅色的較多,大公司 使用藍(lán)色的較多這些都是在突出自己的風(fēng)格。3、習(xí)慣色這些網(wǎng)站的顏色使用很大一部分是憑自己的個(gè)人愛(ài)好,以個(gè)人網(wǎng)站較多使用,比如自己喜歡紅色、紫色、黑色等,在做網(wǎng)站的時(shí)候就傾向于這種顏色。每一個(gè) 人都有自己喜歡的顏色,因此這種類型稱為習(xí)慣色。三、色彩的基礎(chǔ)知識(shí)色彩五顏六色、千變?nèi)f化,我們平時(shí)所看到的白色光,經(jīng)過(guò)分析在色帶上可 以看到,它事實(shí)上包括紅、橙、黃、綠、青、藍(lán)、紫等七色,各
18、顏色間自然過(guò)渡。 其中,紅、黃、藍(lán)是三原色,三原色通過(guò)不同比例的混合可以得到各種顏色。色 彩有冷暖色之分,冷色(如藍(lán)色)給人的感覺(jué)是安靜、冰冷;而暖色(如紅色)給人 的感覺(jué)是熱烈、火熱。冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生意想不到的效果。色彩與人的心理感覺(jué)和情緒也有一定的關(guān)系, 利用這一點(diǎn)可以在設(shè)計(jì)網(wǎng)頁(yè)時(shí) 形成自己獨(dú)特的色彩效果,給瀏覽者留下深刻的印象。四、色彩搭配的原則色彩搭配既是一項(xiàng)技術(shù)性工作,同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作,因此, 設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外,還要遵循一定的藝術(shù)規(guī)律,從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。.特色鮮明一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格, 這樣才能顯
19、得個(gè)性鮮明,給瀏覽 者留下深刻的印象。.搭配合理網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇,但它又與其它平面設(shè)計(jì)不同,它在遵從 藝術(shù)規(guī)律的同時(shí),還考慮人的生理特點(diǎn),色彩搭配一定要合理,給人一種和諧、 愉快的感覺(jué),避免采用純度很高的單一色彩,這樣容易造成視覺(jué)疲勞。.講究藝術(shù)性網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng),因此它必須遵循藝術(shù)規(guī)律,在考慮到網(wǎng)站本身 特點(diǎn)的同時(shí),按照內(nèi)容決定形式的原則,大膽進(jìn)行藝術(shù)創(chuàng)新,設(shè)計(jì)出既符合網(wǎng)站 要求,又有一定藝術(shù)特色的網(wǎng)站。五、色彩搭配要注意的問(wèn)題.使用單色盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩, 以免產(chǎn)生單調(diào)的感覺(jué),但通過(guò)調(diào)整色彩 的飽和度和透明度也可以產(chǎn)生變化,使網(wǎng)站避免單調(diào)。.使用鄰近色所謂
20、鄰近色,就是在色帶上相鄰近的顏色,例如綠色和藍(lán)色,紅色和黃色就 互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂,易于達(dá)到頁(yè)面的和 諧統(tǒng)一。.使用對(duì)比色對(duì)比色可以突出重點(diǎn),產(chǎn)生了強(qiáng)烈的視覺(jué)效果,通過(guò)合理使用對(duì)比色能夠使 網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào),對(duì)比色作為點(diǎn)綴, 可以起到畫龍點(diǎn)睛的作用。.黑色的使用黑色是一種特殊的顏色,如果使用恰當(dāng),設(shè)計(jì)合理,往往產(chǎn)生很強(qiáng)烈的藝術(shù) 效果,黑色一般用來(lái)作背景色,與其它純度色彩搭配使用。.背景色的使用背景色一般采用素淡泊雅的色彩,避免采用花紋復(fù)雜的圖片和純度很高的色 彩作為背景色,同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。.色彩的數(shù)量
21、一般初學(xué)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)往往使用多種顏色, 使網(wǎng)頁(yè)變得很 花”,缺乏統(tǒng)一 和協(xié)調(diào),表面上看起來(lái)很花哨,但缺乏內(nèi)在的美感。事實(shí)上,網(wǎng)站用色并不是越 多越好,一般控制在三種色彩以內(nèi),通過(guò)調(diào)整色彩的各種屬性來(lái)產(chǎn)生變化網(wǎng)頁(yè)配色方案的選擇和色彩使用技巧要說(shuō)色彩的運(yùn)用,還是先談?wù)労诎谆疑实膽?yīng)用吧,因?yàn)楹诎谆疑适侨f(wàn)能 色,可以跟任意一種色彩搭配。當(dāng)你為某種色彩的搭配苦惱的時(shí)候, 不防試試用 黑白灰。當(dāng)你覺(jué)得兩種色彩的搭配不協(xié)調(diào),試試加入黑色,或者灰色,或許會(huì)有 意想不到的效果哦。對(duì)一些明度較高的網(wǎng)站,配以黑色,可以適當(dāng)?shù)亟档推涿鞫取0咨蔷W(wǎng)站用 的最普遍的一種顏色。很多網(wǎng)站甚至留出大塊的白色空間, 作為網(wǎng)
22、站的一個(gè)組成 部分。這就是留白藝術(shù)。很多設(shè)計(jì)性網(wǎng)站較多運(yùn)用留白藝術(shù)。留白,給人一個(gè)遐 想的空間,恰當(dāng)?shù)牧舭讓?duì)于協(xié)調(diào)頁(yè)面的均衡起到相當(dāng)大的作用。確定網(wǎng)站的主題色,一個(gè)網(wǎng)站不可能單一的運(yùn)用一種顏色,讓人感覺(jué)單調(diào), 乏味;但是也不可能將所有的顏色都運(yùn)用到網(wǎng)站中,讓人感覺(jué)輕浮,花哨。一個(gè) 網(wǎng)站必須有一種或兩種主題色,不至于讓客戶迷失方向,也不到于單調(diào),乏味。 所以確定網(wǎng)站的主題色也是設(shè)計(jì)者必須考慮的問(wèn)題之一。一個(gè)頁(yè)面盡量不要超過(guò)4種色彩,用太多的色彩讓人沒(méi)有方向,沒(méi)有側(cè)重。 當(dāng)主題色確定好以后,考慮其它配色時(shí),一定要考慮其它配色與主題色的關(guān)系, 要體現(xiàn)什么樣的效果。另外哪種因素占主要地位,是明度,純度
23、還是色相。先鋒在線的網(wǎng)頁(yè)使用藍(lán)色為主色,配以黃色,因?yàn)檫@兩種顏色的搭配最協(xié)調(diào) 也最豐富,可以有許多變化,穩(wěn)重優(yōu)雅中不失靈動(dòng),更與桔色的LOGO相得益彰,避免只有藍(lán)色產(chǎn)生冷冷清清的感覺(jué), 整體顯得很整潔很和諧,和諧就是恰到 好處。柔和的、明亮的、溫和的rrncc cerrrr fkcccrrcccc fnrnj ccccrrrrcccc rrrrrr ccrrccsrrrrc8ccc ccrr”FF99(S FFCSCS FFCCCCrrcecc txcstFFCC S3 CCfF99 CCCCCC9XCCC 99ZC99 ffCCCCFFCC99 FTFFCC 99CCCC爽朗的CCCCFF
24、fKCC CCFFFI柔和的.潔凈的.CCCCFF IFFFFr 9K(CCCCfFSi fFFFFF 91CCFF35CCCC FTFFFF CCFFSSCCFFCC FFIFFT MCCCCc99999 CCCCJ3txc9 w rrcccc,“”,x“9 rrrrrF 9XC8fF003l 333393 CCCCO)3KC3* F-FfOO 九6699般快的.華麗的.動(dòng)感的SSOOU FFOCO) CCOO33FKC33 999999 FfD019rnmo rrco33iu,2y,一八rrcrno gozqqFTO03B CCCCOO OC6699 COO ff$M3 “3”,ms13
25、rnroo ”“好 rrccc mcco)ooji” nifoo rrccoo網(wǎng)站風(fēng)格的確立一個(gè)人擁有自己獨(dú)特的風(fēng)格是一般人所沒(méi)有的, 這個(gè)叫做個(gè)性,如果有特殊 的需要,甚至可以變成另類,呵呵,總之就是會(huì)讓人注意到那種特別,若那個(gè)人 的個(gè)性風(fēng)格是正面的積極的,甚至?xí)饎e人的羨慕與注意或是贊賞。 就如同一 個(gè)網(wǎng)站,擁有別的網(wǎng)站所沒(méi)有的風(fēng)格,就會(huì)讓瀏覽者愿意多停留些時(shí)間, 細(xì)細(xì)品 嘗該站的內(nèi)容,甚至該站會(huì)得到多人的鼓勵(lì)與注目, 粗略的說(shuō),網(wǎng)站風(fēng)格可以從 以下幾個(gè)方向來(lái)探討,而每一項(xiàng)都是有關(guān)聯(lián)性的:1、色系:網(wǎng)頁(yè)的底色、文字字型、圖片的色系、顏色等等,更詳細(xì)的色板可參 考網(wǎng)頁(yè)配色方案的選擇和色彩使
26、用技巧。2、排版:表格、框架的應(yīng)用、文字縮排、段落等等,特別要注意錯(cuò)別字。3、窗口:窗口效果,例如:全屏幕窗口、特效窗口等。4、程序:網(wǎng)頁(yè)互動(dòng)程序,例如: ASP . PHP . XML. CGI等等。5、特效:讓網(wǎng)頁(yè)看起來(lái)靈動(dòng)活潑的各種應(yīng)用, 如:Flash . Java script . Java applets . DHTML等等。6、架構(gòu):目錄規(guī)劃、層次淺顯易懂、選單應(yīng)用等等原則就是適于瀏覽和閱讀。7、內(nèi)容:網(wǎng)站主題、整體實(shí)用性、文件關(guān)聯(lián)性、內(nèi)容切合度、是否有不必要的或不相關(guān)的檔案等等。8、走向:對(duì)于網(wǎng)站的未來(lái)規(guī)劃、網(wǎng)站整體內(nèi)容走向等。以上這些項(xiàng)目都與網(wǎng)頁(yè)風(fēng)格有密切的關(guān)系, 網(wǎng)頁(yè)的風(fēng)格
27、不是某一項(xiàng)相同,網(wǎng) 站就是有整體感,而是要各項(xiàng)目的配合應(yīng)用,才能達(dá)到完美的網(wǎng)站風(fēng)格設(shè)計(jì)。在中國(guó),很多設(shè)計(jì)師喜歡模仿,中國(guó)五千年傳統(tǒng)文化里我們畫畫練字多是采 用臨摹描白等方法,老外叫 COPY(拷貝),是可以理解的,所謂見(jiàn)賢思齊就是 看到優(yōu)秀的人就希望自己也能象他一樣,臨摹的和拷貝的自然也通常是優(yōu)秀作 品。但作為網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該找到自己的定位, 就是要針對(duì)不同內(nèi)容來(lái)策劃網(wǎng)站設(shè) 計(jì),以自己的領(lǐng)悟理解設(shè)計(jì)出最適合于此的風(fēng)格。最重要的就是多做網(wǎng)站了,最好是不同形式內(nèi)容的網(wǎng)站,還要經(jīng)常對(duì)優(yōu)秀站點(diǎn)加以分析,更有利于在自己網(wǎng)頁(yè) 設(shè)計(jì)工作中進(jìn)行系統(tǒng)的規(guī)劃。韓國(guó)網(wǎng)站的設(shè)計(jì)構(gòu)思韓國(guó)網(wǎng)站設(shè)計(jì)的色彩搭配一直都非常大膽,
28、冷色暖色常常不按常理搭配,視 覺(jué)沖擊很強(qiáng),色彩豐富但卻不花哨,顏色突出卻并不刺眼,可充分說(shuō)明設(shè)計(jì)者對(duì) 色彩搭配及分布的了解。以下是韓國(guó)網(wǎng)頁(yè)設(shè)計(jì)中常用的色譜, 但不是全部,只是 一小部分:nuniEDi hFiiniEHE符叱石白DECimHLLIGHT 占HXSLUE浸天藍(lán)色7CEFn1眄三口瓦己曰口roDBER BLUE道奇蘭fllElDFFmoiuu定第mEDiumsuFiTEeLUE適中板巖暗藍(lán)用/口肖日DEEP SHyBLUE深天藍(lán)ttDUBFFFUlm1互TURQUEIEE綠寶石ttUIDECIDD&U,.22UDPINK耕紅ttFFEDCB西唐已口引ERIIHIEDH猩紅#DCHh
29、IKONCLB 口HOT PIW:熱情粉紅”的:&打把5 J 口5,1曲fflRGhTR洋紅4FFCCFF三品5fiLUEVIDET紫羅蘭藍(lán)色ttfiraua5IELLD1U純黃FFFFnnm己寫,衛(wèi)己互一口GOLD金色FFD70O5521541DRRRQF1RIHESE深橙色PPG1SCOlRALL珊瑚KFF7FS己九日口由下圖我們可以學(xué)到使用漸變色的圖片可以使圖形乃至網(wǎng)頁(yè)更有層次感立體感,無(wú)規(guī)則的布局中又有充分的規(guī)則性, 給人一種深沉而不俗氣,穩(wěn)重而不呆 板的感覺(jué),沒(méi)有太多顏色搭配,色彩不在多而在于精,看似乎平無(wú)奇又不失時(shí)尚, flash動(dòng)畫、欄目導(dǎo)航、logo 一個(gè)都不少,看起來(lái)很象中國(guó)
30、人設(shè)計(jì)的網(wǎng)頁(yè),仔細(xì) 一看又不一樣,里面有精美矢量圖的運(yùn)用以及層次分明的疊加設(shè)計(jì):下圖構(gòu)思巧妙,渾然一體,采用漂亮的活潑靈動(dòng)的黃色系為主色調(diào),整體是 一個(gè)可愛(ài)得冒泡兒的啤酒杯,與企業(yè)品牌相得益彰,巧妙地將LOGO和店名放在醒目位置,結(jié)構(gòu)緊湊而不擁擠,左側(cè)幾個(gè)泡泡更具匠心,不但使整體布局更加 生動(dòng),與商家品牌更貼切,給人一種眼前一亮的視覺(jué)沖擊,雖然是商業(yè)網(wǎng)站卻做 得很脫俗:韓國(guó)網(wǎng)頁(yè)設(shè)計(jì)大多干凈整潔,給人以清新明快之感,頁(yè)面層次豐富,不按常 規(guī)布局,動(dòng)畫以及BANNER個(gè)性突出,大量運(yùn)用疊加效果,風(fēng)格特異,充分體 現(xiàn)設(shè)計(jì)師的創(chuàng)意和制作功底,非常值得我們學(xué)習(xí)和借鑒,如果大家還沒(méi)看過(guò)癮, 可以到我站的韓
31、國(guó)網(wǎng)頁(yè)模板查看更多經(jīng)典韓國(guó)網(wǎng)頁(yè)樣例。Google官方的網(wǎng)頁(yè)設(shè)計(jì)建議Google官方對(duì)于此問(wèn)題的闡述原文如下:Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.Create a useful, information-rich site and write pages that clearly and accu
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度生態(tài)門頭制作與環(huán)保認(rèn)證服務(wù)合同
- 科技創(chuàng)新中心項(xiàng)目技術(shù)可行性分析
- 12 盤古開(kāi)天地 教學(xué)設(shè)計(jì)-2024-2025學(xué)年語(yǔ)文四年級(jí)上冊(cè)統(tǒng)編版
- 地方高校管理體制與機(jī)制改革策略
- 二零二五年度主題酒店總經(jīng)理專項(xiàng)聘用服務(wù)協(xié)議
- 二零二五年度貨車?yán)浥c貨主貨運(yùn)車輛維修合同
- 二零二五年度水稻育秧與農(nóng)業(yè)環(huán)境保護(hù)合作合同
- 餐飲產(chǎn)業(yè)的資本運(yùn)作與投資趨勢(shì)
- 2025年度集體林權(quán)流轉(zhuǎn)合同范本(林業(yè)生態(tài)保護(hù)補(bǔ)償)
- 第四章 光(大單元整體教學(xué)設(shè)計(jì))高二物理同步備課系列(人教版2019選擇性必修第一冊(cè))
- 北京市西城區(qū)2023-2024學(xué)年五年級(jí)上學(xué)期期末數(shù)學(xué)試卷
- 附屬醫(yī)院神經(jīng)內(nèi)科中長(zhǎng)期發(fā)展規(guī)劃五年發(fā)展規(guī)劃
- 營(yíng)養(yǎng)質(zhì)控中心管理制度
- 春節(jié)習(xí)俗中的傳統(tǒng)茶文化與茶藝
- 醫(yī)療文書病歷書寫規(guī)范培訓(xùn)教學(xué)課件
- 某美術(shù)館物業(yè)管理方案
- 土壤侵蝕分類分級(jí)標(biāo)準(zhǔn)SL190一2007
- 【《幼兒園安全教育研究文獻(xiàn)綜述》3300字】
- 網(wǎng)店運(yùn)營(yíng)管理(第二版)課件 1-網(wǎng)店運(yùn)營(yíng)基本原理
- 中醫(yī)中風(fēng)病(腦梗死)診療方案
- 網(wǎng)絡(luò)安全架構(gòu)設(shè)計(jì)和網(wǎng)絡(luò)安全設(shè)備部署
評(píng)論
0/150
提交評(píng)論