從一個(gè)簡單的H5預(yù)約活動看產(chǎn)品帶領(lǐng)程序員、設(shè)計(jì)寶寶們踩過的坑。

作為一個(gè)入門的產(chǎn)品“小司機(jī)”，目前正在“開車帶路”，與幾位程序員“老司機(jī)”閉眼踩坑，在摸索上線的我們教育產(chǎn)品的第一版當(dāng)中，期間用了兩周的時(shí)間上線了一款預(yù)約H5應(yīng)用。借用這款簡單的產(chǎn)品，筆者想和大家簡單地分享一下在這短短的兩周之內(nèi)踩過得大大小小的“坑”！希望在警醒自己的同時(shí)能給各位帶來幫助。

不想聽我BB的小伙伴總結(jié)概述如下：

1. 加強(qiáng)溝通確保信息對稱

• 建立需求溝通機(jī)制，并嚴(yán)格執(zhí)行；
• 信息透明，各團(tuán)隊(duì)知悉彼此工作節(jié)奏；
• 及時(shí)同步需求落實(shí)的關(guān)鍵節(jié)點(diǎn)；
• 管理好需求方產(chǎn)品預(yù)期；

2. 文檔細(xì)致，邏輯清晰完整

• 細(xì)致！細(xì)致！細(xì)致！原型輸出采用真實(shí)的數(shù)據(jù)；
• 保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確；
• 邏輯規(guī)則清晰、頁面狀態(tài)無遺漏；

3. 多動手，少動嘴；

4. 在產(chǎn)品設(shè)計(jì)時(shí)一定要明確觸達(dá)用戶的路徑，在用戶想喚醒產(chǎn)品的時(shí)候能夠出現(xiàn)在用戶預(yù)期的行為路徑當(dāng)中；

5. 上線前一定要在實(shí)際場景當(dāng)中多角色體驗(yàn)產(chǎn)品。

下面是這個(gè)H5活動頁面

坑一：溝通！溝通！溝通！

重要的事情說三遍！產(chǎn)品經(jīng)理的工作就是從紛繁的業(yè)務(wù)、場景、用戶亂象中理出需求，然后利用研發(fā)寶寶的技術(shù)能力解決問題。網(wǎng)絡(luò)上流傳著各種鎖定需求的秘籍寶典，筆者就不在這里班門弄斧了。但是筆者要強(qiáng)調(diào)一點(diǎn)就是溝通！

產(chǎn)品經(jīng)理作為需求方（Boss&甲方）以及實(shí)現(xiàn)方的紐帶溝通是一項(xiàng)基本且很重要的能力。溝通包含對內(nèi)溝通以及對外溝通，對外溝通協(xié)助需求方理清業(yè)務(wù)邏輯，對內(nèi)幫助設(shè)計(jì)、研發(fā)、測試寶寶們更好的理解需求推動產(chǎn)品實(shí)現(xiàn)。

1.需求

筆者這次對外溝通對接的業(yè)務(wù)團(tuán)隊(duì)業(yè)務(wù)能力Max，在半個(gè)小時(shí)的需求會議當(dāng)中敲定了整體的業(yè)務(wù)需求。筆者從未遇到如此順利的需求會議，簡單地認(rèn)為需求“So easy”，然而事實(shí)告訴筆者，還是太！年！輕！

為了快速地落實(shí)需求在當(dāng)天晚上全公司內(nèi)部進(jìn)行了詳細(xì)的需求討論、任務(wù)拆解及開發(fā)進(jìn)度評估，需求初稿為提前鎖定業(yè)務(wù)團(tuán)隊(duì)冬季銷售業(yè)績的預(yù)約活動，只需承載預(yù)約功能即可，筆者輸出了如下圖的第一版需求：

然而在和團(tuán)隊(duì)同學(xué)腦暴時(shí)，我們發(fā)現(xiàn)用戶的購買場景有可能與線下團(tuán)隊(duì)的推廣場景是分開的。只有這一頁，誰會買單呢？

