在互聯(lián)網(wǎng)時(shí)代，每一個(gè)有盈利任務(wù)的企業(yè)網(wǎng)站就是一個(gè)互聯(lián)網(wǎng)產(chǎn)品，互聯(lián)網(wǎng)產(chǎn)品經(jīng)理的角色從更廣義的角度包括了網(wǎng)站策劃的角色。目前除了一些比較成熟的互聯(lián)網(wǎng)公司外，還少有一些企業(yè)將互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的流程導(dǎo)入到網(wǎng)站策劃流程之中。而下文這位產(chǎn)品經(jīng)理分享的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)流程對(duì)各位將起到很好的啟發(fā)作用——如何讓我們的產(chǎn)品策劃流程變得更高效呢？讓我們一起來(lái)學(xué)習(xí)吧。每個(gè)產(chǎn)品主要經(jīng)過(guò)以下幾個(gè)階段：我們一一來(lái)看。

1.可行性評(píng)估

主要執(zhí)行人員：UI（用戶(hù)界面設(shè)計(jì)）、UE（用戶(hù)體驗(yàn)設(shè)計(jì)）、需求部門(mén)、程序部

需溝通人員：銷(xiāo)售部

當(dāng)產(chǎn)品經(jīng)理或網(wǎng)站策劃人 員確定基本的思路后，會(huì)先會(huì)跟跟各個(gè)人員溝通，并說(shuō)明這個(gè)產(chǎn)品的思路、受眾及一些自己的想法．接著會(huì)拿出一個(gè)結(jié)構(gòu)圖探討實(shí)現(xiàn)方面的可行性。我們也會(huì)準(zhǔn)備相 關(guān)資料與其進(jìn)行溝通，主要會(huì)從數(shù)據(jù)報(bào)告、功能性及可行性三方面下手，在探討的同時(shí)會(huì)指出功能或結(jié)構(gòu)上的一些問(wèn)題，并提出改善方案，這步一定得仔細(xì)，UI、 UE深入探討并盡可能考慮到每個(gè)實(shí)現(xiàn)的細(xì)節(jié)，待框架打好，出好的產(chǎn)品很容易。但如果在可行性評(píng)估上出現(xiàn)隱患，余下的其它工作也將會(huì)遇到諸多問(wèn)題。

我們主要從以下三方面進(jìn)行評(píng)估：

（1）數(shù)據(jù)報(bào)告

通過(guò)99Click、Netratings、Counter三套系統(tǒng)來(lái)進(jìn)行數(shù)據(jù)收集，并在分析報(bào)告中指出相應(yīng)的問(wèn)題。

（2）功能性

站在用戶(hù)角度上，對(duì)方案的結(jié)構(gòu)及功能性進(jìn)行評(píng)估，提出并解決操作上的問(wèn)題。

（3）可行性

每個(gè)產(chǎn)品初期都是感性的，但在不能保證每個(gè)功能都能按原有思路進(jìn)行實(shí)現(xiàn)，具體還需要和相關(guān)技術(shù)人員進(jìn)行探討、碰撞后形成最終的產(chǎn)品思路。

2.產(chǎn)品原型

主要執(zhí)行人員：UI、UE、需求部門(mén)

需溝通人員：程序部、銷(xiāo)售部

在產(chǎn)品原型方面，主要指的是黑白稿或線稿，除了顏色基本采用黑白的形式，最終出的產(chǎn)品原型將會(huì)和實(shí)際產(chǎn)品沒(méi)區(qū)別。這個(gè)環(huán)節(jié)會(huì)擬定出產(chǎn)品頁(yè)面的寬度，廣告的 形式，導(dǎo)航基本樣式，各內(nèi)容區(qū)域的表現(xiàn)形式等。

當(dāng)經(jīng)過(guò)可行性評(píng)估階段后，產(chǎn)品經(jīng)理的思路和自己也基本達(dá)成共識(shí)，接下來(lái)將進(jìn)行原型設(shè)計(jì)，我將主要分為三個(gè)步驟來(lái)實(shí)現(xiàn)：

1）紙稿

一般情況下結(jié)構(gòu)圖都是采用word文檔描繪，我選擇筆和紙的方式，主要還是因?yàn)楸容^方便、易修改，有任何突發(fā)的思路只需要擦一下，就可以直接在已有的基礎(chǔ) 上進(jìn)行調(diào)整，由于之前的討論沒(méi)有實(shí)物參照，在這個(gè)環(huán)節(jié)你一定會(huì)發(fā)現(xiàn)更多有趣的問(wèn)題。

2）線稿、黑白稿

當(dāng)紙稿確定后，則由UI或UE使用做繪圖工具來(lái)描繪黑白稿（我主要使用Photoshop來(lái)進(jìn)行這個(gè)步驟，跟據(jù)個(gè)人習(xí)慣不同，大家的方式也有所區(qū)別，比如 淘寶UED Team及Baidu UE更多的則采用線稿的形式）。也許是做UI的原因，我習(xí)慣還是采用黑白稿，方便界面設(shè)計(jì)，在結(jié)構(gòu)上也會(huì)精確到像素，比如：導(dǎo)航高度40px，頭條采用 20px黑體，圖片規(guī)格:104×85px，頁(yè)面的各區(qū)域的留白為5px…等等，只有這樣才會(huì)發(fā)現(xiàn)更多細(xì)節(jié)上的問(wèn)題，當(dāng)然到界面設(shè)計(jì)的同時(shí)你也會(huì)嘗到更多 的甜頭。

3）原型

