想要成為網頁設計師嗎？那你得先學會網頁設計??！想要學會網頁設計嗎？那你也得先學會網頁設計的規(guī)范吧！今天合肥榮博電腦培訓學校就為大家分享一些網頁設計規(guī)范以及建議，快來看看吧！網頁中有大量的空白區(qū)域供設計師利用，千萬別設計的過于簡單了哦。

 

 

 

 

 

合肥榮博電腦培訓學校為你分享網頁設計規(guī)范

 

 

一、網頁設計中的規(guī)定和規(guī)范（全文重點）：

 

1、網頁設計中的原件：

傳統(tǒng)的網頁設計中，網頁從上到下分為：頂欄（top_bar），導航欄（nav），內容區(qū)（content），頂欄（bottom_bar）。而一般情況下內容區(qū)域分為版心、banner圖等重要原件。

第一屏：即你打開網頁不使用滾輪所看到的內容，設計師通常把頂欄+導航欄+banner圖稱為第一屏。一般情況下第一屏應該可以看到top+nav+banner+一部分內容區(qū)域，大概高度在580px左右。如果你想讓第一屏只能看到banner圖的話，top+nav+banner圖的高度就要在800px左右，但是nav的高度不能超過80px。

尺寸參考：

畫布：一般情況下可以考慮1920*N

頂欄：40-60px

導航欄：不超過80px

banner圖：一般在500-800px不等（下面會細說怎么樣能第一屏只看圖）

底欄：越小越好，300px左右

版心：960 980 1000 1200下文詳解

板塊間距：一般在30-50px之間

 

2、字體的使用：

網頁的開發(fā)中，代碼僅支持實現微軟雅黑和宋體，所以除了微軟雅黑和宋體外所有的其余字體將以切圖的形式去體現。在網頁當中字體的使用一般是在12px-100px之內，12px以下是肉眼不可視范圍，大于80px其實就是非常愚蠢的設計了。

一般情況下：

我們在12-14px這個像素區(qū)間內，使用宋體，字體樣式為無。（順帶一提宋體這個字體的樣式只能是無，因為如果調整為平滑等或大于14px都會出現毛邊）。大于14px的字體，我們要使用的是微軟雅黑，字體樣式為平滑。（微軟雅黑必須加平滑樣式。其實也可以12px用雅黑，但是12px的話會有一些毛邊，可以自己control+1試一下）。

 

3、常用的字體顏色：

網頁當中是十分注重父子級關系的，通常設計中不會使用純黑色或純白色。如果想通過字體顏色去區(qū)分父子關系，推薦從高-低（#333，#666，#999，#ccc），#666是正文常用的字體。

 

4、版心的概念：

版心是整個網頁的主顯示區(qū)域，并不是全部的內容顯示區(qū)域，如果沒有版心的存在，整個頁面的內容將無法完全呈現于網頁當中（如果control+1你的頁面無法居中平鋪的話，你要看一下是不是版心歪了）。版心內容納視覺中心，即核心的表達內容。一般情況下版心的尺寸為：960，980，1000，1200px或其他尺寸（僅提供參考，不是死規(guī)矩）。

 

5、標準的按鈕（了解）： #p#分頁標題#e#

在之前的網頁設計中是有規(guī)范的按鈕這么個說法的，但是現在沒了，看的舒服就好。建議可以了解一下，標準的按鈕尺寸是：上下留白為文字的1/2，左右留白為文字的2/3。關于圓角的使用，要么就不加圓角，要加圓角的話，建議加到滿（膠囊狀）或10px以內。

 

二、設計建議：

 

正如我說的，網頁當中有大面積的空白區(qū)域，你的設計可以天馬行空，也可以為所欲為。但是你要在做的時候想一下你設計的那部分需要去切圖，如果切圖的話，這個圖片的位置是否需要相對或定位（定位很有可能出現bug，因為對于不同的瀏覽器而言，相對和都不是一定的）。

 

1、盒子的概念：

盒子即塊級元素，一般的網頁代碼中都是以div+css（div布局，css添加屬性）來寫的。你所設計的元素將會以一個一個的小盒子去分布，在設計的時候要有塊級概念，一方面方便代碼，另一方面讓網頁不同的區(qū)域更突出。沒有分塊的百度搜索結果，右側的部分顯得較弱。分塊設計的微博，各個板塊都相對獨立，除空間感外，更能引起注意。

 

2、對齊

無論做哪方面的設計，該對齊的一定要對齊。程序員只會按你打的頁面去畫，不會去設計，如果你差一個像素，那就真的結果也是一樣的，還有ps字體的虛邊是算像素的。