網(wǎng)頁UI設(shè)計規(guī)范

　　在設(shè)計網(wǎng)頁界面時，首先要了解PC端的設(shè)計規(guī)范，才能將設(shè)計標(biāo)準(zhǔn)化，使其更符合網(wǎng)頁UI設(shè)計的特點。本節(jié)將從PC端屏幕分辨率、網(wǎng)頁設(shè)計尺寸大小、網(wǎng)頁設(shè)計命名規(guī)范、以及網(wǎng)頁設(shè)計中字體編排四個方面詳細(xì)講解。

　　1、PC端屏幕分辨率

　　PC端的屏幕分辨率指的就是計算機(jī)的屏幕分辨率，如圖1-1所示紅框標(biāo)識。當(dāng)下比較流行的屏幕分辨率分為1024×768像素、1366×768像素、1440×900像素和1920×1080像素等。在設(shè)計網(wǎng)頁時要考慮計算機(jī)屏幕分辨率下的瀏覽器的有效可視區(qū)域。

　　圖1-1 計算機(jī)屏幕分辨率

　　2、網(wǎng)頁設(shè)計尺寸大小

　　網(wǎng)頁設(shè)計尺寸大小指的是在設(shè)計界面時寬度和高度。尺寸一般以寬度1920像素進(jìn)行設(shè)計，高度可根據(jù)內(nèi)容調(diào)整設(shè)定，如圖1-2所示。但是考慮到屏幕分辨率1024×768像素，在瀏覽器內(nèi)有效可視區(qū)域?qū)挾葹?000像素，所以設(shè)置版心寬度為1000像素。

　　圖1-2 網(wǎng)頁設(shè)計尺寸大小

　　3、網(wǎng)頁設(shè)計命名規(guī)范

　　作為一個完整的頁面，往往包含很多部分，如logo、導(dǎo)航、Banner、內(nèi)容主體、版權(quán)等。設(shè)計界面時，按照規(guī)定的準(zhǔn)則命名圖層或圖層組合，有利于快速查找和修改頁面效果，還可以大幅度提高切圖和后期制作的工作效率。PC端網(wǎng)頁UI設(shè)計常用英文名單詞如表1-3所示。

　　圖1-3 網(wǎng)頁UI設(shè)計命名常用單詞

　　4、網(wǎng)頁設(shè)計中字體編排

　　網(wǎng)頁界面中，字體編排設(shè)計是一種感性的、直觀的行為。設(shè)計師可根據(jù)字體字號來表達(dá)設(shè)計所要表達(dá)的情感。需要注意的是，選擇什么樣的字體字號以整個網(wǎng)頁界面的效果和用戶的感受為準(zhǔn)。另外，考慮到大多數(shù)用戶的計算機(jī)里的基本字體類型。因此，在正文內(nèi)容最好采用基本字體，如“宋體”“微軟雅黑”等字體，數(shù)字和字母可選擇“Arial”等字體。在網(wǎng)頁界面設(shè)計中，字體字號和常用顏色應(yīng)用如表1-4和1-5所示。

圖1-4 字體選擇

圖1-5 常用顏色