頁面一定是會通過各種傳播轉(zhuǎn)發(fā)的，只有這么簡潔的說明，啥也說明不了啊。所以，又需要加一頁預(yù)約產(chǎn)品詳情介紹……

2. 視覺

由于需求非常緊急，為了節(jié)省開發(fā)時(shí)間，讓設(shè)計(jì)同學(xué)和研發(fā)同學(xué)同步啟動。設(shè)計(jì)同學(xué)先確定了活動詳情頁頭圖的設(shè)計(jì)思路及配色，選擇了紫色作為基本色，白色輔助，綠色強(qiáng)調(diào)；然后便開始了預(yù)約等功能型頁面的設(shè)計(jì)，而將最花費(fèi)時(shí)間但開發(fā)起來相對容易的活動詳情頁放在最后設(shè)計(jì)。

輸出的樣式是醬的：

然而和業(yè)務(wù)團(tuán)隊(duì)的同事確認(rèn)需求時(shí)頁頭部分的進(jìn)度條文案是醬的：

業(yè)務(wù)團(tuán)隊(duì)的同事對于設(shè)計(jì)稿的預(yù)期是醬的：

經(jīng)過一番討si論bi后，我們定稿了初稿的樣式。

3.文案

開始時(shí)業(yè)務(wù)方的同學(xué)給了兩條建議文案：

• 冰雪王國沒有黑魔法，但我駕馭了雪上“飛行”；
• 我會變成巨人，踏著雪板，踩著風(fēng)；

開始覺得第二句還不錯(cuò)，就按這個(gè)文案的感覺做出了頭圖的效果。但這兩句文案太過文藝，不能很明確的表達(dá)主題，不太適合做頁面的主標(biāo)題，所以打算用做輔助文案，而主標(biāo)題直接采用“2017萬科梅沙冬令營預(yù)約開始”。

根據(jù)頁面的設(shè)計(jì)效果，需要一句過渡文案引出下面的詳情介紹。當(dāng)時(shí)我們的產(chǎn)品同事們給出了眾多的文案備選：

最后我們采用的是“讓我們再聚冰雪世界，體驗(yàn)雪上飛行”這句文案。輸出的樣式是醬的：

4.圖片

大部分用戶是看不出頁面的設(shè)計(jì)效果如何（比如字體設(shè)計(jì)，色彩搭配什么的），但是他們能看懂圖片所傳達(dá)的內(nèi)容和情緒，所以圖片的選擇一定是至關(guān)重要的。由于設(shè)計(jì)同學(xué)本身只關(guān)注了其他視覺效果的設(shè)計(jì)，而忽略了內(nèi)容與頁面整體效果的把控，從而忽視了圖片選擇的重要性。

原來的單板滑雪圖片居然用了這張，是醬的（哪里是冬令營啊，是老年人在蹣跚吧）：

（老年人走路，改成了醬，如下圖）比原來好一些，其實(shí)還不滿意，沒辦法，自己拍的有版權(quán)的圖片也就這一張好一點(diǎn)，今年冬天，要多拍冬令營的滑雪照片啊……

原來的雪圈（雪上運(yùn)動）圖片是醬的~

（收拾東西回家了！改成了醬，如下圖）替換之后畫面有木有更High？

5.研發(fā)

細(xì)致！細(xì)致！細(xì)致！對內(nèi)溝通產(chǎn)品經(jīng)理要能準(zhǔn)確的傳達(dá)需求，幫助設(shè)計(jì)、研發(fā)、測試的同學(xué)實(shí)現(xiàn)需求。在同業(yè)務(wù)團(tuán)隊(duì)的同事溝通確認(rèn)需求之后，Alex自信滿滿的輸出了如下的幾張?jiān)停?/p>

然而在設(shè)計(jì)師同學(xué)看到以后的真實(shí)OS：

文案怎么這么長……價(jià)格說明一坨什么鬼……暫！定！這文案什么意思……研發(fā)同學(xué)看到以后的真實(shí)OS……
流程怎么走不通……這個(gè)功能不好做……在評審中Alex受到了10000萬點(diǎn)傷害，陣亡的節(jié)奏。

