web前端頁面設(shè)計(jì)流程有哪些

設(shè)計(jì)網(wǎng)頁就像一個(gè)工程，有著一定的工作流程。設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)，只有遵循設(shè)計(jì)流程才能有條不紊地完成網(wǎng)頁設(shè)計(jì)，讓網(wǎng)頁的結(jié)構(gòu)更加規(guī)范合理。網(wǎng)頁設(shè)計(jì)流程主要包括確定網(wǎng)站主題、網(wǎng)站整體規(guī)劃、收集素材、設(shè)計(jì)網(wǎng)頁效果圖四個(gè)步驟。

web前端頁面設(shè)計(jì)流程一：確定網(wǎng)站主題

網(wǎng)站主題是網(wǎng)站的核心部分。一個(gè)網(wǎng)站只有在確定主題之后，才能有針對(duì)性地選取內(nèi)容。確定主題的方法十分簡單，可以通過前期的調(diào)查和分析來確定該網(wǎng)站的主題

(1)調(diào)查:調(diào)查的目的是了解各類網(wǎng)站的發(fā)展?fàn)顩r，總結(jié)出當(dāng)前主流網(wǎng)站的特點(diǎn)優(yōu)勢(shì)、競爭力，為網(wǎng)站的定位確定一個(gè)方向。在調(diào)查時(shí)主要考慮以下問題。

●網(wǎng)站建設(shè)的目標(biāo)。

●網(wǎng)站面向人群。

●企業(yè)的產(chǎn)品。

●企業(yè)的服務(wù)。

(2)分析:分析是指根據(jù)調(diào)查的結(jié)果，對(duì)企業(yè)自身進(jìn)行特點(diǎn)、優(yōu)勢(shì)、競爭力的分析初步確定網(wǎng)站的主題。在確定主題時(shí)要遵循以下原則。

●主題要小而精，定位不宜過大過高。

●主題要能體現(xiàn)企業(yè)自身的特點(diǎn)。

web前端頁面設(shè)計(jì)流程二：網(wǎng)站整體規(guī)劃

對(duì)網(wǎng)站進(jìn)行整體規(guī)劃能夠幫設(shè)計(jì)師快速理清網(wǎng)站結(jié)構(gòu)，讓網(wǎng)頁之間的關(guān)聯(lián)更加緊密通常規(guī)劃一個(gè)網(wǎng)站時(shí)，可以先用思維導(dǎo)圖(推薦使用XMind軟件)把每個(gè)頁面的名稱列出來，規(guī)劃完整體的網(wǎng)站框架思維導(dǎo)圖，就可以規(guī)劃網(wǎng)站的其他內(nèi)容了，主要包括網(wǎng)站的功能、網(wǎng)站的結(jié)構(gòu)、版面布局等。如果是一些功能需求較多的網(wǎng)站，還需要產(chǎn)品經(jīng)理設(shè)計(jì)原型線框圖。

只有在設(shè)計(jì)網(wǎng)頁之前把這些方面都考慮到了，才能夠保證網(wǎng)站制作有條不紊地進(jìn)行，避免頁面或重要功能模塊缺失。

web前端頁面設(shè)計(jì)流程三：收集素材

在網(wǎng)站整體規(guī)劃完成之后，就可以收集網(wǎng)頁設(shè)計(jì)需要的素材了。豐富的素材能夠讓設(shè)計(jì)師更輕松地完成網(wǎng)站的設(shè)計(jì)，還能極大地節(jié)約設(shè)計(jì)成本。在網(wǎng)頁設(shè)計(jì)中，收集素材主要包括兩種，一種為文本素材，一種為圖片素材，具體介紹如下。

1. 文本素材

設(shè)計(jì)師可以從書刊、網(wǎng)絡(luò)上收集需要的文本，然后將這些文本加工、整理，制作成Word文檔保存。需要注意的是，在使用搜集的文本素材時(shí)要去偽存真、去粗取精，加成自己的素材，避免版權(quán)糾紛。

2. 圖片素材

只有文字內(nèi)容的網(wǎng)站對(duì)于訪問者來說是枯燥無味的，因此在網(wǎng)頁設(shè)計(jì)中，往往加入一些圖片素材，使頁面的內(nèi)容更加充實(shí)，更具有可讀性。設(shè)計(jì)師可以從網(wǎng)上的些圖片素材庫獲取圖片或者自己拍攝一些圖片作為素材。同時(shí)在使用圖片素材時(shí)也需要注意版權(quán)問題。值得一提的是，在收集素材時(shí)，為了將素材類別劃分清楚，一般都會(huì)將其存放在相應(yīng)的文件夾中。例如，文本素材通常存放在名為text的文件text夾中，圖片素材通常存放在名為images的文件夾中。

web前端頁面設(shè)計(jì)流程四：設(shè)計(jì)網(wǎng)頁效果圖

設(shè)計(jì)網(wǎng)頁效果圖就是根據(jù)設(shè)計(jì)需求，對(duì)收集的素材進(jìn)行排版和美化，給用戶個(gè)布局合理、視覺效果突出的界面。在設(shè)計(jì)網(wǎng)頁效果圖時(shí)，設(shè)計(jì)師應(yīng)該根據(jù)網(wǎng)站的內(nèi)容確定網(wǎng)站的風(fēng)格、色彩以及表現(xiàn)形式等要素，完成頁面的設(shè)計(jì)部分。在設(shè)計(jì)效果圖時(shí)往往要遵循一些相應(yīng)的規(guī)范。

1. 適配主流屏幕分辨率

幕分辨率是指屏幕顯示的分辨率，通常以水平和垂直像素來衡量。在設(shè)計(jì)網(wǎng)頁時(shí)，頁面的寬度盡量不要超過屏幕的分辨率，否則頁面將不能完全顯示(響應(yīng)式布局頁面除外)。

2、考慮頁面尺寸和版心

設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)應(yīng)盡量適配主流的屏幕分辨率。當(dāng)下比較流行的屏幕分辨率包括1024×768px、1366×768px、1440×900px和1920×1080px等。2.考慮頁面尺寸和版心頁面尺寸就是網(wǎng)頁的寬度和高度。版心是指頁面的有效使用面積，是主要元素以及內(nèi)容所在的區(qū)域。在設(shè)計(jì)網(wǎng)頁時(shí)，頁面尺寸寬度一般為1200~1920px，高度可根據(jù)內(nèi)容調(diào)整設(shè)定。為了適配不同分辨率的顯示器，一般設(shè)計(jì)版心寬度為1000~1200px。

3、頁面中特殊元素的設(shè)計(jì)

特殊元素是指網(wǎng)頁中包含的非系統(tǒng)默認(rèn)字體、動(dòng)態(tài)圖、視頻等。這些元素在制作效果圖時(shí)都會(huì)以靜態(tài)圖片的形式展現(xiàn)。在視頻界面中，通過視頻的截圖和播放圖標(biāo)組合靜態(tài)圖片表現(xiàn)視頻畫面。

以上傳智播客為您介紹了“web前端頁面設(shè)計(jì)流程”，如果您還有其他web前端相關(guān)問題，可以點(diǎn)擊頁面咨詢按鈕獲得幫助。

推薦了解熱門學(xué)科