一、網(wǎng)頁(yè)尺寸

制作網(wǎng)頁(yè)時(shí)，我們選用的分辨率是72像素/英寸，使用的畫(huà)布尺寸1920px*1080px。

但是并不代表我們可以在整個(gè)畫(huà)布上作圖。

網(wǎng)頁(yè)的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。

1、左右布局

靈活性強， UI的限制小，左邊通欄為導航欄，寬度沒(méi)有具體的限制，可根據實(shí)際情況調整；

右側為內容版塊范圍，是網(wǎng)站內容的展示區域。

2、居中布局

中間的藍色部分為有效的顯示局域，用于網(wǎng)站內容的展示；換句話(huà)說(shuō)，兩邊均為留白，沒(méi)有實(shí)際用途，只是為了適配而存在；

3.主流電腦屏幕尺寸有以下幾種：

一般網(wǎng)站內容顯示的區域為996px；國內網(wǎng)站大部分還是以1000個(gè)像素為界限，因超過(guò)1000像素適合在大屏幕上瀏覽，小屏幕會(huì )顯得擁擠。所以網(wǎng)站寬度在1000像素以?xún)瓤梢员ＷC大部分用戶(hù)舒適的瀏覽網(wǎng)頁(yè)。

二、網(wǎng)頁(yè)字體

字體設計的總原則是：可辨識性和易讀性。

網(wǎng)頁(yè)的中文字設計是系統默認的字體：宋體、微軟黑體、蘋(píng)果系統黑體； 英文則建議使用Times New Roamn、Arial、Comis Sans MS等無(wú)襯線(xiàn)字體。

常用的字號大小有以下幾種：

12px是應用于網(wǎng)頁(yè)的zui小字體，適用于非突出性的日期，版權等注釋性?xún)热荨?

14px 則適用于非突出性的普通正文內容。

16px、18px、20px、26px或者30px 適用于突出性的標題內容。注意都是偶數原則，奇數像素會(huì )出毛邊！

三、字體間距

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

行間距：推薦以字體大小的1.5—2倍作為參考；

段間距：推薦以字體大小的2—2.5倍作為參考。

例如，當選用14px 的字體時(shí)，行間距：21—28px；段間距：28px—35px。

四、字體顏色

六種除了主色調以外都是場(chǎng)景色，需要在不同的場(chǎng)景中使用（例如危險色表示危險的場(chǎng)景）六種是文字排版色，通過(guò)文字的不同用色進(jìn)行文字排版，以表現層次結構。

主文字顏色，建議使用 公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識性和記憶性。

正文字體顏色，保險起見(jiàn)，選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。

五、首屏內容

做網(wǎng)頁(yè)設計時(shí)，你還要特別注意網(wǎng)頁(yè)的首屏內容，在構圖和內容呈現上，首屏模塊的設計至關(guān)重要。

除去任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩下的是首屏的高度。

Window XP的首屏高度平均值是580px；Window 7的首屏高度平均值是710px。

綜合考慮到Window XP已經(jīng)逐漸退出市場(chǎng)，在實(shí)際操作時(shí)，我們 以710px 作為依據。

另外，是關(guān)于圖片尺寸的問(wèn)題。

需要全屏顯示的圖片，寬度尺寸嚴格設計為1920px。

但是值得注意的是，圖片內容的有效范圍不能超過(guò)網(wǎng)頁(yè)內容的有效范圍，即控制在1200px以?xún)取?

避免遇到小屏幕設備時(shí)，內容顯示不全，而造成信息的遺漏的情況。

http://www.ezekroy.com/wangzhansheji/3437.html Web UI 網(wǎng)頁(yè)設計規范