美女免费黄色_精品欧美色视频网站在线观看_国产精品扒开做爽爽爽的视频_亚洲日本精品国产第一区_免费亚洲视频_欧美福利在线观看_中文字幕97

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

比較常見的是這幾個模塊，幾乎每個網頁中都會出現：

Header

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

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

再放一些其它網站的header進來做以參考：

站酷的header，站酷的高度設置是54px。

2.摩拜的header，高度設置是80px。

導航欄

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

其它也有不同的導航方式，我這套網站里面，使用的就是下拉的導航方式：

Banner

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

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

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

這邊放上我這個黨建網站的Banner，高度是550px。

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

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

包括其他視頻網站，如優酷、騰訊視頻等等，Banner都是采用片子的形式：

優酷的Banner是572px；

騰訊視頻的Banner是539px。

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

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

內容區

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

Footer

我們瀏覽網站時，翻到網站頁面底部時，底部區域展示的信息就是Footer。通常Footer區會顯示版權信息和備案號等資料，用戶可以從中獲得網站的基本信息。

1.造作

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

2.玉名牧場

玉名牧場的Footer也展示了比較多的信息，加入了電話、導航的元素。在Footer區展示導航的方式，在網站設計中并不多見。

主視覺區：

最后在引入一個概念，就是網頁設計中的主視覺區。

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

視覺區的大小并沒有硬性規定，但是為了兼容大多數瀏覽器一般是設置960px。隨著現在瀏覽器分辨率的變化，已開始向著1000px,1200px寬度發展。

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

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

網頁方面，模塊的內容大概就是這些，我覺得對新手來說還是比較全面的了。