上集我們主要講的是以網(wǎng)格為主的網(wǎng)頁設(shè)計類型，這一集我們繼續(xù)配合畫冊去理解，那些變化性大一點的網(wǎng)頁設(shè)計類型。在這里我要重復(fù)說一下，網(wǎng)頁各個類型幾乎都是在網(wǎng)格的基礎(chǔ)上進(jìn)行的，接下來要討論的網(wǎng)頁形式，同樣也是建立在網(wǎng)格的基礎(chǔ)上，只不過相較于之前講的四種網(wǎng)頁版式類型，變化性大了一些，這里所說的畫冊，也并不僅僅局限于畫冊，而是包含了書籍雜志等紙質(zhì)印刷品。這里呢，小伙伴要注意了。

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

而進(jìn)入信息時代以后呢，顯示器這種全新的信息載體，就開始慢慢地進(jìn)入到了人類的生活中。

也就是說，信息時代的到來，使信息的載體慢慢地從紙質(zhì)的書籍，轉(zhuǎn)移到了以顯示器為主的設(shè)備上了，同樣，在設(shè)計也相應(yīng)的繼承了前者的特征。正因為如此，它可以幫助我們更好地去理解網(wǎng)頁設(shè)計的相關(guān)類型。

想要理解這個概念，就要先來看幾張以圖片為主的畫冊編排。使用這種排版方式就會讓這個圖片數(shù)量很多的畫冊，保持版面整潔。那么這種畫冊形式和網(wǎng)頁有什么關(guān)聯(lián)性呢？

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

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

卡片/瓷磚型版式

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

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

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

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

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

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

趁熱打鐵，繼續(xù)來看一下這個雜志，加深一下對這種網(wǎng)頁類型的印象。

把里面的每一個單元型都提取出來了，我們修改一下形式，你就會發(fā)現(xiàn)其實它們可以很自如地應(yīng)用在卡片/瓷磚型版式的網(wǎng)頁中。

在不改變它們的單元型只改變位置和大小的原則下，把它置入到了網(wǎng)頁中，是不是立刻就能發(fā)現(xiàn)它們直接的關(guān)聯(lián)性了。

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

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

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

1. 可以根據(jù)窗口尺寸進(jìn)行調(diào)節(jié)

這種類型的網(wǎng)頁，它的內(nèi)容就像瓷磚一樣，可以隨時根據(jù)窗口的尺寸進(jìn)行調(diào)節(jié)。不同的窗口尺寸，并不會破壞它的網(wǎng)頁原有的感覺。

2. 讓不同的信息之間有清晰的區(qū)分

單元型與單元型之間，有明顯的區(qū)分。在我們?nèi)粘g覽網(wǎng)頁的時候會經(jīng)常見到，可以把不同類型的信息，清晰明確地傳遞出來。

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

瀏覽這種類型的網(wǎng)頁，可以根據(jù)需求去更改網(wǎng)頁內(nèi)容的排序，并不影響這個信息的傳達(dá)。在這個燈具的網(wǎng)站中，我們修改它的排序規(guī)則，更加方便用戶查找自己想要的信息。

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

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

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

脫離網(wǎng)格型版式

我們來看一下什么是脫離網(wǎng)格型版式的網(wǎng)頁，注意，這里的脫離網(wǎng)格并不是完全不使用網(wǎng)格了，而是在網(wǎng)格的基礎(chǔ)上去增加一些變化型的內(nèi)容。就好像你習(xí)武，最后變成一個高手，但是你不可能扔下一開始練的拳法吧，只不過是在原有拳法的基礎(chǔ)上，更加靈活的去運用了而已。網(wǎng)格依然是網(wǎng)頁設(shè)計中的基礎(chǔ)部分。

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

而與之相比的網(wǎng)格型版式，則是傳遞出來的是穩(wěn)定整齊的感覺，這就要求我們在設(shè)計網(wǎng)頁之前，先弄清楚我們設(shè)計，需要傳遞出產(chǎn)品的什么氣質(zhì)。

還是老樣子，我們先來看看相關(guān)的畫冊。關(guān)聯(lián)剛才看到的網(wǎng)頁截圖，這個是不是就很清楚的可以看出來，它脫離網(wǎng)格的特質(zhì)啦。紅色的部分是我標(biāo)注的細(xì)節(jié)。

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

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

添加了疊壓以后，讓本來會嚴(yán)肅的頁面，增加很多的活力進(jìn)去，不會讓整個網(wǎng)頁過于的死板。

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

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

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

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

這里我已經(jīng)把文字組編輯好了，網(wǎng)頁中要講究比例間距的原則，這里我就是以按鈕的高度為依據(jù)。

根據(jù)脫離網(wǎng)格型版式的特點，一開始就設(shè)計了一個疊壓的效果。

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

最后置入我們已經(jīng)做好的文字組，這個小的組合就完成了，接著我們來看看網(wǎng)格在這個網(wǎng)頁中的作用是什么。

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

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

1. 利用留白和疊加構(gòu)圖，展現(xiàn)漂浮效果

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

2. 著重表現(xiàn)圖像的簡約設(shè)計

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

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

圖片和圖框的疊加，本質(zhì)上是比正方形或長方形的圖片，更加具有不規(guī)則的美感?；瘖y品類的網(wǎng)站，使用這種不規(guī)則的形式，傳遞出了高級和精致的美感。

那么可能會有同學(xué)會問，是不是所有的網(wǎng)頁設(shè)計都是按照網(wǎng)格進(jìn)行的呢。這個不是絕對的，因為有一種類型是自由型版式，這個就是完全的隨心所欲的設(shè)計了，就好像我們在一些畫冊中，完全找不到它有什么設(shè)計規(guī)則一樣。

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

全屏型版式

這里我特意去掉了書籍的效果，是不是就很像一張網(wǎng)頁的展開呢？

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

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

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

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

在餐飲的網(wǎng)站中經(jīng)?？梢钥吹竭@種類型的網(wǎng)站。

在這里我提供一個學(xué)習(xí)的思路，就是我們看在靜態(tài)的畫冊的時候，可以試著添加一些動態(tài)的概念。想象著這個畫面要是個視頻效果會怎么樣。

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

一個全屏型的網(wǎng)頁效果就出來了，所以在做這種類型的網(wǎng)頁的時候，可以多去參考和借鑒，大圖對開的畫冊?？梢允鼓愕脑O(shè)計靈感源源不絕。

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

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

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

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

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

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

4. 使用電影圖片展示動態(tài)圖像

除了圖片，視頻以外，我們在經(jīng)常見到的 GIF 動態(tài)圖片，同樣也可以作為全屏型網(wǎng)頁的背景使用，這里使用就會產(chǎn)生一種有趣的感覺。

5. 使用代碼效果營造全屏網(wǎng)頁效果

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

看到最后大家應(yīng)該都明白了，畫冊和網(wǎng)頁之間有著密不可分的聯(lián)系?？梢赃@么說，畫冊和網(wǎng)頁它們是一個演變的關(guān)系。隨著紙質(zhì)印刷品的慢慢減少，越來越多的信息以顯示器為載體，展示在你的面前了。

現(xiàn)在回看畫冊等紙質(zhì)印刷品，是不是就像一座寶庫，里面全部都是被等待挖掘和利用的網(wǎng)頁設(shè)計方式。除了可以很好的擴充你的版式知識，這也是一種非常好的學(xué)習(xí)方式，熟練的運用以后，還可以再去嘗試從別的領(lǐng)域去學(xué)習(xí)和借鑒，畢竟藝術(shù)的底層邏輯都是共同的。