今天我們繼續根據畫冊學習網頁。通過前面的課程，想必大家應該明白了，如何多快好省地去學習網頁設計。如果上集沒有看的小夥伴呢，也不用立刻切換掉去看上集，繼續看也不會影響你的理解。

往期回顧：

閱讀文章 >>

上集我們主要講的是以網格為主的網頁設計類型，這一集我們繼續配合畫冊去理解，那些變化性大一點的網頁設計類型。在這裏我要重複說一下，網頁各個類型幾乎都是在網格的基礎上進行的，接下來要討論的網頁形式，同樣也是建立在網格的基礎上，只不過相較於之前講的四種網頁版式類型，變化性大了一些，這裏所說的畫冊，也並不僅僅局限於畫冊，而是包含了書籍雜誌等紙質印刷品。這裏呢，小夥伴要注意了。

先來看一下，書籍和显示器兩個媒介之間的關係。在信息時代之前，書籍等紙質印刷品，一直作為人類傳播信息的唯一載體被使用了上千年。

而進入信息時代以後呢，显示器這種全新的信息載體，就開始慢慢地進入到了人類的生活中。

也就是說，信息時代的到來，使信息的載體慢慢地從紙質的書籍，轉移到了以显示器為主的設備上了，同樣，在設計也相應的繼承了前者的特徵。正因為如此，它可以幫助我們更好地去理解網頁設計的相關類型。

想要理解這個概念，就要先來看幾張以圖片為主的畫冊編排。使用這種排版方式就會讓這個圖片數量很多的畫冊，保持版面整潔。那麼這種畫冊形式和網頁有什麼關聯性呢？

在講關聯性之前，我們先聯想一下，圖片的擺放就像我們家地上的瓷磚，一塊接一塊進行擺放的。大部分時候形態各異。是不是很像上面瀏覽的畫冊圖片。

取出一塊瓷磚形式來，把它轉化成一個線框的模式。進一步，把這個線框，添加上文字，它就變成了我們接下來要講的網頁形式的基本組成部分。從中我們就能看到他們的關聯性。

卡片/瓷磚型版式

這個網頁形式就叫做卡片/瓷磚型版式，這種版式的特點就是「信息清晰且易識別，具有高兼容性」。

記住前面的瓷磚概念，接着來看幾個卡片瓷磚式網頁的例子。這個網頁就是把不同風格的圖片，像瓷磚一樣地拼接在一起，不但不影響美觀，還提升了識別度。

這個網頁則是用了這個形式，讓這個頁面充滿了精緻感，並且有一定的故事性。這種類型的網頁很適合，去展示大量的圖片，但是，前提是圖片的質量一定要高。

這是卡片瓷磚型版式的最基本組成形式，就像我們家的瓷磚一樣，一塊接一塊整整齊齊。

這種類型的網頁版式，只需要，改變一下它們單元型的大小，整個版面就會產生不一樣的效果。

在這裏我們的變化型一步一步的提升，逐漸就會變得像我們開頭看到的那幾個畫冊的版式一樣。這是因為它們的底層邏輯都是互通的。

趁熱打鐵，繼續來看一下這個雜誌，加深一下對這種網頁類型的印象。

把裏面的每一個單元型都提取出來了，我們修改一下形式，你就會發現其實它們可以很自如地應用在卡片/瓷磚型版式的網頁中。

在不改變它們的單元型只改變位置和大小的原則下，把它置入到了網頁中，是不是立刻就能發現它們直接的關聯性了。

我們再繼續看一個畫冊的內容，還是先提取這個畫冊的文字組，提取出來觀察一下。

單獨提取出來了它們的單元型，觀察一下，是不是很容易就看出來，這些文字組，它們就像一個個瓷磚。這也是我們可以借鑒學習的地方。

置入到網頁中，就立刻變成了一個完整的卡片瓷磚型版式的網頁了。這裏要注意，這種類型的網頁，對單個單元型的編排要求很高。在編排的時候應該先編排出來高質量的單元型，再作用於網頁中。

1. 可以根據窗口尺寸進行調節

這種類型的網頁，它的內容就像瓷磚一樣，可以隨時根據窗口的尺寸進行調節。不同的窗口尺寸，並不會破壞它的網頁原有的感覺。

