杭州網(wǎng)頁(yè)設(shè)計(jì)公司網(wǎng)頁(yè)做不好，那是畫冊(cè)看得少！網(wǎng)頁(yè)設(shè)計(jì)和畫冊(cè)設(shè)計(jì)區(qū)別在這里

當(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ì)的不同類型？

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

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

先來(lái)看一下，畫冊(cè)和網(wǎng)頁(yè)設(shè)計(jì)的一些區(qū)別。我們?cè)谟^看一本畫冊(cè)的時(shí)候，當(dāng)然，這個(gè)畫冊(cè)的范圍是包括書籍，雜志在內(nèi)的印刷刊物的。閱讀順序基本上都是橫向的從A 到 B 的。而瀏覽網(wǎng)頁(yè)的時(shí)候，從 A 到 B 的閱讀狀態(tài)，從橫向的閱讀，轉(zhuǎn)變成了縱向的。當(dāng)我們拿起一本畫冊(cè)的時(shí)候，如果我們可以消除，畫冊(cè)上的中線的時(shí)候，我們看一下會(huì)發(fā)生什么！這是一個(gè)關(guān)于相機(jī)的畫冊(cè)，一共是 3 組。消除掉這個(gè)畫冊(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)將這本畫冊(cè)剩下的區(qū)域，同樣不改變形式，放置進(jìn)網(wǎng)頁(yè)中。

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

網(wǎng)格型版式

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

看這本畫冊(cè)就會(huì)發(fā)現(xiàn)，它是嚴(yán)格的按照三欄式網(wǎng)格的模式進(jìn)行設(shè)計(jì)，內(nèi)容信息簡(jiǎn)潔明了日常瀏覽網(wǎng)頁(yè)時(shí)，會(huì)經(jīng)?？吹胶彤媰?cè)類似，以網(wǎng)格的形式編排網(wǎng)頁(yè)。這個(gè)網(wǎng)頁(yè)也就可以理解為是一個(gè)四欄型的網(wǎng)格。當(dāng)然，網(wǎng)頁(yè)中也會(huì)包含著隱藏網(wǎng)格的存在。和我們平日中的看的畫冊(cè)內(nèi)容很相似。繼續(xù)來(lái)看幾個(gè)網(wǎng)頁(yè)的實(shí)例，加深一下理解。這個(gè)網(wǎng)頁(yè)就是類似上面所說(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)基本上和我們平日看到的畫冊(cè)屬性一致。

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

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

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

雙專欄型板式

在我們觀看畫冊(cè)的時(shí)候，其實(shí)中間的裝訂線，分割了這本畫冊(cè)。讓他們兩面都展示著不同類型的信息。同理，這個(gè)展開后類似網(wǎng)頁(yè)的畫冊(cè)，裝訂線將它們分開，它的左右面展示著完全不同的信息。

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

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

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

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

除了上面的極具特點(diǎn)的雙專欄型版式外，在瀏覽網(wǎng)頁(yè)中還會(huì)見到這樣的網(wǎng)頁(yè)形式，它同樣也是雙專欄型版式。這里就分為主副區(qū)域，通常副區(qū)域放置導(dǎo)航欄。這里主副區(qū)域并沒有明確的規(guī)定，它們也可以相互調(diào)轉(zhuǎn)位置。繼續(xù)利用畫冊(cè)的形式，加深大家的對(duì)網(wǎng)頁(yè)形式的理解。這里的一組畫冊(cè)，我們讓他們?cè)僖淮巫兓貓D片的形態(tài)。這個(gè)模式就是雙專欄型版式的第一種形態(tài)。通過(guò)畫冊(cè)可以更好的加深我們的理解。這個(gè)畫冊(cè)我們重新改成圖片的形式，提取它的元素，將它重新組合成一個(gè)雙專欄型版式的網(wǎng)頁(yè)。完整的雙專欄型版式就完成啦，大家也理解它和畫冊(cè)關(guān)聯(lián)了吧。我們，接下來(lái)看看它的特點(diǎn)都有哪一些吧！既然可以同時(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è)，它們都是不隨著畫面的滾動(dòng)而滾動(dòng)的。

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

由于導(dǎo)航欄是你想用它的時(shí)候，它就出現(xiàn)，你不想用它的時(shí)候，幾乎你就會(huì)禮貌性將它無(wú)視，是不是像極了愛情呢？所以在畫面中呢，它可以適當(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ò)畫冊(cè)我們了解雙專欄型版式的內(nèi)容，以后我們?cè)倏吹筋愃频漠媰?cè)的時(shí)候，就可以快速的補(bǔ)充網(wǎng)頁(yè)設(shè)計(jì)的資料庫(kù)，這也就是我們常說(shuō)的觸類旁通。

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

單專欄型版式

還是老規(guī)矩先看畫冊(cè)，再看網(wǎng)頁(yè)。這個(gè)畫冊(cè)中，我們主要看左側(cè)這個(gè)部分，你會(huì)發(fā)現(xiàn)其實(shí)它們是分為兩個(gè)模塊的，而本質(zhì)上這兩個(gè)模塊是通欄。看一下單專欄型版式的網(wǎng)頁(yè)是什么樣子的。這里我們要注意，這里的每一個(gè)板塊，都類似于上面的畫冊(cè)，它占著一個(gè)通欄的面積，我們可以很容易的區(qū)分它們。而這個(gè)也就是單專欄型版式的基本結(jié)構(gòu)，一個(gè)板塊接著一個(gè)板塊，它們之間的分割大部分情況下都是明顯可見的。將這個(gè)畫冊(cè)還原到圖片的形態(tài)，并且將它置入在網(wǎng)頁(yè)中，你會(huì)發(fā)現(xiàn)這個(gè)幾乎不用改動(dòng)，可見它與此類畫冊(cè)之間有著非常緊密的關(guān)聯(lián)性。

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

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