常見的網(wǎng)頁布局形式

布局的原則

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

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

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

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

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

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

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

1. 一欄式

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

2. 兩欄式

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

（1）左窄右寬

左窄右寬的布局，通常左邊是導(dǎo)航，右側(cè)是網(wǎng)頁的內(nèi)容。用戶的瀏覽習(xí)慣通常是從左到右、從上至下，因此這類布局的頁面更符合操作流程，能夠引導(dǎo)用戶通過導(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)用戶把視覺焦點放在內(nèi)容上，然后才是去引導(dǎo)關(guān)注更多的信息。比如搜索網(wǎng)站，采用左寬右窄，重點突出搜索的信息，在右側(cè)放次要信息和廣告，體現(xiàn)出信息的主次。

（3）左右均等

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

3. 三欄式

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

http://www.dongguanlifeng.com/wangzhansheji/3418.html 網(wǎng)頁UI設(shè)計規(guī)范、布局及提升用戶體驗設(shè)計（二）