中山網(wǎng)頁設(shè)計、網(wǎng)站制作公司 藍圖科技

我們提供本土專業(yè)的網(wǎng)站建設(shè)方案，一流的設(shè)計師成就你不一樣的企業(yè)網(wǎng)站建設(shè)，優(yōu)質(zhì)設(shè)計是我們對客戶最好的回饋，因此規(guī)范的網(wǎng)頁設(shè)計是給用戶最好的保障。

如何做一個規(guī)范的網(wǎng)頁設(shè)計呢？

一、網(wǎng)頁尺寸

一般企業(yè)網(wǎng)站設(shè)置的寬度為996px；但是隨著4：3的顯示屏的普及，國內(nèi)網(wǎng)站大部分開始以1000個像素為界限，如果擔(dān)心還有一些老用戶會使用老式顯示屏的話，建議不超過1000像素去適合在所有的屏幕瀏覽，因為小屏幕會顯得擁擠，給人不美觀的設(shè)計布局。因此保守的尺寸設(shè)置，這樣可以保證大部分用戶舒適的瀏覽網(wǎng)頁。

二、主流瀏覽器

當(dāng)前比較流行的瀏覽器(chrome、IE、360、firefox、qq瀏覽器、遨游、百度等)都有自己的一個內(nèi)核，雖然基本上一樣，但是也有自己的一些特色，因此網(wǎng)頁顯示的時候會有一些不同，知道了瀏覽器的設(shè)計特點才能更好的設(shè)計頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同，那么頁面在每個瀏覽器上面的展現(xiàn)就會有所不同。還有在代碼處理上也要嚴格地去適應(yīng)各個瀏覽器的一些規(guī)則，不然當(dāng)這個瀏覽器可以正常打開，另一個又會打開亂碼的情況。規(guī)范的網(wǎng)頁設(shè)計對于后期的網(wǎng)站制作也有一定的幫助。

三、點擊操作

在網(wǎng)頁上，頁面的跳轉(zhuǎn)只有通過鼠標(biāo)點擊、滑動、滾動、拖拽來達到跳轉(zhuǎn)的效果，因此網(wǎng)頁設(shè)計的時候也要主要你的設(shè)計是做哪個動作。

四、html5頁面（和web頁面相似的一個頁面。手機上的網(wǎng)頁稱作為H5。）

概念：采用Html5語言寫出的App，不需要下載安裝。生存在瀏覽器中的應(yīng)用，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用。

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

響應(yīng)式設(shè)計概念：指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。做響應(yīng)式設(shè)計時需要遵循一個原則。

由于頁面的寬度發(fā)生了變化，進而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計。相對響應(yīng)式設(shè)計有深入了解，可參考《響應(yīng)式網(wǎng)站制作》直到最后在手機屏幕上的顯示圖片信息變成了一列或者兩列。

1、臨界點：當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點的概念。所以做響應(yīng)式設(shè)計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應(yīng)清晰的一個臨界點，制定了臨界點之后就知道，當(dāng)屏幕的寬度范圍位于哪一個點的時候，我們的頁面信息該如何展示。

2、刪格：將頁面分成幾欄、幾塊。

以上是以12刪格為基礎(chǔ)的案例。它的設(shè)計原則就是將頁面分成12個等分的欄，然后把頁面的內(nèi)容設(shè)計在12欄內(nèi)。比如左邊的一些商品展示它用到了一個刪格的單位；其中的一個最大面積的商品展示它用到了比較多的刪格；最右側(cè)的操作信息用到了四個刪格的比例。

中山網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計 網(wǎng)站制作 建站專線 ：15900092217