筆者以安卓系統(tǒng)手機(jī)端用戶的身份通過使用、體驗和分析等方式來倒推“小紅書”APP，并生成產(chǎn)品需求文檔PRD。小紅書app是以用戶分享內(nèi)容(UGC)模式闖入到大家視線的，并且在某寶日益強(qiáng)大的趨勢下，帶有購物功能的小紅書仍能大勢前進(jìn)。

文檔目錄：

一、文檔綜述

1.1版本修訂記錄

1.2PRD輸出環(huán)境

1.3產(chǎn)品介紹

二、產(chǎn)品分析

2.1用戶需求分析

2.2用戶定位

三、產(chǎn)品結(jié)構(gòu)

3.1產(chǎn)品功能結(jié)構(gòu)圖

3.2產(chǎn)品信息結(jié)構(gòu)圖

四、全局說明

4.1功能權(quán)限

4.2鍵盤說明

4.3頁面內(nèi)交互

4.4頁面異常

4.5頁面間切換交互方式

4.6更多操作

五、用戶操作主流程(筆記篇)

六、頁面邏輯(用戶瀏覽筆記為主邏輯)

七、頁面詳細(xì)功能說明

7.1啟動頁

7.2登陸/注冊頁

7.3“發(fā)現(xiàn)”頁面

7.4“關(guān)注”頁面

7.5“購買”頁面

八、測試異常頁面及突發(fā)狀況

8.1網(wǎng)絡(luò)異常

8.2登錄異常

8.3數(shù)據(jù)丟失

九、問題探索&改進(jìn)意見

十、總結(jié)

一、文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產(chǎn)品介紹

“小紅書”于2014年3月上線，是一款以用戶分享內(nèi)容（UGC）的信息平臺為定義的手機(jī)端App，用戶可以通過這款A(yù)pp發(fā)現(xiàn)全世界的好東西，并且完成線上購物。用戶可以上傳自己的使用心得，海外購物用戶還可以獲得詳細(xì)的產(chǎn)品攻略。

“小紅書”移動端App，滿足用戶在手機(jī)端使用產(chǎn)品時的基本功能主要包括用戶瀏覽其他用戶的分享內(nèi)容、用戶發(fā)布分享內(nèi)容、在線購物等。

二、產(chǎn)品分析

2.1 用戶需求分析

伴隨著網(wǎng)絡(luò)購物時代的興起，更多的消費者趨向于海外市場購物，但一些外界因素影響海外購物：

（1）海外購物缺少受信任的專屬平臺；

（2）不能第一時間了解流行趨勢和新品上市情況；

（3）不了解商品真實的用戶體驗心得；

（4）海外購物費時費力費錢。

2.2?用戶定位

（1）缺少時間和能力進(jìn)行海外購物的消費者；

（2）愿意在網(wǎng)絡(luò)平臺上展示與分享的互聯(lián)網(wǎng)用戶；

（3）熱衷于化妝品、保健品類商品的消費者；

（4）海外購物追求貨真價實的消費者；

（5）追求海外購物便捷快速的消費方式。

三、產(chǎn)品結(jié)構(gòu)

3.1 產(chǎn)品功能結(jié)構(gòu)圖

（右擊，在新標(biāo)簽頁中打開即可查看）

3.2 產(chǎn)品信息結(jié)構(gòu)圖

（右擊，在新標(biāo)簽頁中打開即可查看）

四、全面說明

4.1 功能權(quán)限

（1）分為登錄未狀態(tài)和登錄狀態(tài)

（2）未登錄狀態(tài)下，智能看到不斷循環(huán)的小視頻

• 手機(jī)號登錄
• 第三方登錄:微信、QQ、微博、Facebook登錄

（3）登錄狀態(tài)下可以進(jìn)行APP內(nèi)所有操作

4.2 鍵盤說明

（1）點擊手機(jī)號輸入框時?面底部彈出數(shù)字鍵盤;

（2）點擊搜索框、編輯筆記框或評論框時?面底部彈出字母全鍵盤。

4.3 ?面交互說明

（1）說明信息、提示/警告信息、更新信息

（2）底部、左側(cè)彈窗

4.4 ?面異常

4.5 ?面間切換交互方式

在當(dāng)前頁面左邊緣處用右劃手勢快速返回之前頁面

4.6 更多操作

五、用戶操作主流程（筆記+購物）

從小紅書APP用戶操作流程可以看出，小紅書主要推廣筆記功能，為了更好的查看用 戶感興趣的筆記，提高用戶互動性，小紅書從開始使用就要求賬戶登錄。通過瀏覽其 他用戶的筆記發(fā)現(xiàn)更多的好物，從而更加放心開啟購物環(huán)節(jié)。

六、?面邏輯

七、?面詳細(xì)功能說明

7.1 啟動頁

當(dāng)進(jìn)入到小紅書APP后，無論是手機(jī)是否連接到網(wǎng)絡(luò)，頁面背景會反復(fù)播放一 段宣傳片的小視頻。

（1）已經(jīng)連接網(wǎng)絡(luò)

頁面邏輯：

• 在已經(jīng)連接網(wǎng)絡(luò)的情況下，啟動app直接進(jìn)入到視頻頁面；
• 如果用戶不操作頁面，視頻也不會受影響一直播放視頻，也不會產(chǎn)生其他提示信息；
• 用戶可以直接通過小紅是賬號登錄，也可以選擇第三方賬號登錄；
• 任意方式登錄完畢后即可進(jìn)入到首頁劉啦內(nèi)容。

（2）登錄未連接網(wǎng)絡(luò)

在未連接網(wǎng)絡(luò)的狀態(tài)下，app直接進(jìn)入到異常提醒頁面，并提醒重新加載頁面。

提示信息一直顯示網(wǎng)絡(luò)不給力稍后再試，即使是網(wǎng)絡(luò)設(shè)置沒有連接網(wǎng)絡(luò)，這樣的提示容易誤解為網(wǎng)絡(luò)速度滿造成的，沒有給用戶一個好的引導(dǎo)。

7.2 登錄/注冊頁

