當(dāng)我們想要學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的時(shí)候，我們通常會問去哪里找好的網(wǎng)頁設(shè)計(jì)作品，尤其是當(dāng)我們剛剛踏入這個(gè)領(lǐng)域的時(shí)候，怎么去快速的區(qū)分和識別網(wǎng)頁設(shè)計(jì)的不同類型？

這就很考驗(yàn)?zāi)憧焖賹ふ屹Y料的能力，很多小伙伴就會去買一些關(guān)于網(wǎng)頁設(shè)計(jì)的書，但是，因?yàn)闀奶匦?，它沒有辦法實(shí)時(shí)更新，并且資料的數(shù)量有限。

這個(gè)時(shí)候，有沒有什么途徑，可以讓我們”多快好省”的學(xué)習(xí)到網(wǎng)頁設(shè)計(jì)的知識并且可以快速的入門呢？想必大家也都猜到了，這個(gè)答案肯定是有滴，那就是我們可以通過看大量的畫冊資料，來進(jìn)行學(xué)習(xí)。本文分為上下兩篇。我們先來著重介紹以網(wǎng)格為基礎(chǔ)的網(wǎng)頁，是如何通過畫冊來學(xué)習(xí)！

先來看一下，畫冊和網(wǎng)頁設(shè)計(jì)的一些區(qū)別。

我們在觀看一本畫冊的時(shí)候，當(dāng)然，這個(gè)畫冊的范圍是包括書籍，雜志在內(nèi)的印刷刊物的。閱讀順序基本上都是橫向的從A 到 B 的。

而瀏覽網(wǎng)頁的時(shí)候，從 A 到 B 的閱讀狀態(tài)，從橫向的閱讀，轉(zhuǎn)變成了縱向的。

當(dāng)我們拿起一本畫冊的時(shí)候，如果我們可以消除，畫冊上的中線的時(shí)候，我們看一下會發(fā)生什么！

這是一個(gè)關(guān)于相機(jī)的畫冊，一共是 3 組。消除掉這個(gè)畫冊的中線，讓他們變成一張平滑的圖片。

取出這三張頁面的主圖來。如果我們就這樣，不改變形態(tài)，將他們加入一個(gè)網(wǎng)頁中會怎么樣呢？

這樣把它加入了一個(gè)網(wǎng)頁中，將他做成網(wǎng)頁中的頁眉區(qū)域，并且添加一個(gè)全局導(dǎo)航欄。

接著來將這本畫冊剩下的區(qū)域，同樣不改變形式，放置進(jìn)網(wǎng)頁中。

在改變畫冊中的各個(gè)元素的位置之后，這就變成了一個(gè)關(guān)于產(chǎn)品展示的網(wǎng)頁。小伙伴們是不是很容易就發(fā)現(xiàn)了，網(wǎng)頁和畫冊存在著一定的關(guān)聯(lián)呢？

網(wǎng)格型版式

那么不論是網(wǎng)頁設(shè)計(jì)還是畫冊的設(shè)計(jì)，都是離不開網(wǎng)格的輔助的。我們趁熱打鐵來看看，網(wǎng)頁的網(wǎng)格型版式。

看這本畫冊就會發(fā)現(xiàn)，它是嚴(yán)格的按照三欄式網(wǎng)格的模式進(jìn)行設(shè)計(jì)，內(nèi)容信息簡潔明了。

日常瀏覽網(wǎng)頁時(shí)，會經(jīng)?？吹胶彤媰灶愃?，以網(wǎng)格的形式編排網(wǎng)頁。這個(gè)網(wǎng)頁也就可以理解為是一個(gè)四欄型的網(wǎng)格。

當(dāng)然，網(wǎng)頁中也會包含著隱藏網(wǎng)格的存在。和我們平日中的看的畫冊內(nèi)容很相似。

繼續(xù)來看幾個(gè)網(wǎng)頁的實(shí)例，加深一下理解。這個(gè)網(wǎng)頁就是類似上面所說的四欄型的網(wǎng)頁模式。

而這個(gè)關(guān)于兒童的網(wǎng)站中，同樣也是采用了相同的模式進(jìn)行設(shè)計(jì)。

1. 整齊美觀的展示大量信息

網(wǎng)格型網(wǎng)頁的優(yōu)點(diǎn)就是，可以整齊美觀的展示大量的信息，這一點(diǎn)基本上和我們平日看到的畫冊屬性一致。

這個(gè)網(wǎng)頁，就能看出來它整齊的展示了大量信息的屬性。

現(xiàn)在，我們開始隱隱約約有了一個(gè)，畫冊好像和網(wǎng)頁有一定關(guān)聯(lián)的意識。因?yàn)樵谠O(shè)計(jì)的時(shí)候，不論是網(wǎng)頁設(shè)計(jì)師還是平面設(shè)計(jì)師，都離不開網(wǎng)格的加持。就好像你打怪，少不了紅藍(lán) buff 的加持一樣。

