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

文檔目錄：

一、文檔綜述

1.1版本修訂記錄

1.2PRD輸出環(huán)境

1.3產(chǎn)品介紹

二、產(chǎn)品分析

2.1用戶(hù)需求分析

2.2用戶(hù)定位

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

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

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

四、全局說(shuō)明

4.1功能權(quán)限

4.2鍵盤(pán)說(shuō)明

4.3頁(yè)面內(nèi)交互

4.4頁(yè)面異常

4.5頁(yè)面間切換交互方式

4.6更多操作

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

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

七、頁(yè)面詳細(xì)功能說(shuō)明

7.1啟動(dòng)頁(yè)

7.2登陸/注冊(cè)頁(yè)

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

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

7.5“購(gòu)買(mǎi)”頁(yè)面

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

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

8.2登錄異常

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

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

十、總結(jié)

一、文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產(chǎn)品介紹

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

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

二、產(chǎn)品分析

2.1 用戶(hù)需求分析

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

（1）海外購(gòu)物缺少受信任的專(zhuān)屬平臺(tái)；

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

（3）不了解商品真實(shí)的用戶(hù)體驗(yàn)心得；

（4）海外購(gòu)物費(fèi)時(shí)費(fèi)力費(fèi)錢(qián)。

2.2?用戶(hù)定位

（1）缺少時(shí)間和能力進(jìn)行海外購(gòu)物的消費(fèi)者；

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

（3）熱衷于化妝品、保健品類(lèi)商品的消費(fèi)者；

（4）海外購(gòu)物追求貨真價(jià)實(shí)的消費(fèi)者；

（5）追求海外購(gòu)物便捷快速的消費(fèi)方式。

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

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

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

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

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

四、全面說(shuō)明

4.1 功能權(quán)限

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

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

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

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

4.2 鍵盤(pán)說(shuō)明

（1）點(diǎn)擊手機(jī)號(hào)輸入框時(shí)?面底部彈出數(shù)字鍵盤(pán);

（2）點(diǎn)擊搜索框、編輯筆記框或評(píng)論框時(shí)?面底部彈出字母全鍵盤(pán)。

4.3 ?面交互說(shuō)明

（1）說(shuō)明信息、提示/警告信息、更新信息

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

4.4 ?面異常

4.5 ?面間切換交互方式

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

4.6 更多操作

五、用戶(hù)操作主流程（筆記+購(gòu)物）

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

六、?面邏輯

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

7.1 啟動(dòng)頁(yè)

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

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

頁(yè)面邏輯：

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

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

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

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

7.2 登錄/注冊(cè)頁(yè)

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

（1）登錄/注冊(cè)頁(yè)面

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

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

頁(yè)面交互說(shuō)明：

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

（2）登錄/注冊(cè)功能邏輯流程

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

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

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

（2）頁(yè)面入口：?jiǎn)?dòng)小紅書(shū)app直接進(jìn)入到“發(fā)現(xiàn)”頁(yè)

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

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

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

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

頁(yè)面交互說(shuō)明：

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

2）筆記、商品和用戶(hù)搜索框：點(diǎn)擊搜索框自動(dòng)跳轉(zhuǎn)到搜索頁(yè)面。

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

頁(yè)面交互說(shuō)明：

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

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

（1）頁(yè)面名稱(chēng)：“關(guān)注”頁(yè)

（2）頁(yè)面入口：?jiǎn)?dòng)小紅書(shū)app向右滑動(dòng)頁(yè)面或點(diǎn)擊文本進(jìn)入到“關(guān)注”頁(yè)面

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

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

（4）邏輯頁(yè)面詳細(xì)說(shuō)明

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

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

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

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

頁(yè)面交互說(shuō)明：

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

7.5“購(gòu)買(mǎi)”頁(yè)面

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

（1）頁(yè)面名稱(chēng)：“購(gòu)買(mǎi)”頁(yè)

（2）頁(yè)面入口：?jiǎn)?dòng)小紅書(shū)app向左滑動(dòng)頁(yè)面或點(diǎn)擊文本進(jìn)入到“購(gòu)買(mǎi)”頁(yè)面

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

1. 促銷(xiāo)廣告
2. 商品分類(lèi)
3. 商品限時(shí)購(gòu)
4. 黑卡升級(jí)
5. 新草上線(xiàn)
6. 商品列表

（4）邏輯頁(yè)面詳細(xì)說(shuō)明

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

1）促銷(xiāo)廣告：在“購(gòu)物”頁(yè)面搜索框下方的就是一個(gè)促銷(xiāo)廣告，廣告中會(huì)用文字寫(xiě)明哪一類(lèi)商品今日低折扣、折扣程度、1元秒殺活動(dòng)等，放在一個(gè)顯眼的位置為了給用戶(hù)更多的福利。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

商品頁(yè)面底端始終有店鋪、購(gòu)物車(chē)、心愿單、加入購(gòu)物車(chē)和立即購(gòu)買(mǎi)快捷鏈接。

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

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

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

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

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

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

8.2?登錄異常

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

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

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

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

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

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

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

體驗(yàn)感受：

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

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

修改意見(jiàn)：

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

問(wèn)題2：視頻筆記走流量

體驗(yàn)感受：

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

修改意見(jiàn)：

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

問(wèn)題3：圖片、視頻筆記

體驗(yàn)感受：

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

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

十、總結(jié)

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

注：

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

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

題圖由作者提供