下面由創(chuàng)新互聯(lián)給大家分享一下網(wǎng)站設(shè)計的頁面規(guī)范布局框架:1、頁面框架
WEB的頁面框架是指構(gòu)成完整頁面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成:Head,Main,F(xiàn)oot,有些時候出于布局的需要,在“Head”下面還會加上用于頁面功能導(dǎo)航的“Menu”。如圖:2、布局原則
對于WEB應(yīng)用來說,頁面布局是和web應(yīng)用的功能區(qū)相對應(yīng)的,并且對于頁面中各個部分之間的切分比例也需要遵守一定的規(guī)則。
頁面布局的設(shè)計,首先需要考慮用戶在瀏覽web頁面時視覺流向上的要求:
從視覺流向上看,用戶首先看到的是頁面“Head”部分的左面,通常那里是標(biāo)識這個WEB應(yīng)用的Logo;然后是陳列WEB應(yīng)用主要功能的“Menu”來用于頁面導(dǎo)航;接下來用戶將看的是處于頁面左側(cè)的“sidebar”,通常這里也是用于頁面功能導(dǎo)航的,和“Menu”出的選擇相呼應(yīng),這里的內(nèi)容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細的功能;接下來是處于頁面中心位置的內(nèi)容部分,最后用戶的視線落在WEB頁面的底部。3、頁面分割
以上面圖示的布局方式為例,按照通常web頁面設(shè)計時所遵循的方法,并結(jié)合黃金分割比例的方法:
首先,將頁面按照3*3的方式進行分割,如下圖:
在高度方向上,對上部1/3區(qū)域按照黃金分割的方法分出head和menu的區(qū)域;
在寬度方向上,對中部左邊1/3區(qū)域按照黃金分割的方法分出sidebar的區(qū)域,剩下的空間留給content區(qū)域;
在高度方向上,對下部1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域;4、頁面結(jié)構(gòu)
頁面的布局中,各個區(qū)域大小的定義方式是不同的,請見下圖:
在頁面布局中,對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的,以1024*768的分辨率做為基準,其中: 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;5、頁面展現(xiàn)
對于頁面布局來說,除了上述要求外,還需要考慮如下要求:
能自適應(yīng)1024*768、800*600兩種分辨率;
界面層次不超過3層;
默認窗口設(shè)置下,不應(yīng)出現(xiàn)水平、垂直滾動條;
當(dāng)界面內(nèi)容超出顯示區(qū)域時,以浮動層的形式顯示;
還有,對于用戶的感官而言,屏幕對角線相交的位置是用戶直視的地方,而頁面正上方四分之一處為易吸引用戶注意力的位置,所以在放置頁面時要注意利用這兩個位置。
要求:
父頁面或主頁面的中心位置應(yīng)該設(shè)計在對角線焦點附近;
子頁面的位置應(yīng)該靠近主窗體的左上角或正中;
需要多個子頁面彈出時,應(yīng)該依次向右下方偏移,以顯示窗體出標(biāo)題為宜;
在頁面上方四分之一處放置用戶的logo、主要功能導(dǎo)航和一些系統(tǒng)操作功能;6、頁面美化
界面應(yīng)該大小適合美學(xué)觀點,感覺協(xié)調(diào)舒適,能在有效的范圍內(nèi)吸引用戶的注意力。
建議和要求: 長寬接近黃金點比例,切忌長寬比例失調(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)格,則由用戶自己選擇顏色、字體等;6、頁面字體
頁面字體屬性的設(shè)置在相應(yīng)的CSS中進行定義,頁面文字編碼要求是UTF-8,在規(guī)定字體屬性時,需要設(shè)置:中文采用“宋體”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必須保證有“宋體”。
當(dāng)前題目:網(wǎng)站設(shè)計頁面的規(guī)范
標(biāo)題路徑:http://m.rwnh.cn/news29/234029.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站策劃、域名注冊、網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)