實例分析：頁面設計中的3類版式結構

一個網站的頁面通常會採用一到多個版式，不管如何多元化，歸根到底還會有共同之處的。設計師應該選擇解決當前需求的版式，在基礎版式上略加修改，以便滿足當前項目的實際需求。

1.什麼是版式？

版面一般包含7個基本元素：頁首、全局導航欄、麵包屑導航欄、區域導航欄、主要內容、關鍵性導航欄（或者其他）、頁尾。我們通常會把中間的區域導航欄、主要內容、關鍵性導航欄（或者其他）統稱為「內容區域」。

根據內容區域分欄設計的不同，我們得出3種基本的版式結構：「一欄式」、「兩欄式」和「三欄式」。

2.一欄式

一欄式版式又稱為「單欄式版式」，它的特點是版面的內容區域沒有任何進行任何分隔，因此設計師有更多的自由度與發揮空間。

同時，設計師需要綜合考慮使用設備、網路服務的特性、以及輸入方式的不同，才選擇合適的版式。用戶與用戶需求越是獨特，越容易選擇一欄式版式。因為分欄越多，版面就越常規，看起來就越複雜，就暈安圖縣版面的獨特性及其優勢。

（1）高自由度的常見版式

一欄式的高自由度能夠測試出設計師的水準，也更適合表現視覺效果和創意。很多官網為了展示產品特色和品牌魅力，採用了一欄式布局，如下圖，Apple官網頁面設計：

（2）水平方向的一欄式版式

一欄式的高自由度，也就意味著豐富變化的可能性，比如將常規的垂直方向的一欄式，設計成水平方向的一欄式版式。大家常見的案例是windows 8的首頁：

（3）一欄式全方位滾動版式

所謂「全方位滾動」是指水平與垂直方向都可以滾動的，全方位的滾動界面最適合用來展示地圖，例如百度地圖，選擇了沒有邊框的一欄式版式。

3.兩欄式

兩欄式版式是指在主要內容區的旁邊增加一欄輔助區，輔助區內的元素通常有」局部導航欄『、的「關聯性導航欄」、「側邊廣告」或者其他內容，具體輔助區域放置什麼內容主要是根據設計需求與目標而定的。

例如人人都是產品經理網站的首頁，採用了兩欄式設計，右側主要放推薦信息。

兩欄式版式在設計時可以將輔助區一欄固定（比如局部導航欄或者較為較為重要的內容），而主要內容區域滾動。例如簡書的消息頁面，左側導航固定，右側主要內容區域滾動。

兩欄式版式還有個好處，在小屏幕設備上顯示的時候，兩欄式版式可以巧妙的轉化成一欄式設計。

4.三欄式

三欄式版式顧名思義就是主要內容欄除外還有2個輔助區域。三欄式版式有一定的局限性，就是需要足夠的頁面寬度。

通常是把主要內容放在中間，兩邊各放一個輔助區域，一般左側欄放置導航，右側欄放置關聯性信息。

例如微博首頁，採用了三欄式版式設計，左側是固定位置的導航，右側放置關聯性內容。

在博客等記事、編輯為主的網站里，有時候會把主要內容區域放置在最右側欄位，左側並排放置兩個輔助區域。例如印象筆記網頁版、簡書網站的寫文章頁面。

5.跨頁面實現兩欄式或三欄式的設計

頁面尺寸受限制的設備可以運用按鈕或者是滑動來跨頁面實現兩欄式或者三欄式的版式，比如手機或者平板這類設備上常見的漢堡式設計，例如IRCCloud，通過放置在上方左右的兩個按鈕，可以快速顯示出兩欄式的滑動頁面。

除了應用程序外，網站也可以使用橫跨頁面的兩欄式、三欄式的版式，例如下圖個人作品網站點擊漢堡按鈕，滑出導航欄。

此外，隨著更多響應式網頁的嘗試，不少產品在手機端、平板電腦、個人電腦等終端為了達到一致體驗，在解決多設備顯示的問題上，跨頁面實現兩欄式、或者三欄式不失為一種不錯的解決方式。

作者：小白，。

本文由 @小白 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。