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

1.什么是版式？

版面一般包含7個基本元素：頁首、全局導(dǎo)航欄、面包屑導(dǎo)航欄、區(qū)域?qū)Ш綑?、主要?nèi)容、關(guān)鍵性導(dǎo)航欄（或者其他）、頁尾。我們通常會把中間的區(qū)域?qū)Ш綑?、主要?nèi)容、關(guān)鍵性導(dǎo)航欄（或者其他）統(tǒng)稱為“內(nèi)容區(qū)域”。

根據(jù)內(nèi)容區(qū)域分欄設(shè)計的不同，我們得出3種基本的版式結(jié)構(gòu)：“一欄式”、“兩欄式”和“三欄式”。

2.一欄式

一欄式版式又稱為“單欄式版式”，它的特點是版面的內(nèi)容區(qū)域沒有任何進行任何分隔，因此設(shè)計師有更多的自由度與發(fā)揮空間。

同時，設(shè)計師需要綜合考慮使用設(shè)備、網(wǎng)絡(luò)服務(wù)的特性、以及輸入方式的不同，才選擇合適的版式。用戶與用戶需求越是獨特，越容易選擇一欄式版式。因為分欄越多，版面就越常規(guī)，看起來就越復(fù)雜，就暈安圖縣版面的獨特性及其優(yōu)勢。

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

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

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

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

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

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

3.兩欄式

兩欄式版式是指在主要內(nèi)容區(qū)的旁邊增加一欄輔助區(qū)，輔助區(qū)內(nèi)的元素通常有”局部導(dǎo)航欄‘、的“關(guān)聯(lián)性導(dǎo)航欄”、“側(cè)邊廣告”或者其他內(nèi)容，具體輔助區(qū)域放置什么內(nèi)容主要是根據(jù)設(shè)計需求與目標而定的。

例如人人都是產(chǎn)品經(jīng)理網(wǎng)站的首頁，采用了兩欄式設(shè)計，右側(cè)主要放推薦信息。

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

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

4.三欄式

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

通常是把主要內(nèi)容放在中間，兩邊各放一個輔助區(qū)域，一般左側(cè)欄放置導(dǎo)航，右側(cè)欄放置關(guān)聯(lián)性信息。

例如微博首頁，采用了三欄式版式設(shè)計，左側(cè)是固定位置的導(dǎo)航，右側(cè)放置關(guān)聯(lián)性內(nèi)容。

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

5.跨頁面實現(xiàn)兩欄式或三欄式的設(shè)計

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

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

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

作者：小白，微信公眾號：小白的交互設(shè)計。

本文由 @小白 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。