OmniGraffle原型案例 | 某APP產品原型PDF文件分享之二

9 評論 29085 瀏覽 779 收藏 6 分鐘

各位朋友們大家好,在上一篇文章中 LY@iPM分享了筆者從1.0.0開始跟的一個項目——樂寵(后改名為「尾巴圈」)的SNS 論壇部分「OmniGraffle原型案例 | 某APP產品原型PDF文件分享」,今天我跟大家分享下 Ta 的B2C電商部分的原型設計。

1、從 App 首頁進入商城

App底部 Tab有社區、商城,我們點擊「商城」進入「樂寵商城」,下面簡稱商城。商城采用的是經典的宮格式導航設計(還有普通列表式、和瀑布流列表式、或兩者皆有等),主要有搜索欄、Banner 輪播、類目、新品、團購、購物車、秒殺、品牌館、以及口碑商品。

1

2、說說那些商品列表

樂寵商城 v1.0.0的列表有6種,分別是,類目、品牌、好評、新品、秒殺、團購,顧名思義不必贅述。

6

3、搜索商品

點擊「商城首頁」的搜索欄,輸入關鍵字,即可搜索。搜索結果列表,按照銷量排序。如果搜不到,就提示用戶重新搜索。

4

4、商品詳情

商品詳情頁面,除了有商品的大圖展示以及全屏瀏覽模式、收藏和分享功能、商品詳細信息以外還有商品評價、添加購物車、數量編輯、智能推薦商品和聯系客服功能。

5

5、購買流程

挑選好心儀的商品之后,選擇好購買的數量,就可以將商品添加到購物車中了。進入購物車頁面之后,仍然可以調整購買商品的數量。點擊「提交訂單」后,進入填寫訂單信息頁面,當沒有收件人信息的時候,App 會讓用戶先填寫收件人信息,如果有一項或多項收件人信息,App 還支持選擇和編輯該信息。填寫完成后,點擊提交訂單,新的訂單就生成了,此時在「我的訂單」中的待付款訂單中就可以看到該訂單了。點擊「在線支付」按鈕,跳進「收銀臺」界面,該界面展示該訂單的單號,應付金額,以及可選的支付方式。支付成功后,提示用戶支付成功!新訂單的生命周期是30分鐘,30分鐘內訂單若沒有被支付,系統將會殺掉該訂單,但在訂單到期之前10分鐘,系統會自動提示用戶將有一個訂單因未支付而將被取消。

8

6、我的商城

點擊首頁右上角的「個人中心」icon進入右抽屜,點擊我的商城折疊,可以看到「我的訂單」、「我的收藏」、「我的地址」。

3

7、我的訂單

我的訂單分為四種狀態:待付款、待發貨、待收貨、已完成(比較特殊)。

其中待付款訂單:訂單狀態是「待付款」,詳情頁面上有「支付按鈕」,訂單總額,運費,訂單內容,收貨人信息,支付方式,配送方式和「取消訂單」按鈕。

待發貨訂單,除了在「訂單狀態」字段上與「待付款」不同之外為「等待發貨」,其它字段都基本一致。

而待收貨訂單,與待發貨訂單也基本一致,只是多了「確認收貨」按鈕。

12

針對,已完成訂單,則有三種子狀態,「已評價」、「待評價」、「退款中」。

哈哈,說到這兒肯定還有好多細節沒有說得特別透徹,不過發現篇幅已經不短了!詳細的可以去本文的最后神秘代碼繼續挖掘,那里有高清的 pdf 噢!

最后,奉上OmniGraffle項目特寫照:

12

神秘代碼

鏈接: http://pan.baidu.com/s/1kUlmSKZ 密碼: w2xj

 

作者:老楊(微信:18515367283),Mac 流產品經理一枚,5年產品人,歡迎隨時加我討論相關問題!

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問sketch做了組件可以導入ominigraffle嗎

    來自北京 回復
  2. 附件下載不了

    來自北京 回復
  3. OmniGraffle用著很舒服呀,樓主厲害 ??

    來自北京 回復
  4. 高端大氣上檔次的趕腳

    來自北京 回復
    1. 謝謝支持

      來自北京 回復
  5. ?? ??

    來自北京 回復
  6. 請教 原型是用什么做的?

    來自江蘇 回復
    1. 是用 Mac 平臺下的 OmniGraffle 做的

      來自北京 回復
  7. 來自北京 回復