界面設(shè)計(jì)階段，是描述從頁面需求調(diào)研、創(chuàng)意、設(shè)計(jì)、確認(rèn)的過程。該階段由項(xiàng)目經(jīng)理（產(chǎn)品經(jīng)理），配合UI完成。

1. 項(xiàng)目經(jīng)理（產(chǎn)品經(jīng)理）、美工、用戶三方的交流

（1）在調(diào)研階段要弄清楚客戶的真實(shí)需求，或?qū)蛻暨M(jìn)行引導(dǎo)。

（2）Web界面設(shè)計(jì)應(yīng)由美工主導(dǎo)，項(xiàng)目經(jīng)理也應(yīng)配合，并提出想法和建議。

（3）項(xiàng)目經(jīng)理要在項(xiàng)目全局和功能界面上要給美工指導(dǎo)或建議。

（4）項(xiàng)目經(jīng)理要在美工和用戶之間起到橋梁作用。

（5）對于要求高的用戶，美工要給出幾套方案，并能表達(dá)自己的創(chuàng)意和想法。

（6）項(xiàng)目經(jīng)理負(fù)責(zé)或協(xié)調(diào)美工繪制首頁框架圖，提交用戶確認(rèn)后開始首頁設(shè)計(jì)。

2. 政府門戶網(wǎng)站評測標(biāo)準(zhǔn)

項(xiàng)目經(jīng)理和美工要對“政府門戶網(wǎng)站評測標(biāo)準(zhǔn)”熟悉。如：做浙江某政府網(wǎng)站，就需要熟悉“浙江省政府門戶網(wǎng)站評測標(biāo)準(zhǔn)”。委辦局等職能部門網(wǎng)站還需要知道其上級單位對網(wǎng)站評測的要求。

3.?組件標(biāo)準(zhǔn)化開發(fā)

項(xiàng)目研究部負(fù)責(zé)進(jìn)行組件標(biāo)準(zhǔn)化開發(fā)，開發(fā)完成的組件，交由QA部測試通過以后才可以發(fā)布，QA發(fā)現(xiàn)的問題提交到QC系統(tǒng)。

4. 設(shè)計(jì)標(biāo)準(zhǔn)化

項(xiàng)目經(jīng)理組織《項(xiàng)目-組件清單》溝通會，確認(rèn)項(xiàng)目中采用的標(biāo)準(zhǔn)組件與個性化組件；項(xiàng)目研究部根據(jù)需求對現(xiàn)有標(biāo)準(zhǔn)、組件進(jìn)行優(yōu)化安排。

美工根據(jù)項(xiàng)目經(jīng)理填寫的《項(xiàng)目-組件清單》要求，在公司案例分享庫中采用合適的公司設(shè)計(jì)標(biāo)準(zhǔn)和組件進(jìn)行頁面設(shè)計(jì)，在模板套系中有任何改動（Banner/導(dǎo)航/版權(quán)信息除外）都視為個性化，在《項(xiàng)目-設(shè)計(jì)清單》中備注。用戶確認(rèn)頁面后，美工把《項(xiàng)目-設(shè)計(jì)清單》提交到OA，項(xiàng)目研究部對《項(xiàng)目-設(shè)計(jì)清單》進(jìn)行抽查。

產(chǎn)出文檔：《項(xiàng)目-設(shè)計(jì)清單》。

考核點(diǎn)：項(xiàng)目研究部抽查《項(xiàng)目-設(shè)計(jì)清單》，發(fā)現(xiàn)問題作為美工考核。

5. 設(shè)計(jì)創(chuàng)意說明

首頁設(shè)計(jì)完成，美工應(yīng)撰寫“設(shè)計(jì)創(chuàng)意說明”，對首頁通過能起到一定的促進(jìn)作用。并根據(jù)“頁面設(shè)計(jì)說明”模板撰寫，從以下幾個方面采用截圖配文字說明的方式進(jìn)行描述：

1. 前言：介紹頁面設(shè)計(jì)的主題、切入點(diǎn)、大體思路、設(shè)計(jì)風(fēng)格等進(jìn)行概述。
2. 頁面介紹部分：分幾點(diǎn)進(jìn)行介紹，比如，關(guān)鍵詞、頁面結(jié)構(gòu)布局、用色等。
3. 設(shè)計(jì)亮點(diǎn)：為重點(diǎn)描述內(nèi)容，包括設(shè)計(jì)特色、重點(diǎn)模塊展現(xiàn)位置、特色功能介紹、交互設(shè)計(jì)、便捷性設(shè)計(jì)、人性化設(shè)計(jì)、新技術(shù)應(yīng)用等。
4. 總結(jié)：結(jié)合之上進(jìn)行總結(jié)描述。

