研習設訂閱號

設計干貨  杜絕注水

戳一下看視頻版

我們每天都會瀏覽大量網頁。現在，讓我們回想一下，你印象最深的網頁。在你瀏覽它們的時候，是不是只看到了網頁中想要查找的信息呢。

這是因為，每一個網頁設計師的首要任務，就是要把信息有效的傳達出來。那是不是說，網頁只需要有信息傳達的功能，就足夠了呢？顯然，回答是否定的。那么接下來，我們就來看一下到底什么是網頁設計呢？

喬布斯說：設計，看中的不是感覺如何，而是他的功能性。

那么什么是網頁設計呢？其實，網頁設計是由印象和功能，一起組成。

設計師通過圖片，文字，色彩等元素，可以給用戶展示出不同的印象。

我們通過他的字體、圖片和顏色，一眼就可以看出來，這是一個面向兒童市場的網頁。

而這個網站和前面是截然相反，通過文字圖片和顏色，傳遞出一種專業，冷靜的感覺。

那么網頁的另一半，就是功能，通過編排文字和圖片將信息，最有效的傳遞出來。這就需要，我們合理的編排信息，讓它可以方便閱讀，有的時候還要配合網站的動效展示信息。

這個網頁，將枯燥的數字信息，通過編排，可以讓用戶快速的理解。

通過將信息，做成曲線圖表的形式，這樣就降低了用戶的理解難度。

網頁設計中，文字和圖片信息的編排。有時，也需要考慮到動效的因素。

那么，說了這么多，網頁設計師的職責到底是什么呢？

客戶通常在項目上，會有很多的需求點。客戶的這些需求，很多時候是混亂，甚至他們自己也不明白真正需求是什么。

所以，當客戶直接面向目標人群，傳遞信息的時候。目標人群，更多的是懵逼的狀態，完全不知道這個到底是什么。

所以這個時候，網頁設計師就出現了。

在接收了客戶的想法以后，將信息重新編排和整理。

這個時候傳遞給目標人群，他們就可以輕松的理解客戶的信息了。

所以，網頁設計師的職責就是，整理和展示信息的魅力，讓網站便于使用。

在保證了印象和功能的前提下，將信息最有效的傳遞出來，讓用戶可以更容易的理解網站的信息。這個，也就是網頁設計師職責。這個是不是和平面設計師，很相似呢？

現在，我們來看一下，網頁設計師和平面設計師的區別是什么？

平面設計師，通常是在限定了尺寸的版面下，進行排版。而網頁設計師，則需要根據不同的平臺，在保持統一性的前提下，來變化尺寸和樣式。

平面設計師，由于更多的是面向印刷，所以在設計時更多的采用，CMYK模式。而網頁設計相反，多采用RGB的模式。

平面設計師，在設計的時候，不需要考慮動效的問題。而網頁設計師，在設計的時候，更多時候需要考慮，文案和動效的相互搭配。

平面設計師，在一旦定稿了，交付印刷了以后，這個內容就沒有辦法繼續更改了。而網頁設計師，則需要在保持統一性的基礎上，適應不同的信息，更改板式。

但是不論平面設計師還是網頁設計師，版式設計都是一切的基礎。

到這里，我們已經知道了，什么是網頁設計，以及網頁設計師的職責。接下來，我們再來看一下，一個網頁，它的布局都有哪一些呢。

樂高玩具，好玩的點就在于，可以自己隨意的創造出新的東西。網頁的每一個板塊其實就像是積木，可以模塊化的進行調整，但是有順序性的。

一個網頁中，通常包含，頁眉、全局導航欄、主欄、頁腳，這四個部分組成。我們來看一些，網站案例，加深一下理解。

這是另一種，常見網頁的組合形式。

二級網頁的結構，通常是由全局導航欄，主欄，網站欄和頁腳組成。

另一模式是，省略掉網站欄。

網頁的瀏覽順序，不同于平面類，它分為Z字形瀏覽順序和F型瀏覽順序。

網頁的基本組成模塊，我們已經了解到了，這些模塊在設計的時候應該怎么做呢？接下來，我們分別來講一下，每一個模塊的功能和表現形式。

頁眉網頁的起始位置。通常是由標志、導航欄、社交媒體、照片和視頻組成，并不是每一個導航欄都需要這些元素，它們是可以相互組合的。

這個是最簡單的導航欄，通常是由兩部分組成。

這個則是分為標志、全局導航欄、副導航欄三部分組成。

在這里的標志區域和文案部分結合。

這個導航欄則分為四個部分。

導航欄，不僅僅只是一溜長條，在網頁中，還有將圖片和導航欄結合的案例。我們繼續將這個案例分解。分為圖片，文案信息，設計媒體，導航欄和副導航欄這幾個部分。

除了添加圖片，現在更多網站選擇放置視頻，可以更好的吸引用戶，傳遞項目屬性。我們看一下它的結構，他是由視頻、標志、文案信息、收放式全局導航欄、社交媒體組成。

通常情況下，是由版權聲明、網頁地圖，相關的跳轉鏈接，和一些其他的內容組成。他們同樣也是不固定的，可以相互組合。

添加地圖可以讓用戶更好的尋找到項目地址。

在頁腳部分，設置服務導航欄，可以讓客戶方便的跳轉鏈接。

添加社交媒體的模塊，進一步的展示網站信息。

展示著作權，也是頁腳不可或缺的內容。

快速的讓用戶查找到，上手容易是導航欄的要求。接下來，配合動效來理解一下。

在下滑網頁的過程中，導航欄會隨著下滑的位置彈出后，置頂在畫面中，方便用戶使用。

可收放式菜單，搭配動效，可以將更多的信息展示出來。

展開到整個畫面的導航欄，可以不影響畫面的簡潔性的前提下，展示導航信息。

固定在左側的導航欄，具有非常好的識別度。

單一的通過文字，有的時候，并不能有效的傳遞出信息，搭配了圖標的菜單，可以進一步提升識別度。

將副導航欄，放置在導航欄的二級菜單中，可以提升用戶使用的便利性。