經(jīng)過一番溝si通bi后輸出了如下的設(shè)計(jì)稿，然后進(jìn)入了研發(fā)階段：

然而在體驗(yàn)驗(yàn)收時(shí)……

產(chǎn)品經(jīng)理：營期交互我要的是點(diǎn)選不是滑動~改……
程序員：……

產(chǎn)品經(jīng)理：營期選擇點(diǎn)擊按鈕太小了，容易誤觸發(fā)~改……
程序員：…………

產(chǎn)品經(jīng)理：這個(gè)彈窗提醒的文案有歧義~改……

此時(shí)的程序員是這樣的：

對內(nèi)溝通時(shí)請一定要細(xì)致！細(xì)致！細(xì)致！原型作為對內(nèi)溝通的工具在輸出時(shí)盡量要采用真實(shí)的數(shù)據(jù)，保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確、邏輯規(guī)則清晰、頁面狀態(tài)無遺漏。溝通時(shí)紙筆比嘴巴好用、圖文比嘴巴好用、案例比嘴巴好用！

經(jīng)過了一番改！改！改！之后給到了業(yè)務(wù)團(tuán)隊(duì)的同事驗(yàn)收。然而在驗(yàn)收的時(shí)候結(jié)果就是……

居然不能選多個(gè)……一人居然只能預(yù)約一次……居然不能退款……

對于互聯(lián)網(wǎng)產(chǎn)品上線節(jié)奏缺乏了解的非專業(yè)同學(xué)，很容易想當(dāng)然的將產(chǎn)品實(shí)現(xiàn)的過程想的很神秘或者很簡單，同時(shí)在需求表達(dá)時(shí)又很容易跑偏，所以在Alex與教育團(tuán)隊(duì)的小伙伴確認(rèn)需求時(shí)，小伙伴并沒有意識到原型就是產(chǎn)品整體實(shí)現(xiàn)的樣式，導(dǎo)致在驗(yàn)收階段產(chǎn)品的實(shí)現(xiàn)功能同需求方小伙伴的預(yù)期不一致。

為了能保持高效的產(chǎn)品迭代節(jié)奏，在需求對接時(shí)請一定要共享各個(gè)配合團(tuán)隊(duì)之間的工作流程節(jié)奏，建立需求溝通反饋機(jī)制，明確需求的確認(rèn)節(jié)點(diǎn)，同時(shí)及時(shí)同步需求方小伙伴的產(chǎn)品預(yù)期。

坑二：不要讓產(chǎn)品處于黑箱狀態(tài)

做產(chǎn)品時(shí)很容易沉浸于邏輯細(xì)節(jié)，而疏忽實(shí)際場景的體驗(yàn)細(xì)節(jié)。業(yè)務(wù)團(tuán)隊(duì)的預(yù)約產(chǎn)品需求是為了配合線下產(chǎn)品推廣，線下場景的產(chǎn)品入口為一個(gè)二維碼，而用戶的實(shí)際購買場景多樣，當(dāng)用戶脫離了線下的推廣場景以后想再次購買的時(shí)候發(fā)現(xiàn)

找！不！到！產(chǎn)品入口！

從而丟失了此部分用戶。同時(shí)當(dāng)用戶完成產(chǎn)品的整體購買體驗(yàn)流程后，除了頁面的預(yù)約成功提醒，用戶并未收到任何可自動存檔的預(yù)約信息，當(dāng)用戶想查閱自己的預(yù)約信息時(shí)依然是

找！不！到！入口！

發(fā)現(xiàn)問題后再綜合實(shí)現(xiàn)成本、產(chǎn)品特性、業(yè)務(wù)邏輯，筆者又拉著研發(fā)同學(xué)們熬夜接入產(chǎn)品預(yù)約通知短信以及在公眾號下面添加二級標(biāo)簽的預(yù)約入口。

在產(chǎn)品設(shè)計(jì)時(shí)一定要明確產(chǎn)品觸達(dá)用戶的路徑，在用戶想喚醒產(chǎn)品的時(shí)候能夠出現(xiàn)在用戶預(yù)期的行為路徑當(dāng)中。

