淺談網(wǎng)頁設(shè)計(jì)技巧

（大連市皮口衛(wèi)生學(xué)校，遼寧 大連 116222）

隨著社會的發(fā)展，科學(xué)技術(shù)的進(jìn)步，越來越多的人涉及到計(jì)算機(jī)行業(yè)發(fā)展，計(jì)算機(jī)行業(yè)有很多方面的專業(yè)建設(shè)，網(wǎng)頁制作就算其中比較重要的部分，它在計(jì)算機(jī)技術(shù)中占有非常重要的地位，那么，究竟如何才能更好的進(jìn)行網(wǎng)頁制作，是計(jì)算機(jī)產(chǎn)業(yè)興起以來人們一直致力研究，也是人們一直都非常關(guān)注的問題。

一、網(wǎng)站頁面布局設(shè)計(jì)

網(wǎng)頁布局設(shè)計(jì)要以最舒適的瀏覽方式，將文字、圖片、色彩等，按照構(gòu)圖的對稱、均衡、色彩和黃金分割比例等原則，進(jìn)行統(tǒng)一和規(guī)范組合，達(dá)到較好的效果。對于信息量很大的網(wǎng)頁，通常會增加頁面的高度來實(shí)現(xiàn)。但網(wǎng)頁頁面的高度不能無限制地增加，越靠下的信息瀏覽率越低。[1]網(wǎng)頁頁面布局需要注意以下幾個(gè)方面：

1.實(shí)用性

一般網(wǎng)頁中不僅是絢麗多彩的圖片，更多的是信息內(nèi)容，圖片只是起到點(diǎn)綴和襯托的作用，不應(yīng)過多，容易造成喧賓奪主的感覺。

2.色彩均衡性

一個(gè)好的網(wǎng)頁布局不僅表現(xiàn)在文字、圖像等要素的空間占用上分布均勻，還有色彩的均衡性，要通過色彩的對比、對稱給人一種協(xié)調(diào)感。

3.加快網(wǎng)頁的瀏覽速度

由于網(wǎng)頁信息量的增大，單個(gè)網(wǎng)頁的瀏覽時(shí)間加長，時(shí)間過長用戶就會失去耐心，因此提高瀏覽速度要盡可能減小使用的數(shù)據(jù)量，少用較大的圖片、flash動畫等。

4.可擴(kuò)展性

在后期制作過程中，能任意增加或減少欄目而不影響頁面布局

二、網(wǎng)頁制作技巧

1.優(yōu)化圖片，獲得更好的頁面加載速度

學(xué)習(xí)如何通過選擇正確的格式，來優(yōu)化網(wǎng)頁圖片，并確保文件大小在可行的范圍你是足夠小的。雖然現(xiàn)在人們已經(jīng)都在使用寬帶，但仍然有人是撥號上網(wǎng)。此外，雖然移動裝置技術(shù)的普及，但移動裝置卻不一定支持像寬頻一樣的速度，圖片文件的大小可能還是會延長網(wǎng)頁的加載時(shí)間，有可能把用戶趕走的。這里有個(gè)選擇適合的文件格式的技巧：如果圖片是單色，那最好保存成PNG或者GIF格式;如果是連續(xù)性的色調(diào)(如照片)則最好保存成JPG格式。

如此一來，將可以大大的減少頁面的讀取時(shí)間和改善網(wǎng)頁的性能。

2.保持干凈和簡單(即：簡潔)

一個(gè)好的網(wǎng)頁設(shè)計(jì)不光只是看起來好看而已，還要是用戶友好型的。通常來說，一個(gè)干凈、簡單的網(wǎng)頁設(shè)計(jì)最終會成為一個(gè)可用性高的網(wǎng)頁設(shè)計(jì)，因?yàn)樗谂c用戶的交互中不會使其產(chǎn)生混淆。當(dāng)頁面上有太多的網(wǎng)站功能和組件時(shí)，將會分散網(wǎng)站用戶的注意力而失去原本瀏覽網(wǎng)站的目的。[2]確保每個(gè)頁面元素都有其目的，你要確保你設(shè)計(jì)仍然是方便和直觀的。人們習(xí)慣于通用性的交互模式、網(wǎng)站功能、和網(wǎng)絡(luò)接口，如果你的設(shè)計(jì)的確很獨(dú)特，確保它不是太模糊和晦澀，要有創(chuàng)意，但還要保持簡單。

