一款留學公寓APP的大體雛形

15 評論 15640 瀏覽 121 收藏 15 分鐘

通過自我的學習與整理,羅列出一份大體的APP設計方案,產品小白希望通過文檔更加清晰地梳理自己今后的工作思路,希望大家多多指教!

一、文檔屬性

二、變更日志

三、需求說明

為滿足學生需求及更好的體驗,根據網站PC與自適應的功能樣式,制作一款簡易型方便學生使用的公寓APP。

大體描述見以下部分設計圖及文檔說明。

四、組織結構說明

五、注冊登錄流程說明

六、部分原型設計說明

首頁

需求說明:

  1. 點擊搜索跳轉新頁面,搜索欄下方有推薦的熱門城市,熱門大學,熱門公寓(輸入搜索相關內容,查找到關鍵詞所匹配的城市,公寓及大學)
  2. 搜索框底下有轉租,學校宿舍兩個tab,點擊進入相關頁面
  3. Tab下方為活動輪播banner圖,點擊某一圖片后進入該活動的詳情頁
  4. 熱門房源為推薦的一些熱門房源,點擊某圖后進入該房源詳情頁
  5. 轉租banner圖展現轉租的信息,點擊后進入轉租房源詳情頁
  6. 熱門城市banner,點擊某個城市進入該城市下的房源列表
  7. 底部幾個tab可相互切換相關的頁面
  8. 每個banner底下的按鈕點擊后進入相關的頁面

搜索頁及搜索結果頁

  • 進入搜索頁面推薦熱門城市,房源,大學
  • 輸入關鍵詞后確認后配對相關的城市,房源及大學

注冊/登錄頁

需求說明:

(1)注冊

備注說明:

  1. 必填項:國家/地區,手機號,驗證碼,密碼,郵箱號,姓名
  2. 非必填:微信號
  3. 點擊獲取驗證碼,120s倒計時
  4. 眼睛圖標顯示明文密文
  5. 填完信息后點擊注冊,成功注冊
  6. 點擊“已有賬號?請登錄”進入登錄頁面

(2)登錄

備注說明:

  1. 賬號登錄:用戶名,郵箱,手機號登錄
  2. 手機號登錄為已經注冊過的手機號
  3. 點擊忘記密碼進入找回密碼頁面
  4. 點擊獲取驗證碼,120s倒計時
  5. 填完信息點擊“登錄”,進入個人中心
  6. 點擊“注冊”跳轉注冊頁面
  7. 點擊“忘記密碼”進入找回密碼頁

找回密碼頁

需求說明:

  • 郵箱找回密碼,填寫郵箱號,驗證碼,新密碼
  • 手機找回密碼,填寫手機號,驗證碼,新密碼
  • “獲取驗證碼”,倒計時并發送短信
  • 填寫完信息,點擊“確認”,密碼找回修改成功

轉租頁

需求說明:

(1)發布轉租

  • “房源城市”選擇所在地的城市
  • “最近大學”選擇所在地附近的某所大學
  • “起租日期”為開始預租的日期
  • “退房日期”為結束退房的日期
  • “PostCode”為所在地的郵編
  • “房源地址”為所在地詳細地址,可根據地圖定位來識別
  • “價格”為出租的周價格
  • “內容”為房源的簡介及周邊介紹
  • “+”代表圖片上傳,可上傳6-10張圖
  • 打鉤代表同意“轉租須知”,點擊可查看條款須知
  • 點擊“提交”,發布成功,待管理員審核后可在前臺展示

(2)轉租詳情

  • 轉租詳情頁展示發布頁所填寫的內容
  • 點擊“桃心”可進行收藏
  • 頁面展示發布人姓名,頭像,生成的房源編號,價格,起始日期,周期,房源介紹,圖片展示,地址展示,發布時間
  • 點擊“承租須知”后跳轉文案頁
  • 點擊“我要租”,登錄狀態下進入下單成功頁

(3)轉租訂單

  • 點擊“我要租”,登錄狀態下進入下單成功頁
  • 顯示下單成功文案
  • 房源信息展示房源編號,單價,可供租期,

公寓列表頁