那么你可能會說，那是網(wǎng)格型的網(wǎng)頁才和畫冊有這么大的關(guān)聯(lián)，其他類型的網(wǎng)頁還能有這么大關(guān)聯(lián)么，別急，這一期我們一個(gè)一個(gè)來，幫你弄清楚他們之間的聯(lián)系。

雙專欄型板式

在我們觀看畫冊的時(shí)候，其實(shí)中間的裝訂線，分割了這本畫冊。讓他們兩面都展示著不同類型的信息。

同理，這個(gè)展開后類似網(wǎng)頁的畫冊，裝訂線將它們分開，它的左右面展示著完全不同的信息。

其實(shí)在網(wǎng)頁中也經(jīng)常會看到這種類型，這種類型的網(wǎng)頁就是雙專欄型版式。

但要注意，它只是這種類型網(wǎng)頁的種類之一。它的左右就像畫冊一樣，被中線一分為二，同時(shí)展示著不同的信息。

分析一下這種類型網(wǎng)頁的基礎(chǔ)結(jié)構(gòu)。通常就是明顯的一條中線，將畫面一分為二。在這里，設(shè)置左面放置展示圖片，右面展示文字信息。

在我們滑動的過程中，網(wǎng)頁就給我們展示了完全不同信息的內(nèi)容，而我們可以快速的接收。

除了上面的極具特點(diǎn)的雙專欄型版式外，在瀏覽網(wǎng)頁中還會見到這樣的網(wǎng)頁形式，它同樣也是雙專欄型版式。這里就分為主副區(qū)域，通常副區(qū)域放置導(dǎo)航欄。

這里主副區(qū)域并沒有明確的規(guī)定，它們也可以相互調(diào)轉(zhuǎn)位置。

繼續(xù)利用畫冊的形式，加深大家的對網(wǎng)頁形式的理解。這里的一組畫冊，我們讓他們再一次變回圖片的形態(tài)。

這個(gè)模式就是雙專欄型版式的第一種形態(tài)。通過畫冊可以更好的加深我們的理解。

這個(gè)畫冊我們重新改成圖片的形式，提取它的元素，將它重新組合成一個(gè)雙專欄型版式的網(wǎng)頁。

完整的雙專欄型版式就完成啦，大家也理解它和畫冊關(guān)聯(lián)了吧。我們，接下來看看它的特點(diǎn)都有哪一些吧！

1. 對比兩種要素的分屏式布局

既然可以同時(shí)傳達(dá)出兩種截然不同的信息，也可以以此來設(shè)計(jì)出完全不同風(fēng)格的分屏式布局。

2. 固定在兩側(cè)的導(dǎo)航欄

通常導(dǎo)航欄都是會固定在兩側(cè)，在瀏覽網(wǎng)頁的時(shí)候方便跳轉(zhuǎn)。這個(gè)網(wǎng)頁就是將導(dǎo)航欄固定在左側(cè)。

這是將導(dǎo)航欄固定在右側(cè)，它們都是不隨著畫面的滾動而滾動的。

3. 為畫面創(chuàng)造留白

由于導(dǎo)航欄是你想用它的時(shí)候，它就出現(xiàn)，你不想用它的時(shí)候，幾乎你就會禮貌性將它無視，是不是像極了愛情呢？所以在畫面中呢，它可以適當(dāng)?shù)膭?chuàng)造一些留白出來。

4. 頁面右側(cè)補(bǔ)充信息

除了可以用作導(dǎo)航欄，還可以用來補(bǔ)充信息。這個(gè)網(wǎng)頁就是將聯(lián)系方式方式添加在了右側(cè)，作為補(bǔ)充信息。

通過畫冊我們了解雙專欄型版式的內(nèi)容，以后我們再看到類似的畫冊的時(shí)候，就可以快速的補(bǔ)充網(wǎng)頁設(shè)計(jì)的資料庫，這也就是我們常說的觸類旁通。

更何況，我們都是泛屬于版式設(shè)計(jì)這個(gè)大框架內(nèi)，小伙伴們學(xué)習(xí)的時(shí)候一定不要局限于只看工作需要的那一個(gè)范疇的資料。我們接著來通過畫冊學(xué)習(xí)下一個(gè)網(wǎng)頁類型。

單專欄型版式

還是老規(guī)矩先看畫冊，再看網(wǎng)頁。這個(gè)畫冊中，我們主要看左側(cè)這個(gè)部分，你會發(fā)現(xiàn)其實(shí)它們是分為兩個(gè)模塊的，而本質(zhì)上這兩個(gè)模塊是通欄。

