干貨！合肥榮博為你分享網頁設計規范！

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

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

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

1、網頁設計中的原件：

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

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

尺寸參考：

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

頂欄：40-60px

導航欄：不超過80px

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

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

版心：960 980 1000 1200下文詳解

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

2、字體的使用：

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

一般情況下：

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

3、常用的字體顏色：

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

4、版心的概念：

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

5、標準的按鈕（了解）：

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

二、設計建議：

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

1、盒子的概念：

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

2、對齊

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

以上就是合肥榮博電腦培訓學校的詳細介紹了，你都清楚了嗎？還想了解更多關于網頁設計的相關知識嗎？那就來合肥榮博電腦培訓學校報名學習吧！