網(wǎng)頁設(shè)計(jì)，也叫Web UI設(shè)計(jì)，是UI設(shè)計(jì)行業(yè)中重要的一部分，也是我們UI設(shè)計(jì)師培訓(xùn)中的學(xué)習(xí)重點(diǎn)之一，而網(wǎng)頁設(shè)計(jì)規(guī)范相關(guān)的知識，是每一個(gè)設(shè)計(jì)師都要牢記于心的，今天天水網(wǎng)頁設(shè)計(jì)就帶您簡單地了解這些規(guī)范中的重點(diǎn)。

　　首先肯定是網(wǎng)頁的尺寸以及布局?，F(xiàn)在我們的屏幕技術(shù)是越來越先進(jìn)，不僅外觀尺寸做的越來越大，里面的分辨率也是越來越高，所以我們在進(jìn)行布局的時(shí)候首先就要考慮到讓自己的作品能夠盡可能的適應(yīng)的所有型號的屏幕。而布局的話就比較靈活了，可以分為左右布局，居中布局等等，這些布局一是要考慮到適配，二是要考慮到我們網(wǎng)站的主題，突出網(wǎng)站的重點(diǎn)內(nèi)容。比如我們看到的各種購物網(wǎng)站，他們的布局都有相似之處，也是由于網(wǎng)站類型所決定的。

　　在這里提一個(gè)比較特殊的網(wǎng)頁布局設(shè)計(jì)，叫做響應(yīng)式布局設(shè)計(jì)。這個(gè)指的是針對不同的設(shè)備、屏幕、分辨率等，能夠讓各種網(wǎng)站信息在不同環(huán)境下表現(xiàn)一致，同時(shí)讓頁面可交互也能正常操作。比如在電腦這種比較寬的設(shè)備上我們可以用很寬的條幅來展示比較多的信息，但是對于平板或是手機(jī)上這種比較窄的設(shè)備上，就把這些變成以豎列的形式進(jìn)行展示，這就是響應(yīng)式網(wǎng)站的好處。下面天水網(wǎng)頁設(shè)計(jì)提幾點(diǎn)建議共勉：

　　一、尺寸規(guī)范

　　在網(wǎng)頁設(shè)計(jì)中首先要解決的是網(wǎng)頁布局大小及尺寸的問題，當(dāng)今常見web網(wǎng)頁尺寸，最常見尺寸寬度為1200像素。

　　為了適應(yīng)屏幕的顯示，頁面寬度設(shè)制要有一定的范圍值，其實(shí)在設(shè)計(jì)及設(shè)計(jì)學(xué)中也沒有相關(guān)硬性規(guī)定，但是為了兼容大多數(shù)瀏覽器一般是設(shè)置960px，隨著現(xiàn)在瀏覽器分辨率的變化，已開始1000px,1200px寬度發(fā)展，例如淘寶(1000px)京東商城(1200px)。如果需要兼容不同瀏覽器尺寸，現(xiàn)在比較流行的做法是做成響應(yīng)式的，即根據(jù)不同分辨率顯示不同的尺寸，工作量也就隨之增加了。

　　二、文字規(guī)范

　　字號常用：(系統(tǒng)默認(rèn)字體)

　　黑體 微軟雅黑 宋體(12PX-16PX邊緣必須給無;大于16PX邊緣不能給無)

　　字體 ：(使用偶數(shù))

　　12PX (最小)14PX 16PX 18PX

　　英文(10號最小)

　　字體單位：使用像素

　　三、屏幕分辨率

　　72像素/英寸

　　顏色模式：

　　RGB 8位

　　四、網(wǎng)頁背景

　　純色

　　漸變色或者底紋

　　通欄圖片 寬1920

　　五、網(wǎng)頁設(shè)計(jì)所需注意事項(xiàng)

　　沒有內(nèi)容層次用戶的眼睛喜歡有秩序的設(shè)計(jì)，如頭部包含導(dǎo)航和LOGO，特定內(nèi)容使用lightbox，三列分欄，頁腳。它有助于在內(nèi)心組織重要的信息，并引導(dǎo)用戶注意在你想讓他注意的地方。在傳統(tǒng)藝術(shù)中，新手們被教導(dǎo)色彩價(jià)值和線性透視三原則和其他藝術(shù)指導(dǎo)。在網(wǎng)頁設(shè)計(jì)中，沒有特別奉行的準(zhǔn)則，但以直觀的方式組織你的內(nèi)容是一條很好的經(jīng)驗(yàn)規(guī)則。也是多年培養(yǎng)的用戶習(xí)慣。最終習(xí)慣就是最終用戶。當(dāng)然一成不變不是我們所鼓勵(lì)的。