小紅書APP采用了手機(jī)號與驗證碼登錄，或手機(jī)號與密碼登錄，再或者4種第三方賬號登錄的方法，這樣對于首次登錄的用戶來說省去了注冊的環(huán)節(jié)。用戶可以直接用手機(jī)號碼并短信驗證完成登錄，用第三方賬號登錄，若手機(jī)第三方賬號是已登錄狀態(tài)，第三方授權(quán)即可；若手機(jī)中沒有第三方app或是沒有登錄，輸入賬號和密碼即可完成登錄。這樣的登錄方式對于首次使用該app的用戶來說，省去注冊麻煩也可快速體驗到app主要功能。

（1）登錄/注冊頁面

頁面邏輯內(nèi)容：

• 用戶輸入手機(jī)號碼后，點擊確定鍵接收6位數(shù)驗證碼，頁面即跳轉(zhuǎn)到輸入驗證碼頁面，并開始倒計時60秒，60秒后倒計時處變?yōu)橹匦掳l(fā)送按鈕；
• 若60秒內(nèi)沒有收到驗證碼，就等60秒后“重新發(fā)送”出現(xiàn)后點擊后即可重新獲得新的驗證碼；
• 用戶在收到驗證碼3分鐘內(nèi)輸入驗證碼才有效；
• 老用戶可以用手機(jī)號碼和驗證碼登錄，也可以手機(jī)號碼和密碼登錄；
• 用戶也可以點擊底端4個第三方按鈕，調(diào)出其授權(quán)端口進(jìn)行登錄。

頁面交互說明：

• 用戶點擊登錄，頁面跳轉(zhuǎn)到輸入手機(jī)號登錄頁面，點擊“輸入手機(jī)號碼”處，鍵盤才跳出；
• 輸入好手機(jī)號碼后點擊確定按鈕，頁面跳轉(zhuǎn)到輸入驗證碼頁面并開始60秒倒計時，鍵盤自動跳出，用戶自己調(diào)到數(shù)字鍵盤；
• 60秒倒計時結(jié)束后，重新發(fā)送字樣變?yōu)樗{(lán)色，即可點擊重新獲得新的驗證碼；
• 用戶點擊密碼登錄按鈕，頁面調(diào)到密碼登錄頁，鍵盤隨之跳出來；
• 用戶點擊4個第三方，授權(quán)頁面從頁面右側(cè)彈出。

（2）登錄/注冊功能邏輯流程

7.3 “發(fā)現(xiàn)”頁面

在小紅書APP中，如果用戶想要用瀏覽功能，采用的是從上向下瀏覽的方式，如果用戶想要使用某項功能的時候，是從左側(cè)和右側(cè)來尋找的。因此，介紹某一頁面的時候采用從上至下的方式，介紹某些功能時采用從左至右的方式。

（1）頁面名稱：“發(fā)現(xiàn)”筆記頁

（2）頁面入口：啟動小紅書app直接進(jìn)入到“發(fā)現(xiàn)”頁

（3）頁面結(jié)構(gòu)

• 瀏覽內(nèi)容切換區(qū)
• 筆記、商品和用戶搜索框
• 用戶切換標(biāo)簽區(qū)
• 查看筆記內(nèi)容入口
• 查看筆記用戶的其他內(nèi)容入口
• 筆記受歡迎程度
• 關(guān)于用戶個人的所有操作內(nèi)容都聚集在此
• 上傳筆記的入口
• 查看所有消息入口
• 查看購物車商品入口

（4）邏輯內(nèi)容詳細(xì)說明

1）瀏覽內(nèi)容切換區(qū)：系統(tǒng)默認(rèn)“發(fā)現(xiàn)”是首頁，點擊標(biāo)題可以切換到“關(guān)注”或“商品”頁面。

頁面交互說明：

• 啟動小紅書app直接進(jìn)入到“發(fā)現(xiàn)”頁，“發(fā)現(xiàn)”字樣下面有一個紅色的橫線，點擊“關(guān)注”字體會出現(xiàn)一個淡灰色的長方形背景1秒鐘消失；
• 灰色長方形出現(xiàn)后，紅色橫線立即向左快速移動到“關(guān)注”下方；
• 當(dāng)紅色橫線向左移動時，“關(guān)注”也內(nèi)容也隨之快速向右移動出現(xiàn)；
• 紅色橫線向右移動，內(nèi)容頁面從右向左移動；
• 快速點擊兩次標(biāo)題，內(nèi)容頁面可以快速返回到頁定；
• 快速點擊兩次標(biāo)題，標(biāo)簽行下方出現(xiàn)紅色圓圈旋轉(zhuǎn)標(biāo)識正在更新內(nèi)容，有新內(nèi)容被更新時有提示信息出現(xiàn)在標(biāo)簽行下方停留1秒鐘然后消失。

2）筆記、商品和用戶搜索框：點擊搜索框自動跳轉(zhuǎn)到搜索頁面。

頁面邏輯內(nèi)容：

• 在“關(guān)注”、“發(fā)現(xiàn)”、“購買”頁面，搜索框都存在；
• 搜索頁面結(jié)構(gòu)分為搜索框、歷史記錄、熱門搜索；
• 歷史記錄永遠(yuǎn)只顯示一個最近的搜索記錄，字?jǐn)?shù)長度限制在20超出部分用“…”代替；
• 點擊垃圾桶圖標(biāo)可以刪除歷史記錄；
• 熱門搜索推薦的標(biāo)簽內(nèi)容來自用戶關(guān)注的標(biāo)簽內(nèi)容范圍內(nèi)；
• 用戶輸入關(guān)鍵詞搜索，輸入過程中系統(tǒng)會不斷預(yù)測用戶可能要搜索的內(nèi)容，預(yù)測內(nèi)容按照商品、筆記和其他相關(guān)內(nèi)容分類，可供用戶快速搜索；
• 搜索完成后，頁面會跳轉(zhuǎn)到筆記、商品、用戶搜索結(jié)果頁面；
• 搜索結(jié)果“全部”部分一般屬于筆記篇，可以按照時間和熱度重新排序，同時也可以按照普通筆記、視頻筆記或長筆記篩選結(jié)果；
• 搜索結(jié)果“商品”部分屬于購物商品列表，可以按照不同的方式排序商品、篩選商品；
• 搜索結(jié)果“用戶”部分是所有用戶名稱包含搜索關(guān)鍵詞的用戶列表。

