版式設(shè)計(jì)（第二版）課件：網(wǎng)頁界面版式設(shè)計(jì)

網(wǎng)頁界面版式設(shè)計(jì)網(wǎng)頁界面版式設(shè)計(jì)一、網(wǎng)頁界面版式設(shè)計(jì)的概念網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗地講，網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)頁界面版式設(shè)計(jì)是指對網(wǎng)頁中的文字、圖片、動畫、音頻、視頻等按照一定的規(guī)律和藝術(shù)化處理方式進(jìn)行編排和布局，以增強(qiáng)用戶體驗(yàn)，達(dá)到有效傳遞信息的目的，如圖5-6-1所示。網(wǎng)頁界面版式設(shè)計(jì)二、網(wǎng)頁界面的尺寸網(wǎng)頁界面不像印刷品一樣，它沒有固定的尺寸，它的大小與顯示器的大小及分辨率有關(guān)。常見的電腦顯示器的分辨率及各分辨率電腦顯示器的市場占有率如圖5-6-2所示；移動端網(wǎng)頁的尺寸則會因手機(jī)屏幕的不同而改變，H5頁面的版式設(shè)計(jì)稿一般寬度為640px，高度為1136px，移動端的網(wǎng)頁界面如圖5-6-3所示。網(wǎng)頁界面版式設(shè)計(jì)網(wǎng)頁界面版式設(shè)計(jì)三、網(wǎng)頁界面版式設(shè)計(jì)的程序1.分析定位根據(jù)網(wǎng)站用戶需求以及具體網(wǎng)頁的性質(zhì)和內(nèi)容來確定版式設(shè)計(jì)的風(fēng)格，最終形成初步的版式設(shè)計(jì)思路。2.設(shè)計(jì)構(gòu)思（1）設(shè)計(jì)網(wǎng)站的進(jìn)入界面、首界面以及二級界面、三級界面。（2）對網(wǎng)頁界面的圖片、文字、視頻等內(nèi)容進(jìn)行初步編排，確定網(wǎng)頁界面的結(jié)構(gòu)。網(wǎng)頁界面版式設(shè)計(jì)3.確定方案制定版式設(shè)計(jì)方案，綜合考慮版面色彩、結(jié)構(gòu)等，制作出平面設(shè)計(jì)稿。4.網(wǎng)頁切割確定版式設(shè)計(jì)方案后，對版面中的圖片進(jìn)行合理切割，以保證網(wǎng)頁信息加載的速度。5.網(wǎng)頁后臺制作當(dāng)所有的設(shè)計(jì)程序完成后，進(jìn)行圖片鏈接及交互設(shè)計(jì)，可開展網(wǎng)頁測試來確定網(wǎng)頁界面流程是否合理、用戶體驗(yàn)是否良好，最終完成網(wǎng)頁界面設(shè)計(jì)。網(wǎng)頁界面版式設(shè)計(jì)四、網(wǎng)頁界面版式1.“國”字型版式“國”字型版式也可以稱為“同”字型版式，其特點(diǎn)是網(wǎng)頁界面的最上面是網(wǎng)站的標(biāo)志、橫幅廣告和導(dǎo)航欄，中間是網(wǎng)頁的主體內(nèi)容，最下面是網(wǎng)頁的版權(quán)聲明等信息，如圖5-6-4所示。網(wǎng)頁界面版式設(shè)計(jì)2.拐角型版式拐角型版式與“國”字型版式類似，網(wǎng)頁界面頂部都是網(wǎng)站的標(biāo)志、導(dǎo)航欄和橫幅廣告。拐角型版式適用于購物類、門戶類網(wǎng)站網(wǎng)頁界面的設(shè)計(jì)，如圖5-6-5所示。網(wǎng)頁界面版式設(shè)計(jì)3.左右框架型版式左右框架型版式常用于一些大型論壇和企業(yè)網(wǎng)站的網(wǎng)頁界面，網(wǎng)頁界面左側(cè)一般為導(dǎo)航欄鏈接，右側(cè)為網(wǎng)頁的主體內(nèi)容，如圖5-6-6所示。網(wǎng)頁界面版式設(shè)計(jì)4.海報(bào)型版式采用海報(bào)型版式的網(wǎng)頁界面，看起來就像平時見到的海報(bào)一樣，中間是一幅很醒目、設(shè)計(jì)精美的圖片，圖片周圍設(shè)計(jì)有文字信息和鏈接。海報(bào)型版式常用于時尚類網(wǎng)站的首頁，其優(yōu)點(diǎn)是版面美觀，有視覺沖擊力，缺點(diǎn)是網(wǎng)頁打開速度慢，如圖5-6-7所示。網(wǎng)頁界面版式設(shè)計(jì)5.斜線分割型版式斜線或者斜著的物體，其本身似乎自帶張力，將其用在網(wǎng)頁界面的版式設(shè)計(jì)中，可增強(qiáng)版面的視覺張力。當(dāng)網(wǎng)頁界面設(shè)計(jì)過于中規(guī)中矩、無亮點(diǎn)時，打破這種中規(guī)中矩就尤為重要。打破中規(guī)中矩的方法有很多，而使用斜線分割版面就是其中一種常用的方法，如圖5-6-8所示。網(wǎng)頁界面版式設(shè)計(jì)6.個性化版式個性化版式適用于一些專題性網(wǎng)站的網(wǎng)頁界面，它是在基礎(chǔ)網(wǎng)頁界面版式的基礎(chǔ)上增加一些獨(dú)