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

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

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

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

2、節(jié)約資源

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

3,、重復(fù)利用

相同屬性單元,、頁面新建時(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ù)的值,。

正文的大小也是用戶最小能接受的字體大小：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)頁柵格

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

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

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

這是四欄的情況,，而且也分成了兩類,，一類是二級(jí)頁面，一類是三級(jí)頁面,，寬度分別為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)用的按鈕,，例如交易,、購買這些按鈕，也有后臺(tái)的按鈕,，例如：搜索,、提交這些，不同的按鈕,，大小也是不一樣的,。

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

●圖文規(guī)范

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

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

●圖標(biāo)

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

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

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

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

●banner圖

這個(gè)banne圖是可以根據(jù)平面的規(guī)范和要求來設(shè)計(jì)，在網(wǎng)頁中寬度一般是滿屏不會(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)格。