頁面交互說明：

• “發(fā)現(xiàn)”頁面下點擊筆記、商品、用戶搜索框，立即進(jìn)入到搜索頁面，字母鍵盤從底端彈出；
• 搜索框中有紅色光標(biāo)不斷出現(xiàn)消失，搜索框中有推薦搜索文字，呈現(xiàn)灰色；當(dāng)輸入文字時，推薦文字消失；
• 當(dāng)輸入第一個文字時，歷史記錄和熱門推薦標(biāo)簽消失，搜索框下開始預(yù)測用戶可能要輸入的關(guān)鍵詞；
• 當(dāng)預(yù)測框中出現(xiàn)要搜索的關(guān)鍵詞時，點擊關(guān)鍵詞，鍵盤從底端彈回，頁面跳轉(zhuǎn)到搜索結(jié)果頁面，帶有#的標(biāo)簽從右側(cè)彈出；
• 任意標(biāo)簽可以點擊選擇，也可以通過左右滑動查看后面的標(biāo)簽，點擊不同的內(nèi)容；
• 搜索結(jié)果默認(rèn)筆記列表優(yōu)先顯示，向上滑動屏幕可以查看更多的筆記列表內(nèi)容，點擊某一個筆記圖片，筆記頁從右側(cè)彈出；
• 點擊“綜合排序”文本，綜合排序這一行和下方所有內(nèi)容一起向上移動，覆蓋上搜索框、“全部”行、#標(biāo)簽行，然后頁面顏色變暗，綜合排序下拉菜單從頂部向下彈出可供選擇；選擇完畢后，頁面中心紅色圓圈旋轉(zhuǎn)更新內(nèi)容，消失后內(nèi)容更新結(jié)束；
• 點擊“篩選”文本，效果與點擊“綜合排序”文本相似，但是篩選菜單從頁面右側(cè)向左側(cè)彈出，選定選項后，這個選項方塊顏色編程深色并且右側(cè)帶有關(guān)閉的“ ”，同時菜單中心位置紅色圓圈旋轉(zhuǎn)標(biāo)識正在更新內(nèi)容，同時其他選項隨之消失。

3）查看筆記入口：app主要推廣分享筆記功能，如果用戶沒有瀏覽目的，那就從“發(fā)現(xiàn)”頁或是“關(guān)注”頁看看筆記，有瀏覽目的就直接點擊搜索框就好了；進(jìn)入到每一個筆記往下滑動頁面都會有更多相關(guān)的筆記可供瀏覽，用戶可以無限地打開筆記。

頁面邏輯內(nèi)容：

• 在“發(fā)現(xiàn)”頁面，點擊列表中的圖片、圖片下方的標(biāo)題或標(biāo)題的白色背景部分都可以進(jìn)入筆記的具體內(nèi)容頁面；
• 點擊圖片下方的心形圖標(biāo)可以不用瀏覽筆記直接給用戶點贊；
• 點擊圖片下方的用戶名稱或用戶頭像，進(jìn)入到這個發(fā)布者的個人空間，可以看到該用戶發(fā)表的筆記和收藏的筆記；
• 查看用戶的筆記時，頁面底部有一個黑色功能欄，點擊心形給用戶點贊，心形變成紅色；點擊“評論”給用戶留言；點擊五角星收藏此筆記在自己的空間中；“可購買商品”存在于部分筆記中；
• 查看用戶的筆記時，右上角三個點分享此筆記給自己的朋友。

頁面交互說明：

• 在點擊圖片想要進(jìn)入筆記頁面時，圖片處出現(xiàn)一個淺灰色圓形，像是水滴滴入水中的特效1秒鐘后進(jìn)入到筆記頁面；點擊圖片下標(biāo)題處還有白色區(qū)域都有同樣的特效；
• 瀏覽筆記列表更多的內(nèi)容，在圖片任意區(qū)域向上滑動頁面，下面更多內(nèi)容就不斷加載；
• 進(jìn)入筆記頁面內(nèi)容沒有及時加載出來時，頁面呈現(xiàn)白色中間位置有紅色圓圈在轉(zhuǎn)動加載；
• 點擊圖片左上方向左箭頭，頁面向右彈出，回到上一頁面；
• 點擊筆記頁面底部的心形，圖標(biāo)縮小在放大時變?yōu)榧t色，贊的數(shù)量增加1；點擊紅色心形也可以取消點贊；
• 點擊評論圖標(biāo)，鍵盤立即從頁面底部彈出；
• 點擊收藏圖標(biāo)，整個頁面變暗1秒鐘，從底部彈出選擇專輯菜單。

4）查看筆記用戶的其他內(nèi)容入口：無論是在“發(fā)現(xiàn)”頁還是筆記頁還是在其他頁面，只要有用戶頭像和用戶名稱存在的頁面，只要點擊頭像和用戶名稱文本，頁面都直接跳轉(zhuǎn)到用戶的個人空間；個人空間可以看到用戶的更多信息還有更多關(guān)于該用戶發(fā)表的其他筆記。

頁面交互說明：

• 點擊頭像或名稱文本位置，現(xiàn)頁面直接跳轉(zhuǎn)到用戶的個人空間頁面；
• 頁面上半部分顯示該用戶有關(guān)的個人信息，任意位置向上滑動頁面，上半部分就會被覆蓋上，頁面頂部只保留用戶名稱文本、“關(guān)注”按鈕、“筆記、專輯”標(biāo)題欄；
• 繼續(xù)向上互動頁面，不斷加載更多內(nèi)容；
• 點擊左上角向左按鈕，頁面向右彈出退回到上一頁面。

5）筆記受歡迎程度：心形旁邊的數(shù)字代表有多少小伙伴喜歡這個筆記，用戶可以直接點擊圖標(biāo)給筆記點贊，進(jìn)入到筆記頁面底部也有這個圖標(biāo)，瀏覽過筆記后也可以再點贊。

頁面交互說明：

