當我們想要學習網頁設計的時候，我們通常會問去哪裡找好的網頁設計作品，尤其是當我們剛剛踏入這個領域的時候，怎麼去快速的區分和識別網頁設計的不同類型？

這就很考驗你快速尋找資料的能力，很多小夥伴就會去買一些關於網頁設計的書，但是，因為書籍的特性，它沒有辦法實時更新，並且資料的數量有限。

這個時候，有沒有什麼途徑，可以讓我們”多快好省”的學習到網頁設計的知識並且可以快速的入門呢？想必大家也都猜到了，這個答案肯定是有滴，那就是我們可以通過看大量的畫冊資料，來進行學習。本文分為上下兩篇。我們先來着重介紹以網格為基礎的網頁，是如何通過畫冊來學習！

先來看一下，畫冊和網頁設計的一些區別。

我們在觀看一本畫冊的時候，當然，這個畫冊的範圍是包括書籍，雜誌在內的印刷刊物的。閱讀順序基本上都是橫向的從A 到 B 的。

而瀏覽網頁的時候，從 A 到 B 的閱讀狀態，從橫向的閱讀，轉變成了縱向的。

當我們拿起一本畫冊的時候，如果我們可以消除，畫冊上的中線的時候，我們看一下會發生什麼！

這是一個關於相機的畫冊，一共是 3 組。消除掉這個畫冊的中線，讓他們變成一張平滑的圖片。

取出這三張頁面的主圖來。如果我們就這樣，不改變形態，將他們加入一個網頁中會怎麼樣呢？

這樣把它加入了一個網頁中，將他做成網頁中的頁眉區域，並且添加一個全局導航欄。

接着來將這本畫冊剩下的區域，同樣不改變形式，放置進網頁中。

在改變畫冊中的各個元素的位置之後，這就變成了一個關於產品展示的網頁。小夥伴們是不是很容易就發現了，網頁和畫冊存在着一定的關聯呢？

網格型版式

那麼不論是網頁設計還是畫冊的設計，都是離不開網格的輔助的。我們趁熱打鐵來看看，網頁的網格型版式。

看這本畫冊就會發現，它是嚴格的按照三欄式網格的模式進行設計，內容信息簡潔明了。

日常瀏覽網頁時，會經常看到和畫冊類似，以網格的形式編排網頁。這個網頁也就可以理解為是一個四欄型的網格。

當然，網頁中也會包含着隱藏網格的存在。和我們平日中的看的畫冊內容很相似。

繼續來看幾個網頁的實例，加深一下理解。這個網頁就是類似上面所說的四欄型的網頁模式。

而這個關於兒童的網站中，同樣也是採用了相同的模式進行設計。

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

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

這個網頁，就能看出來它整齊的展示了大量信息的屬性。

現在，我們開始隱隱約約有了一個，畫冊好像和網頁有一定關聯的意識。因為在設計的時候，不論是網頁設計師還是平面設計師，都離不開網格的加持。就好像你打怪，少不了紅藍 buff 的加持一樣。

那麼你可能會說，那是網格型的網頁才和畫冊有這麼大的關聯，其他類型的網頁還能有這麼大關聯么，別急，這一期我們一個一個來，幫你弄清楚他們之間的聯繫。

雙專欄型板式

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

同理，這個展開后類似網頁的畫冊，裝訂線將它們分開，它的左右面展示着完全不同的信息。

其實在網頁中也經常會看到這種類型，這種類型的網頁就是雙專欄型版式。

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

分析一下這種類型網頁的基礎結構。通常就是明顯的一條中線，將畫面一分為二。在這裏，設置左面放置展示圖片，右面展示文字信息。

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

除了上面的極具特點的雙專欄型版式外，在瀏覽網頁中還會見到這樣的網頁形式，它同樣也是雙專欄型版式。這裏就分為主副區域，通常副區域放置導航欄。

這裏主副區域並沒有明確的規定，它們也可以相互調轉位置。

繼續利用畫冊的形式，加深大家的對網頁形式的理解。這裏的一組畫冊，我們讓他們再一次變回圖片的形態。

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

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

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

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