3.導(dǎo)航(條/欄)是非常重要的設(shè)計(jì)

一個(gè)網(wǎng)站最重要的部分就是整個(gè)網(wǎng)站的導(dǎo)航。沒有它，無論在哪個(gè)頁面中，用戶都會發(fā)生卡在這個(gè)頁面離不開的狀況。有了這明顯的實(shí)際方向，我們將討論一些建構(gòu)網(wǎng)站導(dǎo)航時(shí)重要的點(diǎn)。擺放位置、風(fēng)格、所用技術(shù)(javascript或CSS)、可用性和網(wǎng)頁易讀性，這些是你制作導(dǎo)航設(shè)計(jì)時(shí)需要考慮的。所以，制定一個(gè)導(dǎo)航系統(tǒng)可以放置的良好位置是必須的，例如放在一個(gè)顯眼可見的地方。一個(gè)好的導(dǎo)航功能，只要網(wǎng)頁載入就出現(xiàn)，而不需要鼠標(biāo)再向下滾動。這是為什么頁面要保持干凈和簡單的重要作用，一個(gè)復(fù)雜且非常規(guī)的設(shè)計(jì)可能會讓用戶困惑。

對網(wǎng)站建立階層結(jié)構(gòu)，多層次的管理。確保它在父層與子層之間易于導(dǎo)航。此外，不管在哪一個(gè)網(wǎng)頁當(dāng)中，也應(yīng)該能很容易到達(dá)最高層的頁面(例如網(wǎng)站首頁)。最主要的目標(biāo)就是你的網(wǎng)站導(dǎo)航，盡可能減少操作(動作)，努力而讓用戶到達(dá)他想要瀏覽的內(nèi)容。

4.有條理地使用字體

雖然有成千上萬的字體，但你真的能用的只是一小部分(至少要等到主要的瀏覽器完全支持CSS3)。所以堅(jiān)持使用網(wǎng)頁安全字體。如果你不喜歡網(wǎng)頁安全字體，可以考慮利用sIFR或Cufon逐步增強(qiáng)的網(wǎng)頁設(shè)計(jì)。

保持字體的一致性，確認(rèn)標(biāo)題和段落的內(nèi)容看起來有所不同。使用空白、調(diào)整行高、字體大小和字母間距屬性，使用戶輕松愉快地閱讀和掃描內(nèi)容。

5.理解色彩的重要性

正確使用顏色的也很重要。例如，黑色文字在白色背景，如果使用高對比度，橙色背景上的紅色文字會令你的眼睛感到緊張。此外，使用一些對特殊形式色盲的用戶友好的顏色(檢查工具名為Vischeck，可以測試某些類型的色盲)。

有些色彩組合只適合運(yùn)用在前景色的部分，而不適合做背景色。舉個(gè)例子來說，深藍(lán)色的文字搭配粉紅色的背景與粉紅色的文字搭配深藍(lán)色的背景，都是使用兩種一樣的顏色，但用在不同的部分則影響了它的可讀性和閱讀的舒適度。重要的是，不僅要使用良好的色彩組合，而且要把它用在頁面中的合適元素上。

6.了解瀏覽器的兼容性

當(dāng)一個(gè)網(wǎng)頁設(shè)計(jì)師必須要知道的一件事，就是你的工作環(huán)境 (瀏覽器)是挑剔和難以預(yù)料的。如果你的網(wǎng)頁設(shè)計(jì)只能運(yùn)行在的幾種網(wǎng)頁瀏覽器，那是不夠的，你需要盡可能多瀏覽器下測試。

7.使設(shè)計(jì)有靈活性和可維護(hù)性

一個(gè)好的網(wǎng)頁設(shè)計(jì)師可以確保以后可以很容易更新或修改網(wǎng)站。設(shè)計(jì)一個(gè)有可塑性、易于維護(hù)的網(wǎng)站，是一個(gè)偉大網(wǎng)頁設(shè)計(jì)師的標(biāo)志。讓你的工作盡可能從結(jié)構(gòu)化轉(zhuǎn)向模塊化。