想要成為網(wǎng)頁(yè)設(shè)計(jì)師嗎？那你得先學(xué)會(huì)網(wǎng)頁(yè)設(shè)計(jì)啊！想要學(xué)會(huì)網(wǎng)頁(yè)設(shè)計(jì)嗎？那你也得先學(xué)會(huì)網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范吧！今天合肥榮博電腦培訓(xùn)學(xué)校就為大家分享一些網(wǎng)頁(yè)設(shè)計(jì)規(guī)范以及建議，快來(lái)看看吧！網(wǎng)頁(yè)中有大量的空白區(qū)域供設(shè)計(jì)師利用，千萬(wàn)別設(shè)計(jì)的過(guò)于簡(jiǎn)單了哦。

合肥榮博電腦培訓(xùn)學(xué)校為你分享網(wǎng)頁(yè)設(shè)計(jì)規(guī)范

一、網(wǎng)頁(yè)設(shè)計(jì)中的規(guī)定和規(guī)范（全文重點(diǎn)）：

1、網(wǎng)頁(yè)設(shè)計(jì)中的原件：

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

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

尺寸參考：

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

頂欄：40-60px

導(dǎo)航欄：不超過(guò)80px

banner圖：一般在500-800px不等（下面會(huì)細(xì)說(shuō)怎么樣能第一屏只看圖）

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

版心：960 980 1000 1200下文詳解

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

2、字體的使用：

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

一般情況下：

我們?cè)?/span>12-14px這個(gè)像素區(qū)間內(nèi)，使用宋體，字體樣式為無(wú)。（順帶一提宋體這個(gè)字體的樣式只能是無(wú)，因?yàn)槿绻�調(diào)整為平滑等或大于14px都會(huì)出現(xiàn)毛邊）。大于14px的字體，我們要使用的是微軟雅黑，字體樣式為平滑。（微軟雅黑必須加平滑樣式。其實(shí)也可以12px用雅黑，但是12px的話會(huì)有一些毛邊，可以自己control+1試一下）。

3、常用的字體顏色：

網(wǎng)頁(yè)當(dāng)中是十分注重父子級(jí)關(guān)系的，通常設(shè)計(jì)中不會(huì)使用純黑色或純白色。如果想通過(guò)字體顏色去區(qū)分父子關(guān)系，推薦從高-低（#333，#666，#999，#ccc），#666是正文常用的字體。

4、版心的概念：

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

5、標(biāo)準(zhǔn)的按鈕（了解）：

在之前的網(wǎng)頁(yè)設(shè)計(jì)中是有規(guī)范的按鈕這么個(gè)說(shuō)法的，但是現(xiàn)在沒(méi)了，看的舒服就好。建議可以了解一下，標(biāo)準(zhǔn)的按鈕尺寸是：上下留白為文字的1/2，左右留白為文字的2/3。關(guān)于圓角的使用，要么就不加圓角，要加圓角的話，建議加到滿（膠囊狀）或10px以內(nèi)。

二、設(shè)計(jì)建議：

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

1、盒子的概念：

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

2、對(duì)齊

無(wú)論做哪方面的設(shè)計(jì)，該對(duì)齊的一定要對(duì)齊。程序員只會(huì)按你打的頁(yè)面去畫，不會(huì)去設(shè)計(jì)，如果你差一個(gè)像素，那就真的結(jié)果也是一樣的，還有ps字體的虛邊是算像素的。

以上就是合肥榮博電腦培訓(xùn)學(xué)校的詳細(xì)介紹了，你都清楚了嗎？還想了解更多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)嗎？那就來(lái)合肥榮博電腦培訓(xùn)學(xué)校報(bào)名學(xué)習(xí)吧！