不是所有的網(wǎng)頁(yè)設(shè)計(jì)都會(huì)那么給力，在開(kāi)始動(dòng)手之前一定要看好，網(wǎng)頁(yè)設(shè)計(jì)要符合基本的規(guī)則才能在此基礎(chǔ)上做到創(chuàng)新，好的網(wǎng)頁(yè)設(shè)計(jì)基本的設(shè)計(jì)規(guī)則不能亂，比如說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)中自己排版設(shè)計(jì)就很重要。

網(wǎng)頁(yè)設(shè)計(jì)規(guī)范是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師從業(yè)時(shí)必須要遵守的行為準(zhǔn)則，具體如下：

1、字體的選擇

對(duì)于大多數(shù)中國(guó)人來(lái)說(shuō)，見(jiàn)過(guò)*多的字體應(yīng)該就是黑體和宋體了，這兩種字體是設(shè)計(jì)的基礎(chǔ)字體，應(yīng)用在生活的各個(gè)場(chǎng)景中。

宋體：源于書法體，主要特點(diǎn)是橫細(xì)豎粗，筆畫末端帶有三角狀裝飾，字形端莊有力，常運(yùn)用在文章正文當(dāng)中。

黑體：字的主要特點(diǎn)是橫豎均勻，筆畫相對(duì)宋體較為粗壯，常用作文章標(biāo)題，突出而醒目。

那么，我們會(huì)發(fā)現(xiàn)，很多時(shí)候網(wǎng)頁(yè)設(shè)計(jì)師會(huì)選擇微軟雅黑體來(lái)代替宋體呢?原因是宋體是一款襯線字體，受到Windows平臺(tái)字體渲染技術(shù)的限制，在小字號(hào)字體渲染方面表現(xiàn)略差，部分字號(hào)在顯示時(shí)會(huì)產(chǎn)生鋸齒、模糊等效果。而微軟雅黑這款非襯線字體，筆畫豐滿、簡(jiǎn)潔，常用字號(hào)的顯示效果相比宋體更為優(yōu)秀，同時(shí)識(shí)別度更高。因此，從Vista時(shí)代起，微軟雅黑體就作為Windows的系統(tǒng)默認(rèn)字體沿用至今。

在網(wǎng)頁(yè)設(shè)計(jì)中，為了保證有較好的顯示效果，主要標(biāo)題的字體建議使用微軟雅黑體，次要標(biāo)題可選用宋體。

文章的正文可選用宋體，也可使用微軟雅黑體。

此外，如果網(wǎng)頁(yè)設(shè)計(jì)中遇到需要展示英文字符的情況，建議選擇Arial、Verdana和Tahoma這幾種系統(tǒng)默認(rèn)字體。

2、字號(hào)使用規(guī)范

在網(wǎng)頁(yè)設(shè)計(jì)中，一般選擇使用雙數(shù)字號(hào)，字號(hào)的大小并沒(méi)有明確規(guī)定，但為了確保正常的閱讀效果，可以參考以下參數(shù)：

在網(wǎng)頁(yè)設(shè)計(jì)中*小的字號(hào)一般為12像素;正文常見(jiàn)字號(hào)有12像素、14像素和16像素;標(biāo)題常見(jiàn)字號(hào)有18像素、20像素、26像素和30像素。

這里需要注意的是，由于顯示器分辨率的不斷提高，12像素的字號(hào)在大分辨率顯示器中會(huì)顯得較小，對(duì)用戶閱讀造成一定的困難。因此，在目前的網(wǎng)頁(yè)設(shè)計(jì)中很少使用12像素的字號(hào)，網(wǎng)站常規(guī)正文字號(hào)普遍使用的是14像素或16像素。

一般宋體和微軟雅黑字體均可以作為網(wǎng)頁(yè)設(shè)計(jì)的常用字體。但在目前的網(wǎng)頁(yè)設(shè)計(jì)中我們會(huì)發(fā)現(xiàn)，網(wǎng)頁(yè)中基本都以微軟雅黑字體為主，而宋體已不多見(jiàn)。具體來(lái)說(shuō)，微軟雅黑體相比宋體而言，少了一些裝飾性，同樣字號(hào)，微軟雅黑體在視覺(jué)上更顯粗壯有力，且辨識(shí)度更高，尤其是小字號(hào)的顯示效果，微軟雅黑體的視覺(jué)感會(huì)更為清晰與明朗。

3、段落、行間距規(guī)范

在網(wǎng)頁(yè)設(shè)計(jì)中，文字排版的要點(diǎn)分為兩個(gè)方面，即段落和行間距。段落中“行長(zhǎng)”與“對(duì)齊方式”的設(shè)置。

行長(zhǎng)：通常情況下，行越長(zhǎng)，行間距越大，否則用戶在閱讀時(shí)很容易串行。在網(wǎng)頁(yè)正文中，漢字一般以每行顯示30~40個(gè)字為宜，英文一般以每行顯示40~70個(gè)字母為宜。

段落：對(duì)齊方式主要有4種，包括左對(duì)齊、右對(duì)齊、居中對(duì)齊和兩端對(duì)齊。

段落對(duì)齊方式：在國(guó)內(nèi)，大段文字的設(shè)計(jì)，多數(shù)設(shè)計(jì)師會(huì)根據(jù)中國(guó)用戶的閱讀習(xí)慣，將對(duì)齊方式設(shè)置為左對(duì)齊。

行間距作為段落中的留白，讓字與字之間有了可呼吸的空間。過(guò)小的行間距會(huì)使頁(yè)面變得擁擠不堪，增加用戶錯(cuò)讀的可能性。而過(guò)大的行間距則會(huì)占用大量的頁(yè)面空間，缺乏美感。選擇適當(dāng)?shù)男虚g距不僅可以提升文字的易讀性，也可以*大限度地利用好頁(yè)面空間。

傳統(tǒng)中文文檔默認(rèn)行間距一般為1.5倍，在現(xiàn)階段的網(wǎng)頁(yè)設(shè)計(jì)中，漢字一般使用1.8~2倍的行間距。英文段落一般選擇1.5倍行間距。

4、網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)注規(guī)范

在設(shè)計(jì)的日常工作中，設(shè)計(jì)師與前端開(kāi)發(fā)人員的對(duì)接關(guān)系往往非常緊密，而設(shè)計(jì)圖的標(biāo)準(zhǔn)化標(biāo)注可以提高前端開(kāi)發(fā)人員的工作效率。

效果圖的標(biāo)注一般包括以下3個(gè)部分：

1)頁(yè)面中控件的顏色、尺寸、交互效果(如按鈕、表單等)。

2)字體顏色、字號(hào)。

3)頁(yè)面中各個(gè)模塊的尺寸和間距。

在效果圖標(biāo)注中，應(yīng)特別注意以下4個(gè)問(wèn)題：

1)文字清晰易讀。

2)使用的顏色應(yīng)與背景色區(qū)分。

3)盡量在空白區(qū)域，不要對(duì)原圖造成視覺(jué)干擾。

4)信息應(yīng)條理清楚，同一模塊的標(biāo)注應(yīng)擺放在同一位置，適當(dāng)留有間隙，方便開(kāi)發(fā)人員閱讀。