文件目錄：
一、文件綜述
1.1版本修訂記錄
1.2PRD輸出環境
1.3產品介紹
二、產品分析
2.1使用者需求分析
2.2使用者定位
三、產品結構
3.1產品功能結構圖
3.2產品資訊結構圖
四、全域性說明
4.1功能許可權
4.2鍵盤說明
4.3頁面內互動
4.4頁面異常
4.5頁面間切換互動方式
4.6更多操作
五、使用者操作主流程(筆記篇)
六、頁面邏輯(使用者瀏覽筆記為主邏輯)
七、頁面詳細功能說明
7.1啟動頁
7.2登陸/註冊頁
7.3“發現”頁面
7.4“關注”頁面
7.5“購買”頁面
八、測試異常頁面及突發狀況
8.1網路異常
8.2登入異常
8.3資料丟失
九、問題探索&改進意見
十、總結
一、文件綜述
1.1 版本修訂記錄
1.2 PRD輸出環境
1.3 產品介紹
“小紅書”於2014年3月上線，是一款以使用者分享內容（UGC）的資訊平臺為定義的手機端App，使用者可以透過這款App發現全世界的好東西，並且完成線上購物。使用者可以上傳自己的使用心得，海外購物使用者還可以獲得詳細的產品攻略。
“小紅書”移動端App，滿足使用者在手機端使用產品時的基本功能主要包括使用者瀏覽其他使用者的分享內容、使用者釋出分享內容、線上購物等。
二、產品分析
2.1 使用者需求分析
伴隨著網路購物時代的興起，更多的消費者趨向於海外市場購物，但一些外界因素影響海外購物：
（1）海外購物缺少受信任的專屬平臺；
（2）不能第一時間瞭解流行趨勢和新品上市情況；
（3）不瞭解商品真實的使用者體驗心得；
（4）海外購物費時費力費錢。
2.2使用者定位
（1）缺少時間和能力進行海外購物的消費者；
（2）願意在網路平臺上展示與分享的網際網路使用者；
（3）熱衷於化妝品、保健品類商品的消費者；
（4）海外購物追求貨真價實的消費者；
（5）追求海外購物便捷快速的消費方式。
三、產品結構
3.1 產品功能結構圖
（右擊，在新標籤頁中開啟即可檢視）
3.2 產品資訊結構圖
（右擊，在新標籤頁中開啟即可檢視）
四、全面說明
4.1 功能許可權
（1）分為登入未狀態和登入狀態
（2）未登入狀態下，智慧看到不斷迴圈的小影片
手機號登入
（3）登入狀態下可以進行APP內所有操作
4.2 鍵盤說明
4.3 ⻚面交互說明
（1）說明資訊、提示/警告資訊、更新資訊
（2）底部、左側彈窗
4.4 ⻚面異常
4.5 ⻚面間切換互動方式
在當前頁面左邊緣處用右劃手勢快速返回之前頁面
4.6 更多操作
五、使用者操作主流程（筆記+購物）
從小紅書APP使用者操作流程可以看出，小紅書主要推廣筆記功能，為了更好的檢視用 戶感興趣的筆記，提高使用者互動性，小紅書從開始使用就要求賬戶登入。透過瀏覽其 他使用者的筆記發現更多的好物，從而更加放心開啟購物環節。
六、⻚面邏輯
七、⻚面詳細功能說明
7.1 啟動頁
當進入到小紅書APP後，無論是手機是否連線到網路，頁面背景會反覆播放一 段宣傳片的小影片。
（1）已經連線網路
頁面邏輯：
在已經連線網路的情況下，啟動app直接進入到影片頁面；
如果使用者不操作頁面，影片也不會受影響一直播放影片，也不會產生其他提示資訊；
使用者可以直接透過小紅是賬號登入，也可以選擇第三方賬號登入；
任意方式登入完畢後即可進入到首頁劉啦內容。
（2）登入未連線網路
在未連線網路的狀態下，app直接進入到異常提醒頁面，並提醒重新載入頁面。
提示資訊一直顯示網路不給力稍後再試，即使是網路設定沒有連線網路，這樣的提示容易誤解為網路速度滿造成的，沒有給使用者一個好的引導。
7.2 登入/註冊頁
小紅書APP採用了手機號與驗證碼登入，或手機號與密碼登入，再或者4種第三方賬號登入的方法，這樣對於首次登入的使用者來說省去了註冊的環節。使用者可以直接用手機號碼並簡訊驗證完成登入，用第三方賬號登入，若手機第三方賬號是已登入狀態，第三方授權即可；若手機中沒有第三方app或是沒有登入，輸入賬號和密碼即可完成登入。這樣的登入方式對於首次使用該app的使用者來說，省去註冊麻煩也可快速體驗到app主要功能。
（1）登入/註冊頁面
頁面邏輯內容：
使用者在收到驗證碼3分鐘內輸入驗證碼才有效；
老使用者可以用手機號碼和驗證碼登入，也可以手機號碼和密碼登入；
頁面互動說明：
（2）登入/註冊功能邏輯流程
7.3 “發現”頁面
在小紅書APP中，如果使用者想要用瀏覽功能，採用的是從上向下瀏覽的方式，如果使用者想要使用某項功能的時候，是從左側和右側來尋找的。因此，介紹某一頁面的時候採用從上至下的方式，介紹某些功能時採用從左至右的方式。
（1）頁面名稱：“發現”筆記頁
（2）頁面入口：啟動小紅書app直接進入到“發現”頁
（3）頁面結構
瀏覽內容切換區
筆記、商品和使用者搜尋框
使用者切換標籤區
檢視筆記內容入口
檢視筆記使用者的其他內容入口
關於使用者個人的所有操作內容都聚集在此
上傳筆記的入口
檢視所有訊息入口
檢視購物車商品入口
（4）邏輯內容詳細說明
頁面互動說明：
灰色長方形出現後，紅色橫線立即向左快速移動到“關注”下方；
當紅色橫線向左移動時，“關注”也內容也隨之快速向右移動出現；
紅色橫線向右移動，內容頁面從右向左移動；
頁面邏輯內容：
在“關注”、“發現”、“購買”頁面，搜尋框都存在；
搜尋頁面結構分為搜尋框、歷史記錄、熱門搜尋；
歷史記錄永遠只顯示一個最近的搜尋記錄，字數長度限制在20超出部分用“…”代替；
熱門搜尋推薦的標籤內容來自使用者關注的標籤內容範圍內；
使用者輸入關鍵詞搜尋，輸入過程中系統會不斷預測使用者可能要搜尋的內容，預測內容按照商品、筆記和其他相關內容分類，可供使用者快速搜尋；
搜尋完成後，頁面會跳轉到筆記、商品、使用者搜尋結果頁面；
搜尋結果“全部”部分一般屬於筆記篇，可以按照時間和熱度重新排序，同時也可以按照普通筆記、影片筆記或長筆記篩選結果；
搜尋結果“商品”部分屬於購物商品列表，可以按照不同的方式排序商品、篩選商品；
搜尋結果“使用者”部分是所有使用者名稱稱包含搜尋關鍵詞的使用者列表。
頁面互動說明：
搜尋框中有紅色游標不斷出現消失，搜尋框中有推薦搜尋文字，呈現灰色；當輸入文字時，推薦文字消失；
當輸入第一個文字時，歷史記錄和熱門推薦標籤消失，搜尋框下開始預測使用者可能要輸入的關鍵詞；
頁面邏輯內容：
檢視使用者的筆記時，右上角三個點分享此筆記給自己的朋友。
頁面互動說明：
瀏覽筆記列表更多的內容，在圖片任意區域向上滑動頁面，下面更多內容就不斷載入；
進入筆記頁面內容沒有及時加載出來時，頁面呈現白色中間位置有紅色圓圈在轉動載入；
頁面互動說明：
繼續向上互動頁面，不斷載入更多內容；
頁面互動說明：
頁面邏輯內容：
頁面互動說明：
列表中哪個方面有新資訊通知，會在相應標題右側有一個紅色小紅點；
7）上傳筆記的入口：在“關注”、“發現”、“購買”頁面，右上角都有相機這個圖示，使用者可以隨時找到筆記上傳入口。
頁面邏輯內容：
最多上傳9張圖片，選擇圖片後可以給圖片裝修，加濾鏡、美化圖片、增加標貼紙；
美化圖片後進入新頁面編輯筆記文字部分，加標題、說說心得、@好友、加#話題、增加地點、另外發布在哪個第三方平臺中；
在編輯文字環節中可以選擇釋出筆記或存入草稿箱；
選擇上傳影片，可以裁剪影片片段，然後加貼紙和文字；
然後給影片編輯筆記文字與圖片編輯步驟相同；
釋出成功後，重新整理“發現”頁面可以看到自己的筆記；
頁面互動說明：
“濾鏡庫”中選擇不同效果，小圖片效果內選中邊框變紅，上圖不會有變化；
頁面互動說明：
“濾鏡庫”中選擇不同效果，小圖片效果內選中邊框變紅，上圖不會有變化；
頁面邏輯內容：
頁面互動說明：
或者手指從頁面左側邊緣向右滑動退回到上級頁面；
頁面邏輯內容：
頁面互動說明：
7.4 “關注”頁面
（1）頁面名稱：“關注”頁
（3）頁面結構：
推薦關注使用者
關注使用者釋出的筆記
（4）邏輯頁面詳細說明
“關注”頁面中有與“發現”頁面中相同功能的元素，詳情借鑑6.3中1、2、7、8、9、10的內容，這裡不再贅述。
1）推薦關注使用者：這部分內容是為了讓使用者能夠在小紅書app中認識更多的小夥伴，這部分內容由使用者、商品、標籤、專輯四部分組成。
頁面邏輯內容：
頁面互動說明：
頁面邏輯內容：
頁面互動說明：
頁面邏輯內容：
頁面互動說明：
7.5“購買”頁面
在小紅書APP中，“購物”頁面是為了支援筆記頁面的，筆記頁面中會找到商品購買連結，在購買頁面中也可以看到使用者釋出的有關這些商品的相關筆記內容。
（1）頁面名稱：“購買”頁
（3）頁面結構：
促銷廣告
商品分類
商品限時購
黑卡升級
新草上線
商品列表
（4）邏輯頁面詳細說明
“關注”頁面中有與“發現”頁面中相同功能的元素，詳情借鑑6.3中1、2、7、8、9、10的內容，這裡不再贅述。
1）促銷廣告：在“購物”頁面搜尋框下方的就是一個促銷廣告，廣告中會用文字寫明哪一類商品今日低折扣、折扣程度、1元秒殺活動等，放在一個顯眼的位置為了給使用者更多的福利。
2）商品分類：“購物”頁面中列出7個分類，第8個是“更多分類”點選可以看到所有的商品分類，每一個分類中還有更詳細的分類，點選這個更詳細的分類進入到包含筆記、商品、使用者的頁面，就是在搜尋中可以直接到達的頁面。在“購物”頁面隨意點選一個分類進入到專屬頁面中，頂部是標題、返回和分享圖示，下面是打榜商品2秒鐘不斷向左切換；接著就是樓層行，點擊向下圖示彈出向下選單顯示所有樓層標題。
對於已經開搶的商品，商品列表頂端有活動距離結束的倒計時。對於還未開搶的商品，頂部有距離開始的時間倒計時和會員優先搶時間。
4）黑卡升級：黑卡會員是小紅書專門為了使用者（小紅薯）購物所創辦的會員，從“購物”頁面進入到黑開詳情頁面，首先是是一個會員卡圖片，點選圖片中“檢視詳情”頁面變暗中央彈出選單說明黑卡會員省錢明細和“立即加入黑卡會員”連結按鈕，使用者可以根據需要繳費辦理季卡、半年卡和全年卡，可以一次性購買也可以開通自動續費功能。
會員卡圖片下方還列舉了會員特權包括：特享包郵、限時提前搶、七天保價自動退、專享價格、專屬客服、尊享包裝的六大服務。
下方還有“黑卡會員們怎麼說”，點選轉至筆記頁面，檢視關於黑卡會員的筆記。下部分內容就是主要內容了，“黑卡會員尊享”部分透過標題行向左滑動檢視哪類商品可以參與商品會員優惠，向上滑動頁面檢視商品宣傳標題和部分商品列表。點選商品宣傳標題轉至此標題下的商品列表。瀏覽商品列表時，頁面底端出現“立即加入”的快捷方式。
6）商品列表：點選商品轉至購物頁面，頁面包括商品圖片、價格標示、商品保障、商品功能介紹、檢視品牌空間（包括品牌筆品牌商品）、購買此商品還買了其他商品連結、商品使用評論、檢視相關筆記、商品規格引數和資訊、常見問題、使用指南、圖文詳情、接個說明、相關商品等內容。頁面底端一直存在快捷操作圖示，店鋪、購物、心願單、加入購物車、立即購買。
點選圖片轉至商品詳情頁面，左右滑動圖片可以翻看商品多張圖片，進一步點選圖片會放大圖片，再點選圖片回到原始尺寸。向上滑動頁面看到黑卡會員價格，點擊向左彈出新頁面就是5中提到的黑開會員介紹頁面。繼續向上滑動頁面可以看到商品品牌，點選品牌文字向左彈出新頁面會看到此品牌的其他商品列表和相關筆記，也可以關注此品牌。
在商品功能介紹下方有商鋪標識，點選可以轉至商家主頁。商家主頁由主頁、新品、熱門、活動四部分組成，右上角有分享和分類圖示，但缺少一個搜尋框。回到商家標識下方是看了這幾商品的人也看了的商品連結，小紅薯們怎麼說商品評論，再下方就是商品詳細圖文介紹和相關商品列表。相關商品可以是同款商品也有可能是同品牌其他商品，點選圖片進入到商品購物頁面。
商品頁面底端始終有店鋪、購物車、心願單、加入購物車和立即購買快捷連結。
八、測試異常頁面及突發狀況
筆者使用了小紅書app體驗後，測試了網路異常、登入異常、資料丟失發生時，App的應對措施是什麼，還有在無網路的情況下哪些功能仍可以操作。
8.1 網路異常
測試內容：無網路前提下使用者進入到已登入的app和使用app過程中突發斷網的狀態。
透過測試發現，再無網路連線的情況下app對選擇進入購物車、訂單、薯券、心願單、黑卡會員這些功能做了資料快取顯示文字“找不到網頁”，而其他沒有做資料載入的頁面做了網路異常的提示資訊彈窗設計，在頁面中上方的位置顯示“網路連線斷開，請檢查網路設定”的文字並一直停留在頁面中知道連線網路。
8.2登入異常
測試內容：無網路、未登入情況下啟動app。
在無網路未登入的前提下啟動小紅書app，歡迎頁面的影片是可以正常播放的。圖1是無網路情況下，使用者透過手機號碼併發送驗證碼的方式登入app。從輸入手機號碼後轉至輸入驗證碼頁面就有提示資訊“網路連線斷開，請檢查網路設定”，這個提示資訊一直停留在頁面中。頁面顯示已傳送驗證碼並有傳送倒計時，但筆者在倒計時時間內並沒有收到驗證碼，嘗試多次後都沒有收到。
圖2是無網路情況下，使用者透過第三方賬號登入app。沒有網路第三方無法授權，頁面做了UI設計有顯示“網路出錯啦，請點選按鈕重新載入”文字和重新載入按鈕。頁面下方有提示資訊“網路不給力，稍後再試試吧（C7002）”，文字沒有消失。所有的提示資訊並沒有說明是網路沒有連線也沒有給出跳轉到手機網路設定的按鈕。
8.3資料丟失
當使用app過程中被長時間打斷准尉後臺執行時，當網路或登入異常時，這些以外狀況很可能造成app的資料丟失。等到使用者再次回到app時，頁面無法被允許進行任何操作，系統不得不重新啟動開啟小紅書封面頁面然後再進入到“發現”頁面。若在app崩潰的情況下，使用者無法點選任何功能系統又無法重新載入，使用者只能選擇手動退出app再重新進入。
九、問題探索&改進意見
問題1：標籤內容切換
體驗感受：
當用戶瀏覽“影片”標籤中的筆記時，需要向上滑動頁面載入更多的筆記，這時發現標籤行被隱藏了，當用戶想要切換其他標籤時，需要回到內容最頂端才能切換標籤。用iOS系統快速兩次點選時間位置快速至頂，用Android系統我用了一個最笨的方法就是瘋狂地向下滑動頁面回到頁頂，這個方法也導致了我今後不願意切換標籤。
直到最近瘋狂使用小紅書app才發現了這個隱藏功能，只需要點選一次“發現”文字不但實現了快速至頂還使新筆記得到了更新，但有時候也會發生反覆點選“發現”文字也不會其任何作用。我想我是被大多數網頁的快速置頂按鈕慣壞了。有時候想要左右滑動頁面，結果發現這個手法是關注、發現、購買頁面之間的切換。
修改意見：
頁面下方兩個角落已經被兩個快捷方式佔據沒有更多的空間，可以系統主動識別在使用者向下滑動頁面時，快速置頂的快捷方式出現在購物車圖示上方，向上滑動頁面或停止滑動時就被自動隱藏。
問題2：影片筆記走流量
體驗感受：
當用戶進入到“影片”標籤中時，影片列表中所有影片自動走流量播放影片即使是連線手機網路也會自動播放影片。
修改意見：
問題3：圖片、影片筆記
體驗感受：
在其他標籤中圖片筆記和影片筆記是混在一起的，在瀏覽筆記列表時，圖片和影片都是在走流量，而且所有筆記排列順序預設是按照時間順序排序的，這樣會使使用者缺少控制app的主動性。
可以在所有筆記的頂端加一個排序方式和篩選，預設是按照時間順序排序的，排序方式可以按照時間、熱度兩種方式排序。篩選方式可以分為圖片筆記和影片筆記兩種，這樣可以減少流量。
十、總結
經過分析和不斷地應用小紅書app，筆者發現小紅書不同功能網頁之間其實都是有緊密的關係的，例如瀏覽筆記的時候可以直接進入到筆記中提到的商品的購買連結，而且在商品購買的頁面也可以檢視此商品其他使用者所釋出的相關筆記了解商品使用心得。而且真正的心得是，筆記分享確實讓我自己體會到一個app可以實現發現全世界的好東西這樣的功能。