• 點擊心形圖標(biāo)或數(shù)字位置，產(chǎn)生淺灰色圓圈發(fā)達(dá)特效，同時圖標(biāo)先縮小再變成紅色的心形放大，周圍彈出一個紅色圓圈隨之放大然后立即消失；
• 點擊紅色圖標(biāo)取消點贊，點擊后淺灰色圓圈放大淡出，同時紅色心形縮小，灰色邊框心形有小變大。

6）關(guān)于用戶個人的所有操作內(nèi)容都聚集在此：無論進(jìn)入“關(guān)注”、“發(fā)現(xiàn)”、“購買”頁面，左上角一直存在用戶自己上傳的頭像，用戶的評論、關(guān)注、收藏、購物車等一切信息都可以在這里找到。

頁面邏輯內(nèi)容：

• 點擊頁面左上角個人頭像，和個人有關(guān)的選項列表菜單被打開；
• 列表菜單分為三個部分被灰色橫線分隔開，點擊第一部分標(biāo)題新頁面直接顯示不需要加載，點擊第二部分標(biāo)題需要時間加載頁面內(nèi)容，第三部分不需加載；
• 點擊每一個選項，新的頁面直接加載出來。

頁面交互說明：

• 點擊頁面左上角個人頭像，菜單從頁面左邊向右彈出，菜單占整個頁面的2/3，剩余1/3還是顯示主頁內(nèi)容，在菜單彈出同時1/3頁面變暗；
• 列表中哪個方面有新信息通知，會在相應(yīng)標(biāo)題右側(cè)有一個紅色小紅點；
• 點擊“我的關(guān)注”文本，文本產(chǎn)生淺灰色長方形背景1秒鐘后，新頁面直接加載出來；向上滑動頁面加載更多內(nèi)容，左右滑動頁面切換小標(biāo)題的頁面，到小標(biāo)題頁面標(biāo)題文本變?yōu)楹谏?，同時標(biāo)題文本下的紅色橫線隨之移動；
• 點擊第二部分選項，加載頁面，標(biāo)題下方會產(chǎn)生紅色橫線從左至右快速變長，頁面內(nèi)容出現(xiàn)時，橫線消失；
• 點擊二級頁面左上角的箭頭，頁面向右彈出回到上級頁面；或者從頁面左側(cè)邊緣向右滑動頁面回到上級頁面，同時菜單沒有收回還停留在那。

7）上傳筆記的入口：在“關(guān)注”、“發(fā)現(xiàn)”、“購買”頁面，右上角都有相機(jī)這個圖標(biāo)，用戶可以隨時找到筆記上傳入口。

頁面邏輯內(nèi)容：

• 點擊照相機(jī)圖標(biāo)產(chǎn)生三個選項：上傳圖片、上傳視頻、編輯最近的草稿，圖片和視頻可以直接拍攝或從手機(jī)相冊中選擇；
• 最多上傳9張圖片，選擇圖片后可以給圖片裝修，加濾鏡、美化圖片、增加標(biāo)貼紙；
• 美化圖片后進(jìn)入新頁面編輯筆記文本部分，加標(biāo)題、說說心得、@好友、加#話題、增加地點、另外發(fā)布在哪個第三方平臺中；
• 在編輯文本環(huán)節(jié)中可以選擇發(fā)布筆記或存入草稿箱；
• 選擇上傳視頻，可以裁剪視頻片段，然后加貼紙和文字；
• 然后給視頻編輯筆記文本與圖片編輯步驟相同；
• 發(fā)布成功后，刷新“發(fā)現(xiàn)”頁面可以看到自己的筆記；
• 如果想要刪除筆記可以回到第7項菜單中找到個人空間刪除筆記。

頁面交互說明：

• 在“發(fā)現(xiàn)”頁面點擊右上角照相機(jī)圖標(biāo)，屏幕變暗，底部彈出小菜單選擇上傳圖片還是視頻，點擊小菜單以外的地方可以退出上傳，小菜單直接消失回到原頁面；
• 點擊圖片圖標(biāo)，頁面直接顯示手機(jī)相冊照片列表，點擊列表中右上角方塊帶有照相機(jī)圖標(biāo)，直接進(jìn)入照相機(jī)狀態(tài)；點擊照片列表照片方塊中右上角的對號，對號變紅代表圖片被選中，點擊照片直接頁面右側(cè)彈出照片原圖預(yù)覽，最多選擇9張照片；
• 選中照片后點擊頁面右上角“繼續(xù)”按鈕，下級頁面右側(cè)彈出進(jìn)入到編輯照片；
• “濾鏡庫”中選擇不同效果，小圖片效果內(nèi)選中邊框變紅，上圖不會有變化；

頁面交互說明：

• 在“發(fā)現(xiàn)”頁面點擊右上角照相機(jī)圖標(biāo)，屏幕變暗，底部彈出小菜單選擇上傳圖片還是視頻，點擊小菜單以外的地方可以退出上傳，小菜單直接消失回到原頁面；
• 點擊圖片圖標(biāo)，頁面直接顯示手機(jī)相冊照片列表，點擊列表中右上角方塊帶有照相機(jī)圖標(biāo)，直接進(jìn)入照相機(jī)狀態(tài)；點擊照片列表照片方塊中右上角的對號，對號變紅代表圖片被選中，點擊照片直接頁面右側(cè)彈出照片原圖預(yù)覽，最多選擇9張照片；
• 選中照片后點擊頁面右上角“繼續(xù)”按鈕，下級頁面右側(cè)彈出進(jìn)入到編輯照片；
• “濾鏡庫”中選擇不同效果，小圖片效果內(nèi)選中邊框變紅，上圖不會有變化；
• 點擊“美化照片”文本，文本變成黑色，“濾鏡庫”文本變成灰色，美化照片中每一個選項被點擊后，小菜單直接跳轉(zhuǎn)顯示可調(diào)式狀態(tài)；
• 修飾好圖片后點擊右上角繼續(xù)按鈕，頁面中央彈出提示對話框“正在保存照片請稍等”不到1秒鐘時間，下級頁面從右側(cè)彈出，編輯好文本后可以點擊發(fā)布或存草稿箱；
• 如果選擇上傳視頻，點擊視頻圖標(biāo)，?面從右側(cè)撤出顯示鏡頭拍攝狀態(tài);
• 選定視頻后，點擊右上角對號圖標(biāo)，?面中央彈出提示信息對話框顯示
• 視頻合成中1秒鐘消失后，跳轉(zhuǎn)到文本編輯?面，編輯好文本后可以寄點 擊發(fā)布按鈕直接發(fā)送，跳轉(zhuǎn)到“發(fā)現(xiàn)”?面顯示提示信息對話框發(fā)布成 功，然后頁面自動刷新內(nèi)容，頁面筆記部分上部顯示提示信息對話框顯示多少個新筆記；
• 點擊“存草稿”按鈕?面變暗同時中央彈出說明信息對話框問是否 保存筆記至草稿箱，點擊確定按鈕后?面向右彈出回到“發(fā)現(xiàn)”?面。

