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

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

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

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

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

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

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

卡片/瓷磚型版式

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

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

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

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

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

在這里我們的變化型一步一步的提升，逐漸就會(huì)變得像我們開(kāi)頭看到的那幾個(gè)畫(huà)冊(cè)的版式一樣。這是因?yàn)樗鼈兊牡讓舆壿嫸际腔ネǖ摹?/p>

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

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

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

我們?cè)倮^續(xù)看一個(gè)畫(huà)冊(cè)的內(nèi)容，還是先提取這個(gè)畫(huà)冊(cè)的文字組，提取出來(lái)觀(guān)察一下。

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

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

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

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

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

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

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

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

4. 同時(shí)適合電腦/手機(jī)端

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

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

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

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

先來(lái)看一下這張脫離網(wǎng)格型的網(wǎng)頁(yè)，整體傳遞出來(lái)的是一種，活潑動(dòng)感的感覺(jué)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那么可能會(huì)有同學(xué)會(huì)問(wèn)，是不是所有的網(wǎng)頁(yè)設(shè)計(jì)都是按照網(wǎng)格進(jìn)行的呢。這個(gè)不是絕對(duì)的，因?yàn)橛幸环N類(lèi)型是自由型版式，這個(gè)就是完全的隨心所欲的設(shè)計(jì)了，就好像我們?cè)谝恍┊?huà)冊(cè)中，完全找不到它有什么設(shè)計(jì)規(guī)則一樣。

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

全屏型版式

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

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

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

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

第二種形式，則是一開(kāi)始為全屏顯示，下滑就變成了一個(gè)組合專(zhuān)欄型版式了。通俗一點(diǎn)講就是可以向下滑動(dòng)。

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

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

提取一下這個(gè)畫(huà)冊(cè)中的這個(gè)文字形式，置入到一個(gè)網(wǎng)頁(yè)中，我們來(lái)看看效果。

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

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

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

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

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

3. 在固定的畫(huà)面中展示不同視頻

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

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

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

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

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

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

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