第五章

網(wǎng)站頁面設(shè)計(jì)第五章網(wǎng)站頁面設(shè)計(jì)5.1主頁設(shè)計(jì)5.2欄目與版面設(shè)計(jì)5.2.1欄目設(shè)計(jì)5.2.2版面設(shè)計(jì)5.3頁面可視化設(shè)計(jì)5.3.1色彩設(shè)計(jì)5.3.2字體設(shè)計(jì)5.3.3導(dǎo)航設(shè)計(jì)第五章網(wǎng)站頁面設(shè)計(jì)5.3.4圖像設(shè)計(jì)5.3.5動畫設(shè)計(jì)5.1主頁設(shè)計(jì)確定主頁的功能模塊網(wǎng)站名稱、廣告條、主菜單新聞、搜索、友情鏈接聯(lián)系及版權(quán)信息等主頁版面設(shè)計(jì)勾畫草圖→軟件實(shí)現(xiàn)處理技術(shù)上的細(xì)節(jié)風(fēng)格、鏈接、圖形、動畫、文字、速度企業(yè)的名稱、標(biāo)語、徽號或圖像廣告條通常應(yīng)體現(xiàn)出企業(yè)網(wǎng)站的主題主菜單視覺興趣點(diǎn)—通常是一幅圖片、表示企業(yè)最新的產(chǎn)品、最新的服務(wù)等最新消息搜索友情鏈接郵件列表計(jì)數(shù)器用戶登錄……版權(quán)信息、聯(lián)絡(luò)信息、電子郵件地址頁頭內(nèi)容頁頁尾5.2.2版面設(shè)計(jì)版面布局原則主次分明，中心突出大小搭配，相互呼應(yīng)圖文并茂，相得益彰版面布局常用方法正常平衡異常平衡對比凝視空白圖片解說正常平衡異常平衡對比凝視空白圖片說明版面布局步驟輪廓設(shè)計(jì)布局設(shè)計(jì)細(xì)節(jié)設(shè)計(jì)版面布局形式“T”形結(jié)構(gòu)布局“口”形布局“三”形布局對稱對比布局“國”或“同”字形拐角形框架布局Flash動畫型，封面型主頁欄目首頁內(nèi)容網(wǎng)頁5.3頁面可視化設(shè)計(jì)網(wǎng)頁可視化設(shè)計(jì)要確保命名簡潔、導(dǎo)覽性好、易讀、視覺效果設(shè)計(jì)合理、下載速度快等原則。5.3.1色彩設(shè)計(jì)色彩的基本知識三原色原理色彩搭配色彩的心理感覺色彩的對比色彩的區(qū)域大小和形狀色彩的位置網(wǎng)頁色彩設(shè)計(jì)網(wǎng)頁配色的基本方法底色和圖形色整體色彩顏色的平衡配色時(shí)要有重點(diǎn)色漸變色的調(diào)和統(tǒng)調(diào)配色分割配色網(wǎng)頁色彩設(shè)計(jì)網(wǎng)頁內(nèi)容的色彩網(wǎng)頁標(biāo)題色導(dǎo)航菜單色側(cè)欄色頁腳色網(wǎng)頁色彩搭配的技巧暖色調(diào)冷色調(diào)對比色調(diào)透視色輪色輪是我們認(rèn)識顏色關(guān)系的工具。沒有某一種顏色是所謂的“好”或“壞”。只有當(dāng)與其它顏色搭配作為一個(gè)整體時(shí)，我們才能說，是協(xié)調(diào)或者不協(xié)調(diào)。色輪告訴我們顏色之間的相互的關(guān)系。色輪由12種基本的顏色組成。首先包含的是三原色（Primarycolors），即藍(lán)、黃、紅。原色混合產(chǎn)生了二次色（Secondarycolors），用二次色混合，產(chǎn)生了三次色（tertiarycolors）。原色是色輪中所有顏色的“父母”。在色輪中，只有這三種顏色不是由其它顏色調(diào)合而成。從后面的圖可以看出，三原色在色環(huán)中的位置是平均分布的。二次色所處的位置是位于兩種三原色一半的地方。每一種二次色都是由離它最近的兩種原色等量調(diào)合而成的顏色。三次色是由相鄰的兩種二次色調(diào)合而成。每一種顏色都擁有部分相鄰的顏色，如此循環(huán)成一個(gè)色環(huán)。共同的顏色是顏色關(guān)系的基本要點(diǎn)，必須對此有深入的了解。在這七種顏色中，都共同擁有藍(lán)色。越遠(yuǎn)的顏色（如草綠色）含有的藍(lán)色就越少。綠色及紫色這兩種二次色都含有藍(lán)色。4.4網(wǎng)頁中的色彩在這七種顏色中，都擁有黃色。同樣的，離得越遠(yuǎn)的顏色，擁有的黃色就越少。綠色及橙色這兩種二次色都含有黃色。4.4網(wǎng)頁中的色彩在這七種顏色中，都擁有紅色。向兩邊散開時(shí)，紅色就含得越少。橙色及紫色這兩種二次色都含有紅色。顏色有明暗之分——或者稱為顏色數(shù)值。為了顯示顏色的明暗，所以色輪有多個(gè)環(huán)。兩個(gè)外圍的大環(huán)是暗色（Shadowcolors），里面兩個(gè)小環(huán)是明色(tintcolors)。色輪有五個(gè)同心環(huán)組成，從暗到亮——暗色處于大環(huán)，明色處于小環(huán)，而中間是顏色的基本色相。從圖中我們可以看出，處于右邊的暗色就是加上黑色，而左邊的明色則是加上白色。五個(gè)圓環(huán)已經(jīng)清楚表示了顏色如何由暗到亮的過程。但這種明色及暗色的關(guān)系只是相對而言。下面我們列出六種基本的顏色關(guān)系。每一種顏色關(guān)系都可以有無數(shù)種搭配的可能，當(dāng)你掌握它們時(shí)，你對顏色的視野才會顯得開闊。單色搭配（Monochromatic）一種色相由暗、中、明三種色調(diào)組成。這就是單色。單色搭配上并沒有形成顏色的層次，但形成了明暗的層次。這種搭配在設(shè)計(jì)中應(yīng)用時(shí)，出來的效果永遠(yuǎn)不錯(cuò)，其重要性也可見一斑。類比色搭配（Analogous）相鄰的顏色我們稱為類比色。類比色都擁有共同的顏色。這種顏色搭配產(chǎn)生了一種令人悅目、低對比度的和諧美感。類比色非常豐富，在設(shè)計(jì)時(shí)應(yīng)用這種搭配同樣讓你輕易產(chǎn)生不錯(cuò)的視覺效果。4.4網(wǎng)頁中的色彩共同顏色是黃色及紅色補(bǔ)色搭配（Complement）在色輪上直線相對的兩種顏色稱為補(bǔ)色。補(bǔ)色形成強(qiáng)列的對比效果，傳達(dá)出活力、能量、興奮等意義。補(bǔ)色要達(dá)到最佳的效果，最好是其中一種面積比較小，另一種比較大。比如在一個(gè)藍(lán)色的區(qū)域里搭配橙色的小圓點(diǎn)。4.4網(wǎng)頁中的色彩橙色與藍(lán)色互為補(bǔ)色分裂補(bǔ)色（Splitcomplement）如果我們同時(shí)用補(bǔ)色及類比色的方法來確定的顏色關(guān)系，就稱為分裂補(bǔ)色。這種顏色搭配既具有類比色的低對比度的美感，又具有補(bǔ)色的力量感。形成了一種既和諧又有重點(diǎn)的顏色關(guān)系。4.4網(wǎng)頁中的色彩這樣的搭配使紅色顯得更突出原色搭配（Primary）除了在一些兒童的產(chǎn)品中，三原色同時(shí)使用是比較少見的。但是，無論是在中國還是在美國的文化中，紅黃搭配都是非常受歡迎。紅黃搭配應(yīng)用的范圍很廣——從快餐店到加油站，我們都可以看見這兩種顏色同時(shí)在一起。藍(lán)紅搭配也很常見，但只有當(dāng)兩者的區(qū)域是分離時(shí)，才會顯得吸引人，如果是緊鄰在一起，則會產(chǎn)生沖突感。二次色搭配（Secondary）二次色之間都擁有一種共同的顏色——其中兩種共同擁有藍(lán)色，兩種共同擁有黃色，兩種共同擁有紅色——所以它們輕易能夠形成協(xié)調(diào)的搭配。如果三種二次色同時(shí)使用，則顯得很舒適、吸引，并具有豐富的色調(diào)。它們同時(shí)具有的顏色深度及廣度，這一點(diǎn)在其它顏色關(guān)系上很難找到。考考你下面這四個(gè)封面中，都各自運(yùn)用了我們在上面所述的其中一種顏色搭配。你能說出它們是運(yùn)用了哪一種顏色搭配嗎？（提示：眼睛只集中在一些大區(qū)域的顏色，不要理會細(xì)微的顏色區(qū)域，也不用理會黑白兩種顏色）其實(shí)運(yùn)用色輪分析后，很容易得到答案。A:單色搭配B:補(bǔ)色搭配C:三原色搭配D:類比色搭配5.3.2字體設(shè)計(jì)一般情況下瀏覽器通過中文GB2312字符集（GB簡體碼）和英文ISO-8859-1字符集來解釋和翻譯網(wǎng)頁源代碼，其他還有BIG5、UTF-8、Shift-JIS、EUC、KOI8-2等字符集，分別用于不同的字體顯示。瀏覽器定義的默認(rèn)字體是中文宋體和英文TimesNewRoma字體，這兩種字體可以在任何操作系統(tǒng)和瀏覽器里正確顯示。5.3.3導(dǎo)航設(shè)計(jì)突出超鏈接鏈接層次不宜過深“上一頁、下一頁，轉(zhuǎn)到N