與平面不同，在UI和網(wǎng)頁設(shè)計中，模塊是經(jīng)常出現(xiàn)，并且貫穿設(shè)計稿始終的。每個網(wǎng)頁都是由模塊組成的，并且常用模塊都會有固定的稱呼。我這里先列舉網(wǎng)頁中經(jīng)常出現(xiàn)的幾個模塊，搞懂了模塊，才好進行下面的講解。

比較常見的是這幾個模塊，幾乎每個網(wǎng)頁中都會出現(xiàn)：

Header

頁面中header部分一般位于網(wǎng)頁中最上端，內(nèi)容主要包括網(wǎng)站名稱或Logo的網(wǎng)站的導(dǎo)航部分。一般來說，header的高度是60-90px，當然這個數(shù)值并不絕對，也有100px的header，看實際需要。不過100px的話，就已經(jīng)很高了。

這里是我這套網(wǎng)站里面登錄前的狀態(tài)，我這里的header非常簡單，放在banner里面呈現(xiàn)，也沒有做其它特殊效果。（關(guān)于banner的概念，下文中會有提到）

再放一些其它網(wǎng)站的header進來做以參考：

站酷的header，站酷的高度設(shè)置是54px。

2.摩拜的header，高度設(shè)置是80px。

導(dǎo)航欄

導(dǎo)航欄是指位于頁面頂部或者側(cè)邊區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕。很多網(wǎng)站的導(dǎo)航欄會顯示是=在header里面，上文中的站酷、摩拜的導(dǎo)航欄就是這類，是一種很普遍的導(dǎo)航方式，這里就不再單獨列舉。

其它也有不同的導(dǎo)航方式，我這套網(wǎng)站里面，使用的就是下拉的導(dǎo)航方式：

Banner

一般來說，息縣網(wǎng)站建設(shè)首頁打開是會有一張橫著的大圖的，它會占用網(wǎng)頁很大的面積。這張大圖就叫Banner。Banner的其用面積之大，對網(wǎng)頁的整體風格和用戶的第一感受，都會造成很大影響。

因為這個圖片給客戶傳達的信息量最大，給客戶的吸引力也最大，所以在網(wǎng)頁設(shè)計中Banner的地位尤其重要。甚至，一套網(wǎng)頁在視覺上好不好，Banner可以起到舉足輕重的作用。如果Banner設(shè)計的足夠漂亮，就能給網(wǎng)站帶來很多的亮點；反之如果這個Banner做的很普通，就會導(dǎo)致整個網(wǎng)站顯得很普通。

而作為網(wǎng)頁中占比最大的圖片，Banner需要給客戶傳達有用的信息，否則這個Banner便是一個沒有內(nèi)涵的圖片而已，浪費了網(wǎng)站空間。大多數(shù)Banner的尺寸都在450-750px之間，也是具體看實際需要。

這邊放上我這個黨建網(wǎng)站的Banner，高度是550px。

下面也放幾張其它網(wǎng)站的Banner案例，給各位做以參考：

1.天天看看的Banner，他們的高度設(shè)置是573px。視頻網(wǎng)站的話，一般都是放片子上來做Banner。一來方便影片推廣，二來又增加了自己網(wǎng)站的視頻播放量。

包括其他視頻網(wǎng)站，如優(yōu)酷、騰訊視頻等等，Banner都是采用片子的形式：

優(yōu)酷的Banner是572px；

騰訊視頻的Banner是539px。

2.淘寶店鋪的Banner，高度設(shè)置128px。

這一類Banner又比較特殊。相比其它類型的網(wǎng)站，淘寶的Banner是很小的了，高度僅有128px?？紤]到淘寶上面的店鋪極多，賣家又大多是個體商家，不一定會在店面設(shè)計上花許多心思。在這樣的情況下，盡量減少Banner的占比，也確實保持網(wǎng)站整體風格統(tǒng)一的方法之一。

內(nèi)容區(qū)

到這里我們應(yīng)該能理解“模塊”的概念了。通常Banner下面就是網(wǎng)站內(nèi)容的的模塊，按照每個網(wǎng)站的不用，這里的模塊也不相同。具體就按照每個網(wǎng)站所提供的需求進行設(shè)計就好。有沒有說清楚的地方可以留言，或者私信。

Footer

我們?yōu)g覽網(wǎng)站時，翻到網(wǎng)站頁面底部時，底部區(qū)域展示的信息就是Footer。通常Footer區(qū)會顯示版權(quán)信息和備案號等資料，用戶可以從中獲得網(wǎng)站的基本信息。

1.造作

造作的Footer就放入了很多元素進來，從社交媒體鏈接（微信、新浪）、聯(lián)系方式（電話、店鋪地址）到頁面信息（版權(quán)、著作權(quán)等信息）和網(wǎng)站地圖（快速跳轉(zhuǎn)到指定頁面的跳轉(zhuǎn)鏈接）都有展示，這也就占用了頁面比較大的篇幅。

2.玉名牧場

玉名牧場的Footer也展示了比較多的信息，加入了電話、導(dǎo)航的元素。在Footer區(qū)展示導(dǎo)航的方式，在網(wǎng)站設(shè)計中并不多見。

主視覺區(qū)：

最后在引入一個概念，就是網(wǎng)頁設(shè)計中的主視覺區(qū)。

做效果圖的時候，為了讓不同的顯示器及瀏覽器在瀏覽頁面的時候不出現(xiàn)問題，不出現(xiàn)大小偏差等情況，我們在設(shè)計的時候通常會在頁面兩邊進行留白處理。將需要展現(xiàn)的內(nèi)容，集中讓在頁面中部，形成一個視覺范圍。

視覺區(qū)的大小并沒有硬性規(guī)定，但是為了兼容大多數(shù)瀏覽器一般是設(shè)置960px。隨著現(xiàn)在瀏覽器分辨率的變化，已開始向著1000px,1200px寬度發(fā)展。

如果需要兼容不同瀏覽器尺寸，現(xiàn)在比較流行的做法是做成響應(yīng)式的，即根據(jù)不同分辨率顯示不同的尺寸，工作量也就隨之增加了。

以UI中國舉例，中間沒有遮罩的白色部分這個就是視覺區(qū)域，UI中國的范圍的1180px。

網(wǎng)頁方面，模塊的內(nèi)容大概就是這些，我覺得對新手來說還是比較全面的了。