8）查看所有消息入口：在三個主要頁面，頁面左下角都有消息的圖標(biāo)存在，有新消息時，有一個紅色小圓點出現(xiàn)在圖標(biāo)右上角，點擊圖標(biāo)直接打開消息頁面。

頁面邏輯內(nèi)容：

• 點擊左下角消息圖標(biāo)，打開消息頁面；
• 獲贊和收藏、評論和@、關(guān)注、通知消息、私信選項列表都顯示在這個頁面；
• 點擊每一個選項可以看到每一種消息的具體內(nèi)容。

頁面交互說明：

• 點擊坐左下角消息圖標(biāo)，直接跳轉(zhuǎn)到消息頁面；
• 點擊每一個選項，下級頁面都會從屏幕右側(cè)彈出；
• 點擊左上角向左箭頭頁面向右彈出回到上級頁面；
• 或者手指從頁面左側(cè)邊緣向右滑動退回到上級頁面；
• 點擊私信選項，新頁面在標(biāo)題下方有紅色加載條在加載新內(nèi)容。

9）查看購物車商品入口：在三個主要頁面，頁面右下角都有購物車的圖標(biāo)存在，有新消息時，有一個紅色小圓點出現(xiàn)在圖標(biāo)右上角，點擊圖標(biāo)直接打開購物車頁面。

頁面邏輯內(nèi)容：

• 點擊左下角消息圖標(biāo)，打開消息頁面；
• 獲贊和收藏、評論和@、關(guān)注、通知消息、私信選項列表都顯示在這個頁面；
• 點擊每一個選項可以看到每一種消息的具體內(nèi)容；
• 訂單支付之前可以點擊取消訂單。

頁面交互說明：

• 點擊左下角消息圖標(biāo)，直接打開購物車頁面，紅色加載條顯示加載進(jìn)度，頁面中央有四色圓點不斷轉(zhuǎn)圈閃動更新內(nèi)容，然后顯示購物車商品；
• 商品左側(cè)對號默認(rèn)被選中顯示為紅色，點擊取消被選中顯示為黑色；
• 點擊右下角結(jié)算按鈕，訂單支付頁面從右側(cè)彈出；
• 右下角支付按鈕開始30分鐘倒計時；
• 選擇支付途經(jīng)后，點擊支付按鈕后，確認(rèn)支付菜單從頁面下方彈出。

7.4 “關(guān)注”頁面

在小紅書APP中，“關(guān)注”頁面比較注重用戶關(guān)注的其他用戶發(fā)布的內(nèi)容，也會給用戶推薦一些用戶自己關(guān)注的小伙伴，他們關(guān)注過的其他伙伴，或是被關(guān)注小伙伴點贊的筆記，內(nèi)容主要是以下三部分組成。

（1）頁面名稱：“關(guān)注”頁

（2）頁面入口：啟動小紅書app向右滑動頁面或點擊文本進(jìn)入到“關(guān)注”頁面

（3）頁面結(jié)構(gòu)：

• 推薦關(guān)注用戶
• 關(guān)注用戶發(fā)布的筆記
• 關(guān)注用戶點贊的筆記

（4）邏輯頁面詳細(xì)說明

“關(guān)注”頁面中有與“發(fā)現(xiàn)”頁面中相同功能的元素，詳情借鑒6.3中1、2、7、8、9、10的內(nèi)容，這里不再贅述。

1）推薦關(guān)注用戶：這部分內(nèi)容是為了讓用戶能夠在小紅書app中認(rèn)識更多的小伙伴，這部分內(nèi)容由用戶、商品、標(biāo)簽、專輯四部分組成。

頁面邏輯內(nèi)容：

• 向左滑動屏幕，可以看到更多的用戶；點擊頭像進(jìn)入到個人空間；點擊關(guān)注按鈕，顯示已關(guān)注后名片消失；點擊隱藏按鈕名片直接消失；
• 點擊“查看更多”進(jìn)入到推薦關(guān)注頁面，里面內(nèi)容包括推薦用戶、推薦商家、推薦標(biāo)簽和推薦專輯。

頁面交互說明：

• 點擊圖片頁面轉(zhuǎn)至用戶個人空間；
• 點擊“關(guān)注”按鈕，文本變?yōu)橐殃P(guān)注然后名片消失；
• 點擊“隱藏”文本名片直接消失；
• 點擊“查看更多”文本頁面跳轉(zhuǎn)至“推薦關(guān)注”頁面；
• 當(dāng)前頁面是標(biāo)題是“用戶”，文本為黑色其他3個為灰色文本，文本下方有紅色橫線，當(dāng)向右滑動頁面或是點擊“商家”文本時，頁面向左滑過“商家”文本，同時紅色橫線從“用戶”下方滑到“商家”下方。

2）關(guān)注用戶發(fā)布的筆記：集中瀏覽用戶已關(guān)注的小伙伴發(fā)布的一些筆記，點擊進(jìn)入后就是筆記瀏覽頁面，其他操作與筆記頁面的一切操作一致。

頁面邏輯內(nèi)容：

• 點擊用戶名稱或用戶頭像直接轉(zhuǎn)至這個用戶的個人空間頁面；
• 點擊“…”可以選擇分享筆記或舉報筆記；
• 點擊圖片頁面跳轉(zhuǎn)到筆記頁面，一切操作跟上一部分第4介紹中一致；
• 點擊圖片下方的心形圖標(biāo)點贊，點擊評論圖標(biāo)進(jìn)入筆記頁面評論區(qū)位置，點擊關(guān)注圖標(biāo)彈出選擇專輯菜單。

