教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2022年03月02日15時40分 來源:傳智教育 瀏覽次數(shù):

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

  1、PC端屏幕分辨率

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

計算機屏幕分辨率

  圖1-1 計算機屏幕分辨率

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

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

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

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

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

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

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

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

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

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

字體選擇
圖1-4 字體選擇
常用顏色
圖1-5 常用顏色

0 分享到:
和我們在線交談!