需求說明:

  1. 當前城市,當前大學默認為“London倫敦和全部大學”
  2. 點擊“漢堡”樣式進入篩選頁
  3. 房源分為VIP和非VIP,可以進行收藏,地址為手動錄入的信息,價格展現最低的
  4. 房態有尚有空房,房源緊張,滿房
  5. 點擊每個房源,進入其對應的詳情頁

普通公寓詳情頁

需求說明:

  1. 大圖banner輪播展現,右上角可以進行收藏
  2. 地圖定位實現地圖功能
  3. 預訂頁面展現如圖所示內容,點擊免費占位,(非登錄狀態需先彈出登錄框登錄后)進入占位頁面,勾選租期,接機服務,床上用品。確認后提示成功訂單頁面,個人信息錄入后臺(服務非必選)
  4. 房屋簡介可展開更多,收縮模式
  5. 公寓設施展示設施
  6. 附近學校展現相關的院校

(1)免費占位

  • 租期選擇用戶自己適宜的
  • 服務可選填
  • 點擊確認進入下單成功頁
  • 免費占位后進入訂單頁,訂單頁展現相關房源的基本信息,待后臺顧問去聯系用戶

(2)城市列表頁

需求說明:

  • banner顯示熱門城市圖,點擊進入其城市對應的公寓列表
  • 全部英國城市展示所有城市,點擊不同的城市進入所對應城市下的公寓列表

找室友頁

需求說明:

  1. 找室友根據故事文案來吸引同學的加入,點擊“申請加入”按鈕提交個人的一些信息
  2. 頁面設計如圖所示

找室友,申請加入:

  • 大學篩選英國地區的學校
  • 性別篩選男or女
  • 國家/地區選擇中國,英國,美國
  • 手機號輸入自己手機號碼
  • 驗證碼獲取短信驗證碼
  • 姓名填寫自己姓名
  • 微信號填寫自己微信
  • 星座篩選12星座
  • 喜好填寫自己的愛好
  • 標簽選擇自己所屬標簽,可多選

優惠詳情頁

需求說明:

  1. 展示每次后臺推送的活動
  2. 文案為編輯所設定

個人中心頁

需求說明:

  • 點擊“頭像”可以進行頭像圖片的更換
  • 點擊“用戶名”可以進行一次修改用戶名
  • 點擊“房源訂單”進入房源訂單頁面
  • 點擊“預租訂單”進入預租訂單頁面
  • 點擊“個人資料”進入個人資料頁面
  • 點擊“賬號管理”進入賬號管理頁面
  • 點擊“我的收藏”進入我的收藏頁面
  • 點擊“關于公司”進入關于公司頁面
  • 點擊“用戶協議”進入用戶協議頁面

設置:

  • 關于我們,聯系我們跳轉新頁面,文案展示詳情
  • 清除緩存,可以清理緩存
  • 版本號為當前的發布版本

七、流程規范

第一階段:需求策劃

在需求探討階段產品經理對內進行需求分析,業務梳理,對外進行數據收集,用戶調研等。

討論版本需求重點是什么,要做成什么做什么功能,怎么做頁面交互樣式如何,邏輯實現,競品分析,迭代等?通過反復調研、討論、輸出交互方案。

  • 確認需求可行性:產品在輸出交互方案后找相應的開發及UI討論需求方案是否可行,通過達成一致后與需求方確定具體的需求方案。
  • 需求宣講:產品經理將交互方案和實現邏輯完善及需求文檔整合后,拉上項目所有成員及需求方宣講。大家通過商討,確定各個功能實現的難易程度,功能重點性,需求的有效性,后續的迭代延用等。

第二階段:需求研發

項目啟動:需求宣講后,開發人員根據產品需求文檔或者原型設計進行需求評審,評估出研發周期、提測時間、正式發

布時間點:產品根據評審結果發送項目啟動郵件QQ消息告知需求方時間節點。(研發階段理論上需求方就討論方案不得進行大的改動,如果必須要改進或增加內容,需要再次評估后延長工期來改進)

研發階段:需求研發過程中,產品及時跟進研發進度,保持與開發溝通確保需求被正確理解,及時解決研發過程中發現的新問題。如:臨時遇到一些頁面交互效果,可否替代其他交互方案來替代原有方案。一些實現不了的功能是否有其他替代方案等

