筆者作為一名小程序的產(chǎn)品經(jīng)理，下面這篇文章是以筆者自身設(shè)計(jì)的小程序?yàn)槔樱瑸榇蠹曳窒黻P(guān)于產(chǎn)品設(shè)計(jì)思路的一個(gè)相關(guān)內(nèi)容，想要了解產(chǎn)品設(shè)計(jì)思路的同學(xué)可以進(jìn)來看看哦！相信會(huì)給你帶來一些啟發(fā)。

最近利用空閑時(shí)間設(shè)計(jì)了一個(gè)微信小程序，UI也是自己獨(dú)立設(shè)計(jì)的，還找了個(gè)業(yè)界大佬開發(fā)了出來，從規(guī)劃設(shè)計(jì)到目前1.0版本上線耗時(shí)一個(gè)多月。

設(shè)計(jì)這個(gè)小程序初衷只是為了自己在碎片時(shí)間可以保持產(chǎn)出，因?yàn)閭€(gè)人身份申請(qǐng)的小程序，自然會(huì)有很多功能的實(shí)現(xiàn)受到微信官方的限制，諸如：支付能力、存儲(chǔ)用戶信息、以及小程序類目的選擇…

整個(gè)小程序我采用的是深色系背景，藍(lán)灰色區(qū)塊、白色文本。

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

作為這個(gè)小程序從0到1的的設(shè)計(jì)者，需要對(duì)每個(gè)階段規(guī)劃都有深入的思考。

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

一、前期規(guī)劃

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

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

二、前期準(zhǔn)備

1. 小程序準(zhǔn)備

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

2. 小程序規(guī)范熟悉

• 在iOS 系統(tǒng)下，微信小程序不可提供虛擬物品的購(gòu)買支付，不應(yīng)展示支付功能，也不得引導(dǎo)至外部網(wǎng)頁(yè)或APP來實(shí)現(xiàn)支付功能。不能展現(xiàn)任何有購(gòu)買、支付的功能、頁(yè)面、按鈕，即使實(shí)際上它們都不可使用；也不得引導(dǎo)至外部網(wǎng)站或APP來實(shí)現(xiàn)支付功能。
• 在微信小程序內(nèi)嵌的網(wǎng)頁(yè)必須已經(jīng)履行備案手續(xù)。

這兩條是我每次設(shè)計(jì)小程序都格外注意的點(diǎn)，如果是第一次做微信小程序開發(fā)的寶子，很有必要先看下微信官方文檔中的運(yùn)營(yíng)規(guī)范，極容易踩坑。詳見《微信官方文檔-運(yùn)營(yíng)規(guī)范》

三、隨便聊聊

1. 登錄

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

靜默登錄的優(yōu)點(diǎn)：

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

我們?cè)谠O(shè)計(jì)小程序的登錄功能時(shí)，如果不是非常必要，其實(shí)小程序根本不需要再設(shè)計(jì)登錄和注冊(cè)頁(yè)面。用戶對(duì)于繁瑣的登錄注冊(cè)流程其實(shí)是非常反感的。

有時(shí)候用戶可能是通過好友分享的鏈接點(diǎn)進(jìn)來想查看一條新聞，一進(jìn)來就要求用戶各種授權(quán)綁定，直接就降低了用戶對(duì)我們產(chǎn)品的信任感。

如果說你的產(chǎn)品需要用戶補(bǔ)充的一些敏感信息，如手機(jī)號(hào) 、身份證號(hào)，可以在后期特定場(chǎng)景中再要求用戶提供。

2. WiFi共享

• 使用場(chǎng)景一：逢年過節(jié)有親戚朋友到家里做客，但凡家里WiFi密碼設(shè)置比較復(fù)雜的，這時(shí)候需要挨個(gè)幫大家連接WiFi，這個(gè)場(chǎng)景大家應(yīng)該都不陌生。使用這個(gè)「WiFi共享」工具，可以將自己家里的WiFi生成二維碼轉(zhuǎn)發(fā)給微信好友，或者直接打印張貼出來，來訪者掃碼一鍵連接，省去了不少麻煩。
• 使用場(chǎng)景二：我們?nèi)ネ饷娌宛^吃飯的時(shí)候，遇到流量不足的情況，這時(shí)候也需要連接商家的WiFi。大多數(shù)商家都直接將賬號(hào)密碼貼在墻上，如果商家將WiFi二維碼打印下來貼在店內(nèi)，顧客就可以掃碼一鍵連接了。

關(guān)于這個(gè)WiFi工具的后期迭代，我目前規(guī)劃實(shí)現(xiàn)這樣一個(gè)功能：

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

大致原型如下：

3. 二維碼生成器

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

簡(jiǎn)單整理了一下產(chǎn)品的設(shè)計(jì)思路：

用戶輸入文本內(nèi)容后，可以自定義二維碼的前景顏色、背景顏色和中心圖標(biāo)，然后預(yù)覽樣式并下載二維碼。

關(guān)于顏色的設(shè)置，我最終采用的方案是：用戶可以拖動(dòng)三原色滑塊選擇顏色，也可以手動(dòng)輸入HEX值/RGB值，并提供了6個(gè)常用色的快捷選項(xiàng)。

但是在設(shè)計(jì)這個(gè)顏色選擇器時(shí)，一開始前端是準(zhǔn)備使用現(xiàn)成的插件，但最終沒有找到合適的（正合我意哈哈），于是前端大佬準(zhǔn)備自己開發(fā)一個(gè)。

如上圖顏色選擇器的UI,三個(gè)顏色選擇器的滑塊我設(shè)計(jì)的是無填充色，且滑塊的結(jié)束點(diǎn)是在左端點(diǎn)。

然而前端告知：只能將滑塊的中心點(diǎn)設(shè)為結(jié)束點(diǎn)，也就是下圖這個(gè)效果（我當(dāng)場(chǎng)表達(dá)了無語和蔑視）：

當(dāng)然最后在我的威逼利誘下，還是實(shí)現(xiàn)了UI圖示效果的，前端主要使用了vant-ui組件庫(kù)的popup和slider兩個(gè)組件 。

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

4. 語音合成

功能描述：

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

但是在開發(fā)過程中遇到了以下幾個(gè)問題點(diǎn)：

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

四、結(jié)語

微信小程序快速便捷的輕應(yīng)用模式，可以適應(yīng)大部分互聯(lián)網(wǎng)產(chǎn)品快速迭代、快速試錯(cuò)的需求，但是全部依賴于微信生態(tài)圈會(huì)有諸多限制。作為小程序的產(chǎn)品經(jīng)理，理應(yīng)熟悉微信開發(fā)規(guī)范，清楚什么可以做什么無法實(shí)現(xiàn)，這樣在設(shè)計(jì)功能時(shí)，不會(huì)走太多彎路。

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

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

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。