　　太多的色彩背景一種顏色，內(nèi)容文本一種顏色，鏈接一種顏色，頁頭和lightbox一種顏色，圖案和頁腳各一種顏色。這很好，因?yàn)樗鼛椭鷧^(qū)分了有用的內(nèi)容。但是，多重漸變幾種鮮艷的色彩和大量有鮮明對比的色調(diào)及飽和度，會破壞你網(wǎng)站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(diào)(如藍(lán)色)，再搭配反相的單色(白灰黑)以獲得一個(gè)漂亮的搭配。這里強(qiáng)調(diào)下豆瓣的配色。也是我喜歡的顏色搭配。

　　太多的字體一般一個(gè)簡單的網(wǎng)頁設(shè)計(jì)，一般字體不超過3種。多則亂沒有足夠的空白空白可以說是設(shè)計(jì)中最重要的一部分。它有助于防止用戶在瀏覽網(wǎng)站時(shí)變得疲憊，它可以在內(nèi)容中劃出距離，而且它本身也看上去不錯(cuò)?？瞻撞皇潜仨氂冒咨?，而是，它僅僅是為其他設(shè)計(jì)元素提供間隔和緩沖的空間不考慮用戶的分辨率。

　　對比的問題你考慮過閱讀黑底白字和白底黑字的不同嗎?你有沒有試過閱讀一下白底灰字?有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對比的方式。如果你很難舒服的閱讀文字，考慮一下改變字體大小或方式。

　　不一致，一致性是網(wǎng)頁設(shè)計(jì)的關(guān)鍵。它是把網(wǎng)頁設(shè)計(jì)組織在一起的方式，可以創(chuàng)造一種緊密結(jié)合的感覺。在網(wǎng)站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯(lián)系在一起。如果你在整個(gè)網(wǎng)站持續(xù)改變字體大小和色彩，用戶很快會覺得不知所措。

　　沒有足夠的文字間距與空白有關(guān)，文字間距有兩個(gè)部分，一個(gè)是字距，關(guān)系到字母之間的空白。一個(gè)是行距，關(guān)系到兩行文字之間的距離。這些有助于區(qū)分行與段落，使用戶更容易閱讀文字。

　　網(wǎng)頁界面設(shè)計(jì)容易犯的幾個(gè)錯(cuò)誤

　　1、留白太少

　　留白是網(wǎng)頁設(shè)計(jì)中一個(gè)重要部分。它有助于防止用戶在瀏覽網(wǎng)站時(shí)變得疲憊，它可以在內(nèi)容中劃出距離，而且它本身也看上去不錯(cuò)。空白不是必須用白色的，而是，它僅僅是為其他設(shè)計(jì)元素提供間隔和緩沖的空間。

　　2、字體設(shè)置過多

　　通常來說一個(gè)網(wǎng)頁中最好不要超過三種字體。

　　3、色彩太多

　　文本、背景、框架等各為不同的顏色，雖然看似鮮艷但是，多重漸變、幾種鮮艷的色彩和大量有鮮明對比的色調(diào)及飽和度，會破壞你網(wǎng)站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(diào)(如藍(lán)色)，再搭配反相的單色(白、灰、黑)以獲得一個(gè)漂亮的搭配。這里強(qiáng)調(diào)下豆瓣的配色。也是我喜歡的顏色搭配。

　　4、內(nèi)容過于堆疊

　　網(wǎng)頁的內(nèi)容繁多，各種分支信息占據(jù)的空間過多，沒有突出關(guān)鍵的主題。它有助于在內(nèi)心組織重要的信息，并引導(dǎo)用戶注意在你想讓他注意的地方。在傳統(tǒng)藝術(shù)中，新手們被教導(dǎo)色彩、價(jià)值和線性透視三原則和其他藝術(shù)指導(dǎo)。在網(wǎng)頁設(shè)計(jì)中，沒有特別奉行的準(zhǔn)則，但以直觀的方式組織你的內(nèi)容是一條很好的經(jīng)驗(yàn)規(guī)則。也是多年培養(yǎng)的用戶習(xí)慣。最終習(xí)慣就是最終用戶。當(dāng)然一成不變不是我們所鼓勵(lì)的。

　　5、沒有足夠的文字間距

　　間距過小是造成網(wǎng)頁缺陷的一個(gè)重要原因。網(wǎng)頁一個(gè)是行距，可以用CSS直接調(diào)整，關(guān)系到兩行文字之間的距離。這些有助于區(qū)分行與段落，使用戶更容易閱讀文字。