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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)格型版式

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

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

日常瀏覽網(wǎng)頁(yè)時(shí)，會(huì)經(jīng)?？吹胶彤?huà)冊(cè)類(lèi)似，以網(wǎng)格的形式編排網(wǎng)頁(yè)。這個(gè)網(wǎng)頁(yè)也就可以理解為是一個(gè)四欄型的網(wǎng)格。

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

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

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

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

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

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

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

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

雙專(zhuān)欄型板式

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

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

其實(shí)在網(wǎng)頁(yè)中也經(jīng)常會(huì)看到這種類(lèi)型，這種類(lèi)型的網(wǎng)頁(yè)就是雙專(zhuān)欄型版式。

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

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

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

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

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

繼續(xù)利用畫(huà)冊(cè)的形式，加深大家的對(duì)網(wǎng)頁(yè)形式的理解。這里的一組畫(huà)冊(cè)，我們讓他們?cè)僖淮巫兓貓D片的形態(tài)。

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

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

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

1. 對(duì)比兩種要素的分屏式布局

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

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

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

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

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

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

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

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

通過(guò)畫(huà)冊(cè)我們了解雙專(zhuān)欄型版式的內(nèi)容，以后我們?cè)倏吹筋?lèi)似的畫(huà)冊(cè)的時(shí)候，就可以快速的補(bǔ)充網(wǎng)頁(yè)設(shè)計(jì)的資料庫(kù)，這也就是我們常說(shuō)的觸類(lèi)旁通。

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

單專(zhuān)欄型版式

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

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

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

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

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

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

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

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

2. 快速展示主題的精髓

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

3. 展示圖像的最大魅力

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

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

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

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

對(duì)啦，正是因?yàn)楫?huà)冊(cè)里面有混合型網(wǎng)格的特點(diǎn)，才讓我們?cè)O(shè)計(jì)師創(chuàng)造出來(lái)了，各式各樣畫(huà)冊(cè)，網(wǎng)頁(yè)也同樣存在著，混合型網(wǎng)格，只不過(guò)是名字上的不同，在網(wǎng)頁(yè)中我們稱(chēng)為組合型專(zhuān)欄版式。其實(shí)只是名字上的差異，具體是什么樣子的，我們繼續(xù)往下看吧。

組合型專(zhuān)欄版式

網(wǎng)頁(yè)中還會(huì)存在雙專(zhuān)欄以上的布局，這些都是稱(chēng)為組合型版式的。

這兩張畫(huà)冊(cè)是由通欄、雙欄以及三欄組成的混合形成的版式。

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

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

向下滑動(dòng)后變成了一個(gè)雙專(zhuān)欄的模塊。

繼續(xù)滑動(dòng)雙專(zhuān)欄轉(zhuǎn)變成為了三專(zhuān)欄?；竞彤?huà)冊(cè)的模式是類(lèi)似的。接著通過(guò)畫(huà)冊(cè)來(lái)加深一下大家的印象。

這畫(huà)冊(cè)由通欄、雙欄以及三欄組成。

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

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

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

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

2. 單專(zhuān)欄向雙專(zhuān)欄過(guò)渡型版式

單專(zhuān)欄向雙專(zhuān)欄過(guò)渡型版式，是一個(gè)較為常見(jiàn)的組合型專(zhuān)欄版式

3. 中央集中型-三專(zhuān)欄版式

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

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

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

還看不懂網(wǎng)格的，這篇更全面：

歡迎關(guān)注研習(xí)設(shè)的微信公眾號(hào)：「Yanxishe2017」