提測階段:開發完成后,產品驗收相關的項目;測試根據需求文檔及會議討論測試需求功能、邏輯、交互、頁面等,提bug、優化給開發。等待工程師回顧bug,內網環境測試通過后,待產品上線后測試仍需測試線上環境的有效性。

第三階段:版本發布

交付運營:版本發布前可以給運營說明產品的各個功能的使用及頁面交互,以便其更好的推廣使用。

發布:開發將正式包上傳各大安卓市場或ios -appstore提審。(預先準備好相關的審查資料)

升級:新版本確認無問題后,進行版本的更新功能添加。(自帶更新及設置推薦更新等)

運營報告:運營人員在新版本發布后,及時檢查產品的實用性,推廣新版本的APP,讓用戶知曉APP已經上線。進行相關調研收集用戶反饋,進行數據統計、數據分析;評估新版本功能用戶體驗,以便后續迭代開發的有效性。

階段性工作:后續通過用戶的反饋,需求方的反饋收集及競品類網站的分析,制定后續的迭代計劃方案,適時的通過調查問卷,用戶調研等方式更好的理解用戶,為產品優化做充分的準備!

八、備注

地圖功能可以用mapbox來進行研究,點擊地圖坐標顯示房源周邊的設施環境

參考接口文檔:https://www.mapbox.com/api-documentation/#retrieve-places-near-a-location

九、注意事項

1、產品開發的核心在于用戶的體驗使用度,要站在用戶的角度去考慮,接觸一款新的APP,首先需要簡單易用,能快速的找到用戶的痛點,很容易讓用戶第一次使用就找到新奇感,有吸引其使用的視覺體驗操作便捷之處。逐步的捆綁用戶,留存老用戶的同時,不斷迭代優化,吸引新用戶,通過用戶的反饋及競品的分析等途徑,逐漸完善后續的開發設計。

2、開發之前與需求方的溝通技術對接十分重要,需要確定及保留相關的設計流程,溝通記錄等,以免產品上線之后不必要的改動及扯皮。

(題圖由作者提供)

 

作者:Leon(微信號公眾號:產品Leon),一年工作經驗的產品新人,希望大家多多指教!

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 剛認識產品,想知道作者大大學習原型軟件的教程有推薦的嗎~

    來自上海 回復
  2. 我我我提個小小的建議,交互圖可以再優雅一點,文中的有點看的眼花繚亂

    來自廣東 回復
    1. 謝謝你的建議哈,這個是我的處女作哈,后面的新版原型都還沒發布,后續我會發布出來的

      回復
  3. 全是全,但是對于開發來說,未必愿意花時間看那么長的文檔,就算看了也未必都能記得住,文字太多反而會造成遺漏;而且作為一份專門給開發看的文檔,有些關于運營的東西就沒有必要寫進去了

    來自浙江 回復
    1. 謝謝建議哈,時間久了也不確定到底要做成什么樣的prd給開發看才適用

      來自四川 回復
  4. 看到了熟悉的VITA,內容比較詳細,給程序員直接開發是可以的。但是只是簡單的功能堆疊,希望寫些產品設計的思路。為什么要這么做,產品邏輯是什么。例如,哪一塊更希望暴露給用戶,哪里希望用戶更多跳入,哪些是重要功能,哪些是附加功能等等。

    來自北京 回復
    1. 謝謝指點,以后會完善,但有些細節還是不太能公開看的

      回復
  5. 樓主在倫敦上的大學嗎

    來自北京 回復
    1. 紐卡斯爾附近

      回復
  6. 產品學習積累的過程,多反思,總結

    回復
  7. 666

    來自四川 回復
  8. 有什么不足之處,希望大家多多指教!
    也在不斷地摸索學習階段,希望能認識更多的朋友一起學習,提升自我! ??

    來自四川 回復
    1. 真心不錯,說的很清楚

      來自廣東 回復
    2. 謝謝,扔在摸索學習階段
      大家相互學習哈!可以加我微信393697623

      回復
    3. Fighting!

      回復