Web網頁設計標準之常見問題

引導語：網頁的設計需要考慮的問題比較多就，例如移動端與pc短的兼容性等，以下是小編整理的Web網頁設計標準之常見問題，歡迎參考閲讀!

　　Q：網頁設計的尺寸是多少？

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

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

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

左右佈局，靈活性強， UI 的限制小；

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

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

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

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

內容顯示的區域，最好控制在 1000-1200px。

　　Q：選擇什麼樣的字體？

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

中文建議使用 微軟雅黑 字體，英文則建議使用 arial無襯線字體，常用的字體字號大小有以下幾種：

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

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

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

網站的字體大小並沒有硬性規定具體的字號，根據實際情況可以酌情考慮，但是要 優先使用偶數字號。

字體規格也不需要太多，最好使用三種混搭。

如果需要更多層次的區別，可以用改變字體顏色或者加粗的方式來實現。

　　Q：字體間距舒適範圍是多少？

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

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

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

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

　　Q：字體顏色設計技巧？

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

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

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

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

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

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

　　Q：其他需要注意的事項有哪些？

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

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

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

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

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

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

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

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

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