常見的網頁佈局形式
佈局的原則
網頁佈局的原則包括:協調、一致、流動、均衡、強調等,另外在進行網頁佈局設計的時候,需要考慮到網站頁面的醒目性、創造性、造型性、可讀性、和明快性等因素;
(1)協調:將網站中的每一個構成要素有效的結合或者聯絡起來,給瀏覽者一個既美觀又實用的網頁介面。
(2)一致:網站整個頁面的構成部分要保持統一的風格,使其在視覺上整齊、一致。
(3)流動:網頁佈局的設計能夠讓瀏覽者憑著自己的感覺走,並且頁面的功能能夠根據瀏覽者的興趣連線到其感興趣的內容上。
(4)均衡:網頁的佈局設計要有序的進行排列,並且保持頁面的穩定性,適當地加強頁面的使用性。
(5)強調:把頁面中想要突出展示的內容在不影響整體設計的情況下,用色彩搭配或者留白的方式將其 zui 大限度地展示出來。
不同型別的網站、不同型別的頁面往往有不同佈局,常見的佈局模式為:一欄式、兩欄式、三欄式
1. 一欄式
佈局頁面結果簡單、視覺流程清晰,便於多使用者快速定位,但是由於排版方式的限制,只適用於資訊量小,相對比較獨立的網站。通常會透過大幅精美圖片或者互動的動畫效果來實現強烈的視覺衝擊效果,從而給多使用者留下深刻的印象,提升品牌效果,吸引多使用者進一步瀏覽。由於首頁資訊展示量有限,一般需要在首頁中新增導航或者重要入口的連結等。
2. 兩欄式
兩欄式是 zui 常見的佈局方式之一,相對於一欄式可以容納更多的內容,但是兩欄式不具備一欄式佈局的視覺衝擊,一般可以將其細分為左窄右寬、左寬右窄、左右均等,透過不同的佈局比例和位置會影響到多使用者瀏覽的視線流和頁面的整體重點。
(1)左窄右寬
左窄右寬的佈局,通常左邊是導航,右側是網頁的內容。多使用者的瀏覽習慣通常是從左到右、從上至下,因此這類佈局的頁面更符合操作流程,能夠引導多使用者透過導航查詢內容,使操作更加具有可控性、適用於內容豐富、導航分離清晰的網站。
(2)左寬右窄
內容在左側,導航在右側,這種結構是突出內容的主導位置,引導多使用者把視覺焦點放在內容上,然後才是去引導關注更多的資訊。比如搜尋網站,採用左寬右窄,重點突出搜尋的資訊,在右側放次要資訊和廣告,體現出資訊的主次。
(3)左右均等
這種一般網頁左右兩側的比例相差比較小或者完全一致,適用於兩邊的資訊重要程度均等的情況,不體現內容的主次。
3. 三欄式
三欄式的佈局方式對於內容的排版更加緊湊,可以更加充分的運用網站空間,儘可能多的展示資訊內容,通常用於資訊量非常豐富的網站,比如:入口網站、電商網頁,學習類網站首頁。