標(biāo)準(zhǔn)的意義

 網(wǎng)頁(yè)設(shè)計(jì)，可能大多數(shù)的人第一個(gè)想到的就是前端代碼和后臺(tái)的程序，但在做這兩個(gè)之前，還有一個(gè)必須先有的，那就是設(shè)計(jì)圖。沒有設(shè)計(jì)圖，前端工程師就沒有依據(jù)去實(shí)現(xiàn)。可能很多人都會(huì)說我做網(wǎng)頁(yè)設(shè)計(jì)圖都沒按照規(guī)范做過，這個(gè)也是可以的，那為什么我們還要花費(fèi)那么多時(shí)間學(xué)規(guī)范呢？主要有這么幾點(diǎn)原因。

1、統(tǒng)一識(shí)別

規(guī)范能使頁(yè)面相同屬性單元識(shí)別統(tǒng)一，防止混亂，甚至出現(xiàn)嚴(yán)重錯(cuò)誤，避免用戶在瀏覽時(shí)無法理解。

2、節(jié)約資源

除活動(dòng)推廣等個(gè)性頁(yè)面外，設(shè)計(jì)其他頁(yè)面使用規(guī)范標(biāo)準(zhǔn)能極大的減少設(shè)計(jì)時(shí)間，達(dá)到節(jié)約資源的目的。

3、重復(fù)利用

相同屬性單元、頁(yè)面新建時(shí)可執(zhí)行標(biāo)準(zhǔn)重復(fù)使用，減少無關(guān)信息，就是減少對(duì)主體信息傳達(dá)的干擾，利于閱讀和信息傳遞。

4、上手簡(jiǎn)單

對(duì)于設(shè)計(jì)或前端新手來說，查看標(biāo)準(zhǔn)能使工作上手時(shí)間更快，減少出錯(cuò)。

因?yàn)榇嬖谶@幾點(diǎn)，所以我們?nèi)ピO(shè)計(jì)的時(shí)候按照規(guī)范來還是能更快去進(jìn)行設(shè)計(jì)的，而且規(guī)范都是別人總結(jié)出來的，包含了很多用戶體驗(yàn)的最佳數(shù)值，這個(gè)也是可以參考的。

網(wǎng)站的分類

而在設(shè)計(jì)網(wǎng)站的時(shí)候必須對(duì)網(wǎng)站的種類有一定的了解，需要弄清楚網(wǎng)站的特征是什么，對(duì)癥下藥。做到最好網(wǎng)站大類的可以分成這么五種，電商網(wǎng)站、企業(yè)網(wǎng)站、個(gè)人網(wǎng)站、門戶網(wǎng)站、專題網(wǎng)站。他們每一種都有各自的特性，先做得更好的話最好都去了解一下。這些都只是他們的大類，小類去分的話會(huì)更多。

網(wǎng)站的規(guī)范

了解完上面的一些東西，接下來就可以進(jìn)入狀態(tài)來學(xué)習(xí)一下網(wǎng)站設(shè)計(jì)的時(shí)候有哪些規(guī)范了。

●尺寸大小

不論設(shè)計(jì)什么，我們都必須有一個(gè)作為畫布，然后才能再畫布上進(jìn)行設(shè)計(jì)，那么我們這個(gè)畫布該做成多大呢？這就是我們?nèi)ピO(shè)計(jì)的時(shí)候遇到的第一個(gè)問題。

一般我們?nèi)ピO(shè)計(jì)的時(shí)候都是依據(jù)電腦分辨率大小去設(shè)計(jì)的，也根據(jù)電腦顯示屏的大小，現(xiàn)在用的比較多的是1920px的寬度，以前的版本也有用到1440px，比較小的還有1280px的，但現(xiàn)在屏幕越來越大，一般設(shè)計(jì)的設(shè)計(jì)的版面也會(huì)設(shè)置得大一點(diǎn)的尺寸。

那么，如果我們?cè)O(shè)計(jì)的時(shí)候使用的是1920px寬度大小的屏幕，那么我們內(nèi)容該做成多大，是跟整體寬度一樣大嗎？一般不會(huì)有人這么做。

因?yàn)橛行r(shí)候我們做出來1920px這么大的寬度，但有些人去瀏覽的時(shí)候他們的電腦寬度才只有1440px，那么旁邊的那一部分就會(huì)顯示不出來，所以我們就需要一個(gè)內(nèi)容區(qū)域的大小，來保證不論在多大的顯示屏都是可以完整的顯示全部的內(nèi)容，這個(gè)內(nèi)容區(qū)域的大小一般設(shè)置的是1000左右，以前的設(shè)置得比較小一些，像960或者980，現(xiàn)在有些再設(shè)計(jì)的時(shí)候設(shè)置得大一點(diǎn)的話可以設(shè)計(jì)到1200px這么大。但保險(xiǎn)點(diǎn)還是1000為好。具體的大小可以根據(jù)自己的要求去調(diào)整。

●字體大小

字體的要求也是蠻多的，都是數(shù)據(jù)，一般去設(shè)計(jì)的時(shí)候標(biāo)題的大小設(shè)置在16px或者14px，注意不要設(shè)置成15px，盡量避免出現(xiàn)一些單數(shù)的值。

