首先讓我們來看一下網(wǎng)站設(shè)計的工作流程吧,除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外,與設(shè)計師密切相關(guān)的網(wǎng)站項目流程可以分" />

首先讓我們來看一下網(wǎng)站設(shè)計的工作流程吧,除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外,與設(shè)計師密切相關(guān)的網(wǎng)站項目流程可以分為原型圖階段、視覺稿階段、設(shè)計規(guī)范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設(shè)計師參與和了解,千萬不要只在意視覺稿這個階段,有很多前期與后期工作同樣需要得到我們的重視。好,讓我們一個一個來了解它們吧。
原型圖階段中設(shè)計師需要和產(chǎn)品經(jīng)理溝通需求,這時要注意,并不是產(chǎn)品經(jīng)理向設(shè)計師下發(fā)需求,而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現(xiàn)也許設(shè)計師會有更好的方式,這時需要在設(shè)計之前與產(chǎn)品經(jīng)理達成一致。

視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計了,在設(shè)計網(wǎng)站的時候,我們需要一些圖像和靈感的素材。比如做世界杯專題時,我們除了收集很多素材之外,也可以設(shè)計一個「情緒板」(Mood Board)。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起,這樣可以更好地指引我們整個需求的設(shè)計主題和大體感覺。另外,很多網(wǎng)站的頭部通常需要主視覺來抓人眼球,這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等,那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強調(diào)合理性,這時也需要和產(chǎn)品經(jīng)理溝通從后臺調(diào)取的圖片尺寸、標(biāo)題字段長度等,然后根據(jù)這些要求完成頁面信息部分的設(shè)計??傊?,設(shè)計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

當(dāng)視覺稿通過后,很多設(shè)計師可能不會主動去做設(shè)計規(guī)范。其實每一個可迭代的產(chǎn)品都需要設(shè)計師來總結(jié)設(shè)計規(guī)范,設(shè)計規(guī)范就是所有頁面中共性的東西,比如說字體不同的大小、圖片的尺寸、按鈕的樣式等,這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設(shè)計規(guī)范主要也是在約束設(shè)計師我們自己,在用戶有限的記憶力中減少思考的成本。同時,設(shè)計規(guī)范也可以保證同一個項目的不同設(shè)計師都能輸出一樣風(fēng)格的設(shè)計來。最后,設(shè)計規(guī)范對于設(shè)計師個人來說也是對項目影響的一個佐證,可以證明你的思考和你在項目中的地位。所以我認(rèn)為設(shè)計師應(yīng)該主動去做設(shè)計規(guī)范和項目總結(jié)。設(shè)計規(guī)范如何去做?其實設(shè)計規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個產(chǎn)品的設(shè)計規(guī)范應(yīng)該有:字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時,我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項為前端切出網(wǎng)站所使用的圖片。

前端工程師會用代碼重構(gòu)我們設(shè)計的頁面,把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對接調(diào)取數(shù)據(jù)接口,一個網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達到了我們要求的數(shù)據(jù),也會進行埋點。埋點就是在頁面代碼里插入一些統(tǒng)計代碼,方便我們之后確定哪些頁面訪問量高,哪些沒有達到預(yù)期。在此后其實還會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

網(wǎng)頁設(shè)計完成后還需要設(shè)計師進行項目走查,來確定網(wǎng)頁還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計稿出入很大的,就需要要求前端工程師進行調(diào)整。這個步驟非常重要,因為網(wǎng)站的成品才是我們最終的輸出,不要認(rèn)為設(shè)計稿很漂亮而實現(xiàn)后的頁面就不需要我們負責(zé)了。


最新動態(tài)
生產(chǎn)小工單能給 生產(chǎn)管理帶來哪些好處?
武漢網(wǎng)站制作公司解鎖軟件開發(fā)能做什么?
營銷型網(wǎng)站與普通網(wǎng)站有什么區(qū)別?——武漢網(wǎng)站建設(shè)
常見問題百寶箱
A2014,有位學(xué)妹不顧家人反對,在上海這個國際化大都市謀了一個公眾號助理的職位。斗志昂揚地奮斗了 3 年,我眼看著她的內(nèi)容駕馭能力突飛猛進,內(nèi)容質(zhì)量從三流到一流,職位
A文章主要分析了不同的視覺設(shè)計元素是如何影響網(wǎng)站用戶體驗,希望通過文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計帶來些啟發(fā)。 也許是因為我在視覺設(shè)計上沒有太多經(jīng)驗,我發(fā)現(xiàn)
A雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推
027-89992189
掃一掃關(guān)注微信
Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號