積分紅包設計流程詳解

12 評論 12010 瀏覽 123 收藏 12 分鐘

2019年春節就要來臨,為了滿足用戶在公司內部通訊產品上互發積分紅包的需求,作者仿照微信紅包撰寫了一份積分紅包的需求設計說明書,供大家參考學習。

一、積分紅包通用規則

首先確定積分紅包的通用規則如下:

  1. 1積分=0.1元;
  2. 發紅包單次金額限制2000積分;
  3. 積分領取最小額度為0.1積分;
  4. 個人紅包只能對方領取,自己不能領??;群紅包可以自己領取。

二、積分紅包頁面流程

對微信紅包進行了研究后,我分別梳理了個人紅包頁面流程和群紅包頁面流程。

個人紅包頁面流程:

群紅包頁面流程:

三、個人紅包頁面設計

1. 發紅包的人

聊天-積分紅包按鈕頁面:

用戶點擊【積分紅包】按鈕,進入發積分紅包頁面。

發積分紅包頁面:

1. 能輸入數字和小數點,只能輸入到小數點后1位,金額超過2000積分彈出提示“單個紅包金額不可超過2000積分”;默認為0.0,為0.0時【發紅包】按鈕置灰。

2. 字數限制為25字。默認和為空是“恭喜發財,大吉大利”。

3. 提示語有三種,每次進入發積分紅包頁面時會隨機顯示,分別為:(1)未領取的積分紅包,將于24小時后退回積分賬戶;(2)對方可領取的紅包金額為0.1-2000積分;(3)可直接使用收到的積分發紅包。

4、金額輸入正確后,【發紅包】按鈕高亮,點擊跳轉到支付頁面。

聊天-紅包頁面:

  1. 點擊未被領取、未過期的紅包,進入紅包詳情-未被領取、未過期頁面;
  2. 點擊未被領取、已過期的紅包,彈出紅包彈窗-未被領取、已過期;
  3. 點擊已被領取的紅包,進入紅包詳情-已被領取頁面。

紅包詳情-未被領取、未過期頁面:

紅包彈窗-未被領取、已過期:

點擊【查看領取詳情】按鈕,進入紅包詳情-未被領取、已過期頁面。

紅包詳情-未被領取、已過期頁面:

紅包詳情-已被領取頁面:

2. 收紅包的人

聊天-紅包頁面:

  1. 點擊未領取、未過期的紅包,彈出紅包彈窗-未領取、未過期;
  2. 點擊未領取、已過期的紅包,彈出紅包彈窗-未領取、已過期;
  3. 點擊已領取的紅包,彈出紅包彈窗-已領取。

紅包彈窗-未領取、未過期:

紅包彈窗-未領取、已過期:

紅包彈窗-已領?。?/strong>

點擊【查看領取詳情】按鈕,進入紅包詳情-已領取頁面。

紅包詳情-已領取頁面:

四、群紅包頁面設計

1. 發紅包

群聊-積分紅包按鈕頁面:

用戶點擊【積分紅包】按鈕,進入拼手氣紅包頁面。

拼手氣紅包頁面:

1. 默認為拼手氣紅包:

(1)若已輸入總金額,則切換為普通紅包時,總金額變為單個金額;

(2)若已輸入紅包個數,則切換為普通紅包時,紅包個數不變;

(3)若已輸入總金額和紅包個數,則切換為普通紅包時,單個金額=總金額/紅包個數,單個金額精確到0.1;若除不盡則要改變總金額:如總金額為20,紅包個數為3,則切換為普通紅包時,單個金額=20/3=6.6,支付總金額變為19.8。

2. 只能輸入數字和小數點,只能輸入到小數點后1位,總金額超過200000積分彈出提示“單次支付總額不可超過200000積分”;默認為0.0,為0.0時【發紅包】按鈕置灰。

3. 只能輸入數字,為0時【發紅包】按鈕置灰;單個紅包金額超過2000積分時彈出提示“單個紅包金額不可超過2000積分”;單個紅包金額低于0.1積分時彈出提示“單個紅包金額不可低于0.1積分”;紅包個數超過100時彈出提示“一次最多發100個紅包”。

