第1節(jié)Web頁面設(shè)計(jì)規(guī)范之頁面布局
一.1.網(wǎng)頁寬度
最新顯示器分辨率比例調(diào)查：
目前主流分辨率處于1024X768以上，在此狀態(tài)下，默認(rèn)使用910的網(wǎng)頁寬度。
特殊情況
1 .信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個(gè)參考尺寸：
950、990
2. 搜索類信息頁面，采用自適應(yīng)屏幕方式
一.2.頁面框架
WEB的頁面框架是指構(gòu)成完整頁面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成：Head，Main，F(xiàn)oot，有些時(shí)候出于布局的需要，在“Head”下面還會(huì)加上用于頁面功能導(dǎo)航的“Menu”。如圖：
圖1
一.3.頁面布局
布局原則
對(duì)于WEB應(yīng)用來說，頁面布局是和web應(yīng)用的功能區(qū)相對(duì)應(yīng)的，并且對(duì)于頁面中各個(gè)部分之間的切分比例也需要遵守一定的規(guī)則。
頁面布局的設(shè)計(jì)，首先需要考慮用戶在瀏覽web頁面時(shí)視覺流向上的要求：
圖2
從視覺流向上看，用戶首先看到的是頁面“Head”部分的左面，通常那里是標(biāo)識(shí)這個(gè)WEB應(yīng)用的Logo；然后是陳列WEB應(yīng)用主要功能的“Menu”來用于頁面導(dǎo)航；接下來用戶將看的是處于頁面左側(cè)的“sidebar”，通常這里也是用于頁面功能導(dǎo)航的，和“Menu”出的選擇相呼應(yīng)，這里的內(nèi)容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能；接下來是處于頁面中心位置的內(nèi)容部分，最后用戶的視線落在WEB頁面的底部。
布局要求
一.3.1.1.頁面分割
以上面圖示的布局方式為例，按照通常web頁面設(shè)計(jì)時(shí)所遵循的方法，并結(jié)合黃金分割比例的方法：
首先，將頁面按照3*3的方式進(jìn)行分割，如下圖：
在高度方向上，對(duì)上部1/3區(qū)域按照黃金分割的方法分出head和menu的區(qū)域；
在寬度方向上，對(duì)中部左邊1/3區(qū)域按照黃金分割的方法分出sidebar的區(qū)域，剩下的空間留給content區(qū)域；
在高度方向上，對(duì)下部1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域；
一.3.1.2.頁面結(jié)構(gòu)
頁面的布局中，各個(gè)區(qū)域大小的定義方式是不同的，請(qǐng)見下圖：
圖3
在頁面布局中，對(duì)各個(gè)功能區(qū)域的切分是按照“像素”和“比例”方式來進(jìn)行的，以1024*768的分辨率做為基準(zhǔn)，其中：
Head區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占*px，如果有menu區(qū)，則調(diào)整為*px；
Menu區(qū)域，和“head”的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來確定，一般占*px；
Sidebar區(qū)域，寬度是結(jié)合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占*px；高度是按照比例方式來設(shè)置的；
Content區(qū)域，高度和寬度方向布局都是按照比例方式來設(shè)置的；
Foot區(qū)域，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占*px；
一.3.1.3.頁面展現(xiàn)
對(duì)于頁面布局來說，除了上述要求外，還需要考慮如下要求：
能自適應(yīng)1024*768、800*600兩種分辨率；
界面層次不超過3層；
默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動(dòng)條；
當(dāng)界面內(nèi)容超出顯示區(qū)域時(shí)，以浮動(dòng)層的形式顯示；
還有，對(duì)于用戶的感官而言，屏幕對(duì)角線相交的位置是用戶直視的地方，而頁面正上方四分之一處為易吸引用戶注意力的位置，所以在放置頁面時(shí)要注意利用這兩個(gè)位置。
要求：
父頁面或主頁面的中心位置應(yīng)該設(shè)計(jì)在對(duì)角線焦點(diǎn)附近；
子頁面的位置應(yīng)該靠近主窗體的左上角或正中；
需要多個(gè)子頁面彈出時(shí)，應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜；
在頁面上方四分之一處放置用戶的logo、主要功能導(dǎo)航和一些系統(tǒng)操作功能；
一.3.1.4.頁面美化
界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。
建議和要求：
長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^長(zhǎng)度；
布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；
同一頁面上的按鈕大小應(yīng)該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長(zhǎ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īng)該支持縮放，即右上角只有關(guān)閉功能；
通常父窗體支持縮放時(shí)，子窗體沒有必要縮放；
如果能給用戶提供自定義界面風(fēng)格，則由用戶自己選擇顏色、字體等；
一.4.頁面字體
頁面字體屬性的設(shè)置在相應(yīng)的CSS中進(jìn)行定義，頁面文字編碼要求是UTF-8，在規(guī)定字體屬性時(shí)，需要設(shè)置：中文采用“宋體”，英文采用“Arial”或“verdana”，CSS文件中的font-family里面必須保證有“宋體”。
對(duì)于頁面屬性中字體大小的設(shè)置，需要內(nèi)容的不同級(jí)別來設(shè)置，通常：
“Head”中標(biāo)題文字，20px；
“Menu”中的導(dǎo)航文字，14px；
“Sidebar”中的文字，12px；
“Content”中的正文，12px或14px，標(biāo)題；
“foot”中的文字，12px或10px；
一.5.邊距
WEB頁面和其中的表格都應(yīng)該設(shè)定邊距，避免頁面元素緊貼邊沿的情況發(fā)生，最小邊距值為“3px”，默認(rèn)邊距值應(yīng)在CSS中設(shè)定。
例如：
圖4
一.6.段落排版
在WEB頁面中，“content”部分是展示頁面正文的區(qū)域，當(dāng)段落是由純文字構(gòu)成時(shí)：
正文一行字?jǐn)?shù)最好不超過50，首頁的標(biāo)題文字以8-20字為佳。
行距建議用百分比來定義，常用的兩個(gè)行距的值是"宋體">或150%；
對(duì)于一段文字，尤其是正文部分，保證左右至少有15px的留白，便于用戶換行時(shí)不受到干擾。
文字和背景對(duì)比要足夠明顯，保證最弱文字的可讀性。
在使用<p>標(biāo)簽，需要對(duì)應(yīng)有</p>，并且要求設(shè)置margin，使得段落文字的前后左右能夠有合適的空白區(qū)。可在CSS中設(shè)置：p{margin: 18px 6px 6px 18px;}，分別定義了上、右、下、左的空白區(qū)大小。
首行縮進(jìn)時(shí)，禁止使用“ ”，而是在CSS中設(shè)置text-indent，例如：p{ text-indent: 2em; }。
在一段完整的文字中請(qǐng)盡量不要使用<br>來人工干預(yù)分段；
對(duì)于margin，為了防止由于采用默認(rèn)的margin值而導(dǎo)致的頁面排版問題，推薦所有標(biāo)簽定義為：margin:0;
當(dāng)采用豎排文字時(shí)，推薦使用writing-mode。通過設(shè)置兩個(gè)屬性值：lr-tb和tb-rl，并結(jié)合direction完成文字豎排，lr-tb指的是文字方向?yàn)椋鹤?右、上-下，tb-rl是指上-下、右-左。
一.7.Frame
Frame是能夠?qū)⒁粋€(gè)WEB頁面切分成幾個(gè)窗口來顯示W(wǎng)EB內(nèi)容的一種頁面設(shè)計(jì)方法，切分后的每個(gè)窗口內(nèi)容是通過指向URL來實(shí)現(xiàn)的。
Frame的標(biāo)記是<FRAMESET><FRAME> ，而在使用Frame時(shí)，通常需要將其放在網(wǎng)頁入口的html文件中，而不必放入<BODY> 標(biāo)記。<FRAMESET>是用以劃分框窗的，每一框窗由一個(gè)<FRAME> 標(biāo)記所標(biāo)示，<FRAME>必須在<FRAMESET>范圍中使用。
其中：
<FRAMESET> 稱框架標(biāo)記，用以宣告HTML文件為框架模式，并設(shè)定視窗如何分割。
<FRAME> 則只是設(shè)定某一個(gè)框窗內(nèi)的參數(shù)屬性。
使用Frame分割頁面，需要按照2.1節(jié)“頁面布局”中所描述的要求來設(shè)置<FRAMESET>和<FRAME>，以完成對(duì)頁面各個(gè)部分合理的切分。
對(duì)于<FRAMESET>和<FRAME>中的一些屬性設(shè)置，要求有：
Name，表示Frame的名字，必須有定義；
Framespacing，表示各個(gè)Frame之間空白距離，要求設(shè)置為非零，通常設(shè)置為5；
Noresize，表示是否允許使用者通過拖拉改變Frame的大小，要求在Frame設(shè)置此參數(shù)；
Scrolling，表示是否要顯示卷軸，要求設(shè)置為“AUTO”
Marginhight，表示框架高度部分邊緣所保留的空間，要求設(shè)置？
Marginwidth，表示框架寬度部分邊緣所保留的空間，要求設(shè)
