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

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

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

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

想要通過畫面給用戶留下什么印象

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

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

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

將信息用最有效的方式傳遞出來

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

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

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

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

網頁設計師的職責是什么

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

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

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

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

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

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

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

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

網頁設計師和平面設計師的區別是什么

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁眉-網頁的起始位置

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

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

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

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

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

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

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

頁腳-是網頁結束位置的區域

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

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

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

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

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

全局導航欄-讓用戶能夠快速地進入相關頁面

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

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

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

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

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

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

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

現在，我們已經清楚了，網頁中的頁眉，頁腳，全局導航欄的形式和功能。其實一個網頁中，還有很多小的元素，它們同樣是可以讓用戶更好地去接收和理解信息，但是我們卻常常忽略它們。

按鈕和圖標-引導用戶進入和返回頁面

首先來看一下，按鈕和圖標。它是為了引導用戶進入或者返回頁面而存在的。它的特點是易識別和反饋性。

線框按鈕：鼠標碰觸顏色會改變。

△ 更多的應用案例

這是帶線框的按鈕的第二種反饋模式。

帶背景色的按鈕，同樣具有良好的反饋。

帶圖標的按鈕，可以更好地讓用戶理解和明白，按鈕的含義。

向上的箭頭，在網頁中一般作為返回頁面頂部的導航按鈕使用。

表格-讓用戶可以一目了然識別信息

表格，在網頁中將復雜的信息通過網格的形式，讓用戶可以一目了然的識別信息。它的特點是，易識別和規范性。

標題添加背景色，有效地區分出主次層級。

不同背景色的交替布置，讓下級信息，可以區分。

字體加粗，用線段區分。

填寫項目-快速指導用戶填寫信息

填寫項目，它的作用是，可以快速指導用戶填寫信息，特點是便利性和功能性。

讓必須填寫的項目變得一目了然，并且在填寫欄中展示填寫的信息，讓用戶可以更加容易理解。

通過今天的學習，我們了解到了，一個網頁設計師的職責，以及他與平面設計師之間的區別。同時告訴了大家，網頁設計中頁眉，頁腳和全局導航欄的結構，以及它們的特點分別是什么。既要向用戶傳遞出準確的信息，又能體現出網頁的印象，也就是怎樣做得又對又好，是網頁設計師的職責，但是網頁設計和平面設計，都需要一個良好的版式設計的基礎上進行的。

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