一、網(wǎng)站制作什么是前端界面設(shè)計(jì)？深圳網(wǎng)站制作公司逐步做一下分解。
網(wǎng)站制作前端設(shè)計(jì)也被稱(chēng)為 Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動(dòng)端上的 APP 來(lái)獲取資訊，但是顯然基于個(gè)人電腦平臺(tái)的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機(jī)久很多：從1987年錢(qián)天白教授向德國(guó)發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國(guó)納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國(guó)的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開(kāi)始去網(wǎng)吧「上網(wǎng)沖浪」的，那時(shí)的電腦屏幕非常小，分辨率只有800×600像素（對(duì)比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線(xiàn)或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過(guò)去已經(jīng)有了巨大的變化：注重用戶(hù)體驗(yàn)、注重頁(yè)面動(dòng)效、富媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī) APP 差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺(tái)之一。那么作為 UI網(wǎng)站設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺(tái)。今天就向您好好說(shuō)道一下網(wǎng)站必須懂得的那些事兒。
二、網(wǎng)站制作設(shè)計(jì)工作流程
首先讓我們來(lái)看一下網(wǎng)站設(shè)計(jì)的工作流程吧，除了之前介紹過(guò)的用戶(hù)研究、撰寫(xiě)產(chǎn)品需求文檔、市場(chǎng)文檔、做競(jìng)品調(diào)研等工作之外，與網(wǎng)站設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺(jué)稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要網(wǎng)站設(shè)計(jì)師參與和了解，千萬(wàn)不要只在意視覺(jué)稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來(lái)了解它們吧。
1. 網(wǎng)頁(yè)原型圖階段
原型圖階段中網(wǎng)站設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，這時(shí)要注意，并不是產(chǎn)品經(jīng)理向網(wǎng)站設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長(zhǎng)的方面進(jìn)行溝通。視覺(jué)方面具體呈現(xiàn)也許網(wǎng)站設(shè)計(jì)師會(huì)有更好的方式，這時(shí)需要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成一致。
△ 構(gòu)建網(wǎng)站制作工具原型圖（工具：Axure RP）
2. 網(wǎng)站前端視覺(jué)稿階段
視覺(jué)稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要一些圖像和靈感的素材。比如做世界杯專(zhuān)題時(shí)，我們除了收集很多素材之外，也可以設(shè)計(jì)一個(gè)「情緒板」（Mood Board）。簡(jiǎn)單說(shuō)情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺(jué)。另外，很多網(wǎng)站的頭部通常需要主視覺(jué)來(lái)抓人眼球，這時(shí)可能會(huì)使用到需求方提供的明星照片、主題素材、LOGO、主視覺(jué)PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺(jué)得震撼的頭部視覺(jué)就是我們的目標(biāo)了。主視覺(jué)下面的信息排布更強(qiáng)調(diào)合理性，這時(shí)也需要和產(chǎn)品經(jīng)理溝通從后臺(tái)調(diào)取的圖片尺寸、標(biāo)題字段長(zhǎng)度等，然后根據(jù)這些要求完成頁(yè)面信息部分的設(shè)計(jì)?？傊O(shè)計(jì)過(guò)程中需要我們不斷思考和溝通才可以完成一個(gè)比較棒的視覺(jué)稿。
△ 網(wǎng)站制作視覺(jué)稿設(shè)計(jì)階段（工具：Photoshop）
3. 網(wǎng)站設(shè)計(jì)規(guī)范
當(dāng)視覺(jué)稿通過(guò)后，很多網(wǎng)站設(shè)計(jì)師可能不會(huì)主動(dòng)去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都需要網(wǎng)站設(shè)計(jì)師來(lái)總結(jié)設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是所有頁(yè)面中共性的東西，比如說(shuō)字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶(hù)訪(fǎng)問(wèn)網(wǎng)站時(shí)會(huì)理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會(huì)讓用戶(hù)困惑。那么設(shè)計(jì)規(guī)范主要也是在約束網(wǎng)站設(shè)計(jì)師我們自己，在用戶(hù)有限的記憶力中減少思考的成本。同時(shí)，設(shè)計(jì)規(guī)范也可以保證同一個(gè)項(xiàng)目的不同網(wǎng)站設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來(lái)。最后，設(shè)計(jì)規(guī)范對(duì)于網(wǎng)站設(shè)計(jì)師個(gè)人來(lái)說(shuō)也是對(duì)項(xiàng)目影響的一個(gè)佐證，可以證明你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為網(wǎng)站設(shè)計(jì)師應(yīng)該主動(dòng)去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做？其實(shí)設(shè)計(jì)規(guī)范就是把主要頁(yè)面的元素固定成統(tǒng)一元素即可。具體來(lái)說(shuō)一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類(lèi)。
△ 網(wǎng)站制作視覺(jué)規(guī)范（工具：Photoshop）
4. 網(wǎng)站制作切圖
網(wǎng)站制作前端設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆?PS 軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項(xiàng)為前端切出網(wǎng)站所使用的圖片。
△ 網(wǎng)站制作設(shè)計(jì)步驟從PSD中提取出來(lái)的切圖（插件：cutterman）
5. 網(wǎng)站制作前端代碼布局
前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁(yè)面，把圖紙變?yōu)殪o態(tài)頁(yè)面。然后和后端工程師對(duì)接調(diào)取數(shù)據(jù)接口，一個(gè)網(wǎng)站就活了起來(lái)。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會(huì)進(jìn)行埋點(diǎn)。埋點(diǎn)就是在頁(yè)面代碼里插入一些統(tǒng)計(jì)代碼，方便我們之后確定哪些頁(yè)面訪(fǎng)問(wèn)量高，哪些沒(méi)有達(dá)到預(yù)期。在此后其實(shí)還會(huì)有測(cè)試工程師介入來(lái)發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。
△ 深圳網(wǎng)站制作前端工程師代碼編譯（工具：Notepad +）
6. 網(wǎng)站制作前項(xiàng)目走查
網(wǎng)站制作前端設(shè)計(jì)完成后還需要網(wǎng)站設(shè)計(jì)師進(jìn)行項(xiàng)目走查，來(lái)確定網(wǎng)頁(yè)還原度是否有問(wèn)題。如果發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟非常重要，因?yàn)榫W(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的頁(yè)面就不需要我們負(fù)責(zé)了。
△ 將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對(duì)（工具：Photoshop）深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
