一、網頁尺寸

製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。

但是並不代表我們可以在整個畫布上作圖。

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

1、左右布局，靈活性強， UI的限制小；

左邊通欄為導航欄，寬度沒有具體的限制，可根據實際情況調整；

右側為內容版塊範圍，是網站內容的展示區域。

2、居中布局，中間的黃色部分為有效的顯示局域，用於網站內容的展示；

換句話說，兩邊均為留白，沒有實際用途，只是為了適配而存在；

目前主流電腦屏幕尺寸有以下幾種：

一般網站內容顯示的區域為996px；國內網站大部分還是以1000個像素為界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會顯得擁擠。所以網站寬度在1000像素以內可以保證大部分用戶舒適的瀏覽網頁。

二、網頁字體

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

網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體

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

12px是應用於網頁的最小字體，適用於非突出性的日期，版權等註釋性內容。

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

16px、18px或者20px 適用於突出性的標題內容。

三、字體間距

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

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

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

即，當選用14px 的字體時，行間距：21—28px；段間距：28px—35px。

四、字體顏色

主文字顏色，建議使用 公司品牌的VI顏色，可提高公司網站與公司VI之間的關聯，增加可辨識性和記憶性。

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

輔助性的，註釋類的文字，則可以選用#999999之類的比較淺的顏色。

如果，你對顏色駕馭能力比較強，你也可以選用 偏公司VI顏色的深色，作為正文字體顏色或者輔助性文字顏色。

例如公司的品牌色是藍色，那麼，正文字體就可以選用偏藍的深色。

這樣處理之後，文字就帶有了環境色，網站整體色調將更加和諧。

五、首屏內容

做網頁設計時，你還要特別注意網頁的首屏內容，在構圖和內容呈現上，首屏模塊的設計至關重要。

除去任務欄，瀏覽器菜單欄以及狀態欄的高度，剩下的是首屏的高度。

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

綜合考慮到Window XP已經逐漸退出市場，在實際操作時，我們 以710px 作為依據。

如下圖所示，藍色區域則是我們設計時需要著重考慮的首屏範圍。

另外，是關於圖片尺寸的問題。

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

但是值得注意的是，圖片內容的有效範圍不能超過網頁內容的有效範圍，即控制在1200px以內。

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

六、響應式布局設計

響應式設計指的是不同設備、屏幕、解析度、操作方式（滑鼠、鍵盤、觸摸），保證信息在不同環境下表現一致，保證可交互可操作。

由於頁面的寬度發生了變化，進而信息展現也改變了就是響應式設計。直到最後在手機屏幕上的顯示圖片信息變成了一列。

對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，有兩種方式：桌面優先（從桌面端開始向下設計）；移動優先（從移動端向上設計）；

無論基於哪種模式的設計，要兼容所有設備，布局響應時不可避免地需要對模塊布局做一些變化（當頁面寬度發生變化的尺寸範圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度範圍在多少時我們就可以制定出相對應清晰的一個臨界點，制定了臨界點之後就知道，當屏幕的寬度範圍位於哪一個點的時候，我們的頁面信息該如何展示。）

我們通過JS獲取設備的屏幕寬度，來改變網頁的布局，這一過程我們可以稱之為布局響應屏幕。

常見的主要有如下幾種方式：

1、布局不變，即頁面中整體模塊布局不發生變化，主要有：

2、布局改變，即頁面中的整體模塊布局發生變化，主要有：

很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上儘可能時保持簡單輕巧，而且同一臨界點內（發生布局改變的臨界點稱之為臨界點）保持統一邏輯。否則頁面實現得太過複雜，也會影響整體體驗和頁面性能。

官方微信公眾號：優聯創UCreator

優聯創官網：www.ucreator.cc