2. 讓不同的信息之間有清晰的區分

單元型與單元型之間，有明顯的區分。在我們日常瀏覽網頁的時候會經常見到，可以把不同類型的信息，清晰明確地傳遞出來。

3. 信息之間可以方便地更改位置

瀏覽這種類型的網頁，可以根據需求去更改網頁內容的排序，並不影響這個信息的傳達。在這個燈具的網站中，我們修改它的排序規則，更加方便用戶查找自己想要的信息。

4. 同時適合電腦/手機端

由於瓷磚的拼接特性，讓這種類型的網頁，非常適合在電腦端和手機端同時瀏覽。在手機端和電腦端瀏覽切換的時候，只需要更改圖片位置就可以實現，可以說是非常的簡便。

大家在做卡片瓷磚型版式的時候，就可以想象自己是在貼瓷磚，再去結合上面我介紹過的畫冊類型，就可以很輕鬆地設計出一個好的卡片瓷磚型的網頁了。

脫離網格型版式

我們來看一下什麼是脫離網格型版式的網頁，注意，這裏的脫離網格並不是完全不使用網格了，而是在網格的基礎上去增加一些變化型的內容。就好像你習武，最後變成一個高手，但是你不可能扔下一開始練的拳法吧，只不過是在原有拳法的基礎上，更加靈活的去運用了而已。網格依然是網頁設計中的基礎部分。

先來看一下這張脫離網格型的網頁，整體傳遞出來的是一種，活潑動感的感覺。

而與之相比的網格型版式，則是傳遞出來的是穩定整齊的感覺，這就要求我們在設計網頁之前，先弄清楚我們設計，需要傳遞出產品的什麼氣質。

還是老樣子，我們先來看看相關的畫冊。關聯剛才看到的網頁截圖，這個是不是就很清楚的可以看出來，它脫離網格的特質啦。紅色的部分是我標註的細節。

匯總重新觀察一下，上面幾張畫冊的重點部分是什麼，那就是會有疊壓的感覺。這裏只是一個細節，而脫離網格型的版式，往往就是大量的圖片和文字的相互疊壓，組合在一起。

來看一下這個食品類的網頁，這裏可以明顯地看出來，這個網頁中存在大量的圖片與文字的疊壓情況。這也提升了整個網頁的觀感，增加精緻度。

添加了疊壓以後，讓本來會嚴肅的頁面，增加很多的活力進去，不會讓整個網頁過於的死板。

這裏大家肯定都是已經明白了，它的特點都有哪一些了。最直觀的就是，文字布置在圖片上。有的時候圖片上疊字會影響識別度，在文字下方添加一個色塊，可以很好的提升文字的識別度。

除了文字和圖片的相互疊壓，還有圖片和圖片，以及圖片和色塊的互相疊壓的形式，這個網頁中也是很常見的。

就是我們前面畫冊的類型，圖片與圖案的相互疊加。其實本質上就是為了突破網格型的種種限制，讓版面變的更加地活潑有趣。

通過一個化妝品的小案例，讓大家理解一下，網格在脫離網格型版式的網頁中的作用。接到文案的第一件事情，就是對信息進行分類，區分它們的優先級別。

這裏我已經把文字組編輯好了，網頁中要講究比例間距的原則，這裏我就是以按鈕的高度為依據。

根據脫離網格型版式的特點，一開始就設計了一個疊壓的效果。

置入我們要介紹的產品圖片，讓他們有一個明顯的疊加效果。

最後置入我們已經做好的文字組，這個小的組合就完成了，接着我們來看看網格在這個網頁中的作用是什麼。

把它置入到了一個網頁的尺寸當中，現在我們看到這是一個 8 欄加隱藏網格的形式，網格在網頁中同樣起到了重要的作用，我們一定要記住這一點。

模擬一下頁面的滑動，就可以看出脫離網格型的網頁，傳遞出來活潑的氣質。

1. 利用留白和疊加構圖，展現漂浮效果

更自由的脫離網格型版式，可以合理地利用留白和疊加的構圖，去展示一些漂浮的效果。這個飲品的網站，就利用了文字的疊加形式，形成一定的懸浮效果，讓整個網頁變的更加有趣和精緻。

