接下來推來客給大家分享網站設計的頁面標準布局框架：1、頁面框架

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

2、布局原則

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

頁面布局的設計首先需要考慮用戶瀏覽網頁時的視覺流的要求：

從視覺流向上看，用戶首先看到的是頁面“Head”部分的左側，通常是標識WEB應用的Logo；然后顯示WEB應用程序主要功能的“菜單”用于頁面導航；接下來，用戶將看到的是頁面左側的“側邊欄”。通常，這也用于頁面功能導航，與“菜單”的選擇相呼應。這里的內容可以用樹狀結構展示更詳細的功能。接下來是頁面中央的內容部分，最后用戶的視線落在了WEB頁面的底部。3、頁面分割

以上圖布局為例，按照網頁設計常用的方法，結合黃金比例的方法：

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

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

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

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

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

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

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

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

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

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

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

5、頁面展現(xiàn)

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

可適應1024*768和800*600兩種分辨率；

接口層次不超過3層；

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

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

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

要求：

父頁面或主頁面的中心位置應設計在對角線焦點附近；

子頁面的位置應靠近主窗體的左上角或中心；

當需要彈出多個子頁面時，應將子頁面移動到右下方，以顯示表單標題；

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

界面的大小應符合美學要求

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

• “Head”中標題文字，20px；
• “Menu”中的導航文字，14px；
• “Sidebar”中的文字，12px；
• “Content”中的正文，12px或14px，標題；
• “foot”中的文字，12px或10px；

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