@研習(xí)設(shè)K先生?：我們每天都會(huì)瀏覽大量網(wǎng)頁。現(xiàn)在，讓我們回想一下，你印象最深的網(wǎng)頁。在你瀏覽它們的時(shí)候，是不是只看到了網(wǎng)頁中想要查找的信息呢？

這是因?yàn)椋恳粋€(gè)網(wǎng)頁設(shè)計(jì)師的首要任務(wù)，就是要把信息有效地傳達(dá)出來。那是不是說，網(wǎng)頁只需要有信息傳達(dá)的功能，就足夠了呢？顯然，回答是否定的。那么接下來，我們就來看一下到底什么是網(wǎng)頁設(shè)計(jì)。

喬布斯說：「設(shè)計(jì)，看中的不是感覺如何，而是他的功能性?！?/p>

那么什么是網(wǎng)頁設(shè)計(jì)呢？其實(shí)，網(wǎng)頁設(shè)計(jì)是由印象和功能，一起組成。

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

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

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

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

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

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

這個(gè)網(wǎng)頁，將枯燥的數(shù)字信息，通過編排，可以讓用戶快速的理解。

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

網(wǎng)頁設(shè)計(jì)中，文字和圖片信息的編排。有時(shí)，也需要考慮到動(dòng)效的因素。

網(wǎng)頁設(shè)計(jì)師的職責(zé)是什么

那么，說了這么多，網(wǎng)頁設(shè)計(jì)師的職責(zé)到底是什么呢？

客戶通常在項(xiàng)目上，會(huì)有很多的需求點(diǎn)?？蛻舻倪@些需求，很多時(shí)候是混亂，甚至他們自己也不明白真正需求是什么。

所以，當(dāng)客戶直接面向目標(biāo)人群，傳遞信息的時(shí)候。目標(biāo)人群，更多的是茫然的狀態(tài)，完全不知道這個(gè)到底是什么。

所以這個(gè)時(shí)候，網(wǎng)頁設(shè)計(jì)師就出現(xiàn)了。

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

這個(gè)時(shí)候傳遞給目標(biāo)人群，他們就可以輕松地理解客戶的信息了。

所以，網(wǎng)頁設(shè)計(jì)師的職責(zé)就是，整理和展示信息的魅力，讓網(wǎng)站便于使用。

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

網(wǎng)頁設(shè)計(jì)師和平面設(shè)計(jì)師的區(qū)別是什么

現(xiàn)在，我們來看一下，網(wǎng)頁設(shè)計(jì)師和平面設(shè)計(jì)師的區(qū)別是什么？

平面設(shè)計(jì)師，通常是在限定了尺寸的版面下，進(jìn)行排版。而網(wǎng)頁設(shè)計(jì)師，則需要根據(jù)不同的平臺(tái)，在保持統(tǒng)一性的前提下，來變化尺寸和樣式。

平面設(shè)計(jì)師，由于更多的是面向印刷，所以在設(shè)計(jì)時(shí)更多的采用，CMYK 模式。而網(wǎng)頁設(shè)計(jì)相反，多采用 RGB 的模式。

平面設(shè)計(jì)師，在設(shè)計(jì)的時(shí)候，不需要考慮動(dòng)效的問題。而網(wǎng)頁設(shè)計(jì)師，在設(shè)計(jì)的時(shí)候，更多時(shí)候需要考慮，文案和動(dòng)效的相互搭配。

平面設(shè)計(jì)師，在一旦定稿了，交付印刷了以后，這個(gè)內(nèi)容就沒有辦法繼續(xù)更改了。而網(wǎng)頁設(shè)計(jì)師，則需要在保持統(tǒng)一性的基礎(chǔ)上，適應(yīng)不同的信息，更改版式。

但是不論平面設(shè)計(jì)師還是網(wǎng)頁設(shè)計(jì)師，版式設(shè)計(jì)都是一切的基礎(chǔ)。

到這里，我們已經(jīng)知道了，什么是網(wǎng)頁設(shè)計(jì)，以及網(wǎng)頁設(shè)計(jì)師的職責(zé)。接下來，我們?cè)賮砜匆幌拢粋€(gè)網(wǎng)頁，它的布局都有哪一些呢。

樂高玩具，好玩的點(diǎn)就在于，可以自己隨意地創(chuàng)造出新的東西。網(wǎng)頁的每一個(gè)板塊其實(shí)就像是積木，可以模塊化的進(jìn)行調(diào)整，但是有順序性的。

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

這是另一種，常見網(wǎng)頁的組合形式。

二級(jí)網(wǎng)頁的結(jié)構(gòu)，通常是由全局導(dǎo)航欄，主欄，網(wǎng)站欄和頁腳組成。

另一模式是，省略掉網(wǎng)站欄。

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

網(wǎng)頁的基本組成模塊，我們已經(jīng)了解到了，這些模塊在設(shè)計(jì)的時(shí)候應(yīng)該怎么做呢？接下來，我們分別來講一下，每一個(gè)模塊的功能和表現(xiàn)形式。

頁眉-網(wǎng)頁的起始位置

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

