筆者作為一名小程序的產品經理，下面這篇文章是以筆者自身設計的小程序為例子，為大家分享關于產品設計思路的一個相關內容，想要了解產品設計思路的同學可以進來看看哦！相信會給你帶來一些啟發。

最近利用空閑時間設計了一個微信小程序，UI也是自己獨立設計的，還找了個業界大佬開發了出來，從規劃設計到目前1.0版本上線耗時一個多月。

設計這個小程序初衷只是為了自己在碎片時間可以保持產出，因為個人身份申請的小程序，自然會有很多功能的實現受到微信官方的限制，諸如：支付能力、存儲用戶信息、以及小程序類目的選擇…

整個小程序我采用的是深色系背景，藍灰色區塊、白色文本。

廢話不多說，先上一波UI圖：

作為這個小程序從0到1的的設計者，需要對每個階段規劃都有深入的思考。

產品功能規劃需要回答一個問題，即用什么功能為什么用戶解決什么問題，有哪些是核心需求，哪些是次要需求。這一環很重要，它將決定我們先做什么后做什么。

一、前期規劃

由于個人時間精力包括資金成本都有限，所以時刻秉承「MVP」原則，第一期先定好主功能框架就好。

「MVP，全稱為“最小化可行產品”，是一種產品開發策略，它的核心理念是：在最短的時間內，用最少的資源，構建出一個能夠滿足核心需求的產品原型。這個原型不追求完美，不包含所有潛在的功能和特性，但它必須足夠有效，能夠讓用戶體驗到產品的核心價值?！?/p>

二、前期準備

1. 小程序準備

• 購買服務器和域名，以及域名的備案工作。(也可以使用「微信云開發」，無需搭建服務器)。
• 若微信小程序已上架，2024年3月31日前可以正常提交版本審核，請于2024年3月31日前完成備案，逾期未完成備案，平臺將按照備案相關規定于2024年4月1日起進行清退。
• 對于不需要微信支付的小程序而言，申請小程序賬號時，既可以用個人申請也可以用企業申請，提供相應資料即可。
• 小程序資源準備：例如小程序名稱、簡介、logo、分享圖片等。
• 一定要盡早注冊公眾號、小程序，先把名字給占了。多申請幾個郵箱，不管是公眾號，還是小程序多注冊幾個，后續再改名字。比如你的小程序名字叫「羊毛」，那前期可以多注冊幾個名字，比如「羊毛PLUS」「羊毛+」「羊毛小助手」，方便后期業務拓展的時候有可用的名字。
• 根據業務需求整理好小程序需要用的的權限，一定要提前去申請好相關接口權限和類目，比如定位、隱私協議、支付等等。

2. 小程序規范熟悉

• 在iOS 系統下，微信小程序不可提供虛擬物品的購買支付，不應展示支付功能，也不得引導至外部網頁或APP來實現支付功能。不能展現任何有購買、支付的功能、頁面、按鈕，即使實際上它們都不可使用；也不得引導至外部網站或APP來實現支付功能。
• 在微信小程序內嵌的網頁必須已經履行備案手續。

這兩條是我每次設計小程序都格外注意的點，如果是第一次做微信小程序開發的寶子，很有必要先看下微信官方文檔中的運營規范，極容易踩坑。詳見《微信官方文檔-運營規范》

三、隨便聊聊

1. 登錄

這個小程序目前的登錄方式采用的是靜默登錄的形式。

靜默登錄的優點：

• 不需要判斷用戶是否已登錄再去開放某些入口或功能，減少前端工作量。
• 用戶不需要進行額外登錄操作就可以體驗小程序的完整功能。
• 更好的保障用戶隱私安全。

我們在設計小程序的登錄功能時，如果不是非常必要，其實小程序根本不需要再設計登錄和注冊頁面。用戶對于繁瑣的登錄注冊流程其實是非常反感的。

