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

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

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

　　一、尺寸規(guī)范

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

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

　　二、文字規(guī)范

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

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

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

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

　　英文(10號最小)

　　字體單位：使用像素

　　三、屏幕分辨率

　　72像素/英寸

　　顏色模式：

　　RGB 8位

　　四、網(wǎng)頁背景

　　純色

　　漸變色或者底紋

　　通欄圖片 寬1920

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

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

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

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

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

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

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

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

　　1、留白太少

　　留白是網(wǎng)頁設(shè)計中一個重要部分。它有助于防止用戶在瀏覽網(wǎng)站時變得疲憊，它可以在內(nèi)容中劃出距離，而且它本身也看上去不錯?？瞻撞皇潜仨氂冒咨?，而是，它僅僅是為其他設(shè)計元素提供間隔和緩沖的空間。

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

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

　　3、色彩太多

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

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

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

　　5、沒有足夠的文字間距

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