利用空閑時間設計了一個小程序「叫個羊毛」_V1.0_設計思路共享

7 評論 1525 瀏覽 11 收藏 12 分鐘

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

最近利用空閑時間設計了一個微信小程序,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),同時可以獲取到這條語音的文字內容。

四、結語

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

本文由 @從0到1之產品經理 原創發布于人人都是產品經理,未經許可,禁止轉載。

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

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 沒有看到盈利模式,是靠用戶使用工具,消耗積分。用戶購買積分+推廣廣告來盈利嗎?有幾個核心問題:
    1)用戶如何知道并找到工具?(流量入口在哪??)
    2)市面上類似的免費工具很多,有什么差異化?(為什么用你的小程序?)
    3)目標用戶是否有付費意愿?

    來自山東 回復
    1. 抱歉回復晚了~
      (1)盈利其實是靠微信激勵廣告,以及后面規劃的推廣商品獲取傭金等。
      (2)流量入口目前是靠我個人通過其他途徑積攢的微信私域流量,與此同時收集一些值得開發的好需求。
      (3)說實話我的初衷確實不是通過向這個小程序引流來實現盈利,是為了體驗從設計到開發到落地的過程中踩坑~出坑~踩坑~出坑的這個過程…哈哈哈哈我這么說你能理解吧。
      像我文中提到的幾個小工具,隨便一搜免費的很多,自己設計一遍才能完全弄懂邏輯和原理,與此同時可以共享設計和開發過程中踩過的坑,并發布開發難點講解的相關文章(開發知識在其他平臺上有共享)。
      (4)所以目前我這個小程序主要目標用戶其實是互聯網行業的同行們,而不是真正想通過小程序薅羊毛的朋友。
      (5)感謝你的認真閱讀哈~~

      來自江蘇 回復
  2. 在微信沒找到這個小程序呀

    來自安徽 回復
    1. 我名字還沒改呢,改名受限了,現在小程序線上名字暫時叫“Belongs to us”

      來自江蘇 回復
    2. 好的,謝謝

      來自安徽 回復
  3. 那個分享已經連接過的wifi的功能就是wifi萬能鑰匙曾經的主要功能,這個一定程度上有涉敏的問題,建議謹慎設計

    來自上海 回復
    1. OK感謝提醒!也感謝你的認真閱讀~~

      來自江蘇 回復