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

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

2、布局原則

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

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

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

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

首先將頁(yè)面按照3*3的方式進(jìn)行分頁(yè)，如下圖：

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

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

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

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

在頁(yè)面布局中，各功能區(qū)域按照“像素”和“比例”進(jìn)行切分，以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、頁(yè)面展現(xiàn)

對(duì)于頁(yè)面布局，除了上述要求外，還需要考慮以下要求：

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

接口層次不超過(guò)3層；

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

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

另外，對(duì)于用戶的感官來(lái)說(shuō)，屏幕對(duì)角線相交的位置就是用戶直視的地方，頁(yè)面正上方的四分之一是容易引起用戶注意的位置，所以在放置頁(yè)面的時(shí)候要注意使用這兩個(gè)位置。

要求：

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

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

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

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

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

• 長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度；
• 布局要合理，不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間；
• 同一頁(yè)面上的按鈕大小應(yīng)該一致，不同頁(yè)面的按鈕大小盡量相近，按鈕上忌用太長(zhǎng)的名稱(chē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)；
• 如果窗體支持最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；
• 系統(tǒng)對(duì)話框頁(yè)面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能；
• 通常父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放；
• 如果能給用戶提供自定義界面風(fēng)格，則由用戶自己選擇顏色、字體等；

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

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