編輯導語：在產(chǎn)品開發(fā)中，原型設計、交互設計等方面都是必不可少的考量因素，微信小程序的設計也是如此。在微信小程序設計中，產(chǎn)品經(jīng)理應當根據(jù)用戶需求、用戶體驗等方面推動產(chǎn)品功能的實現(xiàn)與優(yōu)化。本篇文章里，作者介紹了微信活動報名小程序的實現(xiàn)過程，對于想入行小程序產(chǎn)品設計的你也許會有所幫助。

一、前言

大家好，今天繼續(xù)為大家?guī)怼懂a(chǎn)品經(jīng)理如何搭建一個微信小程序》的講解。

本系列適用于已經(jīng)工作1~2年且有一定產(chǎn)品基礎，但從未接觸過微信小程序，希望入行微信小程序產(chǎn)品設計的產(chǎn)品經(jīng)理。整個文章體系分為四部分，具體如下表所示。上篇文章講解的是【分析篇】，今天是我們整個系列的【實現(xiàn)篇】。

本文會以一個實際的“微信活動報名程序”為案例進行講解，在講解過程中會以實際產(chǎn)品設計中運用到的相關理論與產(chǎn)品方法進行產(chǎn)品分析。學習完成后，大家可以熟悉產(chǎn)品分析方法與實現(xiàn)策略，掌握從0到1搭建一個微信小程序的產(chǎn)品技能。

同時大家在今后的實際工作中，也可以舉一反三并在全新的產(chǎn)品設計和實現(xiàn)上有較強的借鑒與參考價值。在進行產(chǎn)品講解前，先為大家展示一下微信活動報名小程序，使大家直觀感受一下產(chǎn)品實例。

當然，這個實例是我自己的實驗產(chǎn)品，未來產(chǎn)品功能會有所變化。

同時，由于這個實驗的微信小程序是個人主體注冊的，像類似于信息發(fā)布這樣的功能個人主體的小程序是不能有這些功能的。產(chǎn)品在最終的展現(xiàn)上，同原型是有區(qū)別的。

二、原型設計

一個產(chǎn)品的實現(xiàn)，離不開原型設計。

產(chǎn)品原型設計是一種低成本的產(chǎn)品實現(xiàn)方案，產(chǎn)品經(jīng)理可以將產(chǎn)品分析的結(jié)果以原型的方式進行呈現(xiàn)。在這個呈現(xiàn)過程中，如果需求提出方或是市場需求發(fā)生了變化，需要進行產(chǎn)品更新，在產(chǎn)品實現(xiàn)前，僅需要調(diào)整原型即可，避免技術人員改動產(chǎn)品代碼造成的人力浪費。

對于產(chǎn)品經(jīng)理而言，產(chǎn)品原型設計的過程，也是進一步梳理產(chǎn)品邏輯的過程。有些時候，在產(chǎn)品分析階段，在一些非常細節(jié)的地方會考慮得不夠周全，在設計原型的過程中會想得更為全面。所以說，產(chǎn)品原型設計的過程，也是產(chǎn)品逐步求精的過程。

由于我們的這個產(chǎn)品功能非常簡單，所以產(chǎn)品原型主要有四個頁面。

1. 主頁面

用戶打開小程序，首先為用戶呈現(xiàn)的主頁。所以首頁原型設計要通俗直觀，能直接反應出產(chǎn)品的特點。

對于用戶而言，用戶打開微信活動報名小程序，最想了解的是近期有什么活動。便于用戶可以在第一時間找到核心信息，主頁為用戶展現(xiàn)的是以未來將要召開活動的正序。

同時，如果一天有多個活動，我們可以把時間進行提煉，而不是粗暴地給用戶直接顯示一個“年-月-日”，而是進一步更友好地提示，是今天、還是明天、還是星期幾。

另外，還有兩個細節(jié)，一個是對活動的狀態(tài)進行提示，另一個是顯示這個活動用戶是否已經(jīng)報名。未報名的活動，用戶點擊后直接可以報名，已經(jīng)報名的活動，顯示“已報名”，并且報名按鈕不可點擊。

對于【歷史】和【已報名】的兩個Tab，也可以復用主頁面，從而減少產(chǎn)品實現(xiàn)的工作量，提升產(chǎn)品上線效率。

2. 我的

我的頁面中，承載著產(chǎn)品通用的管理功能，例如我們常見的用戶資料編輯、信息創(chuàng)建與管理、產(chǎn)品版本信息等都在【我的】頁面里，算是比較通用的一個功能。