來看一下單專欄型版式的網(wǎng)頁是什么樣子的。這里我們要注意，這里的每一個(gè)板塊，都類似于上面的畫冊，它占著一個(gè)通欄的面積，我們可以很容易的區(qū)分它們。

而這個(gè)也就是單專欄型版式的基本結(jié)構(gòu)，一個(gè)板塊接著一個(gè)板塊，它們之間的分割大部分情況下都是明顯可見的。

將這個(gè)畫冊還原到圖片的形態(tài)，并且將它置入在網(wǎng)頁中，你會發(fā)現(xiàn)這個(gè)幾乎不用改動，可見它與此類畫冊之間有著非常緊密的關(guān)聯(lián)性。

看看其他類型的畫冊，也可以借鑒做成單專欄型版式的網(wǎng)頁。將它們還原成圖片的形態(tài)，將它們的模塊重新架構(gòu)起來。

重新組合一下就可以形成一個(gè)單專欄型版式的網(wǎng)頁。接下來我們看看它們都有哪些特點(diǎn)。

1. 最適合手機(jī)端的版式

單專欄型版式長期以來，一直被認(rèn)為是最適合手機(jī)端觀看的版式。

2. 快速展示主題的精髓

相比其他版式，它可以更快速的展示主題的精髓

3. 展示圖像的最大魅力

單專欄型版式，能最大限度的展示圖像的魅力。添加圖像后，可以更加快速和直接傳遞出，設(shè)計(jì)者想要傳達(dá)出的氣質(zhì)。

4. 連貫性的內(nèi)容展示

由于帶有通欄的特質(zhì)，在觀看的這種類型的網(wǎng)頁的時(shí)候，他可以連貫性的展示出，一組或者多組的圖片或信息，具有很強(qiáng)的連貫性。

我們通過畫冊學(xué)習(xí)到了，雙專欄型版式和單專欄型版式的屬性和特點(diǎn)。又有小伙伴會問了，畫冊不僅僅是單欄和雙欄啊。

對啦，正是因?yàn)楫媰岳锩嬗谢旌闲途W(wǎng)格的特點(diǎn)，才讓我們設(shè)計(jì)師創(chuàng)造出來了，各式各樣畫冊，網(wǎng)頁也同樣存在著，混合型網(wǎng)格，只不過是名字上的不同，在網(wǎng)頁中我們稱為組合型專欄版式。其實(shí)只是名字上的差異，具體是什么樣子的，我們繼續(xù)往下看吧。

組合型專欄版式

網(wǎng)頁中還會存在雙專欄以上的布局，這些都是稱為組合型版式的。

這兩張畫冊是由通欄、雙欄以及三欄組成的混合形成的版式。

網(wǎng)頁中也是經(jīng)常會看到這樣的網(wǎng)頁。這個(gè)網(wǎng)頁也是由不同的專欄組成。

我們解構(gòu)一下組合型專欄版式，先看到的是一個(gè)單專欄的模塊。

向下滑動后變成了一個(gè)雙專欄的模塊。

繼續(xù)滑動雙專欄轉(zhuǎn)變成為了三專欄。基本和畫冊的模式是類似的。接著通過畫冊來加深一下大家的印象。

這畫冊由通欄、雙欄以及三欄組成。

接著這個(gè)網(wǎng)頁的各個(gè)部分的模塊拆分出來。

重新排列這個(gè)畫冊的內(nèi)容。就可以得到一個(gè)組合型專欄版式。接下來我們看看它的特點(diǎn)都有哪些。

1. 雙專欄的重復(fù)式構(gòu)圖

雙專欄的重復(fù)性構(gòu)圖

2. 單專欄向雙專欄過渡型版式

單專欄向雙專欄過渡型版式，是一個(gè)較為常見的組合型專欄版式

3. 中央集中型-三專欄版式

中央集中型·三專欄版式，將主要信息集中放置在版面中心位置，兩側(cè)放置導(dǎo)航和裝飾信息。

今天我們了解到了，如何通過畫冊學(xué)習(xí)網(wǎng)頁設(shè)計(jì)。所以在手邊的網(wǎng)頁設(shè)計(jì)資料匱乏的時(shí)候，可以通過看大量的畫冊的作品，同樣可以學(xué)好網(wǎng)頁設(shè)計(jì)，這是因?yàn)樗鼈兊牡讓舆壿嬍腔ネǖ?，都是在網(wǎng)格的基礎(chǔ)上進(jìn)行設(shè)計(jì)。

我們講究的是「知難行易」，可能有小伙伴一開始在畫冊轉(zhuǎn)換成網(wǎng)頁的階段比較困難，但是你現(xiàn)在已經(jīng)明白了不同的類型的網(wǎng)頁，都關(guān)聯(lián)著哪些類型的畫冊，知道了這個(gè)理論。多試幾次就會上手的。本篇文章到這就結(jié)束了，我們下篇見。