大家登陸網(wǎng)站，首先看到的就是web網(wǎng)頁內(nèi)容。對(duì)于網(wǎng)站設(shè)計(jì)人員來說，web網(wǎng)頁設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的重點(diǎn)和關(guān)鍵。web網(wǎng)頁設(shè)計(jì)不是胡亂想象的，需要遵循一定的規(guī)范和要求。今天就讓faceui為大家介紹web網(wǎng)頁設(shè)計(jì)有什么規(guī)范要求，了解web網(wǎng)頁設(shè)計(jì)。

　　web網(wǎng)頁設(shè)計(jì)有什么規(guī)范要求

　　一、網(wǎng)頁尺寸

　　制作網(wǎng)頁時(shí)，我們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但是并不代表我們可以在整個(gè)畫布上作圖。網(wǎng)頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設(shè)計(jì)的空間也不相同。

　　1、左右布局，靈活性強(qiáng)， UI的限制小；左邊通欄為導(dǎo)航欄，寬度沒有具體的限制，可根據(jù)實(shí)際情況調(diào)整；右側(cè)為內(nèi)容版塊范圍，是網(wǎng)站內(nèi)容的展示區(qū)域。

　　2、居中布局，中間的藍(lán)色部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示；換句話說，兩邊均為留白，沒有實(shí)際用途，只是為了適配而存在。

　　一般網(wǎng)站內(nèi)容顯示的區(qū)域?yàn)?96px；國內(nèi)網(wǎng)站大部分還是以1000個(gè)像素為界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會(huì)顯得擁擠。所以網(wǎng)站寬度在1000像素以內(nèi)可以保證大部分用戶舒適的瀏覽網(wǎng)頁。

　　圖片來源于網(wǎng)絡(luò)

　　二、網(wǎng)頁字體

　　字體設(shè)計(jì)的總原則是：可辨識(shí)性和易讀性。網(wǎng)頁的文字設(shè)計(jì)是系統(tǒng)默認(rèn)的字體：宋體、微軟黑體、蘋果系統(tǒng)黑體，英文則建議使用arial無襯線字體。

　　常用的字號(hào)大小有以下幾種：

　　12px是應(yīng)用于網(wǎng)頁的最小字體，適用于非突出性的日期，版權(quán)等注釋性內(nèi)容。

　　14px 則適用于非突出性的普通正文內(nèi)容。

　　16px、18px或者20px 適用于突出性的標(biāo)題內(nèi)容。

　　三、字體間距

　　相鄰兩個(gè)文字的間距，其實(shí)不需要太過介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。

　　行間距，推薦以字體大小的1.5—2倍 作為參考；段間距，推薦以字體大小的2—2.5倍 作為參考。即，當(dāng)選用14px 的字體時(shí)，行間距：21—28px；段間距：28px—35px。

　　四、字體顏色

　　主文字顏色，建議使用公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識(shí)性和記憶性。正文字體顏色，建議選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。

　　五、首屏內(nèi)容

　　做網(wǎng)頁設(shè)計(jì)時(shí)，你還要特別注意網(wǎng)頁的首屏內(nèi)容，在構(gòu)圖和內(nèi)容呈現(xiàn)上，首屏模塊的設(shè)計(jì)至關(guān)重要。除去任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩下的是首屏的高度。Window XP的首屏高度平均值是580px，Window 7的首屏高度平均值是710px。

　　需要全屏顯示的圖片，寬度尺寸嚴(yán)格設(shè)計(jì)為1920px。但是值得注意的是，圖片內(nèi)容的有效范圍不能超過網(wǎng)頁內(nèi)容的有效范圍，即控制在1200px以內(nèi)。

　　圖片來源于網(wǎng)絡(luò)

　　六、響應(yīng)式布局設(shè)計(jì)

　　響應(yīng)式設(shè)計(jì)指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。由于頁面的寬度發(fā)生了變化，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計(jì)。直到最后在手機(jī)屏幕上的顯示圖片信息變成了一列。

　　很多時(shí)候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能時(shí)保持簡(jiǎn)單輕巧，而且同一臨界點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為臨界點(diǎn)）保持統(tǒng)一邏輯。否則頁面實(shí)現(xiàn)得太過復(fù)雜，也會(huì)影響整體體驗(yàn)和頁面性能。

　　關(guān)于web網(wǎng)頁設(shè)計(jì)

　　網(wǎng)頁設(shè)計(jì)（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

　　網(wǎng)頁設(shè)計(jì)一般分為三種大類：功能型網(wǎng)頁設(shè)計(jì)（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計(jì)（品牌形象站）、信息型網(wǎng)頁設(shè)計(jì)（門戶站）。設(shè)計(jì)網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計(jì)方案。

　　以上就是faceui為大家介紹的關(guān)于web網(wǎng)頁設(shè)計(jì)的相關(guān)內(nèi)容。web網(wǎng)頁設(shè)計(jì)，是網(wǎng)站設(shè)計(jì)的重要內(nèi)容，也是網(wǎng)站展示的重要窗口，做好web網(wǎng)頁設(shè)計(jì)的意義是很重大的。