正文的大小也是用戶最小能接受的字體大?。?span>12px，這個(gè)就沒必要設(shè)計(jì)得那么大。英文的最小碼可以設(shè)置到9px，這個(gè)大小的話也已經(jīng)能看清楚。

還有一個(gè)是使用什么樣的字體，因?yàn)檫@個(gè)網(wǎng)站設(shè)計(jì)出來之后是要上線給別人瀏覽的，所以為了避免一些字體不能顯示出來，所以采用的字體會(huì)要求采用系統(tǒng)自帶的，像中文的有微軟雅黑、黑體、宋體這些，英文的有Tahoma、Arial、Verdana。這些也是我們應(yīng)該考慮的問題。

●網(wǎng)頁(yè)柵格

先解釋什么是網(wǎng)頁(yè)柵格：

網(wǎng)頁(yè)柵格就是以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。簡(jiǎn)單的理解就是可以通過這些網(wǎng)頁(yè)柵格去區(qū)分內(nèi)容，將內(nèi)容歸類。它的計(jì)算是比較復(fù)雜的，我們這里大概的了解一下就行了。

上圖中以980px為例子，將柵格分了兩欄和三欄的時(shí)候他們之間的間距為10px。如果分成四欄，那又會(huì)有所不一樣。

這是四欄的情況，而且也分成了兩類，一類是二級(jí)頁(yè)面，一類是三級(jí)頁(yè)面，寬度分別為40px和30px。

●表單

相信學(xué)過前端的同學(xué)對(duì)這個(gè)就比較了解是什么了，所謂的表單就是那些輸入框和單選框、復(fù)選框。他們之間的間距和大小都有一定的規(guī)范。

表單與表單的間距，表單與文字的間距，都有一些規(guī)范在上面，去設(shè)計(jì)的時(shí)候按照規(guī)范去做就行了，當(dāng)然這些也只是規(guī)范，可以適當(dāng)?shù)姆糯蠡蛘呖s小。

大部分的都只是一些數(shù)值，多做幾個(gè)網(wǎng)站，自然就記住了。

●留白

適當(dāng)?shù)膶?nèi)容進(jìn)行留白，讓整個(gè)界面的各個(gè)元素能明顯的區(qū)分。

①板塊間距均為10px 

②板塊與內(nèi)容間距均為10px

③內(nèi)容單元之間間距為10px

④內(nèi)容的間距均為10px

所以去設(shè)計(jì)的時(shí)候不要把所有東西全部堆積再一起，要進(jìn)行有效的區(qū)分，留白能讓看的人覺得界面給的感覺很舒適。

●Button

按鈕的分類也比較多，有分為運(yùn)用的按鈕，例如交易、購(gòu)買這些按鈕，也有后臺(tái)的按鈕，例如：搜索、提交這些，不同的按鈕，大小也是不一樣的。

這些就是按鈕的規(guī)范，做的時(shí)候可以看一下。

●圖文規(guī)范

為了讓網(wǎng)頁(yè)看起來更加的整潔，而不像是堆積起來的，所以也要將文字與圖片用距離區(qū)分開來，讓它文字是文字，圖片是圖片。

圖片與文字之間的間距一般是10px，標(biāo)圖與價(jià)格的間距也為10px，有些地方也會(huì)用到一些描邊，這時(shí)候描邊不要做得太大，一般是1px就夠了，顏色也不需要復(fù)雜，簡(jiǎn)單點(diǎn)就好，這里推薦的是淺灰色#CCCCCC。

●圖標(biāo)

網(wǎng)頁(yè)上也有很多用圖標(biāo)來代替文字，這樣能讓頁(yè)面更加豐富，不會(huì)只有文字那樣那么單調(diào)。

就像上面的這些圖標(biāo)，去設(shè)計(jì)的時(shí)候也有幾個(gè)要求。

第一個(gè)是制作規(guī)格上，要有一個(gè)統(tǒng)一的視角，統(tǒng)一的倒角，讓他們的外形看起來是一個(gè)媽生的，還有就是材質(zhì)的，不要有些是鐵質(zhì)的，有些又做成木質(zhì)的，太多樣會(huì)讓頁(yè)面看起來很亂，還有一個(gè)是顏色數(shù)量不要超過三種，太多顏色會(huì)很雜，所以簡(jiǎn)單點(diǎn)就好。

第二個(gè)是制作要求，要會(huì)意直觀，說得明白點(diǎn)就是要讓別人一眼就看出它是誰，這也是它用來區(qū)別文字的價(jià)值，如果看都看不出是什么，那還不如直接用文字。

●banner圖

這個(gè)banne圖是可以根據(jù)平面的規(guī)范和要求來設(shè)計(jì)，在網(wǎng)頁(yè)中寬度一般是滿屏不會(huì)局限在內(nèi)容區(qū)域里面，高度的話看設(shè)計(jì)師個(gè)人沒什么硬性規(guī)定。

說到這里就差不多了，以上講的只是規(guī)范，不是規(guī)定，所以不需要全部按照它的大小去做，一切依照設(shè)計(jì)師的想法可以進(jìn)行更改，不要因?yàn)檫@些規(guī)范去限制你天馬行空的現(xiàn)象。設(shè)計(jì)以美觀為主，大膽的設(shè)計(jì)，大膽的創(chuàng)新，做出一些屬于自己的設(shè)計(jì)風(fēng)格。