初衷

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

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

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

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

4旷赖、上手簡單
對于設(shè)計(jì)或前端新手來說，查看標(biāo)準(zhǔn)能使工作上手時間更快俯萌，減少出錯。

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

WEB端設(shè)計(jì)規(guī)范

常見網(wǎng)頁尺寸

輸入圖片說明

[圖片上傳失敗...(image-6fc135-1513684111749)]

輸入圖片說明

一般網(wǎng)站寬為996px鞋吉；國內(nèi)網(wǎng)站大部分還是以1000個像素為界限泼诱，因超過1000像素適合在大屏幕上瀏覽却音，小屏幕會顯得擁擠。國內(nèi)尺寸設(shè)置比較保守，這樣可以保證大部分用戶舒適的瀏覽網(wǎng)頁藐窄。

主流瀏覽器：

• chrome
• IE
• firefox
• safari
• opera

知道了瀏覽器的設(shè)計(jì)特點(diǎn)才能更好的設(shè)計(jì)頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同微宝，那么頁面在每個瀏覽器上面的展現(xiàn)就會有所不同。

點(diǎn)擊操作：
主要通過鼠標(biāo)點(diǎn)擊虎眨、滑動蟋软、滾動、拖拽嗽桩。

屏幕適配：由于受限于H5頁面在移動設(shè)備上的屏幕是各種各樣的岳守。對設(shè)計(jì)影響比較大的主要是屏幕分辨率、尺寸涤躲、屏幕方向這些因素棺耍。而H5頁面會有非常多的一個屏幕尺寸，那么在不同的屏幕下的界面適配就成了一個很大的問題种樱。解決的辦法就是通過響應(yīng)式網(wǎng)站的設(shè)計(jì)方法來提升在不同分辨率下的兼容性蒙袍。

響應(yīng)式設(shè)計(jì)概念：指的是不同設(shè)備俊卤、屏幕、分辨率害幅、操作方式（鼠標(biāo)消恍、鍵盤、觸摸）以现，保證信息在不同環(huán)境下表現(xiàn)一致狠怨，保證可交互可操作。

舉例如下：

輸入圖片說明

輸入圖片說明

輸入圖片說明

輸入圖片說明

做響應(yīng)式設(shè)計(jì)時需要遵循一個原則邑遏。由于頁面的寬度發(fā)生了變化佣赖，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計(jì)。直到最后在手機(jī)屏幕上的顯示圖片信息變成了一列记盒。
1憎蛤、臨界點(diǎn)：當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點(diǎn)的概念。所以做響應(yīng)式設(shè)計(jì)時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應(yīng)清晰的一個臨界點(diǎn)纪吮，制定了臨界點(diǎn)之后就知道俩檬，當(dāng)屏幕的寬度范圍位于哪一個點(diǎn)的時候，我們的頁面信息該如何展示碾盟。
2棚辽、刪格：將頁面分成幾欄、幾塊冰肴。

輸入圖片說明

以上是以12刪格為基礎(chǔ)的案例屈藐。它的設(shè)計(jì)原則就是將頁面分成12個等分的欄，然后把頁面的內(nèi)容設(shè)計(jì)在12欄內(nèi)嚼沿。比如左邊的一些商品展示它用到了一個刪格的單位估盘；其中的一個最大面積的商品展示它用到了比較多的刪格；最右側(cè)的操作信息用到了四個刪格的比例骡尽。
3遣妥、使用Native App的UI控件：在設(shè)計(jì)H5頁面的同時，能夠盡量讓樣式與Native保持一致攀细；文字字號顏色均可與APP設(shè)計(jì)一致箫踩；減少不必要的手勢操作；避免與瀏覽器的交互沖突谭贪，如左右滑動境钟。

尺寸大小

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

輸入圖片說明

字體大小

• 盡量避免出現(xiàn)一些單數(shù)的值桥帆。
• 明確指定標(biāo)題和正文的字體大小医增。
• 對于非系統(tǒng)默認(rèn)字體，需明確指定老虫。

網(wǎng)頁柵格

指定對應(yīng)范圍的柵格間距參數(shù)叶骨。示例如下：

輸入圖片說明

上圖中以980px為例子，將柵格分了兩欄和三欄的時候他們之間的間距為10px张遭。如果分成四欄邓萨，那又會有所不一樣地梨。

輸入圖片說明

表單

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

輸入圖片說明

輸入圖片說明

留白

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

輸入圖片說明

板塊間距均為10px
板塊與內(nèi)容間距均為10px
內(nèi)容單元之間間距為10px
內(nèi)容的間距均為10px

按鈕

按鈕的分類也比較多，有分為運(yùn)用的按鈕献起，例如交易洋访、購買這些按鈕，也有后臺的按鈕谴餐，例如：搜索姻政、提交這些，不同的按鈕岂嗓，大小也是不一樣的汁展。

輸入圖片說明

圖文規(guī)范

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

輸入圖片說明

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

圖標(biāo)

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

輸入圖片說明

就像上面的這些圖標(biāo)转晰，去設(shè)計(jì)的時候也有幾個要求。
第一個是制作規(guī)格上士飒，要有一個統(tǒng)一的視角查邢，統(tǒng)一的倒角，讓他們的外形看起來是一個媽生的酵幕，還有就是材質(zhì)的扰藕，不要有些是鐵質(zhì)的，有些又做成木質(zhì)的芳撒，太多樣會讓頁面看起來很亂邓深，還有一個是顏色數(shù)量不要超過三種，太多顏色會很雜笔刹，所以簡單點(diǎn)就好芥备。
第二個是制作要求，要會意直觀舌菜，說得明白點(diǎn)就是要讓別人一眼就看出它是誰萌壳，這也是它用來區(qū)別文字的價值，如果看都看不出是什么酷师，那還不如直接用文字讶凉。

很多圖標(biāo)如果能用css3樣式完成的，參考這個網(wǎng)站Font Awesome山孔。

banner圖

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

App設(shè)計(jì)規(guī)范

這個設(shè)計(jì)聚合網(wǎng)站對Android和iOS褐望，手機(jī)和平板電腦的設(shè)計(jì)做了詳盡的說明勒庄，推薦閱讀這個文檔。

Android設(shè)計(jì)規(guī)范點(diǎn)擊此處查看瘫里，也有一個中文版的实蔽，點(diǎn)擊此處查看。
iOS設(shè)計(jì)規(guī)范點(diǎn)擊此處查看谨读。

后記

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

參考：設(shè)計(jì)聚合網(wǎng)站