整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁設計規范
在了解網頁設計規范之前，我們先簡單了解網站的分類，網站的分類按對象劃分可分為 To C端和 To B端兩種：
To C端是面向用戶和消費者，所以設計上一定要可以吸引人，并且以用戶為中心考慮體驗設計。
To B 端是面向商家和專業人士，因而TO B與 TO C端在設計上是大相徑庭的， To B 類網頁最重要的是效率而不是體驗。
因互聯網的發展，現今對網頁設計的要求也提高了，所以有個自己的設計規范會使設計簡潔而高效。根據本大寶貝的設計細節，相信你很快就能與大神比擬了，哈哈哈哈，開個小玩笑，下面咱們就從尺寸、字體、圖片、顏色等方面來開展深入探索！其實設計規范就是把主要頁面的元素固定成統一元素即可。具體來說一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等不同分類。今天我們就先來了解to c設計規范，后期會出TO B的設計規范 ！
一、網頁尺寸
1.網頁的布局主要有兩種：左右布局和居中布局。布局不一樣使設計的空間也不相同。
⑴、左右布局，靈活性強，UI限制小；左右通欄為導航欄，寬度沒具體限制，可根據實際情況調整；右側為內容板塊范圍，是網站內容展示區域。
⑵、居中布局，中間的深色部分為有效的顯示局域，用于網站內容的展示；兩邊留白沒實際用圖，只是為適配而存在
2.當前最流行的分辨率是1920px*1080px的，所以建議創建網頁尺寸為1920px*1080px，頁面中心區域常設置為1200px（或1000px -1400px區間），以這個尺寸來設計相對標準。每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。
頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被卷去的高：document.body.scrollTop
網頁被卷去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth=width + padding
clientHeight=height + padding
offsetWidth=width + padding + border
offsetHeight=height + padding + border
IE5.0/5.5：
clientWidth=width - border
clientHeight=height - border
offsetWidth=width
offsetHeight=height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth=0;
var winHeight=0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth=window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth=document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight=window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight=document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。
頁設計尺寸是多少?下面就來學習一下。
網頁設計尺寸
制作網頁時我們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但并不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種：左右型布局和居中型布局。布局的不一致，使可設計的空間也不相同。
左右結構型
1、左右布局，靈活性強，UI的限制小;
2、左邊通欄為導航欄，寬度沒有具體的限時，可以根據實際情況進行調整;
3、右側為內容板塊范圍，是網站內容展示區域。
居中型
4、居中布局，中間的黃色部分為有效的顯示區域，用于網站內容的展示。
5、換句話說，兩邊均為留白，沒有實際用途，只是為了適配而存在。
6、內容限時區域在好控制在1000px-1200px。
網頁常用字體
現在網頁的布局我們已經了解了，那么接下來就是網頁中常用到的字體。
字體設計的總原則是：可辨識性和易讀性。
中文建議使用微軟雅黑字體，英文則建議使用arial 字體。常用的字體大小號有以下幾種：
1、12px是用于網頁的最小字體，適用于突出性的日期，版權等注釋性內容。
2、14px則適用于非突出性的普通正文內容。
3、16px或18px適用于突出性的標題內容。
4、網站的字體大小并沒有硬性規定具體的字號，根據實際情況可以酌情考慮，但是要有限適用偶數字號。
5、字體規格也不需要太多，最好適用三種混搭。如果需要更多
6、層次的區別，可以改變字體顏色或加粗來體現。
網頁設計WEB端設計規范總結
一.尺寸規范
在網頁設計中首先要解決的是網頁布局大小及尺寸的問題，在ps新建文檔中可以見到當今常見web網頁尺寸，最常見尺寸為1366*768像素。
二.網頁的寬度尺寸
為了適應屏幕的顯示，頁面寬度設制要有一定的范圍值，其實在設計及設計學中也沒有相關硬性規定，但是為了兼容大多數瀏覽器一般是設置960px，隨著現在瀏覽器分辨率的變化，已開始1000px,1200px寬度發展，例如淘寶(1000px)京東商城(1200px)。如果需要兼容不同瀏覽器尺寸，現在比較流行的做法是做成響應式的，即根據不同分辨率顯示不同的尺寸，工作量也就隨之增加了。
三.主流瀏覽器
國際通用的有
chrome，IE，firefox，safari，opera
國內的知名瀏覽器有
QQ瀏覽器，獵豹瀏覽器，2345瀏覽器，搜狗瀏覽器，360瀏覽器，UC瀏覽器等
知道了瀏覽器的設計特點才能更好的設計頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同，那么頁面在每個瀏覽器上面的展現就會有所不同。
四.點擊操作
主要通過鼠標點擊、滑動、滾動、拖拽。
網頁設計所需注意事項
沒有內容層次用戶的眼睛喜歡有秩序的設計，如頭部包含導航和LOGO，特定內容使用lightbox，三列分欄，頁腳。它有助于在內心組織重要的信息，并引導用戶注意在你想讓他注意的地方。在傳統藝術中，新手們被教導色彩價值和線性透視三原則和其他藝術指導。在網頁設計中，沒有特別奉行的準則，但以直觀的方式組織你的內容是一條很好的經驗規則。也是多年培養的用戶習慣。最終習慣就是最終用戶。當然一成不變不是我們所鼓勵的。
太多的色彩背景一種顏色，內容文本一種顏色，鏈接一種顏色，頁頭和lightbox一種顏色，圖案和頁腳各一種顏色。這很好，因為它幫助區分了有用的內容。但是，多重漸變幾種鮮艷的色彩和大量有鮮明對比的色調及飽和度，會破壞你網站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(如藍色)，再搭配反相的單色(白灰黑)以獲得一個漂亮的搭配。這里強調下豆瓣的配色。也是我喜歡的顏色搭配。
太多的字體一般一個簡單的網頁設計，一般字體不超過3種。多則亂沒有足夠的空白空白可以說是設計中最重要的一部分。它有助于防止用戶在瀏覽網站時變得疲憊，它可以在內容中劃出距離，而且它本身也看上去不錯。空白不是必須用白色的，而是，它僅僅是為其他設計元素提供間隔和緩沖的空間不考慮用戶的分辨率。
對比的問題你考慮過閱讀黑底白字和白底黑字的不同嗎?你有沒有試過閱讀一下白底灰字?有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對比的方式。如果你很難舒服的閱讀文字，考慮一下改變字體大小或方式。
不一致，一致性是網頁設計的關鍵。它是把網頁設計組織在一起的方式，可以創造一種緊密結合的感覺。在網站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯系在一起。如果你在整個網站持續改變字體大小和色彩，用戶很快會覺得不知所措。
沒有足夠的文字間距與空白有關，文字間距有兩個部分，一個是字距，關系到字母之間的空白。一個是行距，關系到兩行文字之間的距離。這些有助于區分行與段落，使用戶更容易閱讀文字。
了解更多網絡營銷請關注珠海網站建設-杰作科技：www.jiezuo.org www.jiezuo.net www.jzuo.cn 珠海網站建設.com
原文鏈接：http://www.jzuo.cn/yingxiaodongtai/747.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
