中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站建設(shè)中網(wǎng)頁(yè)設(shè)計(jì)的頁(yè)面布局規(guī)范

2022-12-02    分類: 網(wǎng)站建設(shè)

今天給大家分享一下網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)的頁(yè)面布局規(guī)范布局框架:

1、頁(yè)面框架

WEB的頁(yè)面框架是指構(gòu)成完整頁(yè)面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成:Head,Main,F(xiàn)oot,有些時(shí)候出于布局的需要,在“Head”下面還會(huì)加上用于頁(yè)面功能導(dǎo)航的“Menu”。

2、布局原則

對(duì)于WEB應(yīng)用來(lái)說(shuō),頁(yè)面布局是和web應(yīng)用的功能區(qū)相對(duì)應(yīng)的,并且對(duì)于頁(yè)面中各個(gè)部分之間的切分比例也需要遵守一定的規(guī)則。

頁(yè)面布局的設(shè)計(jì),首先需要考慮用戶在瀏覽web頁(yè)面時(shí)視覺(jué)流向上的要求:

從視覺(jué)流向上看,用戶首先看到的是頁(yè)面“Head”部分的左面,通常那里是標(biāo)識(shí)這個(gè)WEB應(yīng)用的Logo;然后是陳列WEB應(yīng)用主要功能的“Menu”來(lái)用于頁(yè)面導(dǎo)航;接下來(lái)用戶將看的是處于頁(yè)面左側(cè)的“sidebar”,通常這里也是用于頁(yè)面功能導(dǎo)航的,和“Menu”出的選擇相呼應(yīng),這里的內(nèi)容可以通過(guò)類似樹(shù)狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能;接下來(lái)是處于頁(yè)面中心位置的內(nèi)容部分,最后用戶的視線落在WEB頁(yè)面的底部。

3、頁(yè)面分割

以上面圖示的布局方式為例,按照通常web頁(yè)面設(shè)計(jì)時(shí)所遵循的方法,并結(jié)合黃金分割比例的方法:

首先,將頁(yè)面按照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ū)域;

4、頁(yè)面結(jié)構(gòu)

頁(yè)面的布局中,各個(gè)區(qū)域大小的定義方式是不同的,

在頁(yè)面布局中,對(duì)各個(gè)功能區(qū)域的切分是按照“像素”和“比例”方式來(lái)進(jìn)行的,以1024*768的分辨率做為基準(zhǔn),其中:

Head區(qū)域,寬度是按照比例方式設(shè)置的,寬度按照100%設(shè)置,高度采用所占的固定像素值來(lái)確定的,一般占?px,如果有menu區(qū),則調(diào)整為?px;

Menu區(qū)域,和“head”的配置要求是一樣的,寬度按照100%設(shè)置,高度結(jié)合“head”的高度設(shè)置來(lái)確定,一般占?px;

Sidebar區(qū)域,寬度是結(jié)合與“content”之間的黃金切分比例,按照固定像素的方式確定的,一般占?px;高度是按照比例方式來(lái)設(shè)置的;

Content區(qū)域,高度和寬度方向布局都是按照比例方式來(lái)設(shè)置的;

Foot區(qū)域,寬度按照100%設(shè)置,高度采用所占的固定像素值來(lái)確定的,一般占?px;

5、頁(yè)面展現(xiàn)

對(duì)于頁(yè)面布局來(lái)說(shuō),除了上述要求外,還需要考慮如下要求:

能自適應(yīng)1024*768、800*600兩種分辨率;

界面層次不超過(guò)3層;

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

當(dāng)界面內(nèi)容超出顯示區(qū)域時(shí),以浮動(dòng)層的形式顯示;

還有,對(duì)于用戶的感官而言,屏幕對(duì)角線相交的位置是用戶直視的地方,而頁(yè)面正上方四分之一處為易吸引用戶注意力的位置,所以在放置頁(yè)面時(shí)要注意利用這兩個(gè)位置。

要求:

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

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

需要多個(gè)子頁(yè)面彈出時(shí),應(yīng)該依次向右下方偏移,以顯示窗體出標(biāo)題為宜;

在頁(yè)面上方四分之一處放置用戶的logo、主要功能導(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;

當(dāng)前名稱:網(wǎng)站建設(shè)中網(wǎng)頁(yè)設(shè)計(jì)的頁(yè)面布局規(guī)范
分享地址:http://m.rwnh.cn/news43/218593.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
栾城县| 雷山县| 五指山市| 松滋市| 祁连县| 泰州市| 安图县| 微山县| 中西区| 晋江市| 潜山县| 抚宁县| 潮安县| 宜章县| 涞水县| 蒙城县| 汉阴县| 绵竹市| 都兰县| 蓝山县| 襄汾县| 朔州市| 旺苍县| 哈密市| 阿城市| 客服| 青州市| 扶余县| 宣武区| 阜新市| 丹阳市| 盐津县| 乐都县| 武宣县| 怀仁县| 兴安县| 比如县| 高淳县| 博爱县| 宣武区| 上虞市|