坑三：上線前一定要在實(shí)際場景當(dāng)中體驗(yàn)產(chǎn)品

同研發(fā)同學(xué)們排了這么多的“坑”，順利的把產(chǎn)品上線以后，筆者剛剛松了一口氣。然而，務(wù)團(tuán)隊(duì)的同學(xué)給筆者截了一個(gè)圖：

最下面，預(yù)約按鈕，去哪里了？廣！告！什！么！鬼！

再看一張清晰一點(diǎn)的，圖片下部，運(yùn)營商“中國電信”的廣告啊，偏偏從底部彈出，把重要的按鈕擋住了。

被梅沙教育的同學(xué)們一通嫌棄，經(jīng)研發(fā)同學(xué)鑒定，以后是網(wǎng)站被劫持，需要把協(xié)議從Http變更為Https。

什么是Https?

大致可以理解為我們訪問網(wǎng)頁的時(shí)候，我們使用的瀏覽器要和服務(wù)器有一個(gè)信息交流，瀏覽器使用的是四川話，服務(wù)器使用的是東北話，雙方為了能保持暢通的交流約定大家溝通時(shí)統(tǒng)一使用普通話，這里的普通話大致就可以理解為Http協(xié)議的意思。

瀏覽器和服務(wù)器在交流的時(shí)候，中間會通過路由器來傳話。由于大家說的都是普通話所以路由器就會被別人劫持，篡改了服務(wù)器與瀏覽器的溝通內(nèi)容，所以我們看到的頁面就會有廣告。

Https協(xié)議是瀏覽器和服務(wù)器約定的一種加密的交流方式，可以理解為：瀏覽器和服務(wù)器剛好都在溫州上過學(xué)，兩個(gè)人剛好都會說溫州話，而路由器不會說溫州話所以就無法篡改服務(wù)器與瀏覽器的交流，這樣就保證了服務(wù)器與瀏覽器的對話環(huán)境，隔離了廣告植入的可能！

http是超文本傳輸協(xié)議，信息是明文傳輸，https 則是具有安全性的ssl加密傳輸協(xié)議。http和https使用的是完全不同的連接方式用的端口也不一樣,前者是80,后者是443。

http的連接很簡單，是無狀態(tài)的。HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議 要比http協(xié)議安全。

經(jīng)過一番盲眼踩坑之后終于保證產(chǎn)品有驚無險(xiǎn)的開始接客了。

最后BB了這么多，大概意思如下：

1. 需求階段要和需求方（業(yè)務(wù)團(tuán)隊(duì)、Boss等等）保持溝通順暢，建議大家先和需求方建立溝通機(jī)制，具體方式不限制：可以是每天一個(gè)10分鐘的小會、可以是郵件、可以是任何準(zhǔn)確傳達(dá)需求的方式等；

2. 設(shè)計(jì)階段要能準(zhǔn)確傳達(dá)設(shè)計(jì)需求，原型輸出采用真實(shí)的數(shù)據(jù)，保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確；

3. 研發(fā)階段保證業(yè)務(wù)邏輯能準(zhǔn)確傳達(dá)無歧義，邏輯規(guī)則清晰、頁面狀態(tài)無遺漏，同時(shí)及時(shí)同步研發(fā)進(jìn)度保證實(shí)現(xiàn)進(jìn)度；

以上，期望對各位有所幫助，同時(shí)筆者目前正在摸索上線我們教育產(chǎn)品的第一版當(dāng)中，期望未來的她能帶給你我一點(diǎn)點(diǎn)幸福感！

這就是一個(gè)年輕的產(chǎn)品經(jīng)理反思成長的過程。要是在騰訊，從P2.1打怪升級到P3.1，通常需要3-5年；而創(chuàng)業(yè)公司，則等不起那么長的時(shí)間，而是需要促使產(chǎn)品經(jīng)理快速成長。

作者：梅沙 Alex Niki

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