OmniGraffle原型案例 | 某APP產品原型PDF文件分享之二
各位朋友們大家好,在上一篇文章中 LY@iPM分享了筆者從1.0.0開始跟的一個項目——樂寵(后改名為「尾巴圈」)的SNS 論壇部分「OmniGraffle原型案例 | 某APP產品原型PDF文件分享」,今天我跟大家分享下 Ta 的B2C電商部分的原型設計。
1、從 App 首頁進入商城
App底部 Tab有社區、商城,我們點擊「商城」進入「樂寵商城」,下面簡稱商城。商城采用的是經典的宮格式導航設計(還有普通列表式、和瀑布流列表式、或兩者皆有等),主要有搜索欄、Banner 輪播、類目、新品、團購、購物車、秒殺、品牌館、以及口碑商品。
2、說說那些商品列表
樂寵商城 v1.0.0的列表有6種,分別是,類目、品牌、好評、新品、秒殺、團購,顧名思義不必贅述。
3、搜索商品
點擊「商城首頁」的搜索欄,輸入關鍵字,即可搜索。搜索結果列表,按照銷量排序。如果搜不到,就提示用戶重新搜索。
4、商品詳情
商品詳情頁面,除了有商品的大圖展示以及全屏瀏覽模式、收藏和分享功能、商品詳細信息以外還有商品評價、添加購物車、數量編輯、智能推薦商品和聯系客服功能。
5、購買流程
挑選好心儀的商品之后,選擇好購買的數量,就可以將商品添加到購物車中了。進入購物車頁面之后,仍然可以調整購買商品的數量。點擊「提交訂單」后,進入填寫訂單信息頁面,當沒有收件人信息的時候,App 會讓用戶先填寫收件人信息,如果有一項或多項收件人信息,App 還支持選擇和編輯該信息。填寫完成后,點擊提交訂單,新的訂單就生成了,此時在「我的訂單」中的待付款訂單中就可以看到該訂單了。點擊「在線支付」按鈕,跳進「收銀臺」界面,該界面展示該訂單的單號,應付金額,以及可選的支付方式。支付成功后,提示用戶支付成功!新訂單的生命周期是30分鐘,30分鐘內訂單若沒有被支付,系統將會殺掉該訂單,但在訂單到期之前10分鐘,系統會自動提示用戶將有一個訂單因未支付而將被取消。
6、我的商城
點擊首頁右上角的「個人中心」icon進入右抽屜,點擊我的商城折疊,可以看到「我的訂單」、「我的收藏」、「我的地址」。
7、我的訂單
我的訂單分為四種狀態:待付款、待發貨、待收貨、已完成(比較特殊)。
其中待付款訂單:訂單狀態是「待付款」,詳情頁面上有「支付按鈕」,訂單總額,運費,訂單內容,收貨人信息,支付方式,配送方式和「取消訂單」按鈕。
待發貨訂單,除了在「訂單狀態」字段上與「待付款」不同之外為「等待發貨」,其它字段都基本一致。
而待收貨訂單,與待發貨訂單也基本一致,只是多了「確認收貨」按鈕。
針對,已完成訂單,則有三種子狀態,「已評價」、「待評價」、「退款中」。
哈哈,說到這兒肯定還有好多細節沒有說得特別透徹,不過發現篇幅已經不短了!詳細的可以去本文的最后神秘代碼繼續挖掘,那里有高清的 pdf 噢!
最后,奉上OmniGraffle項目特寫照:
神秘代碼
鏈接: http://pan.baidu.com/s/1kUlmSKZ 密碼: w2xj
作者:老楊(微信:18515367283),Mac 流產品經理一枚,5年產品人,歡迎隨時加我討論相關問題!
本文由 @老楊 原創發布于人人都是產品經理?,未經許可,禁止轉載。
請問sketch做了組件可以導入ominigraffle嗎
附件下載不了
OmniGraffle用著很舒服呀,樓主厲害 ??
高端大氣上檔次的趕腳
謝謝支持
?? ??
請教 原型是用什么做的?
是用 Mac 平臺下的 OmniGraffle 做的
好