頁面交互說明：

• 點擊“…”按鈕，頁面變暗同時底端彈出菜單“分享”“舉報”“取消”選項，點擊菜單以外屏幕或“取消”，菜單向下從底端彈回；
• 點擊圖片，頁面中央有紅色圓圈旋轉(zhuǎn)加載頁面然后跳轉(zhuǎn)到筆記頁面；
• 點擊心形圖標(biāo)，圖標(biāo)先縮小再變成紅色放大數(shù)量數(shù)字增長1；
• 點擊評論圖標(biāo)，頁面轉(zhuǎn)至筆記頁面的評論區(qū)域向上滑動直到最后一條評論出現(xiàn)就停止，然后鍵盤從底端彈出；
• 點擊關(guān)注圖標(biāo)，頁面變暗菜單從底端彈出。

3）關(guān)注用戶點贊的筆記：用戶已經(jīng)關(guān)注了的小伙伴進(jìn)行了點贊的操作，系統(tǒng)會推薦給用戶看一下。

頁面邏輯內(nèi)容：

• 點擊“…”彈出菜單選項“不感興趣”，選中這個選項后這些筆記消失；
• 點擊用戶名稱跳轉(zhuǎn)至個人空間；
• 點擊圖拍轉(zhuǎn)至筆記頁面；
• 點擊圖片下方圖標(biāo)會產(chǎn)生想上一部分相同的效果。

頁面交互說明：

• 點擊“…” 頁面變暗同時底端彈出菜單“不感興趣”“取消”選項，點擊菜單以外屏幕或“取消”，菜單向下從底端彈回；點擊“不感興趣”后贊了的筆記會從這一頁面消失；
• 點擊圖片，頁面中央有紅色圓圈旋轉(zhuǎn)加載頁面然后跳轉(zhuǎn)到筆記頁面；
• 點擊心形圖標(biāo)，圖標(biāo)先縮小再變成紅色放大數(shù)量數(shù)字增長1；
• 點擊關(guān)注圖標(biāo)，頁面變暗菜單從底端彈出。

7.5“購買”頁面

在小紅書APP中，“購物”頁面是為了支持筆記頁面的，筆記頁面中會找到商品購買鏈接，在購買頁面中也可以看到用戶發(fā)布的有關(guān)這些商品的相關(guān)筆記內(nèi)容。

（1）頁面名稱：“購買”頁

（2）頁面入口：啟動小紅書app向左滑動頁面或點擊文本進(jìn)入到“購買”頁面

（3）頁面結(jié)構(gòu)：

1. 促銷廣告
2. 商品分類
3. 商品限時購
4. 黑卡升級
5. 新草上線
6. 商品列表

（4）邏輯頁面詳細(xì)說明

“關(guān)注”頁面中有與“發(fā)現(xiàn)”頁面中相同功能的元素，詳情借鑒6.3中1、2、7、8、9、10的內(nèi)容，這里不再贅述。

1）促銷廣告：在“購物”頁面搜索框下方的就是一個促銷廣告，廣告中會用文字寫明哪一類商品今日低折扣、折扣程度、1元秒殺活動等，放在一個顯眼的位置為了給用戶更多的福利。

點擊促銷廣告進(jìn)入到低價折扣專區(qū)，頁面頂部是專區(qū)標(biāo)題、返回圖標(biāo)和分享圖標(biāo)。題目下面是4個專區(qū)推薦的商品，專門給用戶種草的商品。再下方就是專區(qū)的商品分類樓層，點擊樓層的向下箭頭打開全部樓層；點擊想要了解的樓層直接跳轉(zhuǎn)至它的位置，或者直接向上滑動頁面瀏覽全部樓層內(nèi)容。

在“秒殺”、“年貨大街”應(yīng)季的樓層、“熱賣榜”這些樓層，會包含促銷廣告鏈接，點擊廣告進(jìn)入新頁面就是4個打榜商品循環(huán)播放、一個樓層和商品列表。其余樓層就是商品列表，點擊就能進(jìn)入到商品詳情介紹頁面了。促銷廣告鏈接頁面右下方一直有個購物車圖標(biāo)鏈接到購物車頁面，可以快速也換頁面。

2）商品分類：“購物”頁面中列出7個分類，第8個是“更多分類”點擊可以看到所有的商品分類，每一個分類中還有更詳細(xì)的分類，點擊這個更詳細(xì)的分類進(jìn)入到包含筆記、商品、用戶的頁面，就是在搜索中可以直接到達(dá)的頁面。在“購物”頁面隨意點擊一個分類進(jìn)入到專屬頁面中，頂部是標(biāo)題、返回和分享圖標(biāo)，下面是打榜商品2秒鐘不斷向左切換；接著就是樓層行，點擊向下圖標(biāo)彈出向下菜單顯示所有樓層標(biāo)題。

樓層下方首先是“今日活動”“低價專區(qū)”鏈接，點擊進(jìn)入的頁面結(jié)構(gòu)與上述1中點擊促銷廣告進(jìn)入的頁面結(jié)構(gòu)一致。樓層中排在前面的幾個商品分類中對應(yīng)部分包含榜單、折扣區(qū)還有商品列表，其余分類對應(yīng)內(nèi)容就只有商品列表了。

3）商品限時購：顯示購物區(qū)域顯示4個商品，點擊商品不會直接轉(zhuǎn)至此商品詳情，點擊限時購區(qū)域進(jìn)入限時購頁面，頂部黑色行會顯示具體時間開始搶購商品，當(dāng)前搶購中背景是紅色。下一個搶購時間段會員可以優(yōu)先搶購，“即將開搶”和“會員現(xiàn)在搶”兩個標(biāo)題上下切換。

用戶可以點擊某個時間，被點擊后背景變?yōu)榧t色，紅色方塊多數(shù)停留在時間行中間位置，瀏覽哪些商品在這個時間段是限時低價的。

