網(wǎng)站設(shè)計(jì)頁(yè)面規(guī)范
  • 更新時(shí)間:2024-10-29 02:32:47
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 304

接下來(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”。如圖所示:

頁(yè)面框架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)容可以用樹狀結(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è)面結(jié)構(gòu)

在頁(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é)要求

點(diǎn),感覺(jué)協(xié)調(diào)舒適,能在有效的范圍內(nèi)吸引用戶的注意力。
建議和要求:
  • 長(zhǎng)寬接近黃金點(diǎn)比例,切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度;
  • 布局要合理,不宜過(guò)于密集,也不能過(guò)于空曠,合理的利用空間;
  • 同一頁(yè)面上的按鈕大小應(yīng)該一致,不同頁(yè)面的按鈕大小盡量相近,按鈕上忌用太長(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è)面不應(yīng)該支持縮放,即右上角只有關(guān)閉功能;
  • 通常父窗體支持縮放時(shí),子窗體沒(méi)有必要縮放;
  • 如果能給用戶提供自定義界面風(fēng)格,則由用戶自己選擇顏色、字體等;
6、頁(yè)面字體
頁(yè)面字體屬性的設(shè)置在相應(yīng)的CSS中進(jìn)行定義,頁(yè)面文字編碼要求是UTF-8,在規(guī)定字體屬性時(shí),需要設(shè)置:中文采用“宋體”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必須保證有“宋體”。
對(duì)于頁(yè)面屬性中字體大小的設(shè)置,需要內(nèi)容的不同級(jí)別來(lái)設(shè)置,通常:
  • “Head”中標(biāo)題文字,20px;
  • “Menu”中的導(dǎo)航文字,14px;
  • “Sidebar”中的文字,12px;
  • “Content”中的正文,12px或14px,標(biāo)題;
  • “foot”中的文字,12px或10px;
有關(guān)頁(yè)面字體屬性的具體設(shè)置參見(jiàn)附錄中的CSS示例。

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

本文章出于推來(lái)客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/12113.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部