既然可以同時傳達出兩種截然不同的信息，也可以以此來設計出完全不同風格的分屏式布局。

2. 固定在兩側的導航欄

通常導航欄都是會固定在兩側，在瀏覽網頁的時候方便跳轉。這個網頁就是將導航欄固定在左側。

這是將導航欄固定在右側，它們都是不隨着畫面的滾動而滾動的。

3. 為畫面創造留白

由於導航欄是你想用它的時候，它就出現，你不想用它的時候，幾乎你就會禮貌性將它無視，是不是像極了愛情呢？所以在畫面中呢，它可以適當的創造一些留白出來。

4. 頁面右側補充信息

除了可以用作導航欄，還可以用來補充信息。這個網頁就是將聯繫方式方式添加在了右側，作為補充信息。

通過畫冊我們了解雙專欄型版式的內容，以後我們再看到類似的畫冊的時候，就可以快速的補充網頁設計的資料庫，這也就是我們常說的觸類旁通。

更何況，我們都是泛屬於版式設計這個大框架內，小夥伴們學習的時候一定不要局限於只看工作需要的那一個範疇的資料。我們接着來通過畫冊學習下一個網頁類型。

單專欄型版式

還是老規矩先看畫冊，再看網頁。這個畫冊中，我們主要看左側這個部分，你會發現其實它們是分為兩個模塊的，而本質上這兩個模塊是通欄。

來看一下單專欄型版式的網頁是什麼樣子的。這裏我們要注意，這裏的每一個板塊，都類似於上面的畫冊，它佔著一個通欄的面積，我們可以很容易的區分它們。

而這個也就是單專欄型版式的基本結構，一個板塊接着一個板塊，它們之間的分割大部分情況下都是明顯可見的。

將這個畫冊還原到圖片的形態，並且將它置入在網頁中，你會發現這個幾乎不用改動，可見它與此類畫冊之間有着非常緊密的關聯性。

看看其他類型的畫冊，也可以借鑒做成單專欄型版式的網頁。將它們還原成圖片的形態，將它們的模塊重新架構起來。

重新組合一下就可以形成一個單專欄型版式的網頁。接下來我們看看它們都有哪些特點。

1. 最適合手機端的版式

單專欄型版式長期以來，一直被認為是最適合手機端觀看的版式。

2. 快速展示主題的精髓

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

3. 展示圖像的最大魅力

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

4. 連貫性的內容展示

由於帶有通欄的特質，在觀看的這種類型的網頁的時候，他可以連貫性的展示出，一組或者多組的圖片或信息，具有很強的連貫性。

我們通過畫冊學習到了，雙專欄型版式和單專欄型版式的屬性和特點。又有小夥伴會問了，畫冊不僅僅是單欄和雙欄啊。

對啦，正是因為畫冊裏面有混合型網格的特點，才讓我們設計師創造出來了，各式各樣畫冊，網頁也同樣存在着，混合型網格，只不過是名字上的不同，在網頁中我們稱為組合型專欄版式。其實只是名字上的差異，具體是什麼樣子的，我們繼續往下看吧。

組合型專欄版式

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

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

網頁中也是經常會看到這樣的網頁。這個網頁也是由不同的專欄組成。

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

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

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

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

接着這個網頁的各個部分的模塊拆分出來。

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

1. 雙專欄的重複式構圖

雙專欄的重複性構圖

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

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

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

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

今天我們了解到了，如何通過畫冊學習網頁設計。所以在手邊的網頁設計資料匱乏的時候，可以通過看大量的畫冊的作品，同樣可以學好網頁設計，這是因為它們的底層邏輯是互通的，都是在網格的基礎上進行設計。

我們講究的是「知難行易」，可能有小夥伴一開始在畫冊轉換成網頁的階段比較困難，但是你現在已經明白了不同的類型的網頁，都關聯着哪些類型的畫冊，知道了這個理論。多試幾次就會上手的。本篇文章到這就結束了，我們下篇見。

還看不懂網格的，這篇更全面：

閱讀文章 >>

歡迎關注研習設的微信公眾號：「Yanxishe2017」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊開戶_網頁不會做，那是畫冊看得少（上）