完成以上的兩個(gè)步驟后，產(chǎn)品的基本功能、結(jié)構(gòu)、規(guī)范都已經(jīng)大致成型。這時(shí)你可以叫上程序部、銷(xiāo)售部及需求部門(mén)產(chǎn)品經(jīng)理，在白板上對(duì)著黑白稿做最終的討論。 經(jīng)過(guò)二次、三次調(diào)整，最終定下完整的產(chǎn)品原型。

另外，值得提的一點(diǎn)是，在產(chǎn)品原型未確定前，千萬(wàn)別急著去做界面設(shè)計(jì)，因?yàn)橹暗挠懻撝饕獣?huì)通過(guò)白板、Word或紙稿。在原型未確定前，有很多潛在的問(wèn)題 表現(xiàn)不是很直白，比如：“窄了、窄了，完了，新聞列表只能放八個(gè)字”、“廣告放不下了”、“數(shù)據(jù)提不出來(lái)，目前沒(méi)這個(gè)接口…”。如果提前進(jìn)入界面設(shè)計(jì)的環(huán) 節(jié)，一但有問(wèn)題，就意味著重新又需要找產(chǎn)品經(jīng)理、技術(shù)部、銷(xiāo)售進(jìn)行再次溝通，這個(gè)步驟是很煩瑣的，也會(huì)讓人很郁悶的。

3.產(chǎn)品界面設(shè)計(jì)

主要執(zhí)行人員：UI、UE、需求部門(mén)

需溝通人員：UID、SEO

目前產(chǎn)品的雛形已基本成型，雖然還沒(méi)華麗的外衣，但凹凸有致的身型已隱約可見(jiàn)。下一步將進(jìn)入界面設(shè)計(jì)階段，產(chǎn)品經(jīng)理和網(wǎng)站策劃們也將再次體會(huì)到黑白稿給他帶來(lái)的各種便利。

1）UI（用戶(hù)界面設(shè)計(jì)）

我的習(xí)慣是，主要針對(duì)首頁(yè)進(jìn)行風(fēng)格設(shè)計(jì)，并出3-4套界面，最終挑選出兩套左右提交給需求部門(mén)，同時(shí)也會(huì)指出自己最滿(mǎn)意的一套，和需求部門(mén)進(jìn)行兩三次碰撞 后，最終拿出定稿。

2）UE（用戶(hù)體驗(yàn)設(shè)計(jì)）

UE則開(kāi)始針對(duì)原型進(jìn)行操作上的優(yōu)化調(diào)整，召集用戶(hù)并組織頭腦風(fēng)暴，收集到相關(guān)意見(jiàn)后，由UE整理出交互及用戶(hù)體驗(yàn)方面改善意見(jiàn),并反饋給UI及需求部 門(mén)。比如:“這個(gè)文字需要加下劃線”、“按鈕上不要加樣式，反而沒(méi)有點(diǎn)擊的欲望了…”。

3) SEO

SEO則 根據(jù)原型提出搜索引擎優(yōu)化的 意見(jiàn)，為制作階段代碼優(yōu)化做準(zhǔn)備。

這個(gè)階段一定要保證與需求部門(mén)溝通到位，當(dāng)產(chǎn)品界面最終定稿后，建議再組織一次討論，這次用戶(hù)面對(duì)著是實(shí)實(shí)在在的產(chǎn)品，所感受會(huì)和之前有所不同。對(duì)產(chǎn)品效 果上來(lái)說(shuō)，這次的討論也會(huì)有不少收獲。

4.界面設(shè)計(jì)規(guī)范及功能實(shí)現(xiàn)

主要執(zhí)行人員：UI、UE、程序、SEO

需溝通人員：UE、銷(xiāo)售

1）設(shè)計(jì)規(guī)范

考慮到在動(dòng)態(tài)實(shí)現(xiàn)方面，光憑效果圖很難直接的給予表現(xiàn)，這時(shí)需要配合使用說(shuō)明文檔及設(shè)計(jì)規(guī)范規(guī)范來(lái)做輔助，比如按鈕及文字鏈在觸發(fā)前后的樣式、文字間 距…。如下圖：

2）代碼及程序開(kāi)發(fā)

由UID進(jìn)行頁(yè)面的代碼開(kāi)發(fā)（CSS+DIV），并需嚴(yán)格參考SEO理出的相關(guān)規(guī)范，針對(duì)一些AJAX的動(dòng)態(tài)效果還需要程序部人員協(xié)助完成，當(dāng)靜態(tài) HTML完成后即由技術(shù)人員進(jìn)行程序嵌套，并實(shí)現(xiàn)預(yù)期的功能。

這個(gè)階段由UI、UE全程跟蹤，保證HTML和設(shè)計(jì)稿最大限度相似前提下，對(duì)已實(shí)現(xiàn)的功能進(jìn)行測(cè)試，并出交互設(shè)計(jì)改善文檔，提交給技術(shù)人員。

5.產(chǎn)品上線

主要執(zhí)行人員：需求部門(mén)

需溝通人員：UI、UE、程序、銷(xiāo)售

這個(gè)階段主要是內(nèi)容的添加，主要由相關(guān)頻道編輯完成，對(duì)于軟性廣告位這塊還需要和銷(xiāo)售進(jìn)行協(xié)調(diào)。完成內(nèi)容添加后，由需求部門(mén)、UI、UE進(jìn)行核查，在保證 和內(nèi)容、功能完整后，進(jìn)行整體上線。

6.分析報(bào)告及優(yōu)化方案

主要執(zhí)行人員：UE

需溝通人員：UE、UID、程序、需求部門(mén)、 銷(xiāo)售

產(chǎn)品上線后，由UE進(jìn)行數(shù)據(jù)及意見(jiàn)的收集，在二周后出相關(guān)改善文檔，協(xié)調(diào)各部門(mén)進(jìn)行優(yōu)化的工作。