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

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

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

1. 加強溝通確保信息對稱

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

2. 文檔細致，邏輯清晰完整

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

3. 多動手，少動嘴；

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

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

下面是這個H5活動頁面

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

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

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

1.需求

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

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

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

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

2. 視覺

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

輸出的樣式是醬的：

然而和業(yè)務(wù)團隊的同事確認需求時頁頭部分的進度條文案是醬的：

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

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

3.文案

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

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

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

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

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

4.圖片

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

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

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

原來的雪圈（雪上運動）圖片是醬的~

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

5.研發(fā)

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

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

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

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

然而在體驗驗收時……

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

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

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

此時的程序員是這樣的：

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

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

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

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

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

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

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

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

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

找！不！到！入口！

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

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

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

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

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

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

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

什么是Https?

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

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

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

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

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

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

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

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

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

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

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

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

作者：梅沙 Alex Niki

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