華宛蓉的購物開箱清單

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

一、前言

大家好，今天繼續為大家帶來《產品經理如何搭建一個微信小程序》的講解。

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

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

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

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

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

二、原型設計

一個產品的實現，離不開原型設計。

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

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

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

1. 主頁面

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

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

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

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

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

2. 我的

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

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

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

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

3. 個人資料

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

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

對于產品原型設計而言，本文展示的也僅是非常基礎的頁面。實際的產品實現過程中，每個輸入字段的異常提示，也應該有相應的頁面原型展示。

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

4. 創建活動

用戶可以創建活動，輸入活動標題、活動開始時間和活動內容。必輸的字段加紅色的星號顯示，以便進行強調。

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

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

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

三、交互設計

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

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

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

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

四、功能實現

理論上產品經理不需要太在意產品的編碼實現，因為這是軟件架構師或是軟件開發工程師需要考慮的事情。

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

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

對于微信小程序而言，我們可以將一些通用的方法類抽象出來，使得滿足面向對象的編輯思想，即封裝、繼承、多態，從而為小程序未來的擴展打好基礎。

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

五、異常處理

異常處理是產品開發必不可少的一個環節。產品經理對異常處理的定義，要從產品實際場景出發，結合多年的工作經驗，對產品可能出現的異常環節進行識別處理，以提升產品的健壯性。

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

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

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

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

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

網絡異常、存儲異常、內存異常、字段參數異常、帶寬限制、內存異常、代碼本身的異常、權限異常、數據異常等。

六、小結

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

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

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

而這些細節，需要產品經理對微信小程序的各項功能參數非常熟悉，知道微信小程序在哪個地方的交互會出現哪些問題。

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

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

#專欄作家#

王佳亮，微信公眾號：佳佳原創，人人都是產品經理專欄作家。中國計算機學會（CCF）會員，專注于互聯網產品設計理念分享。

本文原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。