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

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

　　1、PC端屏幕分辨率

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

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

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

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

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

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

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

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

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

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

圖1-4 字體選擇

圖1-5 常用顏色