我們這個活動報名的小程序功能比較簡單，所以【我的】頁面原型設計也比較簡單，僅需要體現(xiàn)核心信息就可以。

像用戶的頭像，可以從微信授權中獲得，同步用戶微信頭像，免去了用戶上傳頭像繁瑣。同時用戶的一些基本的信息也可以在用戶授權的情況下，幫助用戶進行同步，便于產(chǎn)品為用戶提供更好的服務。

點擊【編輯】后，用戶可進一步編輯自己的信息。另外的幾個功能菜單，也是圍繞用戶創(chuàng)建活動、管理活動和報名活動服務的。點擊后，進入相應的功能頁面。

3. 個人資料

用戶可以在個人資料頁面錄入自己的真實姓名、工作單位和崗位，便于活動成員間相互認識，為后續(xù)產(chǎn)品互動打下基礎。

由于我們這個是書友會活動報名的小程序，用戶可以為自己定義一個書友會學號，便于讀書講座活動進行用戶統(tǒng)計。

對于產(chǎn)品原型設計而言，本文展示的也僅是非?；A的頁面。實際的產(chǎn)品實現(xiàn)過程中，每個輸入字段的異常提示，也應該有相應的頁面原型展示。

如果你所在的公司是一個比較成熟的公司，有一套完善的產(chǎn)品規(guī)范，大家已經(jīng)約定俗成，那么產(chǎn)品經(jīng)理在設計原型時，就便捷高效了許多。只要在產(chǎn)品文檔中描述清楚，哪些字段有哪約束、產(chǎn)品頁面會有哪些異常、分別會出現(xiàn)什么樣的提示即可。產(chǎn)品展現(xiàn)上，沿用公司產(chǎn)品規(guī)范即可。

4. 創(chuàng)建活動

用戶可以創(chuàng)建活動，輸入活動標題、活動開始時間和活動內(nèi)容。必輸?shù)淖侄渭蛹t色的星號顯示，以便進行強調(diào)。

對于開始時間，由于是要輸入日期和時間，如何設置兩個輸入框，分別輸入日期和時間，頁面展示比較瑣碎，用戶輸入也要點擊兩次。

因此，我們設計了一個組合輸入，用戶點擊后，可以在彈出的微信時間控件中，一次性完成日期和時間的選擇。從一個小細節(jié)上，增加產(chǎn)品的用戶體驗。未來創(chuàng)建活動功能還可以繼續(xù)擴展，增加圖片、音視頻的發(fā)布支持。

至于未來創(chuàng)建活動會有什么功能，其實也是隨著用戶的實際使用需求，逐步迭代的。目前的產(chǎn)品實現(xiàn)所遵循的是MVP（Minimum Viable Product，最小可實現(xiàn)產(chǎn)品）思想。先滿足用戶的核心需求。如果過分追求產(chǎn)品功能的大而全，投產(chǎn)了之后又沒有用戶使用，反而是一種浪費。

三、交互設計

交互設計是產(chǎn)品在設計階段必然要考慮的一個方面。好的產(chǎn)品交互設計，可以向用戶傳達一種正向的理念，讓用戶在潛移默化中感受到你對他的重視及關懷。

交互設計即要考慮全局也要考慮細節(jié)。全局是用戶在使用一個產(chǎn)品的全過程中，非常流暢順滑，產(chǎn)品信息指向明確，操作清晰；而細節(jié)上，小到一個按鈕的反饋、文案提示的字體和配色，都要精準。這也是我們常說的產(chǎn)品要不斷打磨。

以次微信活動報名小程序為例，在產(chǎn)品實際實現(xiàn)過程中，雖然已經(jīng)考慮了許多產(chǎn)品交互上的細節(jié)，但是發(fā)現(xiàn)每次再回頭來看，產(chǎn)品仍然還是會有需要完善的地方。

這也就是說，這個世界上并沒有真正完美的產(chǎn)品，產(chǎn)品的功能實現(xiàn)與完美也需要有一個平衡。過度追求完美，為了一個非常微的、且用戶十年也感受不到的交互投入大量的人力和時間，明顯也是不合適的。我們可以在一定范圍內(nèi)追求為用戶提供更好的產(chǎn)品。

四、功能實現(xiàn)

理論上產(chǎn)品經(jīng)理不需要太在意產(chǎn)品的編碼實現(xiàn)，因為這是軟件架構師或是軟件開發(fā)工程師需要考慮的事情。