對于已經(jīng)開搶的商品，商品列表頂端有活動距離結(jié)束的倒計時。對于還未開搶的商品，頂部有距離開始的時間倒計時和會員優(yōu)先搶時間。

在商品列表中，可以看到商品圖拍呢、名字、搶購價錢和“馬上搶”按鈕，點擊按鈕時間行下方顯示“加入購物車”提示信息，停留1秒鐘后消失。列表中右下角有購物車圖標(biāo)，快速跳轉(zhuǎn)購物車頁面。點擊商品轉(zhuǎn)至商品詳情的頁面，可以看到評論、相關(guān)筆記。

4）黑卡升級：黑卡會員是小紅書專門為了用戶（小紅薯）購物所創(chuàng)辦的會員，從“購物”頁面進(jìn)入到黑開詳情頁面，首先是是一個會員卡圖片，點擊圖片中“查看詳情”頁面變暗中央彈出菜單說明黑卡會員省錢明細(xì)和“立即加入黑卡會員”鏈接按鈕，用戶可以根據(jù)需要繳費辦理季卡、半年卡和全年卡，可以一次性購買也可以開通自動續(xù)費功能。

會員卡圖片下方還列舉了會員特權(quán)包括：特享包郵、限時提前搶、七天保價自動退、專享價格、專屬客服、尊享包裝的六大服務(wù)。

下方還有“黑卡會員們怎么說”，點擊轉(zhuǎn)至筆記頁面，查看關(guān)于黑卡會員的筆記。下部分內(nèi)容就是主要內(nèi)容了，“黑卡會員尊享”部分通過標(biāo)題行向左滑動查看哪類商品可以參與商品會員優(yōu)惠，向上滑動頁面查看商品宣傳標(biāo)題和部分商品列表。點擊商品宣傳標(biāo)題轉(zhuǎn)至此標(biāo)題下的商品列表。瀏覽商品列表時，頁面底端出現(xiàn)“立即加入”的快捷方式。

5）新草上線：主要推薦的是一些新上線的商品，頁面由分類行和商品列表組成，一些樓層內(nèi)容的第一部分會推薦一些社區(qū)熱門筆記然后才是商品列表，點擊商品圖片轉(zhuǎn)至商品購物頁面。

6）商品列表：點擊商品轉(zhuǎn)至購物頁面，頁面包括商品圖片、價格標(biāo)示、商品保障、商品功能介紹、查看品牌空間（包括品牌筆品牌商品）、購買此商品還買了其他商品鏈接、商品使用評論、查看相關(guān)筆記、商品規(guī)格參數(shù)和信息、常見問題、使用指南、圖文詳情、接個說明、相關(guān)商品等內(nèi)容。頁面底端一直存在快捷操作圖標(biāo)，店鋪、購物、心愿單、加入購物車、立即購買。

點擊圖片轉(zhuǎn)至商品詳情頁面，左右滑動圖片可以翻看商品多張圖片，進(jìn)一步點擊圖片會放大圖片，再點擊圖片回到原始尺寸。向上滑動頁面看到黑卡會員價格，點擊向左彈出新頁面就是5中提到的黑開會員介紹頁面。繼續(xù)向上滑動頁面可以看到商品品牌，點擊品牌文本向左彈出新頁面會看到此品牌的其他商品列表和相關(guān)筆記，也可以關(guān)注此品牌。

“一貴就賠、7天保價”點擊右側(cè)向右箭頭，頁面底端彈出菜單商品說明，內(nèi)容中詳細(xì)介紹了此件商品關(guān)于“一貴就賠”、“7天保價”、“保稅倉發(fā)貨”、“單價包郵”、“包稅”、“不支持退貨”六項政策通知。點擊菜單以外頁面或者點擊關(guān)閉圖標(biāo)都可以使菜單從底端彈出。

有些商品可以選擇件數(shù)，點擊此行，頁面底端彈出菜單可以選擇數(shù)量并點擊確定加入按鈕，菜單從底端彈出回到上級頁面底端購物車圖標(biāo)出，出現(xiàn)黑色小菜單顯示“成功加入購物車”并帶有紅色“去結(jié)算”按鈕連接到購物車頁面。

在商品功能介紹下方有商鋪標(biāo)識，點擊可以轉(zhuǎn)至商家主頁。商家主頁由主頁、新品、熱門、活動四部分組成，右上角有分享和分類圖標(biāo)，但缺少一個搜索框?；氐缴碳覙?biāo)識下方是看了這幾商品的人也看了的商品鏈接，小紅薯們怎么說商品評論，再下方就是商品詳細(xì)圖文介紹和相關(guān)商品列表。相關(guān)商品可以是同款商品也有可能是同品牌其他商品，點擊圖片進(jìn)入到商品購物頁面。

商品頁面底端始終有店鋪、購物車、心愿單、加入購物車和立即購買快捷鏈接。

八、測試異常頁面及突發(fā)狀況

筆者使用了小紅書app體驗后，測試了網(wǎng)絡(luò)異常、登錄異常、數(shù)據(jù)丟失發(fā)生時，App的應(yīng)對措施是什么，還有在無網(wǎng)絡(luò)的情況下哪些功能仍可以操作。

8.1 網(wǎng)絡(luò)異常

測試內(nèi)容：無網(wǎng)絡(luò)前提下用戶進(jìn)入到已登錄的app和使用app過程中突發(fā)斷網(wǎng)的狀態(tài)。

通過測試發(fā)現(xiàn)，再無網(wǎng)絡(luò)連接的情況下app對選擇進(jìn)入購物車、訂單、薯券、心愿單、黑卡會員這些功能做了數(shù)據(jù)緩存顯示文本“找不到網(wǎng)頁”，而其他沒有做數(shù)據(jù)加載的頁面做了網(wǎng)絡(luò)異常的提示信息彈窗設(shè)計，在頁面中上方的位置顯示“網(wǎng)絡(luò)連接斷開，請檢查網(wǎng)絡(luò)設(shè)置”的文本并一直停留在頁面中知道連接網(wǎng)絡(luò)。

