文章出處：天極網(wǎng)頁面設(shè)計(jì)原則 Web作為出版物的一種，同其他出版物如報(bào)紙，雜志等在設(shè)計(jì)上有許多共同之處，也要遵循一些設(shè)計(jì)的基本原則，不同之處在于每章提到的Web的“非所見即所得”特性和交互性。因此，熟悉一些設(shè)計(jì)的基本原則，再對Web的特殊性作一些考慮，便不難設(shè)計(jì)出美觀大方的頁面來。如果有美術(shù)設(shè)計(jì)基礎(chǔ)，對Web頁面的設(shè)計(jì)會很有幫助。如果不具備這方面的背景知識，那么下面的一些原則將會對有所幫助。設(shè)計(jì)的3C原則 所謂3C原則是指簡潔、一致性、好的對比度。Web頁面設(shè)計(jì)需要遵循這三條原則。簡潔 設(shè)計(jì)并不再現(xiàn)具體的物象和特征，它要表達(dá)的是一定的意圖和要求，在適當(dāng)?shù)沫h(huán)境里 為人們所理解和接受。它與繪圖有內(nèi)在聯(lián)系，但又不同于繪畫，它以滿足人們的實(shí)用和需求為目標(biāo)，因而它比繪畫更單純，清晰和。頁面設(shè)計(jì)屬于設(shè)計(jì)的一種，同樣要求簡練，準(zhǔn)確。從人記憶能力角度來說，由于人的大腦一次最多可記憶五到七條信息，因此如果希望人們在看完你的Web后能留下印象，也應(yīng)該用一個簡單的關(guān)鍵詞語或圖像吸引他們的注意力，如天極網(wǎng)的的“YESKY”.，醒目易記。保持簡潔的常用做法是使用一個醒目的標(biāo)題，這個標(biāo)題常常采用圖形來表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字體和顏色的數(shù)目。一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于256種。頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用途，不要試圖用無關(guān)的圖片把頁面裝點(diǎn)起來，初學(xué)者容易犯的一個錯誤是把頁面搞的花里呼哨，卻不能讓別人明白他到底要突出表達(dá)的是什么內(nèi)容，主題和意念。一致性 一致性是表現(xiàn)一個丫點(diǎn)的獨(dú)特風(fēng)格的重要手段之一。要保持一致性，可以從頁面的排版下手，各個頁面使用相同的頁邊距，文本，圖形之間保持相同的間距；主要圖形，標(biāo)題或符號旁邊留下相同的空白；如果在頁的頂部放置了公司標(biāo)志，那么在其他各頁面都放上這一標(biāo)志；如果使用圖標(biāo)導(dǎo)航，則各個頁面應(yīng)當(dāng)使用相同的圖標(biāo)。一致性還包括：頁面中的每個元素與整個頁面以及站點(diǎn)的色彩和風(fēng)格上的一致性。所有的圖標(biāo)都應(yīng)當(dāng)彩相同的設(shè)計(jì)風(fēng)格，比如全部采用圖象的線條剪輯畫或全部使用寫實(shí)的照片等。另一個保持一致性的辦法是字體和顏色的使用。文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。一個站點(diǎn)通常只使用一到兩種標(biāo)準(zhǔn)色，為了保持顏色上的一致性，標(biāo)準(zhǔn)色一致或相近。比如，站點(diǎn)的主題色彩如果為紅色，可能需要將鏈接的色彩也改為紅色。對比度 使用對比是強(qiáng)調(diào)突出某些內(nèi)容的最有效的辦法之一。好的對比度使內(nèi)容更易于辨認(rèn)和接受。實(shí)現(xiàn)對比的方法很多，最常用的是使用顏色的對比，比如，內(nèi)容提要和正文使用不同顏色的字體，內(nèi)容提要使用藍(lán)色，而正文采用黑色；也可以使用大的標(biāo)題，也即是面積上的對比；還可以使用圖像現(xiàn)對比，題頭的圖像明確的向?yàn)g覽者傳達(dá)本頁的主題，這里同樣需要注意的是鏈接的色彩，在設(shè)計(jì)頁面時我們常常會只注意到未被訪問的鏈接的色彩，而容易忽視訪問過的鏈接色彩將使得鏈接的文字難地辨認(rèn)。還有一種實(shí)現(xiàn)對比的方法是使用學(xué)體變化。在文字排版中，可以使用斜體和黑體實(shí)出關(guān)鍵內(nèi)容，但是注意不要濫用，否則達(dá)不到應(yīng)有的強(qiáng)調(diào)效果。使用對比的關(guān)鍵是強(qiáng)調(diào)突出關(guān)鍵內(nèi)容，以吸引瀏覽者，鼓勵他去發(fā)掘更深層次的內(nèi)容。為了對3C原則上有直觀的認(rèn)識，可以到————等的站點(diǎn)上看看，體會一下這些站點(diǎn)對簡潔，一致性和對度等原則的把握。頁面設(shè)計(jì)要點(diǎn) WebWebWeb上的內(nèi)容包羅萬象，版式豐富多彩，但無論怎樣的變化，好的Web站點(diǎn)總是有許多共同之處，例如：精心組織的內(nèi)容；格式美觀的正文；和諧的色彩搭配；較好的對比度，使得文字具有較強(qiáng)的可讀性；生動背景圖案；頁面元素大小適中，布局勻稱；不同元素之間留有足夠空白，給人視覺上休息的機(jī)會；各元素之間保持平衡；文字準(zhǔn)確無誤，無錯別字、無拼寫錯誤；總的來說評價一個頁面設(shè)計(jì)的好壞基本上要考慮以下幾個方面的因素。組織內(nèi)容 設(shè)計(jì)Web頁面時，所發(fā)布的材料必須經(jīng)過精心組織，比如說按邏輯、按時間順序或按地理位置等等進(jìn)行組織，而且這種內(nèi)容組織應(yīng)當(dāng)是易于理解的。材料組織好后，下一步是在Web頁面上布置文本、圖片等內(nèi)容，目的是引導(dǎo)瀏覽者在頁內(nèi)瀏覽。我們應(yīng)該控制頁面上的元素的放置順序和它們相互之間的空隙。比如，可以把與一段文字相關(guān)的圖形放在段落旁邊或嵌入段落中，但不要把與段落無關(guān)的圖形放在段落邊上，以免引起瀏覽者的誤解。把相關(guān)的內(nèi)容放在一起，而不相關(guān)的內(nèi)容用空白，水平線或其他圖形分隔開，是瀏覽者看完一頁之后可以選擇繼續(xù)讀下去或通過鏈接跳到其他合適的主題上去。由于人們閱讀材料習(xí)慣于從左到右，從上到下進(jìn)行，因此他們眼睛首先看到的是頁面的左上角，然后逐漸往下看。根據(jù)這一習(xí)慣。我們在組織內(nèi)容時可以把希望瀏覽者看到的內(nèi)容放在頁面的左上角和頁面頂部，如公司的標(biāo)記，消息以及其他一些重要內(nèi)容等等；然后按重要性遞減的順序，由上而下放軒其他一些內(nèi)容。重要的內(nèi)容應(yīng)當(dāng)是瀏覽者最容易發(fā)現(xiàn)，而不是放在很深 的鏈接之后的，頁面上的廣告為了達(dá)到宣傳效果，通常也放在頁面頂部顯著位置。在段落中不宜放入過多的鏈接，否則會引起瀏覽者瀏覽上的混亂，的辦法是按邏輯關(guān)系選擇放置，而不是隨便亂放。如果可能的話，應(yīng)該把鏈接放在一些相關(guān)的說明性文字旁邊。比如，在一列放置文本，在另一列放置鏈接。這樣可以提示瀏覽者去使用這些鏈接。設(shè)計(jì)時可用的一些元素 在確定Web站點(diǎn)的基本組織結(jié)構(gòu)之后，可以著手設(shè)計(jì)頁面了。下面是設(shè)計(jì)時可供使用的一些元素：文本格式化：Web本身對文本和字體的格式化能力并不強(qiáng)，在Web頁面中，可以指定文本尺寸、排列和其他的一些格式化屬性（序號列表和無序號列表），但建議不要改變這體而應(yīng)當(dāng)使用缺省字體，以確保頁面的平以無關(guān)必畫面為瀏覽器是用本地機(jī)器上的字體顯示示頁面內(nèi)容的，你指定的字體在瀏覽者那里并不一定能夠找到，如果確實(shí)有必要少量使用某種特殊字體，可以把這些字畫在圖片上，然后將圖片插入到頁面中；按鈕、圖標(biāo)和其他導(dǎo)航工具，幫助瀏覽者在Web內(nèi)導(dǎo)航。背景：給頁面添加背景，包括紋理填充、水印式背景和長條狀背景等等，可以使得頁面更加美觀，給瀏覽者留下深刻的映象；圖形：可加入圖片、圖表和圖形等；表格：用來顯示按行和列組織的信息，比如產(chǎn)品價格表，客戶名單等；顏色：包括圖片的色彩、文本和背景的色彩等；多媒體元素：包括聲音、動畫、視頻片斷、背說音樂等。頁面布局：在頁面上放置文本、圖形等元素，在元素間添加橫線條，空白等，并用表格、杠架進(jìn)行排版。在后面的章節(jié)我們將陸續(xù)介紹這些元素的使用。選擇文本和背景的色彩 色彩可以使頁面更加生動。首先，使用色彩可以產(chǎn)生強(qiáng)烈的視覺效果，使你的頁面在瀏覽者心中留下很深的映象；色彩還可以傳遞設(shè)計(jì)者的思想情感。但是必注意慎重的使用色彩，否則很可能弄巧成拙。濫用色彩容易造成視覺上的混亂。一般情況下不要過多的使用效果太強(qiáng)烈的色彩，對于大面積的文字來說，白底黑字或黑底白字總是選擇。通常還應(yīng)該選擇相近的色彩。多數(shù)的頁面背景為白色、黑色或灰色，其他一些次要的元素，如背景圖片、線條適宜采用不搶眼的色彩。在數(shù)量有限的情況下，只有少量精心選擇的元素為了突出強(qiáng)調(diào)的需要，才彩用明亮的色彩。在數(shù)量有奶的情況下，這引起彩色亮點(diǎn)會產(chǎn)生強(qiáng)烈的視覺沖擊，但如果用得太多了，會形成一種均勻的噪聲，而達(dá)不到強(qiáng)調(diào)的效果。在選擇背景和正文顏色時，最重要的一點(diǎn)是注意易讀性。實(shí)現(xiàn)易讀性的關(guān)鍵在于提供足夠的明暗對比。由于黑白之間有最強(qiáng)烈的對比度，因此大多數(shù)網(wǎng)頁都采用黑底折字顯示文本，但是，也不必拘泥于黑白兩色實(shí)現(xiàn)對比，可以選擇一對顏色，其中一個是亮的，一個量暗的，只要它們保持足夠的對比度，比如說，灰底黑字也是很好的選擇。大面積的適宜采用低對比度。因此，對于大的形狀或粗體字采用低對比度的色彩組合。除了亮度上的對比之外，還要考慮顏色上的對比�；パa(bǔ)色具有最強(qiáng)的顏色對比兩種有較強(qiáng)的色彩對比度的顏色組合在一起時，很難區(qū)分它們的邊界。顏色對比同樣可以產(chǎn)生強(qiáng)烈的視覺效果。運(yùn)用強(qiáng)的色彩對比，可以制造緊張，激動等感覺。但是，在文本和它的背景之間不宜采用太強(qiáng)的顏色對比，否則文字看起來會顯示得模糊。特別是，文本切忌放在使用文字的互補(bǔ)色的背景上。在選擇顏色時，還要注意冷暖色的部題。冷色調(diào)（藍(lán)、綠）會產(chǎn)生收縮感，而暖色調(diào)（紅、橙、黃）則有向前突出的感覺。深藍(lán)色和深綠色適合作為背景色，而明亮的黃色適合于那些希望引起注意的黃色。事實(shí)上，只要我們平時稍加觀察，會發(fā)現(xiàn)許多商店的招牌，廣告或其他商業(yè)圖形展示都彩用深藍(lán)色背景加黃色文字，標(biāo)記的組合。這種組合非常醒目，最適合商業(yè)領(lǐng)域使用。黑色和黃色也是另一種常用的顏色組合。在Web面面上，大多采用明亮的背景色襯以深顏色的文字這樣的一種顏色組合。除了色彩的對比、冷暖感覺之外，還需要考慮色彩帶給人心理上的感覺。比如，冷的顏色使人平靜，而暖色使人激動；強(qiáng)的色彩對比造成緊張感；暗的顏色給人以沉重感和壓迫感。亮的顏色給人輕松、開放的感覺。我們可以根據(jù)所要表達(dá)的主題，選擇合適的色彩。色彩除了帶給人心理上的感覺之外，有些顏色實(shí)際上已經(jīng)有了社會意義。比如，紅色代表停止，綠色代表通行，灰色和深藍(lán)色代表保守，穩(wěn)重等。恰當(dāng)運(yùn)用色彩可以調(diào)動瀏覽者心理上的感受。比如，在許多飲食店中，采用汪藍(lán)色，給人輕松愉快的感覺，這同樣也適合于網(wǎng)頁，在網(wǎng)頁中使用顏色時，要盡量使得色彩搭配與這些習(xí)俗相吻合�？紤]到大多數(shù)人使用256色顯示模式，因此一個頁面顯示的顏色不宜過多，連頁面內(nèi)的圖像在內(nèi)應(yīng)當(dāng)控制在256色以內(nèi)。主題顏色通常只需要兩到三種，并采用一種標(biāo)準(zhǔn)色。以下是使用色彩的一些建議：對多數(shù)網(wǎng)頁特別是有大面積文字的網(wǎng)頁來說，應(yīng)采用白色或淺色的背景，如淺灰色、淡黃色、淺藍(lán)色或淺綠色，文字采用黑色或深顏色；避免在淺色背景使用明亮顏色的文字，因?yàn)檫@樣文字會很難辨認(rèn)；深顏色背景上使用淺色的文字是一種很好的組合，但是如果不是特別需要，應(yīng)留作那些需要引起瀏覽者特別注意的小塊區(qū)域和場合，比如標(biāo)題圖形等；使用黑色背景許多時候顯得太沉重，可以考慮使用深灰色、深藍(lán)、粟色等；白色、淺灰色、淺藍(lán)色、淺綠色、淺褐色很適合作為深色背景上的文字顏色；大的、粗體的文字比常規(guī)尺寸的文字更適合使用；交強(qiáng)的顏色，可考慮鮮紅色，橙色，明亮的藍(lán)色，但注意不要濫用。頁面的大小 對于大多數(shù)的印刷品來說，它們都有因定的規(guī)格的尺寸，如A3、A4等，但是Web則不然，一個Web頁面的尺寸是由瀏覽者來控制的。瀏覽器會根據(jù)窗口尺寸來重新格式化Web頁面的文本，使其正好適合于在瀏覽器中顯示。一些圖形和他一些元素可能由于過寬需要瀏覽者使用水平條，但所有的文本正好在窗口寬度范圍內(nèi)顯示出來。因此，頁面的大小在寬度上取決于垂直條的范圍。問題是瀏覽器的窗口并不限于任何固定的尺寸，瀏覽者可以隨意調(diào)整窗口的大小。它可能是一個低分辨率顯示器上的一個小窗口。一個高分辨率監(jiān)視器上的全屏窗口，或介于兩者之間。沒有任何辦法可以預(yù)見到瀏覽器窗口和相應(yīng)的網(wǎng)面在用戶端的顯示方式。這樣，設(shè)計(jì)者只能對頁面尺寸作一些假設(shè)。大多數(shù)Web設(shè)計(jì)者假定瀏覽者運(yùn)行在800*600的全屏幕方式下。這種假設(shè)是合理的。因?yàn)榇蟛糠钟脩舳家赃@種方式滿屏運(yùn)行他們的應(yīng)用程序。屏幕寬度假定為800個像素時，扣除垂直條和邊界外，頁面所剩的寬度在760——780個像素左右。在垂直方向上，假定屏幕高度為600個像素，扣除標(biāo)題欄，菜單、工具條、地址欄和狀態(tài)條，剩下留頁面的高度大約是460——480個像素。根據(jù)這樣的結(jié)果，要想在一屏內(nèi)顯示完一具Web頁面，尺寸應(yīng)控制在760*460單位內(nèi)，對主頁來說，采用這一尺寸，在一屏內(nèi)顯示完全部內(nèi)容，至少要顯示完主要內(nèi)容。這樣，瀏覽者可以對網(wǎng)站所提供的內(nèi)容一目了然。這個頁面尺寸對大多數(shù)頁面來說可能苛刻了一點(diǎn)，適度翻動對用戶來說也是可以接受的，但是，要盡量避免水平方向的翻動。過多的小平翻動會引起瀏覽者的反感。后面我們會提到，由于中西文兼容性問題引起的文本不能自動換行，常引起水平翻動，對此我們提出了解決的辦法。另外，頁面也不宜過長，一個較第的頁面要求較長的下載時間，而且瀏覽者也缺少從頭看完的耐心。對于主頁來說，不宜超過兩屏；對其他頁面來說，Web頁面應(yīng)控制在4到5屏內(nèi)。但是，有時候仍然不可避免的要求使用較長的頁面，比如，瀏覽者往往希望能夠在一頁內(nèi)看完一些文學(xué)作品如篇小說，散文以及長篇小說的一章等。一個長的頁面在文件尺寸和下載時間上可能比分開的幾個頁面具有優(yōu)勢。如果頁面主要包含文本，下載時間比較快的話，還是可以采用長的頁面的。另外，一個長的頁面包含足夠的鏈接，這樣瀏覽者不用看完全部內(nèi)容可以找到他所感興趣的頁面。對于較長的頁面，建議在頁面段落之間和底部加上一個指向頂部的鏈接，以便讓瀏覽者無需使用翻動可以直接跳到頁面的頂部。另外，關(guān)于Web頁面的文件大小還有一個專家建議，即對大多數(shù)頁面來說，頁面上的所有元素（包括圖象，Applet等）加上HTML源文件的大小不應(yīng)該超過50K。這樣瀏覽者可以較快的下載完頁面的全部內(nèi)容而不至于等待太長的時間，但是如果是Intranet的話，由于內(nèi)部可能采用高速網(wǎng)絡(luò)（比如10 MBps 的內(nèi)部網(wǎng)絡(luò)）連接，因此可以放寬這個限制。尺寸和布局 頁面元素的尺寸和布局對于頁面設(shè)計(jì)來說同樣也很重要。與其他媒體不同的是，Web設(shè)計(jì)者不能控制頁面上每個元素的尺寸和位置。Web瀏覽器會根據(jù)窗口大小調(diào)整文本和其他元素的位置，使其正好能在瀏覽器窗口內(nèi)顯示。但是，Web設(shè)計(jì)者可以控制頁面元素的相對位置、尺寸和相鄰關(guān)系。更的排版可采用表格和框架（frame）來實(shí)現(xiàn)。如果需要控制文檔內(nèi)容的外觀的話，可以考慮使用Adobe的PDF格式和Microsoft Office文檔格式。但是，這要求瀏覽器上安裝相應(yīng)的插件（Plug-Ins）、Active X控件或相應(yīng)的應(yīng)用程序。對于Intranet（企業(yè)內(nèi)部網(wǎng)）來說，可以假定用戶已預(yù)先安裝這些選項(xiàng)，但對于WWW瀏覽者需要慎重考慮了，因?yàn)橛行g覽者可能因此無法閱讀你提供的文檔。當(dāng)然，可以在頁面中加入鏈接，讓瀏覽者下載這些軟件。使用空白 頁面中應(yīng)當(dāng)保留足夠的空白。沒有空白，單詞和字母會顯得擁擠，從而降低了頁面的可讀性。另外，在行間和段落之間使用空白也給瀏覽者的眼睛提供了休息的機(jī)會。同時，空白也是分隔段落、圖形和頁面上其他元素的最有效的手段�？瞻走�可以保持頁面的平衡：建立幾元素在空間上的關(guān)系，以便于瀏覽者理解它們之間的相關(guān)性，引導(dǎo)瀏覽者的閱讀等。導(dǎo)航 前面我們已經(jīng)提到，設(shè)計(jì)Web很重要的一點(diǎn)是要讓瀏覽者在你的Web上迅速找到他們所需的信息。為此，設(shè)計(jì)頁面的導(dǎo)航時你必須能夠十分明確地回答以下幾個問題：Web提供了什么？通常的辦法是提供一個導(dǎo)航條或者目錄表格，它們包含一組鏈接，指向相關(guān)的頁面；我如何找到它？提供足夠的、不同角度的鏈接的導(dǎo)航，幫助瀏覽者在網(wǎng)站的各個部分之間跳轉(zhuǎn)；我在哪里？通過某種方式（比如，讓導(dǎo)航條上指向當(dāng)前頁面的按鈕使用某種特殊的顏色或加入某種三角標(biāo)記等）告訴瀏覽者它現(xiàn)在網(wǎng)站結(jié)構(gòu)的大致位置，當(dāng)前頁面和其他頁面之間的關(guān)系等。比如，在天極網(wǎng)上，經(jīng)常可以看到這樣的提示：學(xué)習(xí)中心>美工教室>三維空間這樣，瀏覽者不但可以明白自己當(dāng)前所瀏覽的頁面在網(wǎng)站中的位置，還可以迅速跳到其他更高層次的頁面。不要讓瀏覽者在超鏈中迷路。每一頁至少應(yīng)該提供一個返回主頁的按鈕或鏈接。如果頁面是按層次結(jié)構(gòu)組織的，通常還需要提供一個返回上一級頁面的鏈接。
上一篇：
宣傳主頁-天龍八步