有時候用戶可能是通過好友分享的鏈接點進來想查看一條新聞，一進來就要求用戶各種授權綁定，直接就降低了用戶對我們產品的信任感。

如果說你的產品需要用戶補充的一些敏感信息，如手機號 、身份證號，可以在后期特定場景中再要求用戶提供。

2. WiFi共享

• 使用場景一：逢年過節有親戚朋友到家里做客，但凡家里WiFi密碼設置比較復雜的，這時候需要挨個幫大家連接WiFi，這個場景大家應該都不陌生。使用這個「WiFi共享」工具，可以將自己家里的WiFi生成二維碼轉發給微信好友，或者直接打印張貼出來，來訪者掃碼一鍵連接，省去了不少麻煩。
• 使用場景二：我們去外面餐館吃飯的時候，遇到流量不足的情況，這時候也需要連接商家的WiFi。大多數商家都直接將賬號密碼貼在墻上，如果商家將WiFi二維碼打印下來貼在店內，顧客就可以掃碼一鍵連接了。

關于這個WiFi工具的后期迭代，我目前規劃實現這樣一個功能：

主要目標用戶定位小商圈內的商家，商家入駐后填寫店內的WiFi信息（計劃增加WiFi地址信息），當用戶進入這個商圈，可以搜索到當前定位附近所有入駐過的WiFi信息，如果位置距離在可連接范圍內，則可以一鍵連接成功。

大致原型如下：

3. 二維碼生成器

生成二維碼的功能本身沒什么難度，市面上的二維碼生成器也有很多。

簡單整理了一下產品的設計思路：

用戶輸入文本內容后，可以自定義二維碼的前景顏色、背景顏色和中心圖標，然后預覽樣式并下載二維碼。

關于顏色的設置，我最終采用的方案是：用戶可以拖動三原色滑塊選擇顏色，也可以手動輸入HEX值/RGB值，并提供了6個常用色的快捷選項。

但是在設計這個顏色選擇器時，一開始前端是準備使用現成的插件，但最終沒有找到合適的（正合我意哈哈），于是前端大佬準備自己開發一個。

如上圖顏色選擇器的UI,三個顏色選擇器的滑塊我設計的是無填充色，且滑塊的結束點是在左端點。

然而前端告知：只能將滑塊的中心點設為結束點，也就是下圖這個效果（我當場表達了無語和蔑視）：

當然最后在我的威逼利誘下，還是實現了UI圖示效果的，前端主要使用了vant-ui組件庫的popup和slider兩個組件 。

大家應該也經常遇到類似的場景，尤其是前端要使用現成的組件時，建議大家一定要先溝通清楚組件可自定義的范圍，可以有效減少后期返工成本。

4. 語音合成

功能描述：

起初規劃的功能是這樣的：用戶輸入文字內容（支持最長200個字符），選擇音色后，點擊試聽/直接下載語音（如下圖-左1）。

但是在開發過程中遇到了以下幾個問題點：

1. 選擇音色的功能由于接口方面問題，暫時摒棄了。于是重新出了UI圖（如下圖-左2）。
2. 開發過程中發現wx.saveFileToDisk保存到用戶磁盤僅在 PC 端支持，不支持下載該類文件到手機上。于是考慮將生成的文件保存到服務器中，然后請求接口的時候返回對應的資源鏈接，將資源鏈接復制到剪切板上，由用戶自行粘貼路徑下載語音。
3. 思來想去，復制資源鏈接再去瀏覽器下載的操作著實雞肋，不得不又迭代了一版：用戶在小程序內生成了語音后，可以直接分享給微信好友，好友進入小程序可以直接試聽（如下圖-右1），同時可以獲取到這條語音的文字內容。

四、結語

微信小程序快速便捷的輕應用模式，可以適應大部分互聯網產品快速迭代、快速試錯的需求，但是全部依賴于微信生態圈會有諸多限制。作為小程序的產品經理，理應熟悉微信開發規范，清楚什么可以做什么無法實現，這樣在設計功能時，不會走太多彎路。