2. 着重表現圖像的簡約設計

這樣類型的網頁，可以更好地利用圖像去做一些簡約的設計。這個服裝的網站，就是利用了疊加和大留白的方式，傳遞出了一種簡約時尚的感覺。

3. 照片與圖框疊加出不規則的美感

圖片和圖框的疊加，本質上是比正方形或長方形的圖片，更加具有不規則的美感。化妝品類的網站，使用這種不規則的形式，傳遞出了高級和精緻的美感。

那麼可能會有同學會問，是不是所有的網頁設計都是按照網格進行的呢。這個不是絕對的，因為有一種類型是自由型版式，這個就是完全的隨心所欲的設計了，就好像我們在一些畫冊中，完全找不到它有什麼設計規則一樣。

這個就像你練功，打通任督二脈，你的手法既像招式又不像招式一樣。大家只需要知道有這種形式的存在就可以了，我就不細講了。接下來我們要學習的網頁，是我們在日常瀏覽畫冊和網頁中最常見的形式之一，掌握了前面這麼多網頁的形式，再來看這個形式接受起來就會更加地容易。

全屏型版式

這裏我特意去掉了書籍的效果，是不是就很像一張網頁的展開呢？

這裏也是同理，只不過是缺少了一些網頁的基本組件，添加上去就會變的和網頁幾乎一致。

我們用一個小動畫的形式，就可以輕鬆地理解，這種網頁類型的形式了。背景保持不變，下方的信息切換，而且整個網頁始終保持在這一個畫面中。

這個汽車的網站，就通過全屏型版式的形式，很好地展示了汽車各個信息，並且具有很強的互動性。

第二種形式，則是一開始為全屏显示，下滑就變成了一個組合專欄型版式了。通俗一點講就是可以向下滑動。

在餐飲的網站中經常可以看到這種類型的網站。

在這裏我提供一個學習的思路，就是我們看在靜態的畫冊的時候，可以試着添加一些動態的概念。想象着這個畫面要是個視頻效果會怎麼樣。

提取一下這個畫冊中的這個文字形式，置入到一個網頁中，我們來看看效果。

一個全屏型的網頁效果就出來了，所以在做這種類型的網頁的時候，可以多去參考和借鑒，大圖對開的畫冊。可以使你的設計靈感源源不絕。

1. 以全屏方式播放電影的宣傳片

電影遊戲類型的網站，經常就是以全屏的方式播放宣傳片。這可以更好的營造氣氛，吸引用戶向下瀏覽。

2. 用幻燈片的方式展示全屏背景圖片

除了放置視頻，把圖片用類似幻燈片的方式也同樣可以。這裏就要注意圖片切換時的效果，本質上就是把圖片連接成了一個視頻的形式。

3. 在固定的畫面中展示不同視頻

除了圖片可以像幻燈片切換，視頻也是可以的，可以在固定畫面中展示不同的視頻。在下方設置視頻切換的按鈕就可以實現了，這裏切換方式就可以樸素一點，畢竟視頻本身信息就很多了。

4. 使用電影圖片展示動態圖像

除了圖片，視頻以外，我們在經常見到的 GIF 動態圖片，同樣也可以作為全屏型網頁的背景使用，這裏使用就會產生一種有趣的感覺。

5. 使用代碼效果營造全屏網頁效果

使用代碼同樣可以營造全屏網頁的效果，這種類型的要求就更高一些，最少你要先懂代碼。使用代碼可以產生大量的交互效果，讓用戶有一定的代入感和參與感。

看到最後大家應該都明白了，畫冊和網頁之間有着密不可分的聯繫。可以這麼說，畫冊和網頁它們是一個演變的關係。隨着紙質印刷品的慢慢減少，越來越多的信息以显示器為載體，展示在你的面前了。

現在回看畫冊等紙質印刷品，是不是就像一座寶庫，裏面全部都是被等待挖掘和利用的網頁設計方式。除了可以很好的擴充你的版式知識，這也是一種非常好的學習方式，熟練的運用以後，還可以再去嘗試從別的領域去學習和借鑒，畢竟藝術的底層邏輯都是共同的。這期課程就到這裏了，我們下期見。

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5平台網址_網頁不會做，那是畫冊看得少（下）