這個(gè)是最簡(jiǎn)單的導(dǎo)航欄，通常是由兩部分組成。

這個(gè)則是分為標(biāo)志、全局導(dǎo)航欄、副導(dǎo)航欄三部分組成。

在這里的標(biāo)志區(qū)域和文案部分結(jié)合。

這個(gè)導(dǎo)航欄則分為四個(gè)部分。

導(dǎo)航欄，不僅僅只是一溜長(zhǎng)條，在網(wǎng)頁中，還有將圖片和導(dǎo)航欄結(jié)合的案例。我們繼續(xù)將這個(gè)案例分解。分為圖片，文案信息，設(shè)計(jì)媒體，導(dǎo)航欄和副導(dǎo)航欄這幾個(gè)部分。

除了添加圖片，現(xiàn)在更多網(wǎng)站選擇放置視頻，可以更好的吸引用戶，傳遞項(xiàng)目屬性。我們看一下它的結(jié)構(gòu)，他是由視頻、標(biāo)志、文案信息、收放式全局導(dǎo)航欄、社交媒體組成。

頁腳-是網(wǎng)頁結(jié)束位置的區(qū)域

通常情況下，是由版權(quán)聲明、網(wǎng)頁地圖，相關(guān)的跳轉(zhuǎn)鏈接，和一些其他的內(nèi)容組成。他們同樣也是不固定的，可以相互組合。

添加地圖可以讓用戶更好地尋找到項(xiàng)目地址。

在頁腳部分，設(shè)置服務(wù)導(dǎo)航欄，可以讓客戶方便的跳轉(zhuǎn)鏈接。

添加社交媒體的模塊，進(jìn)一步展示網(wǎng)站信息。

展示著作權(quán)，也是頁腳不可或缺的內(nèi)容。

全局導(dǎo)航欄-讓用戶能夠快速地進(jìn)入相關(guān)頁面

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

在下滑網(wǎng)頁的過程中，導(dǎo)航欄會(huì)隨著下滑的位置彈出后，置頂在畫面中，方便用戶使用。

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

展開到整個(gè)畫面的導(dǎo)航欄，可以不影響畫面的簡(jiǎn)潔性的前提下，展示導(dǎo)航信息。

固定在左側(cè)的導(dǎo)航欄，具有非常好的識(shí)別度。

單一的通過文字，有的時(shí)候，并不能有效的傳遞出信息，搭配了圖標(biāo)的菜單，可以進(jìn)一步提升識(shí)別度。

將副導(dǎo)航欄，放置在導(dǎo)航欄的二級(jí)菜單中，可以提升用戶使用的便利性。

現(xiàn)在，我們已經(jīng)清楚了，網(wǎng)頁中的頁眉，頁腳，全局導(dǎo)航欄的形式和功能。其實(shí)一個(gè)網(wǎng)頁中，還有很多小的元素，它們同樣是可以讓用戶更好地去接收和理解信息，但是我們卻常常忽略它們。

按鈕和圖標(biāo)-引導(dǎo)用戶進(jìn)入和返回頁面

首先來看一下，按鈕和圖標(biāo)。它是為了引導(dǎo)用戶進(jìn)入或者返回頁面而存在的。它的特點(diǎn)是易識(shí)別和反饋性。

線框按鈕：鼠標(biāo)碰觸顏色會(huì)改變。

△ 更多的應(yīng)用案例

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

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

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

向上的箭頭，在網(wǎng)頁中一般作為返回頁面頂部的導(dǎo)航按鈕使用。

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

表格，在網(wǎng)頁中將復(fù)雜的信息通過網(wǎng)格的形式，讓用戶可以一目了然的識(shí)別信息。它的特點(diǎn)是，易識(shí)別和規(guī)范性。

標(biāo)題添加背景色，有效地區(qū)分出主次層級(jí)。

不同背景色的交替布置，讓下級(jí)信息，可以區(qū)分。

字體加粗，用線段區(qū)分。

填寫項(xiàng)目-快速指導(dǎo)用戶填寫信息

填寫項(xiàng)目，它的作用是，可以快速指導(dǎo)用戶填寫信息，特點(diǎn)是便利性和功能性。

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

通過今天的學(xué)習(xí)，我們了解到了，一個(gè)網(wǎng)頁設(shè)計(jì)師的職責(zé)，以及他與平面設(shè)計(jì)師之間的區(qū)別。同時(shí)告訴了大家，網(wǎng)頁設(shè)計(jì)中頁眉，頁腳和全局導(dǎo)航欄的結(jié)構(gòu)，以及它們的特點(diǎn)分別是什么。既要向用戶傳遞出準(zhǔn)確的信息，又能體現(xiàn)出網(wǎng)頁的印象，也就是怎樣做得又對(duì)又好，是網(wǎng)頁設(shè)計(jì)師的職責(zé)，但是網(wǎng)頁設(shè)計(jì)和平面設(shè)計(jì)，都需要一個(gè)良好的版式設(shè)計(jì)的基礎(chǔ)上進(jìn)行的。

歡迎關(guān)注研習(xí)社的微信公眾號(hào)：「Yanxishe2017」