產(chǎn)出文檔：《頁面設(shè)計(jì)說明》。

6. 第三方設(shè)計(jì)

第三方的設(shè)計(jì)都屬于個性化組件，第三方的設(shè)計(jì)要符合公司的字體、頁面寬度的要求，如果項(xiàng)目有自適應(yīng)也要符合自適應(yīng)要求，第三方公司要做成靜態(tài)頁面以滿足兼容性的要求。

7. 首頁設(shè)計(jì)評審

首頁設(shè)計(jì)完成，首先應(yīng)提交給設(shè)計(jì)部主管審核，通過后提交給項(xiàng)目經(jīng)理確認(rèn)，美工不得直接提交給用戶。

由項(xiàng)目總監(jiān)指定的重點(diǎn)項(xiàng)目，首頁設(shè)計(jì)完成并經(jīng)過設(shè)計(jì)主管審核后，由設(shè)計(jì)主管于當(dāng)天提交公司內(nèi)部評審小組審核，通過后，方能提交客戶確認(rèn)。

內(nèi)部評審會可以通過會議、RTX、微信等方式進(jìn)行。

內(nèi)部評審小組成員：總經(jīng)理、銷售副總、項(xiàng)目總監(jiān)、銷售經(jīng)理、售前技術(shù)支持、項(xiàng)目經(jīng)理、設(shè)計(jì)主管。

8. 功能模塊界面的設(shè)計(jì)

功能模塊原則上由開發(fā)人員事先做好原型或?qū)懞帽憩F(xiàn)文檔（文檔應(yīng)體現(xiàn)模塊主要表現(xiàn)框架）。美工根據(jù)原型或文檔來設(shè)計(jì)功能模塊界面。

模塊界面設(shè)計(jì)過程中，項(xiàng)目經(jīng)理應(yīng)把握界面設(shè)計(jì)風(fēng)格和是否適用于模塊，即風(fēng)格的統(tǒng)一性和模塊界面的通用性。

公司已明確規(guī)范的部分產(chǎn)品只提供Banner設(shè)計(jì)做替換，不提供整體個性化界面設(shè)計(jì)。如：在線訪談、互動平臺、視頻管理、全文檢索、訪問統(tǒng)計(jì)、統(tǒng)一用戶、圖片庫、JCMS外掛模塊（個性化定制等）、訂閱系統(tǒng)等。如用戶有特殊要求，需同部門主管申請。

9. 模板制作

模板制作一般由實(shí)施工程師完成。如特殊情況，可由美工根據(jù)“模板制作規(guī)范”完成模板制作，并交給項(xiàng)目經(jīng)理或項(xiàng)目工程師進(jìn)行確認(rèn)。

10. 美工駐場

部分項(xiàng)目有美工駐場的要求，項(xiàng)目經(jīng)理可協(xié)調(diào)合適人選進(jìn)行駐場，在滿足客戶需要的同時(shí)保證駐場工作的效率。原則上美工駐場時(shí)間不超過兩個星期。

美工駐場之前，應(yīng)先設(shè)計(jì)1-2稿首頁給用戶，駐場后主要為修改調(diào)整。

首頁設(shè)計(jì)簽字確認(rèn)后，可由設(shè)計(jì)部將剩余工作分解，安排其他美工遠(yuǎn)程配合快速完成，縮減整體設(shè)計(jì)工作周期。

11. 子站頁面設(shè)計(jì)

子站頁面設(shè)計(jì)，直接從模板庫中挑選后做局部調(diào)整。

多個子站界面，設(shè)計(jì)部應(yīng)安排其他美工分解工作，快速完成。

12. Web界面設(shè)計(jì)階段結(jié)束產(chǎn)生的結(jié)果和標(biāo)志

美工設(shè)計(jì)方案（設(shè)計(jì)稿）通過客戶簽字確認(rèn)。

“網(wǎng)站（項(xiàng)目）界面設(shè)計(jì)確認(rèn)函”為里程碑文檔。

產(chǎn)出文檔：《網(wǎng)站（項(xiàng)目）界面設(shè)計(jì)確認(rèn)函》。

本文由 @空杯前行 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議