常見(jiàn)的網(wǎng)頁(yè)布局形式

布局的原則

網(wǎng)頁(yè)布局的原則包括：協(xié)調(diào)、一致、流動(dòng)、均衡、強(qiáng)調(diào)等，另外在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的時(shí)候，需要考慮到網(wǎng)站頁(yè)面的醒目性、創(chuàng)造性、造型性、可讀性、和明快性等因素；

（1）協(xié)調(diào)：將網(wǎng)站中的每一個(gè)構(gòu)成要素有效的結(jié)合或者聯(lián)系起來(lái)，給瀏覽者一個(gè)既美觀(guān)又實(shí)用的網(wǎng)頁(yè)界面。

（2）一致：網(wǎng)站整個(gè)頁(yè)面的構(gòu)成部分要保持統(tǒng)一的風(fēng)格，使其在視覺(jué)上整齊、一致。

（3）流動(dòng)：網(wǎng)頁(yè)布局的設(shè)計(jì)能夠讓瀏覽者憑著自己的感覺(jué)走，并且頁(yè)面的功能能夠根據(jù)瀏覽者的興趣連接到其感興趣的內(nèi)容上。

（4）均衡：網(wǎng)頁(yè)的布局設(shè)計(jì)要有序的進(jìn)行排列，并且保持頁(yè)面的穩(wěn)定性，適當(dāng)?shù)丶訌?qiáng)頁(yè)面的使用性。

（5）強(qiáng)調(diào)：把頁(yè)面中想要突出展示的內(nèi)容在不影響整體設(shè)計(jì)的情況下，用色彩搭配或者留白的方式將其zui大限度地展示出來(lái)。

不同類(lèi)型的網(wǎng)站、不同類(lèi)型的頁(yè)面往往有不同布局，常見(jiàn)的布局模式為：一欄式、兩欄式、三欄式

1. 一欄式

布局頁(yè)面結(jié)果簡(jiǎn)單、視覺(jué)流程清晰，便于用戶(hù)快速定位，但是由于排版方式的限制，只適用于信息量小，相對(duì)比較獨(dú)立的網(wǎng)站。通常會(huì)通過(guò)大幅精美圖片或者交互的動(dòng)畫(huà)效果來(lái)實(shí)現(xiàn)強(qiáng)烈的視覺(jué)沖擊效果，從而給用戶(hù)留下深刻的印象，提升品牌效果，吸引用戶(hù)進(jìn)一步瀏覽。由于首頁(yè)信息展示量有限，一般需要在首頁(yè)中添加導(dǎo)航或者重要入口的鏈接等。

2. 兩欄式

兩欄式是zui常見(jiàn)的布局方式之一，相對(duì)于一欄式可以容納更多的內(nèi)容，但是兩欄式不具備一欄式布局的視覺(jué)沖擊，一般可以將其細(xì)分為左窄右寬、左寬右窄、左右均等，通過(guò)不同的布局比例和位置會(huì)影響到用戶(hù)瀏覽的視線(xiàn)流和頁(yè)面的整體重點(diǎn)。

（1）左窄右寬

左窄右寬的布局，通常左邊是導(dǎo)航，右側(cè)是網(wǎng)頁(yè)的內(nèi)容。用戶(hù)的瀏覽習(xí)慣通常是從左到右、從上至下，因此這類(lèi)布局的頁(yè)面更符合操作流程，能夠引導(dǎo)用戶(hù)通過(guò)導(dǎo)航查找內(nèi)容，使操作更加具有可控性、適用于內(nèi)容豐富、導(dǎo)航分離清晰的網(wǎng)站。

（2）左寬右窄

內(nèi)容在左側(cè)，導(dǎo)航在右側(cè)，這種結(jié)構(gòu)是突出內(nèi)容的主導(dǎo)位置，引導(dǎo)用戶(hù)把視覺(jué)焦點(diǎn)放在內(nèi)容上，然后才是去引導(dǎo)關(guān)注更多的信息。比如搜索網(wǎng)站，采用左寬右窄，重點(diǎn)突出搜索的信息，在右側(cè)放次要信息和廣告，體現(xiàn)出信息的主次。

（3）左右均等

這種一般網(wǎng)頁(yè)左右兩側(cè)的比例相差比較小或者完全一致，適用于兩邊的信息重要程度均等的情況，不體現(xiàn)內(nèi)容的主次。

3. 三欄式

三欄式的布局方式對(duì)于內(nèi)容的排版更加緊湊，可以更加充分的運(yùn)用網(wǎng)站空間，盡可能多的展示信息內(nèi)容，通常用于信息量非常豐富的網(wǎng)站，比如：門(mén)戶(hù)網(wǎng)站、電商網(wǎng)頁(yè)，學(xué)習(xí)類(lèi)網(wǎng)站首頁(yè)。

http://www.81t6m.cn/wangzhansheji/3418.html 網(wǎng)頁(yè)UI設(shè)計(jì)規(guī)范、布局及提升用戶(hù)體驗(yàn)設(shè)計(jì)（二）