PRD:倒推“網(wǎng)易嚴選”app產品需求文檔
通過撰寫產品需求文檔(PRD),能夠鍛煉到基本的產品能力,同時也是提高axure操作能力的重要途徑。筆者將以網(wǎng)易嚴選app為例倒推其產品需求文檔,作為小白還希望大家能夠指點迷津,在之后的學習中不斷完善自身能力。
目錄:
一、文檔綜述
1.1 版本修訂記錄
1.2 PRD輸出環(huán)境
1.3 用戶需求分析
二、產品結構圖
2.1 產品功能結構圖
2.2 產品信息結構圖
三、全局說明
3.1 功能權限
3.2 鍵盤說明
3.3 頁面內交互
3.4 頁面異常
3.5 頁面間交互
3.6 更多操作
四、主要業(yè)務邏輯流程
4.1 登錄注冊
4.2 訂單業(yè)務
五、頁面詳細功能說明
5.1 啟動頁
5.2 登錄注冊
5.3 首頁
5.4 識物
5.5 分類
5.6 購物車
六、總結
一、文檔綜述
1.1 版本修訂記錄
1.2 PRD輸出環(huán)境
1.3 用戶需求分析
1.3.1 主要用戶痛點
“嚴選”以及slogan“好的生活,沒那么貴。”道出了用戶的主要痛點:
- 在海量產品中苦于挑選性價比高的生活類商品
- 注重高品質生活但收入有限
1.3.2 需求匯總
二、產品結構圖
2.1 產品功能結構圖
(由于信息量較大,可右鍵點擊“在新標簽頁中打開圖片”查看大圖)
2.2 產品信息結構圖
三、全局說明
3.1 功能權限
功能權限分為登錄/未登錄兩個狀態(tài)。
(1)登錄:登錄狀態(tài)下可進行app內所有操作
(2)未登錄:
- 未登錄狀態(tài)可以搜索商品、查看商品詳情、加入購物車、換購商品、商品分享、查找供應商以及供應商提供的商品、查看眾籌詳情頁、眾籌詳情頁分享、看各類推薦;
- 但是無法查看消息、簽到、邀請返利、打開會員俱樂部、支持眾籌項目、查看我的福利、參與評論、領取優(yōu)惠券、下單、打開個人tab這些需要個人賬號信息的功能。
3.2 鍵盤說明
(1)點擊輸入手機號碼、手機驗證碼時從頁面底部彈出數(shù)字鍵盤;
(2) 點擊輸入其他內容時從頁面底部彈出字母鍵盤。
3.3 頁面內交互
(1)頂部彈窗與底部彈窗
(2)toast彈窗與snackbar彈窗
(3)dialog彈窗
3.4 頁面異常
3.5 頁面間交互
3.6 更多操作
四、主要業(yè)務邏輯流程
4.1 登錄注冊
4.2 訂單業(yè)務
五、頁面詳細功能說明
5.1 啟動頁
頁面邏輯&交互說明:
- 啟動網(wǎng)易嚴選app后,進入歡迎頁(頁面①),歡迎頁等待2秒后進入廣告頁(頁面②);
- 廣告頁不做任何操作等待3秒,進入app首頁;
- 點擊廣告頁圖片立即進入廣告詳情頁,廣告詳情頁可在右上角點擊收藏和分享,在廣告詳情頁點擊返回進入app首頁。
5.2 登錄注冊
觸發(fā)條件:
- 用戶第一次使用網(wǎng)易嚴選;
- 游客用戶執(zhí)行如購買、評論、收藏、與客服溝通、點擊個人賬號模塊、個人消息、簽到、領取禮品等需要用戶賬號信息的操作;
- 退出賬號/登錄新賬號。
5.2.1 登錄
(1)頁面邏輯內容
- 點擊“手機號登錄”,用戶輸入手機號碼,點擊“獲取驗證碼”按鈕;
- 若用戶在60秒內未收到手機驗證碼,點擊“獲取驗證碼”按鈕重新獲取驗證碼;
- 除了驗證碼登錄,老用戶也可選擇手機號碼&密碼或者郵箱賬號&密碼兩種方式登錄;
- 如果在郵箱賬號密碼登錄時忘記密碼,可點擊頁面底部的“忘記密碼”,跳轉到“找回密碼”頁面,經(jīng)過輸入郵箱賬號,拖動滑塊驗證,以及安全驗證之后即可重置密碼;
- 用戶也可以點擊總登錄注冊頁面底部第三方登錄的四個按鈕進行授權登錄。
(2)頁面交互說明
- 點擊輸入手機號、驗證碼文本框,數(shù)字鍵盤從底部彈出;點擊輸入郵箱賬號、輸入密碼文本框,字母鍵盤從底部彈出,輸入密碼時可點擊右側圖標設置是否顯示密碼。
- 點擊“獲取驗證碼”按鈕,按鈕顏色降低灰度,按鈕內容變?yōu)椤?0s”并開始60秒倒數(shù),60秒后按鈕內容重新變?yōu)椤矮@取驗證碼”,恢復原來的灰度。
- 若郵箱登錄忘記密碼,可點擊頁面底部的“忘記密碼”,進入“找回密碼”頁面,點擊輸入郵箱賬號,輸入框下方有列表顯示各個網(wǎng)易系后綴郵箱供選擇,點擊“下一步”,再次輸入郵箱賬號,拖動灰色滑塊,拖動完成拼圖后,滑塊改變狀態(tài)呈現(xiàn)反饋,點擊“下一步”,進入“安全驗證”頁面,輸入綁定郵箱的手機號碼,點擊“獲取驗證碼”,顯示“30s后重發(fā)”進入30s倒計時,輸入驗證碼后,點擊“下一步”重置密碼。
- 點擊總登錄注冊頁面底部第三方登錄的四個按鈕,從頁面中間彈出dialog,從“取消”和“打開”中選擇,按“取消”彈窗消失,按“打開”跳轉到授權界面登錄,按網(wǎng)易的“企業(yè)郵”則直接從右側彈出“企業(yè)郵登錄”頁面,無需彈出dialog選擇,同時從底部彈出字母鍵盤。
5.2.2 注冊
(1)頁面邏輯內容
- 點擊“手機號快捷注冊”,用戶在注冊頁面輸入手機號碼,此后是驗證碼的獲取問題,與登錄一樣就不贅述了;
- 填寫好手機號并輸入驗證碼,繼設置密碼之后,點擊“注冊”按鈕即可完成注冊;
- 除了手機號碼注冊,還能點擊“手機號注冊”頁面中“注冊”按鈕下方的“郵箱賬號注冊”,點擊后進入郵箱注冊頁面,輸入郵箱賬號、輸入驗證手機號,再點擊下方的“請依次點擊a、b、c”(a、b、c 分別為不同的三個漢字)按鈕,彈出圖片驗證,依次正確點擊漢字即可完成驗證;完成驗證后點擊“下一步”按鈕,輸入發(fā)到驗證手機的驗證碼,繼設置密碼之后,點擊“注冊”按鈕即可完成注冊;
- 所有登錄頁面的右上角均有“注冊”按鈕,點擊即可進入“手機號注冊“頁面。
(2)頁面交互說明
- 用戶點擊輸入手機號、驗證碼文本框,數(shù)字鍵盤從底部彈出;點擊輸入郵箱賬號設置密碼文本框,字母鍵盤從底部彈出;
- 驗證碼交互效果與登錄一致;
- 郵箱注冊頁面輸入郵箱號、驗證手機號并依次點擊文字驗證之后,文字驗證按鈕的文本變?yōu)椤膀炞C成功”,跳轉到另一頁面,輸入短信驗,驗證碼倒數(shù)30秒,填入驗證碼設置完密碼之后,點擊“注冊”按鈕即可完成注冊。
5.3 首頁
首頁主要包含搜索、頂部tab對應的各個界面、消息中心、簽到積分中心、會員俱樂部。其中,頂部tab包括推薦、新品、眾籌、福利社、限時購、居家、鞋包配飾、服裝、電器、洗護、飲食、餐廚、嬰童、文體和特色區(qū),除了這些,還包括了下面就對主要的頁面進行說明。
首頁交互說明:
- 消息:點擊屏幕右上角的“消息”,【消息中心】頁面從右側向左側滑入,點擊返回按鈕,【消息中心】頁面向右滑出屏幕;
- 頂部標簽:頂部標簽點擊切換時,標簽文字設置為紅色,文字下面有一條紅線隨著標簽的切換而移動到對應的位置,作為當前頁面的標記,同時,頁面也跟著切換;另外,頂部標簽支持水平滾動查看后面被遮擋的標簽,方便快速切換;
- 全部頻道的展開與收起:在頂部標簽的最右側有個“展開圖標“,點擊之后“全部頻道”從頂部向下滑入,同時頁面顯示遮罩;“全部頻道”上的圓角矩形標簽會以當前頁面為根據(jù),此時處于哪個頁面,對應的圓角矩形標簽文字和邊框都設置為紅色,點擊圓角矩形標簽也可切換到相應的頁面;點擊“收起圖標”,“全部頻道”向上滑動消失,同時遮罩消失。
5.3.1 搜索
(1)頁面邏輯內容
- 搜索頁面包含文本框搜索,歷史記錄和熱門搜索;
- 在搜索文本框輸入信息進行搜索,在搜索的過程中搜索列表會有相關搜索詞供選擇,搜索成功之后進入對應的的商品呈現(xiàn)界面;
- 歷史搜索記錄會被記錄在搜索界面搜索框下面,記錄會按照時間先后排序,后搜索的排在前面;
- 歷史記錄下面還有熱門搜索,包含了活動、還有某類熱搜商品提供給用戶選擇參考。
(2)頁面交互說明
- 點擊搜索文本框,“掃一掃”和“消息”從兩側滑出,搜索文本框和搜索框后面的背景長度以后側為錨點向左側變長,搜索icon移動至對應的位置;
- 進入搜索頁面,文本“取消”從右側滑入屏幕,搜索文本框提示文字消失(app內為隨機提示內容),歷史記錄與熱門搜索界面和鍵盤從底部向上滑出;
- 點擊“取消”,以上步驟倒退;
- 歷史記錄可點擊垃圾桶icon刪除記錄;
- 在搜索文本框輸入文字,會顯示列表承載相關的關鍵詞,點擊關鍵詞進入到商品成列界面,文本框以及文本框背景以左側為錨點向右側變長,“取消”向右滑出;
- 點擊熱門搜索各個板塊,對應的活動界面從右側向左側滑入,普通的商品熱搜界面則直接顯示。
5.3.2 推薦
(1)頁面邏輯內容
- 推薦主要由banner、私人訂制、人氣推薦、品牌制造商直供、嚴選一起拼、猜你喜歡、積分中心、會員俱樂部組成,除了這些之外,還有“新品”、 “眾籌”、 “福利社” 、“限時購” 以及“識物”這幾個標簽的入口;
- 【私人訂制】和【猜你喜歡】都是根據(jù)用戶的搜索數(shù)據(jù)、瀏覽記錄以及加入購物車等用戶行為,系統(tǒng)綜合分析為用戶推薦商品,而“私人訂制”相對于“猜你喜歡”來說,最主要的區(qū)別在于私人訂制會根據(jù)你的操作記錄,進行實時的篩選,如果有記錄的更新,刷新頁面時,“私人訂制”則會更換商品,更具有“實時性”,而“猜你喜歡”所推薦的商品較多,更新的周期更長;
- “人氣推薦”包括編輯選薦、24小時熱銷、人氣周榜、熱銷總榜,其中,編輯選薦在一定程度上依托用戶的操作記錄加上“人氣”的篩選來進行選薦;
- “品牌制造商直供”會推薦四個制造商,點擊進入制造商詳情頁,內容包括制造商名稱、制造商描述、制造商所制造的商品以及可以設置上新提醒,制造商的所有商品提供算法的篩選,包括上新的時間、價格、以及分類;
- “嚴選一起拼”,點擊進入拼團頁面,頁面包括拼團商品以及我的拼團兩個tab,點擊拼團商品進入商品的拼團詳情頁,拼團詳情頁包括商品圖片、商品名稱、拼團價、原價、商品規(guī)格、成團剩余人數(shù)、商品詳情;
- 點擊推薦頁右側靠上的“簽到”可進入【積分中心】,積分中心主要包含當前可用積分、一周簽到情況、賺積分、積分商品,一周簽到滿7天有好禮贈送,查看全部積分商品頁面可按積分區(qū)間進行篩選兌換,分為0-999、1000-2999、3000-5999、6000-9999、10000以上幾個區(qū)間;
- 點擊“會員俱樂部”進入相應頁面,其主要包含用戶賬號頭像、會員等級、我的積分、會員專享特權、升級會員、開通超級會員、會員頭條、每月禮券(每月3日更新)、會員年購服務、會員日(每個月注冊會員的日期有會員專享福利)以及更多優(yōu)惠。
(2)頁面交互說明
- banner自動循環(huán)輪播,設置播放點同步banner對應狀態(tài);
- 滾動推薦頁,當所滾動到的區(qū)域大于等于一個屏幕的長度時,“簽到”圖標,向右滑出消失;若在已超出一個屏幕的長度的情況下滾動回頂部,當滾動回小于一個屏幕長度的區(qū)域時,“簽到”圖標向左滑進;
- 點擊推薦頁右側偏上的“簽到”圖標,【積分中心】頁面從屏幕右側滑入,“積分中心”中的簽到情況可以收起也可展開,點擊“收起”,簽到情況以下的內容(以下叫遮蓋)向上滑動遮住簽到情況,同時顯示“今日簽到得1積分”(即點擊展開區(qū)域),點擊它,遮蓋向下滑動,呈現(xiàn)簽到情況,同時,點擊展開區(qū)域隱藏消失;
- 在推薦頁點擊其他標簽的入口,可進入首頁中其他部分頁面,如點擊“新品首發(fā)”跳轉到【新品】頁面,點擊“限時購”跳轉到【限時購】頁面,點擊“福利社”、“最新眾籌”分別跳轉到【福利社】、【眾籌】頁面,另外,點擊“嚴選一起拼”跳轉到【嚴選拼團】頁面。
5.3.3 新品
(1)頁面邏輯結構
- “新品”tab包含了限時嘗鮮、推薦關注、本期新品、新品放映室、新品預告;
- 限時嘗鮮除了有基本的商品信息,還需標注今日價、明日價、原價,并且依次遞增,點擊立即搶購進入商品詳情頁;
- 本期新品較多,點擊“篩選”可以根據(jù)價格區(qū)間、分類、制造商等進行篩選;
- 新品放映室通過期刊的方式呈現(xiàn),點擊期刊進入可查看這一期期刊的新品推薦介紹;
- 點擊推薦關注和新品預告下的商品直接進入商品詳情頁,在新品預告商品的詳情頁底部點擊“上架”提醒,輸入信息之后,會在上架的時候提醒用戶。
(2)頁面交互說明
- banner自動循環(huán)輪播;
- 點擊“本期新品”中的“價格”,可以點擊設置價格高到低排序,也可以設置從價格低到高排序,點擊“篩選”會從屏幕右側彈出彈出一個比屏幕小的篩選框,同時設置顯示遮罩;點擊設置“價格區(qū)間”時從底部彈出數(shù)字鍵盤,點擊“分類”和“制造商”等圓角矩形標簽時,圓角矩形外框和文字都設置為紅色,并在文字前顯示一個紅色的對勾,再次點擊已選中的圓角矩形則恢復原來的樣式;最多能選擇5個分類和5個制造商,超過5個會以toast的方式提醒用戶;點擊遮罩,篩選框向右滑出消失;
- 新品放映室的期刊以圖片的方式橫向排列,最新一期最靠近屏幕左端,向右滾動可查看往期,點擊圖片,期刊頁面從右側滑入。
5.3.4 眾籌
(1)頁面邏輯內容
- 眾籌頁面包含正在眾籌的項目、眾籌結束的項目兩大部分;
- “正在眾籌”中,有項目的基本信息,點擊“支持項目”進入眾籌詳情頁;點擊“眾籌結束”項目中的“了解項目”也可進入結束項目的眾籌詳情頁;
- 眾籌詳情頁包含商品圖片名稱、商品描述、已籌金額、項目進度、目標金額、支持人數(shù)、剩余時間、眾籌檔位的選擇和商品詳情;點擊底部“我要支持”參與項目眾籌,點擊“關注”關注項目,所關注的項目可在【個人】tab里的“眾籌訂單”進行查看。
(2)頁面交互說明
- banner自動循環(huán)輪播;
- 點擊“支持項目”,從頁面右側彈出眾籌詳情頁,眾籌詳情頁中的商品圖片自動循環(huán)播放;
- 在眾籌詳情頁底部點擊“我要支持”,跳轉到檔位選擇和項目的基本信息頁,再點擊“支持”,從底部彈出商品規(guī)格選擇彈窗,點擊右上角的關閉按鈕或點擊遮罩,規(guī)格選擇彈窗向下滑動消失,遮罩消失。
5.3.5 福利社
(1)頁面邏輯內容
- 福利社包含領券中心、今日折扣、量販組合、我的福利四大塊;
- 領券中心中,券的信息包括券名、適用條件、有效期,如果是“編輯精選券”中的券則顯示搶券的進度;點擊立即領取,添加到【個人】的“優(yōu)惠券”中;
- 點擊頂部櫥窗式廣告圖進入廣告專題頁面。
(2)頁面交互說明
- 點擊“編輯精選券”中優(yōu)惠券的“立即領取”,彈出toast“領取成功”、“立即領取”矩形中的文字變?yōu)椤傲⒓词褂谩鼻覟榘椎准t邊紅字的樣式,toast停留2000毫秒后逐漸消失;
- 當頁面滾動超過屏幕一定長度(半屏以內)時,會顯示便捷標簽切換欄并固定于福利社頁面頂部;繼續(xù)往下滾動,當滾動到不同的內容區(qū)域時,便捷標簽切換欄會自行切換到對應到狀態(tài);點擊便捷標簽切換欄也會滾動的相應的位置;
- 點擊“量販囤貨”中的購物車圖標,逐漸顯現(xiàn)規(guī)格選擇彈窗,同時遮罩遮住底下頁面,點擊規(guī)格選擇彈窗右上角的關閉按鈕,彈窗和遮罩逐漸消失。
5.3.6 限時購
(1)頁面邏輯結構
- 廣告圖下有一個橫條,橫條中的每個格子標注著時間以及搶購狀態(tài),從左到右搶購的時段依次推后,點擊不同時段可以查看不同時段場次的搶購商品,若商品還有剩余則可繼續(xù)搶,若已搶完會在商品圖片上顯示“已搶完”,還可查看該商品的詳情;
- 橫條中的時段分為“已開搶”“搶購中”和“即將開始”三個大時段,點擊“即將開始”的時段,在頁面中,點擊“開搶提醒”后輸入手機號碼,系統(tǒng)會在該時間段開始前一段時間通知用戶;
- 點擊頁面底部的“查看全部限時特價”,跳轉到“今日特價”頁面,查看當日的限時特價商品。
(2)頁面交互說明
- 點擊橫條中的不同時段,時段標簽的樣式變?yōu)槌鹊装鬃?,移動橫條,使所點擊的標簽在屏幕居中,并且切換到相應的搶購商品頁面;
- 點擊“即將開始”時段中的“開搶提醒”,顯示出一個dialog,伴隨著遮罩,dialog中默認填寫了注冊賬號所用的手機號碼,中間四位以*顯示;輸入好手機號碼后點擊“確定”即可設定開搶前提醒,點擊“取消”或遮罩,dialog和遮罩消失。
5.4 識物
(1)頁面邏輯內容
- 【識物】頁面包含了幾大推薦,分別是嚴選推薦、丁磊的好貨推薦、挑款師推薦、嚴選HOME、嚴選LOOK、新品放映室、口碑商品、特色系列以及十點一刻,這些推薦都是以文章的形式呈現(xiàn),點擊進去會有一些專題或者單品的推薦文章;
- 推薦商品的文章可轉發(fā)、收藏以及評論,在“十點一刻”的話題中,評論可按照熱度以及時間向后來排序呈現(xiàn),另外還可點擊“關注”關注該話題。
(2)頁面交互說明
- 頂部櫥窗展示,設置自動循環(huán)播放以及拖動效果;
- 推薦欄設置拖動,向右拖動結束時,若推薦欄的最左側離開了屏幕左側,則移動回屏幕的左側。同理,向左拖動結束時,若推薦欄的最右側離開了屏幕的右側,則移動回屏幕的右側;
- “十點一刻”中的話題欄跟推薦欄的交互動作一樣;
- 點擊推薦文章或者話題,文章頁面以及話題頁面從右側滑入。
5.5 分類
(1)頁面邏輯內容
- 分類包含了推薦專區(qū)、爆品區(qū)、夏季專區(qū)、特色區(qū)以及多個生活用品細分種類,其中,推薦專區(qū)、爆品區(qū)、夏季專區(qū)頁面的頂部是廣告圖片,而生活用品細分種類頁面的頂部則是該類別的24小時熱銷榜;
- 每個細分類別的詳細頁面,還有更細分的模塊,如居家里的“夏涼”“床品件套”等再細分類別;
- 分類頁面提供搜索入口。
(2)頁面交互說明
- 搜索的交互與主頁幾乎一樣,少了“掃一掃”與“消息”的顯示和隱藏,大致就是點擊搜索文本框,移動搜索icon到一定位置,改變搜索背景和搜索文本框的尺寸,“取消”從右側滑入,搜索頁面以及鍵盤向上滑動顯示;點擊“取消”,搜索icon回到原來的位置,搜索背景以及搜索文本框的尺寸也恢復原樣,搜索頁面和鍵盤向下滑動消失;
- 點擊左邊的分類標簽,文字變?yōu)榧t色,小紅條移動到對應位置,同時右邊呈現(xiàn)對應頁面;由于側邊標簽的內容顯示區(qū)域有限,點擊“爆品區(qū)”時,移動側邊標簽到能看到“推薦專區(qū)”的位置(側邊欄原來的位置),點擊“文體”時,移動側邊標簽到能看到“特色區(qū)”的位置(相對于原來的位置上移一定距離)。
5.6 購物車
(1)頁面邏輯內容
- 點擊商品,進入商品詳情頁,可收藏、咨詢客服、看評論以及查看商品詳情,還要選擇規(guī)格;
- 在購物車頁面選中商品,判斷是否滿足“免郵”條件以及“全場加價購”條件,若滿足則在對應的地方顯示反饋,如果滿足“全場加價購”,會提供一個換購的入口;
- 購物車頁面可領優(yōu)惠券、編輯購物車中的商品、添加刪減商品數(shù)量;
- 點擊下單跳轉到“填寫訂單”頁面,用戶可以編輯地址、手機號碼以及查看有無可用優(yōu)惠券、具體用哪張優(yōu)惠券;“填寫訂單”有商品合計價格、活動優(yōu)惠以及運費的信息;另外,可以勾選是否要開發(fā)票;必須同意協(xié)議才能付款。
(2)頁面交互說明(部分交互)
- 點擊勾選商品的“白色圓圈”,圓圈上會顯示紅色的勾選圈,下面全選旁邊的白色圓圈同樣也會顯示紅色的勾選圈;“全選”字眼變?yōu)椤耙堰x(n)” n代表購買數(shù)量,總價格通過單價*數(shù)量的算法算出并顯示在“下單”左邊,“下單”矩形填充紅色;
- 點擊“白色圓圈”時,需判斷是否滿足“免郵”條件以及“全場加價購”條件,若滿足則在對應的位置顯示滿足的反饋;
- 點擊“紅色勾選圈”,紅色勾選圈消失,設置文字,“已選(n)”變回原來的“全選”,總價格設置文字為0,“下單”恢復回原來的樣式(灰色底);
- 點擊商品右邊的加減號,設置算法,文本框中的數(shù)字會根據(jù)加減而改動,同時,總價格也會以單價*數(shù)量=總價格的算法同步數(shù)據(jù),按減號時,文本框中的數(shù)字不能小于1;
- 點擊右上角“領券”,“優(yōu)惠券”彈窗向上滑動顯示,點擊領取,以toast顯示“領取成功”,停留一段時間后消失,點擊下拉按鈕可查看購物車中適用該優(yōu)惠券的商品;點擊彈窗右上角的X或遮罩,“優(yōu)惠券”彈窗向下滑出,同時遮罩消失。
六、總結
嚴選作為一個購物商城,它的信息以及功能框架都非常龐大,用戶操作界面眾多,交互動作繁瑣復雜,我在這里也只是根據(jù)現(xiàn)有的網(wǎng)易嚴選app進行文檔倒推,對主要業(yè)務流程、主要窗口的頁面邏輯以及交互進行簡要分析和說明。
目前筆者也只是在很新手的階段,在撰寫文檔的過程中難免會有一些不足之處,希望大家能指出錯誤或者改進的建議,在以后的學習中會加以注意和改善。
本文由 @?方大仁 原創(chuàng)發(fā)布于人人都是產品經(jīng)理。未經(jīng)許可,禁止轉載
題圖作者提供
很棒,學到了!
交互是用axure做的么
很好奇你的后臺原型,作者能否也曬一曬后臺原型,讓我們學習學習,謝謝
沒開公眾號噢 可能工作了會開^_^
請問一下畫原型時如何確定每個元件的大小或比例呢?
可以自己創(chuàng)建一個元件庫,把你想要的元件按照想要的尺寸大小調整好,然后保存元件庫,重開axure就可以用自己建的元件庫了。
產品信息結構中是如何確定包含哪些內容的呢?對產品信息結構不懂,為什么首頁是信息結構中的一個分支?
你可以看看這個理解一下:https://m.admin5.com/article/20171122/802241.shtml
至于信息結構放“首頁”是因為我覺得類似眾籌、福利社、限時購等信息不是一般軟件的常見信息,所以我就把他們都歸到“首頁”里,這里的“首頁”只是個載體,便于理解就好了。
有一些比較通用的規(guī)范,比如iOS的導航欄、字體,web當中默認的分辨率這些,雖然最終是由UI設計師輸出設計稿,但是你要知道,并不是自己想多高多寬
可以的~標明出處即可
贊 學習了
對應的后臺管理系統(tǒng)需要出需求文檔嗎
這算是個理想化的文檔用來梳理功能可以,不過要作為PRD還需要很多內容,真正做的過程中是有各種細節(jié)、各種規(guī)則、各種坑的
是的 各種細節(jié)和規(guī)則還需要在真實的實踐中不斷總結學習
挺耐心的。。。但是這樣寫完一套我覺得對產品運行邏輯了解沒什么幫助,這樣寫篇文稿來所謂練手其實沒什么必要,入職后多被上司抓著改幾稿就懂了。前黑豬飼養(yǎng)員,可恥的匿了
這是按照app寫的PRD么
你是產品經(jīng)理,不是交互設計師
多考慮點異常路徑,需求覆蓋,讓開發(fā)兄弟少懟你,讓測試兄弟早改幾遍測試用例
公司沒有交互的時候,原型還是要產品來出的。大廠另說~ 多掌握一項技能也是好事
這些GIF怎么做的啊
樓主我想問問有什么快速畫原型的技巧
我也是剛學習原型的,我覺得一些常用的部件或組合可以統(tǒng)一放在一個頁面,需要時調用,這樣也是提高效率的一種方法吧。
試試用sketch 去畫,我一般直接畫成ui圖了,效果跟真app一樣,高保真原型,在趕的時候,開發(fā)都可以直接拿去開發(fā)功能了,后期再替換ui都可以。
寫的是用戶需求,篇章1.3可以寫產品需求嗎?什么時候需要細化成用戶需求呢?
用戶需求確實可以省略,產品需求在下面有闡述。
我的licecap用起來會失幀,怎么回事
我也是,不知道什么問題。
謝謝分享
建議以后寫PRD時多考慮不正常的情況,那才是研發(fā)希望看到的PRD,因為他可以更少的替你想東西。比如登錄頁,就有很多地方需要去細想。
手機號做不做驗證,是所有手機號都能輸入還是注冊過的能輸入?輸入錯了提示什么。打開沒網(wǎng)怎么辦。驗證碼要幾位?需要有字母嗎?驗證碼錯了怎么辦,一直驗證碼錯誤怎么辦,忘記密碼怎么辦,每個輸入框的每種情況都是需要產品經(jīng)理需提現(xiàn)想好需求來告訴研發(fā)的。
是的 這個方面需要說明 在之后的學習中會多加注意
同意,需求文檔是要像研發(fā)知道他們該怎么做,原型能展示的只是前端頁面的交互,那么后臺的邏輯是不是也要展現(xiàn)出來呢?(原型能用截圖就別自己去畫,快速、高效) 加油?。?!
你好,作者可以加微信嗎?看了你的文章,有些東西想請教。CCTV-yue
照貓畫虎
同感 食人牙儈
感覺你寫得好棒,我也是在校生準備當產品經(jīng)理的,方便的話可以加下微信交流一下嗎?(Fantasy061215)
可以的
業(yè)務邏輯梳理時,不要把所有主要功能的邏輯都放在同一個圖里,不是很專業(yè)而且很亂
看錯了,挺好的
照著畫一遍,,現(xiàn)在都很喜歡復盤哈
啊哈啥時奧斯卡卡薩
在學校已經(jīng)開始做這些事是很不錯的贊一下,但有些問題需要主意一下,首先信息架構那個地方?jīng)]必要如此繁雜,很多運營位的動態(tài)內容你都細致的列舉出來了,比如分類那些。其次對于功能的內部邏輯描述比較模糊,這個給到開發(fā),你要做好挨打的準備,比如你那個推薦系統(tǒng)的描述。再次是內部邏輯的描述有些沒有想的細致,比如你的泳道圖首先角色劃分就不是一個維度的,里面的內部邏輯問題較多。還有就是前后臺很多數(shù)據(jù)交互的問題沒有說,即使是逆向推產品這些前后臺數(shù)據(jù)交互的東西還是要去寫的。其他的,嗯,原型做的很用心,哈哈,但還是提醒你做這種原型是非常費時間的,所以在練習的過程中要注意把控時間,因為公司里時間就是金錢。
非常感謝你的詳細解讀,有些地方確實是欠缺的,我想問一下,因為現(xiàn)在還在讀,也沒有經(jīng)歷過什么項目,有什么途徑可以學習掌握一些功能的內部邏輯和前后臺數(shù)據(jù)交互呢?求指點迷津,感謝!
做的很用心,從你這get到很多技能
謝謝你的肯定~
發(fā)現(xiàn)gif在Word里動不了,保存成html有些內容又會丟失。所以有什么好方法呢。挺喜歡這種展示形式,文檔寫得也挺用心。立馬下了licecap,然后被現(xiàn)實狠狠打擊。。
就是想要一個軟件可以承載文字+圖片+動圖,然后一起呈現(xiàn)是嗎? 另外生成html內容丟失具體是什么情況。 ??
這樣做不會覺得太麻煩嗎?我自己一般是用電子表格把功能點列出來,那些界面放那些功能這樣分好。后面寫清楚功能說明,然后交互邏輯我是畫好原型之后在圖片下面說明的。個人比較討厭看長篇,開發(fā)也討厭。不知道像我這樣做有什么不好的地方?求指教
我還是在校生,寫這篇文章主要是為了鍛煉自己撰寫需求文檔的能力,所以在效率上會有所欠缺。哪些部分簡寫哪些需要詳寫,這個需要根據(jù)優(yōu)先級來撰寫。我還沒參加工作,有很多東西還需要學習,個人覺得,在工作中不管以何種方式,只要想法的傳遞能夠被團隊的開發(fā)或者設計等所接受,并且能夠高效地完成工作就足夠了,然后在工作中不斷總結、思考并改善,形成團隊的高效工作流。
回復太長了不能評論,給你做了個html5鏈接跳轉過去看吧 http://d.u.h5mgd.com/c/4vgl/b57t/index.html
我是學生但我還是理解一個道理:如果你的方式能夠跟開發(fā)或者設計很好的對接,那就是好的方式,就跟你老師的說法一樣,沒有固定的模式 主要是找到“對”的方式。我還沒工作,當然會有一些情況預料不到,在以后的工作中,我也是需要不斷學習的,不斷優(yōu)化改善我的文檔的,不斷去找到最高效的方式。你覺得你的更高效是很正常的,高效在哪,好在哪,我建議你可以去找領導談談給個理由讓他信服你會比較好~
妥妥的
尼古拉斯可否交流一下工作方式,我初接觸的也是用表格較多
看了你的評論,真的是說到點上了,開發(fā)需要看到的邏輯有沒有問題,功能交互他們一看就知道怎么實現(xiàn)了,不需要做的這么詳細,不然開發(fā)看著也累。不過領導可能真的喜歡這么細致的文檔,認為這樣做的文檔體現(xiàn)了你的態(tài)度認真;不過還好我們領導不這么細致關心這些。不過這位老兄做的這個拿去面試,肯定是招人喜歡的。
對,有何比較好的方式能夠一起呈現(xiàn)。話說做個原型圖把所有交互弄上去如此細致,你有心了。會有人覺得這么做工作量什么的會增加很多,而且原型設計起來麻煩,用語言描述清楚就好了,我倒是覺得這種方式雖然在設計上的確增加了很多工作量,不過能夠給開發(fā)最直觀地展現(xiàn)產品,最直觀地說明產品的交互,其實進一步的提升了整個產品開發(fā)的效率不是?同小白一枚。
感謝你的認可和支持!一起呈現(xiàn)的話我想到的是用Axure撰寫文檔(圖文+交互原型),做完之后點擊axure里的“發(fā)布”-“發(fā)布到AxShare”,這時復制左下角的地址,在瀏覽器中瀏覽就能做到一起呈現(xiàn)了,只不過它有分頁面的,需要點進不同頁面進行查看,實質上跟這個是差不多的,不知道這個是不是你想要的一起呈現(xiàn)的方式。
謝謝你,學習到很多。
同小白,想問下流程圖是VISIO畫的嗎?如何將操作AXURE的圖做成gif
流程圖用的Xmind,gif的話用licecap
補充:流程圖用Axure做的…
寫的非常細致,問下這個動態(tài)圖是怎么生成的,什么軟件。
我是用licecap錄的
這個動態(tài)圖實際用axure也是可以全部實現(xiàn)的
這個原型和gif圖是什么軟件做的
原型是Axure gif是icecap
gif是licecap 打漏了
下載了,非常好用,非常感謝。
小白的秘籍