網站設計的(de)基本工作流程

作者：龍 時(shí)間：2018-07-30 浏覽：

首先讓我們來(lái)看一下(xià)網站設計的(de)工作流程吧，除了(le)之前介紹過的(de)用(yòng)戶研究、撰寫産品需求文檔、市場(chǎng)文檔、做(zuò)競品調研等工作之外，與設計師密切相關的(de)網站項目流程可(kě)以分(fēn)爲原型圖階段、視覺稿階段、設計規範階段、切圖階段、前端代碼階段、項目走查階段六個(gè)階段。每個(gè)階段都需要設計師參與和(hé)了(le)解，千萬不要隻在意視覺稿這(zhè)個(gè)階段，有很多(duō)前期與後期工作同樣需要得(de)到我們的(de)重視。好，讓我們一個(gè)一個(gè)來(lái)了(le)解它們吧。

1. 原型圖階段

原型圖階段中設計師需要和(hé)産品經理(lǐ)溝通(tōng)需求，這(zhè)時(shí)要注意，并不是産品經理(lǐ)向設計師下(xià)發需求，而是需要相互就自己擅長(cháng)的(de)方面進行溝通(tōng)。視覺方面具體呈現也(yě)許設計師會有更好的(de)方式，這(zhè)時(shí)需要在設計之前與産品經理(lǐ)達成一緻。

2. 視覺稿階段

視覺稿階段就是我們要根據原型圖确定的(de)内容和(hé)大(dà)體版式完成網站的(de)界面設計了(le)，在設計網站的(de)時(shí)候，我們需要一些圖像和(hé)靈感的(de)素材。比如做(zuò)世界杯專題時(shí)，我們除了(le)收集很多(duō)素材之外，也(yě)可(kě)以設計一個(gè)「情緒闆」（Mood Board）。簡單說情緒闆就是将一些與主題相關的(de)資料和(hé)素材拼貼在一起，這(zhè)樣可(kě)以更好地指引我們整個(gè)需求的(de)設計主題和(hé)大(dà)體感覺。另外，很多(duō)網站的(de)頭部通(tōng)常需要主視覺來(lái)抓人(rén)眼球，這(zhè)時(shí)可(kě)能會使用(yòng)到需求方提供的(de)明(míng)星照(zhào)片、主題素材、LOGO、主視覺PSD等，那麽用(yòng)素材和(hé)這(zhè)些需求方提供的(de)資料進行混合并拼出讓人(rén)覺得(de)震撼的(de)頭部視覺就是我們的(de)目标了(le)。主視覺下(xià)面的(de)信息排布更強調合理(lǐ)性，這(zhè)時(shí)也(yě)需要和(hé)産品經理(lǐ)溝通(tōng)從後台調取的(de)圖片尺寸、标題字段長(cháng)度等，然後根據這(zhè)些要求完成頁面信息部分(fēn)的(de)設計。總之，設計過程中需要我們不斷思考和(hé)溝通(tōng)才可(kě)以完成一個(gè)比較棒的(de)視覺稿。

3. 設計規範

當視覺稿通(tōng)過後，很多(duō)設計師可(kě)能不會主動去做(zuò)設計規範。其實每一個(gè)可(kě)叠代的(de)産品都需要設計師來(lái)總結設計規範，設計規範就是所有頁面中共性的(de)東西，比如說字體不同的(de)大(dà)小、圖片的(de)尺寸、按鈕的(de)樣式等，這(zhè)些共性也(yě)是用(yòng)戶訪問網站時(shí)會理(lǐ)解成固定概念的(de)憑證。比如同樣的(de)分(fēn)享功能如果采用(yòng)兩種截然不同的(de)樣式就會讓用(yòng)戶困惑。那麽設計規範主要也(yě)是在約束設計師我們自己，在用(yòng)戶有限的(de)記憶力中減少思考的(de)成本。同時(shí)，設計規範也(yě)可(kě)以保證同一個(gè)項目的(de)不同設計師都能輸出一樣風格的(de)設計來(lái)。最後，設計規範對(duì)于設計師個(gè)人(rén)來(lái)說也(yě)是對(duì)項目影(yǐng)響的(de)一個(gè)佐證，可(kě)以證明(míng)你的(de)思考和(hé)你在項目中的(de)地位。所以我認爲設計師應該主動去做(zuò)設計規範和(hé)項目總結。設計規範如何去做(zuò)？其實設計規範就是把主要頁面的(de)元素固定成統一元素即可(kě)。具體來(lái)說一個(gè)産品的(de)設計規範應該有：字體規範、主體色規範、圖表規範、圖片規範等不同分(fēn)類。

4. 切圖

網頁設計師通(tōng)常不需要爲前端工程師切圖。因爲前端工程師通(tōng)常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可(kě)以使用(yòng)諸如 Cutterman、Zeplin 等切圖插件中的(de) Web 選項爲前端切出網站所使用(yòng)的(de)圖片。

5. 前端代碼

前端工程師會用(yòng)代碼重構我們設計的(de)頁面，把圖紙變爲靜态頁面。然後和(hé)後端工程師對(duì)接調取數據接口，一個(gè)網站就活了(le)起來(lái)。工程師們爲了(le)方便了(le)解網站是不是達到了(le)我們要求的(de)數據，也(yě)會進行埋點。埋點就是在頁面代碼裏插入一些統計代碼，方便我們之後确定哪些頁面訪問量高(gāo)，哪些沒有達到預期。在此後其實還(hái)會有測試工程師介入來(lái)發現編譯完的(de)網站是否存在一些漏洞等。

6. 項目走查

網頁設計完成後還(hái)需要設計師進行項目走查，來(lái)确定網頁還(hái)原度是否有問題。如果發現有和(hé)設計稿出入很大(dà)的(de)，就需要要求前端工程師進行調整。這(zhè)個(gè)步驟非常重要，因爲網站的(de)成品才是我們最終的(de)輸出，不要認爲設計稿很漂亮而實現後的(de)頁面就不需要我們負責了(le)。