常見的網頁布局形式

布局的原則

網頁布局的原則包括：協調、一致、流動、均衡、強調等，另外在進行網頁布局設計的時候，需要考慮到網站頁面的醒目性、創造性、造型性、可讀性、和明快性等因素；

（1）協調：將網站中的每一個構成要素有效的結合或者聯系起來，給瀏覽者一個既美觀又實用的網頁界面。

（2）一致：網站整個頁面的構成部分要保持統一的風格，使其在視覺上整齊、一致。

（3）流動：網頁布局的設計能夠讓瀏覽者憑著自己的感覺走，并且頁面的功能能夠根據瀏覽者的興趣連接到其感興趣的內容上。

（4）均衡：網頁的布局設計要有序的進行排列，并且保持頁面的穩定性，適當地加強頁面的使用性。

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

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

1. 一欄式

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

2. 兩欄式

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

（1）左窄右寬

左窄右寬的布局，通常左邊是導航，右側是網頁的內容。用戶的瀏覽習慣通常是從左到右、從上至下，因此這類布局的頁面更符合操作流程，能夠引導用戶通過導航查找內容，使操作更加具有可控性、適用于內容豐富、導航分離清晰的網站。

（2）左寬右窄

內容在左側，導航在右側，這種結構是突出內容的主導位置，引導用戶把視覺焦點放在內容上，然后才是去引導關注更多的信息。比如搜索網站，采用左寬右窄，重點突出搜索的信息，在右側放次要信息和廣告，體現出信息的主次。

（3）左右均等

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

3. 三欄式

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

http://79806.xyz/wangzhansheji/3418.html 網頁UI設計規范、布局及提升用戶體驗設計（二）