而現(xiàn)實中，優(yōu)秀的產(chǎn)品經(jīng)理往往也都有技術背景，像大家比較熟知的蘋果創(chuàng)始人喬布斯、微軟創(chuàng)始人比爾·蓋茨、Facebook創(chuàng)始人馬克·扎克伯格、小米創(chuàng)始人雷軍以及微信之父張小龍都有過程序開發(fā)經(jīng)歷。所以產(chǎn)品經(jīng)理懂技術，一定是一個加分項。

產(chǎn)品功能通過程序代碼實現(xiàn)過程中，對程序結(jié)構的有效組織、邏輯清晰，本身也是一種產(chǎn)品設計。通常程序使用的MVC（Model-View-Controller，模型-視圖-控制器）模式，可以突出程序的層次感和可維護性。

對于微信小程序而言，我們可以將一些通用的方法類抽象出來，使得滿足面向?qū)ο蟮木庉嬎枷?，即封裝、繼承、多態(tài)，從而為小程序未來的擴展打好基礎。

以下就是我們的微信報名小程序的開發(fā)結(jié)構，當然目前我們的微信報名小程序功能非常簡單，程序結(jié)構也并不復雜。當未來我們要進行其他功能擴展的時候，我們還會抽象出很多公共類。程序結(jié)構也會進行調(diào)整。代碼實現(xiàn)的細節(jié)，大家如果有興趣，可以隨時與我交流。

五、異常處理

異常處理是產(chǎn)品開發(fā)必不可少的一個環(huán)節(jié)。產(chǎn)品經(jīng)理對異常處理的定義，要從產(chǎn)品實際場景出發(fā)，結(jié)合多年的工作經(jīng)驗，對產(chǎn)品可能出現(xiàn)的異常環(huán)節(jié)進行識別處理，以提升產(chǎn)品的健壯性。

很多時候，產(chǎn)品經(jīng)理之所以資深，最主要的一個原因是走過的路多，踩過的坑也多，經(jīng)驗也多。這些都是產(chǎn)品經(jīng)理的隱性知識，這也是為什么好的產(chǎn)品經(jīng)理比較昂貴的原因。從表面上看，都是實現(xiàn)了產(chǎn)品的功能，這是大家都可以看得見的地方，而產(chǎn)品經(jīng)理的昂貴之處往往在于大家看不見的地方。

對于微信活動報名小程序產(chǎn)品而言，我們可以定義幾個方面的異常，從而進行有針對性的處理。當然處理的細節(jié)，就不在此多講了。

1. 微信小程序服務端異常

接口頻次限制、服務返回錯誤、處理超時、參數(shù)不正確、版本不支持、接口調(diào)用錯誤、授權認證異常等。

2. 微信小程序應用端異常

網(wǎng)絡異常、存儲異常、內(nèi)存異常、字段參數(shù)異常、帶寬限制、內(nèi)存異常、代碼本身的異常、權限異常、數(shù)據(jù)異常等。

六、小結(jié)

產(chǎn)品經(jīng)理在設計微信小程序產(chǎn)品時，不僅僅是解決了用戶的痛點（滿足用戶核心需求），還要給用戶帶來了爽點（極致的用戶體驗）。而極致的用戶體驗，其中有一個非常重要的細節(jié)就是對給用戶的提示信息的友好，以及對產(chǎn)品異常處理的到位。

給用戶的提示信息要恰到好處，不能沒有，也不能過多而給用戶造打擾。

異常處理要明確，告訴用戶出現(xiàn)問題信息的同時，還要讓用戶知道如何去處理，不讓用戶感到迷茫。

而這些細節(jié)，需要產(chǎn)品經(jīng)理對微信小程序的各項功能參數(shù)非常熟悉，知道微信小程序在哪個地方的交互會出現(xiàn)哪些問題。

微信活動報名小程序這個產(chǎn)品，其實功能非常簡單，但即便是這樣，如果要做到極致，有非常多的產(chǎn)品細節(jié)要考慮。所以在今后的工作中，產(chǎn)品經(jīng)理不論是在設計小產(chǎn)品還是大產(chǎn)品，都可以借鑒本文的產(chǎn)品設計思路。即便是大產(chǎn)品，也可以分解成一個個小的產(chǎn)品功能進行實現(xiàn)。

莫聽穿林打葉聲，何妨吟嘯且徐行。我們今天就先講到這里，感謝大家的閱讀。

#專欄作家#

王佳亮，微信公眾號：佳佳原創(chuàng)，人人都是產(chǎn)品經(jīng)理專欄作家。中國計算機學會（CCF）會員，專注于互聯(lián)網(wǎng)產(chǎn)品設計理念分享。

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

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