即使是在使用app過程中突發(fā)無網(wǎng)絡(luò)情況，app同樣是像以上這兩種狀態(tài)呈現(xiàn)出來。但如果用戶是在上下滑動頁面瀏覽筆記列表過程中連接不到網(wǎng)絡(luò)的話，用戶還是可以執(zhí)行給筆記點贊或取消點贊這個操作的，也可以瀏覽下面的內(nèi)容知道瀏覽所有加載了的內(nèi)容，需要更新更多內(nèi)容時才會出現(xiàn)提示信息彈窗。

8.2?登錄異常

測試內(nèi)容：無網(wǎng)絡(luò)、未登錄情況下啟動app。

在無網(wǎng)絡(luò)未登錄的前提下啟動小紅書app，歡迎頁面的視頻是可以正常播放的。圖1是無網(wǎng)絡(luò)情況下，用戶通過手機(jī)號碼并發(fā)送驗證碼的方式登錄app。從輸入手機(jī)號碼后轉(zhuǎn)至輸入驗證碼頁面就有提示信息“網(wǎng)絡(luò)連接斷開，請檢查網(wǎng)絡(luò)設(shè)置”，這個提示信息一直停留在頁面中。頁面顯示已發(fā)送驗證碼并有發(fā)送倒計時，但筆者在倒計時時間內(nèi)并沒有收到驗證碼，嘗試多次后都沒有收到。

圖2是無網(wǎng)絡(luò)情況下，用戶通過第三方賬號登錄app。沒有網(wǎng)絡(luò)第三方無法授權(quán)，頁面做了UI設(shè)計有顯示“網(wǎng)絡(luò)出錯啦，請點擊按鈕重新加載”文本和重新加載按鈕。頁面下方有提示信息“網(wǎng)絡(luò)不給力，稍后再試試吧（C7002）”，文本沒有消失。所有的提示信息并沒有說明是網(wǎng)絡(luò)沒有連接也沒有給出跳轉(zhuǎn)到手機(jī)網(wǎng)絡(luò)設(shè)置的按鈕。

8.3?數(shù)據(jù)丟失

當(dāng)使用app過程中被長時間打斷準(zhǔn)尉后臺運行時，當(dāng)網(wǎng)絡(luò)或登錄異常時，這些以外狀況很可能造成app的數(shù)據(jù)丟失。等到用戶再次回到app時，頁面無法被允許進(jìn)行任何操作，系統(tǒng)不得不重新啟動開啟小紅書封面頁面然后再進(jìn)入到“發(fā)現(xiàn)”頁面。若在app崩潰的情況下，用戶無法點擊任何功能系統(tǒng)又無法重新加載，用戶只能選擇手動退出app再重新進(jìn)入。

九、問題探索&改進(jìn)意見

問題1：標(biāo)簽內(nèi)容切換

體驗感受：

當(dāng)用戶瀏覽“視頻”標(biāo)簽中的筆記時，需要向上滑動頁面加載更多的筆記，這時發(fā)現(xiàn)標(biāo)簽行被隱藏了，當(dāng)用戶想要切換其他標(biāo)簽時，需要回到內(nèi)容最頂端才能切換標(biāo)簽。用iOS系統(tǒng)快速兩次點擊時間位置快速至頂，用Android系統(tǒng)我用了一個最笨的方法就是瘋狂地向下滑動頁面回到頁頂，這個方法也導(dǎo)致了我今后不愿意切換標(biāo)簽。

直到最近瘋狂使用小紅書app才發(fā)現(xiàn)了這個隱藏功能，只需要點擊一次“發(fā)現(xiàn)”文本不但實現(xiàn)了快速至頂還使新筆記得到了更新，但有時候也會發(fā)生反復(fù)點擊“發(fā)現(xiàn)”文本也不會其任何作用。我想我是被大多數(shù)網(wǎng)頁的快速置頂按鈕慣壞了。有時候想要左右滑動頁面，結(jié)果發(fā)現(xiàn)這個手法是關(guān)注、發(fā)現(xiàn)、購買頁面之間的切換。

修改意見：

頁面下方兩個角落已經(jīng)被兩個快捷方式占據(jù)沒有更多的空間，可以系統(tǒng)主動識別在用戶向下滑動頁面時，快速置頂?shù)目旖莘绞匠霈F(xiàn)在購物車圖標(biāo)上方，向上滑動頁面或停止滑動時就被自動隱藏。

問題2：視頻筆記走流量

體驗感受：

當(dāng)用戶進(jìn)入到“視頻”標(biāo)簽中時，視頻列表中所有視頻自動走流量播放視頻即使是連接手機(jī)網(wǎng)絡(luò)也會自動播放視頻。

修改意見：

App 應(yīng)該做出提示信息彈窗給用戶提示，“允許app使用移動網(wǎng)絡(luò)嗎”并給出“去設(shè)置”按鈕跳轉(zhuǎn)到手機(jī)網(wǎng)絡(luò)設(shè)置部分。

問題3：圖片、視頻筆記

體驗感受：

在其他標(biāo)簽中圖片筆記和視頻筆記是混在一起的，在瀏覽筆記列表時，圖片和視頻都是在走流量，而且所有筆記排列順序默認(rèn)是按照時間順序排序的，這樣會使用戶缺少控制app的主動性。

可以在所有筆記的頂端加一個排序方式和篩選，默認(rèn)是按照時間順序排序的，排序方式可以按照時間、熱度兩種方式排序。篩選方式可以分為圖片筆記和視頻筆記兩種，這樣可以減少流量。

十、總結(jié)

經(jīng)過分析和不斷地應(yīng)用小紅書app，筆者發(fā)現(xiàn)小紅書不同功能網(wǎng)頁之間其實都是有緊密的關(guān)系的，例如瀏覽筆記的時候可以直接進(jìn)入到筆記中提到的商品的購買鏈接，而且在商品購買的頁面也可以查看此商品其他用戶所發(fā)布的相關(guān)筆記了解商品使用心得。而且真正的心得是，筆記分享確實讓我自己體會到一個app可以實現(xiàn)發(fā)現(xiàn)全世界的好東西這樣的功能。

注：

• 文中所有app界面截圖都來自于小紅書app。
• 文檔編輯過程參考了（@Milo，倒推了“餓了么”App產(chǎn)品需求文檔 （PRD）

本文由 @Jennifer 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供