4. 字數限制為25字。默認和為空是“恭喜發財,大吉大利”。

5. 提示語有三種,每次進入拼手氣紅包頁面時會隨機顯示,分別為:

(1)未領取的積分紅包,將于24小時后退回積分賬戶;

(2)對方可領取的紅包金額為0.1-2000積分;

(3)可直接使用收到的積分發紅包。

6. 總金額和紅包個數輸入正確后,【發紅包】按鈕高亮,點擊跳轉到支付頁面。

普通紅包頁面:

1. 若已輸入單個金額,則切換為拼手氣紅包時,單個金額變為總金額;若已輸入紅包個數,則切換為拼手氣紅包時,紅包個數不變;若已輸入單個金額和紅包個數,則切換為拼手氣紅包時,總金額=單個金額*紅包個數。

2. 只能輸入數字和小數點,只能輸入到小數點后1位,單個金額超過2000積分彈出提示“單個紅包金額不可超過2000積分”;默認為0.0,為0.0時【發紅包】按鈕置灰。

3. 只能輸入數字,為0時【發紅包】按鈕置灰;紅包個數超過100時彈出提示“一次最多發100個紅包”。

4. 字數限制為25字。默認和為空是“恭喜發財,大吉大利”。

5. 提示語有三種,每次進入普通紅包頁面時會隨機顯示,分別為:(1)未領取的積分紅包,將于24小時后退回積分賬戶;(2)對方可領取的紅包金額為0.1-2000積分;(3)可直接使用收到的積分發紅包。

6. 單個金額和紅包個數輸入正確后,【發紅包】按鈕高亮,點擊跳轉到支付頁面。

2. 搶紅包

聊天-紅包頁面:

  1. 點擊自己未領取、未過期、未被領完的紅包,彈出紅包彈窗-自己未領取、未過期、未被領完;
  2. 點擊自己未領取、未過期、已被領完的紅包,彈出紅包彈窗-自己未領取、未過期、已被領完;
  3. 點擊自己未領取、已過期的紅包,彈出紅包彈窗-自己未領取、已過期;
  4. 點擊自己已領取的紅包,彈出紅包彈窗-自己已領取。

紅包彈窗-自己未領取、未過期、未被領完:

紅包彈窗-自己未領取、未過期、已被領完:

點擊【查看領取詳情】按鈕,進入紅包詳情-自己未領取、未過期、已被領完頁面。

紅包詳情-自己未領取、未過期、已被領完頁面:

紅包彈窗-自己未領取、已過期:

點擊【查看領取詳情】按鈕,進入紅包詳情-自己未領取、已過期頁面。

紅包詳情-自己未領取、已過期頁面:

紅包彈窗-自己已領?。?/strong>

點擊【查看領取詳情】按鈕,進入紅包詳情-自己已領取頁面。

紅包詳情-自己已領取頁面:

以上是我梳理的積分紅包需求設計說明書,歡迎大家交流指正~

 

本文由 @姚雪春linda 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 積分紅包需要設計后臺管理嗎

    來自廣東 回復
  2. 請問在app內部用積分發紅包,會有什么相關法律法規的限制或者要求嘛?

    來自浙江 回復
  3. 學習一下,

    回復
  4. 這個積分紅包用在哪里呢?

    回復
    1. 是公司內部的通訊產品??

      回復
  5. 0歲產品小白,能加你微信問你一些頁面設計問題嗎?

    來自廣東 回復
    1. 微信號:linda199027,歡迎交流~

      來自湖北 回復
  6. 支持你的設計文檔,加油!

    回復
    1. 謝謝鼓勵! :mrgreen:

      來自湖北 回復
  7. 支持一下新同學。剛好自己寫了一篇紅包的文章, 文章中設計居多。下次可以多分享一下設計思路。

    來自福建 回復
    1. 感謝支持~看了您的文章,確實思維邏輯性很強!我還要多多學習 ??

      來自湖北 回復
    2. 回復