接下來推來客給大家分享網(wǎng)站設(shè)計的頁面標(biāo)準(zhǔn)布局框架：1、頁面框架

WEB的頁面框架是指構(gòu)成一個完整頁面的組織結(jié)構(gòu)。它通常由以下三部分組成：Head、Main、Foot。有時，出于布局需要，在“Head”下增加一個用于頁面功能導(dǎo)航的“Menu”。如圖所示：

2、布局原則

對于一個WEB應(yīng)用來說，頁面布局對應(yīng)于Web應(yīng)用的功能區(qū)域，頁面中各個部分之間的劃分比例必須遵循一定的規(guī)則。

頁面布局的設(shè)計首先需要考慮用戶瀏覽網(wǎng)頁時的視覺流的要求：

從視覺流向上看，用戶首先看到的是頁面“Head”部分的左側(cè)，通常是標(biāo)識WEB應(yīng)用的Logo；然后顯示W(wǎng)EB應(yīng)用程序主要功能的“菜單”用于頁面導(dǎo)航；接下來，用戶將看到的是頁面左側(cè)的“側(cè)邊欄”。通常，這也用于頁面功能導(dǎo)航，與“菜單”的選擇相呼應(yīng)。這里的內(nèi)容可以用樹狀結(jié)構(gòu)展示更詳細(xì)的功能。接下來是頁面中央的內(nèi)容部分，最后用戶的視線落在了WEB頁面的底部。3、頁面分割

以上圖布局為例，按照網(wǎng)頁設(shè)計常用的方法，結(jié)合黃金比例的方法：

首先將頁面按照3*3的方式進行分頁，如下圖：

高度方向上1/3區(qū)域按黃金分割法劃分頭部區(qū)域和菜單區(qū)域；

寬度方向，中間左側(cè)1/3區(qū)域按照黃金分割法劃分為側(cè)邊欄區(qū)域，剩余空間留作內(nèi)容區(qū)域；

高度方向下1/3區(qū)域按黃金分割法劃分足部區(qū)域；4、頁面結(jié)構(gòu)

在頁面的布局中，各個區(qū)域的大小定義是不同的，如下圖所示：

在頁面布局中，各功能區(qū)域按照“像素”和“比例”進行切分，以1024*768分辨率為基準(zhǔn)，其中：

Head區(qū)域按比例設(shè)置寬度，寬度按100%設(shè)置，高度由占用的固定像素值決定，一般？ px，如果有菜單區(qū)域，調(diào)整為？像素；

Menu區(qū)的配置要求同“head”。寬度按照100%設(shè)置，高度結(jié)合“頭部”的高度設(shè)置確定。像素；

Sidebar區(qū)域的寬度是組合與“內(nèi)容”的黃金比例，由固定像素決定，一般情況下？像素；高度按比例設(shè)置；

內(nèi)容區(qū)，高寬方向布局均按比例設(shè)置；

Foot區(qū)域，寬度按100%設(shè)置，高度由占用的固定像素值決定，一般？像素；

5、頁面展現(xiàn)

對于頁面布局，除了上述要求外，還需要考慮以下要求：

可適應(yīng)1024*768和800*600兩種分辨率；

接口層次不超過3層；

在默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平和垂直滾動條；

當(dāng)界面內(nèi)容超出顯示區(qū)域時，會以浮層的形式顯示；

另外，對于用戶的感官來說，屏幕對角線相交的位置就是用戶直視的地方，頁面正上方的四分之一是容易引起用戶注意的位置，所以在放置頁面的時候要注意使用這兩個位置。

要求：

父頁面或主頁面的中心位置應(yīng)設(shè)計在對角線焦點附近；

子頁面的位置應(yīng)靠近主窗體的左上角或中心；

當(dāng)需要彈出多個子頁面時，應(yīng)將子頁面移動到右下方，以顯示表單標(biāo)題；

頁面上半部分放置用戶標(biāo)識、主要功能導(dǎo)航和部分系統(tǒng)操作功能；6、頁面美化

界面的大小應(yīng)符合美學(xué)要求

• 長寬接近黃金點比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度；
• 布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；
• 同一頁面上的按鈕大小應(yīng)該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；
• 按鈕的大小要與界面的大小和空間要協(xié)調(diào)；
• 避免空曠的界面上放置很大的按鈕；
• 放置完控件后界面不應(yīng)有很大的空缺位置；
• 字體的大小要與界面的大小比例協(xié)調(diào)， 通常使用的字體12px；
• 前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用Windows界面色調(diào)；
• 大型系統(tǒng)常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；
• 界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，需要藝術(shù)處理或有特殊要求的地方建議使用圖片表現(xiàn)；
• 如果窗體支持最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；
• 系統(tǒng)對話框頁面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能；
• 通常父窗體支持縮放時，子窗體沒有必要縮放；
• 如果能給用戶提供自定義界面風(fēng)格，則由用戶自己選擇顏色、字體等；

• “Head”中標(biāo)題文字，20px；
• “Menu”中的導(dǎo)航文字，14px；
• “Sidebar”中的文字，12px；
• “Content”中的正文，12px或14px，標(biāo)題；
• “foot”中的文字，12px或10px；

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！