Little Red Book app product requirements document (PRD)

The author uses the identity of Android mobile phone users to reverse the "Little Red Book" APP by using, experiencing and analyzing, and generates the product requirement document PRD. The Little Red Book app is a user-shared content (UGC) mode into the eyes of everyone, and in a treasure increasingly powerful trend, with the shopping function of the small red Book can still go forward.

Document Directory:

I. Documentation overview

1.1 Revision History

1.2PRD Output Environment

1.3 Product Introduction

Second, product analysis

2.1 User Needs Analysis

2.2 User Positioning

Third, product structure

3.1 Product Function Structure chart

3.2 Product Information Structure chart

Iv. Global Description

4.1 Functional Permissions

4.2 Keyboard Description

4.3 Intra-page interaction

4.4 Page exception

4.5 Switching between pages interactive mode

4.6 More operations

V. User operation main flow (note)

Vi. page logic (user-viewed notes are the main logic)

Seven, the page detailed function description

7.1 Start Page

7.2 Login/Registration page

7.3 "Discovery" page

7.4 "Follow" page

7.5 "Purchase" page

Eight, test the abnormal page and unexpected situation

8.1 Network Exceptions

8.2 Login exception

8.3 Data loss

Ix. Issues Exploration & improvement advice

X. SUMMARY

I. Documentation overview

1.1 Revision History

1.2 PRD output Environment

1.3 Product Introduction

"Little Red Book" launched in March 2014, is a user-shared content (UGC) information platform for the definition of mobile app, users can discover the world's good things through this app, and complete online shopping. Users can upload their own experience, overseas shopping users can also get a detailed product introduction.

"Little Red Book" mobile app, to meet the user in the mobile phone use of the product's basic functions mainly include users to browse other users to share content, users publish share content, online shopping and so on.

Second, product analysis 2.1 user needs analysis

With the rise of the internet shopping era, more consumers tend to shop overseas, but some external factors affect shopping abroad:

(1) Lack of trusted platform for overseas shopping;

(2) can not be the first time to understand trends and new listings;

(3) Do not understand the real user experience of the product;

(4) Shopping overseas is laborious and expensive.

2.2 User Positioning

(1) Consumers who lack the time and ability to conduct overseas shopping;

(2) Internet users who are willing to display and share on the network platform;

(3) Consumers who are keen on cosmetics and health products;

(4) Overseas shopping pursuit of genuine consumers;

(5) The pursuit of overseas shopping convenient and fast consumption way.

Three, product structure 3.1 product function Structure chart

(Right click, open in New tab to view)

3.2 Product Information Structure chart

(Right click, open in New tab to view)

Iv. Comprehensive description of 4.1 functional permissions

(1) divided into login status and login state

(2) Not logged in state, smart to see the continuous cycle of small video

• Mobile phone Number Login
• Third-party login:, QQ, Weibo, Facebook login

(3) All actions in the app can be performed in the login status

4.2 Keyboard Description

(1) Click on the Phone number input box, the bottom of the surface pop-up numeric keypad;

(2) Click the Search box, edit the note box or comment box? The bottom of the face pops up the letter full keyboard.

4.3. Polygon Interaction Description

(1) Description information, prompt/warning information, update information

(2) Bottom and left pop-up window

4.4. Face anomalies

4.5. Inter-Face switching interaction mode

Quickly returns to the previous page with a right stroke gesture at the left edge of the current page

4.6 More operations

V. User operation main flow (note + shopping)

From the small Red Book app user operation process can be seen, Little Red Book mainly promote notes function, in order to better view users interested in notes, improve user interaction, Little Red Book from the beginning of the use of the request account login. Find more good things by browsing other users ' notes, so you can start shopping more confidently.

Vi.. Surface logic

Seven, noodles detailed function Description 7.1 start Page

When you enter the Little Red Book app, whether the phone is connected to the network, the page background will repeatedly play a small video of a promotional piece.

(1) network is already connected

Page logic:

• In the case of a network connection, launch the app directly into the video page;
• If the user does not manipulate the page, the video will not be affected to play the video, and will not produce other information;
• Users can directly through the small red is the account login, you can also choose a third-party account login;
• Any way to login after you can go to the homepage Liu content.

(2) Login not connected to the network

When the network is not connected, the app goes directly to the Exception reminder page and alerts you to reload the page.

Prompt information has been shown that the network does not give force to try again later, even if the network settings are not connected to the network, such a hint is easy to misunderstand the speed of the network is caused, did not give users a good guide.

7.2 Login/Registration page

The Little Red Book app uses the mobile phone number and verification code login, or mobile phone number and password login, or 4 kinds of third-party account login method, so for the first time users to save the registration of the link. Users can directly use mobile phone number and SMS verification to complete the login, with a third-party account login, if the mobile phone third-party account is logged in, third-party authorization can be; if there is no third-party app in the phone or no login, enter your account and password to complete the login. This way of login for the first time users of the app, save the registration hassle can also quickly experience the main features of the app.

(1) Login/Registration page

Page logic content:

• After the user enters the mobile phone number, click the OK key to receive the 6-digit verification Code, the page jumps to enter the verification code page, and starts the countdown 60 seconds, 60 seconds after the countdown becomes the resend button;
• If you do not receive the verification code within 60 seconds, wait 60 seconds after the "resend" appears after the click can re-obtain a new verification code;
• The user will receive the verification code within 3 minutes to enter the verification code to be effective;
• Old users can use mobile phone number and verification code to log in, you can also mobile phone number and password login;
• Users can also click on the bottom 4 third-party buttons to bring up their authorized ports to sign in.

Page Interaction Description:

• User click Login, page to enter the mobile phone number login page, click on the "Input mobile phone number" at the place, the keyboard to jump out;
• Enter a good mobile phone number and click the OK button, the page jumps to enter the verification code page and start 60 seconds countdown, the keyboard automatically jump out, the user to adjust to the digital keyboard;
• After 60 seconds countdown, re-send the word to blue, you can click to regain the new verification code;
• The user clicks the Password login button, the page changes to the password login page, the keyboard jumps out;
• The user clicks on 4 third parties and the authorization page pops up from the right side of the page.

(2) Login/Register function logic flow

7.3 "Discovery" page

In the Little Red Book app, if the user wants to use the Browse function, the way to browse from the top down, if the user wants to work with a feature, it is from the left and right to look for. Therefore, the introduction of a page from the top-down approach, the introduction of some features in a left-to-right way.

(1) Page name: "Discovery" Note page

(2) Page entry: Launch the Little Red Book app to go directly to the discovery page

(3) Page structure

• Browsing the content switch area
• Notes, products, and user search boxes
• User Switch Tab Area
• View the Notes Content Portal
• View other content portals for note users
• How popular your notes are
• Everything about the user's individual operations is gathered here
• The Portal to upload notes
• View all message Portals
• View Shopping Cart Merchandise entrance

(4) Detailed description of logical content

1) Browse the content switch area: The system default "Discover" is the homepage, click the title can switch to "attention" or "product" page.

Page Interaction Description:

• Launch the Red Book app to go directly to the "Discovery" page, "found" under the word there is a red line, click on the "Attention" font will appear a light gray rectangular background 1 seconds to disappear;
• When the gray rectangle appears, the red horizontal line moves quickly to the left and immediately below the "attention";
• When the red horizontal line moves to the left, the "focus" also moves quickly to the right;
• The red horizontal line moves to the right, and the content page moves from right to left;
• Quick Click two times the title, the content page can quickly return to the page to set;
• Quick Click two times the title, a red circle appears below the label line rotation identifies the content that is being updated, when a new content is updated, a message appears below the label line for 1 seconds and then disappears.

2) Note, Product and user search box: Click the search box to automatically jump to the search page.

Page logic content:

• In the "Attention", "Discovery", "Purchase" page, the search box exists;
• The search page structure is divided into search box, history record, popular search;
• History will always show only one recent search record, with the word length limited to 20 in excess of "..." instead;
• Click the Trash can icon to delete the history record;
• Popular search recommended tag content from the user's attention to the content of the tag within;
• User Input keyword search, the system will constantly predict the user may want to search for content, forecast content according to goods, notes and other related content classification, for users to quickly search;
• After the search is completed, the page jumps to the notes, products, user search results page;
• The "All" section of the search results generally belongs to the notes, can be re-ordered by time and heat, but also according to ordinary notes, video notes or long notes to filter the results;
• Search results The "Product" section belongs to the list of shopping items, can be sorted according to different ways of goods, filter products;
• The "Users" section of the search results is a list of all user names that contain search keywords.

Page Interaction Description:

• "Discovery" page click on the note, Product, user search box, immediately go to the search page, the letter keyboard pop from the bottom;
• The search box has a red cursor disappears, the search box has the recommended search text, gray; When the text is entered, the recommended text disappears;
• When the first text is entered, the history and top recommended tags disappear, and the search box starts predicting the keywords that the user may want to enter;
• When the prediction box appears to search for the keyword, click the keyword, the keyboard bounce back from the bottom, the page jumps to the search results page, with the # tag from the right pop-up;
• Any tag can be clicked to select, you can also swipe left and right to see the following tabs, click on different content;
• Search results Default note list priority display, swipe up to see more Notes list content, click on a note image, note page pop-up from the right;
• Click on the "comprehensive sorting" text, a comprehensive sort of this line and all the content below to move up, covering the search box, the "All" row, #标签行, and then the page color dimmed, comprehensive sorting drop-down menu from the top of the pop-up to choose from, after the selection, the center of the red circle of the update content, disappear after the
• Click the "Filter" text, the effect is similar to clicking on the "comprehensive sort" text, but the filter menu pops up from the right side of the page, and when selected, the option block color is programmed with dark and closed "" on the right, while the red circle in the center of the menu rotates to identify the content being updated while the other options disappear.

3) View the note entrance: The app mainly promote the sharing of notes function, if the user does not have the purpose of browsing, then from the "Discovery" page or "attention" page to look at the notes, have the purpose of browsing directly click on the search box is good; go to each note swipe down the page will have more relevant notes to browse, Users can open their notes indefinitely.

Page logic content:

• On the "Discover" page, click on the picture in the list, the title below the picture or the white background of the title to enter the specific content page of the note;
• Click on the image below the heart icon can not browse the notes directly to the user likes;
• Click on the image below the user name or user picture, into the publisher's personal space, you can see the user's notes and collection of notes;
• When viewing the user's notes, there is a black function bar at the bottom of the page, click the heart shape to the user likes, heart deformation into red; Click "Comment" to leave a message to the user, click the Pentagram collection this note in their own space; "can buy goods" exist in some of the notes;
• When viewing a user's notes, three points in the top right corner share this note to their friends.

Page Interaction Description:

• When you click on the image to get to the notes page, a light gray circle appears in the picture, like a drop of water dripping into the effect 1 seconds after the entry to the notes page, click the image under the title and white areas have the same effect;
• Browse the list of notes for more content, swipe up in any area of the image, and load more content below.
• When the contents of the note page are not loaded in time, the white middle position of the page appears with a red circle in the rotation loading;
• Click on the top left arrow on the picture, the page pops to the right, back to the previous page;
• Click the heart at the bottom of the note page, the icon zooms in to red when zoomed in, the number of likes increased by 1; Click the red heart shape can also cancel the likes;
• Click on the comment icon and the keyboard immediately pops up from the bottom of the page;
• Click the Favorites icon to darken the entire page for 1 seconds and select the album menu from the bottom pop-up.

4) View other content portals for Notes users: Whether on the discovery page or on a note page or on another page, as long as there is a user picture and user name exists page, just click on the avatar and user name text, the page will jump directly to the user's personal space Personal space can see more information about the user and more about other notes that the user has published.

Page Interaction Description:

• Click on the avatar or name text location, now page directly to the user's personal space page;
• The upper part of the page displays the personal information about the user, swipe up the page in any position, the upper part will be overwritten, the top of the page only retains the user name text, the "Attention" button, "notes, albums" title bar;
• Continue to move up the interactive page and load more content continuously;
• Click the left button in the upper-right corner and the page pops back to the previous page.

5) Popularity of notes: Heart-shaped next to the number represents how many small partners like this note, users can directly click on the icon to the note to praise, go to the bottom of the note page also has this icon, after browsing the notes can also be liked.

Page Interaction Description:

• Click the heart-shaped icon or digital position, create a light gray circle developed special effects, while the icon first zoom out and then become a red heart-shaped enlargement, a red circle around the pop-up and then immediately disappear;
• Click on the red icon to cancel the likes, click the light gray circle to enlarge and fade out, while the red heart shape, gray border heart shape has small change.

6) All the operations of the user's personal content are gathered here: regardless of entering the "attention", "Discovery", "Purchase" page, the upper left corner has been the user's own uploaded avatar, the user's comments, attention, collection, shopping cart and other information can be found here.

Page logic content:

• Click on the top left corner of the page, personal avatar, and Personal Options list menu is opened;
• List menu divided into three parts by the gray Line separated, click the first part of the title of the new page directly display does not need to load, click the second part of the title need time to load the content of the page, the third part does not need to load;
• Click on each option and the new page is loaded directly.

Page Interaction Description:

• Click on the top left of the page profile picture, the menu from the left side of the page pop-up, the menu accounted for the entire page 2/3, the remaining 1/3 or display the main page content, in the menu popup while the 1/3 page dimmed;
• Which aspect of the list has a new information notification, there is a red dot on the right side of the corresponding title;
• Click on the "My Attention" text, the text produces a light gray rectangular background 1 seconds later, the new page loaded directly, the page to load more content, slide the page to toggle the small title of the page, to the small title page title text into black, and the title text under the red line with the movement;
• Click on the second part of the option to load the page, under the title will produce a red line from left to right quickly grow, page content appears, the horizontal line disappears;
• Click the arrow in the upper-left corner of the level two page, and the page pops back to the upper page, or swipe right from the left edge of the page back to the upper page, and the menu does not retract and stays there.

7) The entrance of the note: in the "Attention", "Discovery", "Purchase" page, the top right corner of the camera this icon, users can always find the note upload portal.

Page logic content:

• Click on the camera icon to generate three options: Upload an image, upload a video, edit a recent draft, and images and videos can be taken directly or selected from a mobile album;
• Upload up to 9 images, select pictures can be decorated, add filters, beautify pictures, add stickers;
• Beautify the picture after entering the new page to edit the text portion of the note, add title, say the experience, @ Friends, add # topic, add location, another published in which third-party platform;
• You can choose to publish notes or deposit drafts in the Edit Text section;
• Select Upload Video, you can crop the video clips, and then add stickers and text;
• Then give the video editing note text and picture editing steps the same;
• After publishing successfully, refresh the "Discover" page to see your own notes;
• If you want to delete your notes, you can go back to the 7th menu and find your personal space to delete notes.

Page Interaction Description:

• On the "Discover" page, click the camera icon in the upper right corner, the screen dims, the bottom pop-up small menu to choose to upload pictures or videos, click on the Small menu outside to exit the upload, the small menu disappears directly back to the original page;
• Click the picture icon, the page directly displays the phone album photo list, click on the top right corner of the list with the camera icon, directly into the camera status, click on the photo list photo box in the upper right corner of the check mark, red to indicate that the picture is selected, click the photo directly on the right side of the photo preview, up to 9 photos;
• Select the photo and click the "Continue" button in the upper right corner of the page, the lower right of the page pops into the edit photo;
• Select a different effect in the Filter gallery, the selected border in the small picture effect is red and will not change;

Page Interaction Description:

• On the "Discover" page, click the camera icon in the upper right corner, the screen dims, the bottom pop-up small menu to choose to upload pictures or videos, click on the Small menu outside to exit the upload, the small menu disappears directly back to the original page;
• Click the picture icon, the page directly displays the phone album photo list, click on the top right corner of the list with the camera icon, directly into the camera status, click on the photo list photo box in the upper right corner of the check mark, red to indicate that the picture is selected, click the photo directly on the right side of the photo preview, up to 9 photos;
• Select the photo and click the "Continue" button in the upper right corner of the page, the lower right of the page pops into the edit photo;
• Select a different effect in the Filter gallery, the selected border in the small picture effect is red and will not change;
• Click "Beautify Photos" text, the text becomes black, "filter Library" text becomes gray, beautify the photo each option is clicked, the small menu jumps directly to display the adjustable state;
• After retouching the picture, click the Continue button in the upper right corner, the center of the page pop-up prompt dialog "is saving photos please wait" less than 1 seconds, the subordinate page from the right pop-up, edit the text can be clicked to publish or save the draft box;
• If you choose to upload a video, click the video icon, the face from the right to withdraw the display lens shooting status;
• When the video is selected, click the Checkmark icon in the top right corner, and the center pop-up message dialog box displays
• Video synthesis in 1 seconds after the disappearance, jump to the text edit?, edit the text can be sent by clicking the Publish button to send directly, jump to "discover"? Display the message dialog box is published successfully, and then the page automatically refreshes the content, the page Notes section of the Upper Display message dialog box shows how many new notes;
• Click the "Save Draft" button? The face darkens at the same time the central pop-up message dialog asks if you want to save your notes to the Drafts box and click the OK button? Facing right POPs back to "discover"? Face.

8) View all message portals: on three main pages, there is a message icon in the bottom left corner of the page, there is a new message, a small red dot appears in the upper right corner of the icon, click the icon to open the message page directly.

Page logic content:

• Click the message icon in the bottom left corner to open the message page;
• Like and collection, comments and @, attention, notification messages, private message options list are displayed on this page;
• Click on each option to see the exact contents of each message.

Page Interaction Description:

• Click on the lower left corner of the message icon, jump directly to the message page;
• Click on each option, the subordinate page will pop up from the right side of the screen;
• Click on the left-hand corner left arrow page to the right pop back to the upper page;
• or swipe right from the left edge of the page back to the upper page;
• Click the private message option, and the new page has a red add-in underneath the title to load the new content.

9) View Shopping Cart Merchandise entry: In three main pages, the bottom right corner of the page has a shopping cart icon exists, there is a new message, there is a small red dot appear in the upper right corner of the icon, click the icon to open the shopping cart page directly.

Page logic content:

• Click the message icon in the bottom left corner to open the message page;
• Like and collection, comments and @, attention, notification messages, private message options list are displayed on this page;
• Click on each option to see the specific contents of each message;
• You can click Cancel order before the order is paid.

Page Interaction Description:

• Click on the left corner of the message icon, directly open the shopping cart page, the red loading bar shows the loading progress, the center of the page has four color dots constantly flashing update content, and then display shopping cart merchandise;
• The product left check mark is selected as red by default, and click Cancel is selected to display as black;
• Click on the bottom right corner of the checkout button, the Order Payment page pops up from the right;
• The lower right corner payment button starts 30 minutes countdown;
• After you select the payment route, click the Pay button to confirm that the payment menu pops up from the bottom of the page.

7.4 "Follow" page

In the Little Red Book app, the "focus" page is more focused on the user focus on the content of other users, but also to users to recommend some of their own attention to the small partners, their attention to other partners, or be concerned about the small partners like the notes, the content is mainly composed of the following three parts.

(1) Page name: "Follow" page

(2) Page entry: Launch Little Red Book app swipe right page or tap text to go to "follow" page

(3) Page structure:

• Recommended user Focus
• Follow user-issued notes
• Follow user-liked notes

(4) Detailed description of the logic page

The "Attention" page contains elements of the same functionality as the "Discovery" page, with details drawn from the 6.3 1, 2, 7, 8, 9, 10 content, which are not described here.

1) Recommended users: This part of the content is to enable users to meet more small red Book app, this part of the content by users, products, labels, albums, four parts.

Page logic content:

• Swipe left to see more users, click on the avatar to enter the personal space, click the attention button to show that the business card disappears after attention, click the Hide button business card disappears directly;
• Click "View more" to go to the recommended attention page, which includes recommended users, recommended businesses, recommended tags and recommended albums.

Page Interaction Description:

• Click on the image page to go to the user's personal space;
• Click the "Follow" button, the text becomes already concerned and the business card disappears;
• Click "Hide" text business card disappears directly;
• Click on the "View More" text page to jump to the "recommended attention" page;
• The current page is titled "User", the text is black with the other 3 gray text, the text has a red horizontal line, when you swipe the page to the right or click on the "Business" text, the page is left over the "business" text, while the red line from "users" under the "Business" slide.

2) Follow the user's notes: Focus on the users have been concerned about the small partners posted some notes, click into the note page, and other operations consistent with all the notes page.

Page logic content:

• Click on the user's name or avatar to go directly to the user's personal space page;
• Click "..." to choose to share notes or report notes;
• Click on the picture page to jump to the notes page, all the operation with the 4th part of the introduction of the same;
• Click on the image below the heart chart punctuation like, click on the comment icon to go to the notes page Comment area location, click the attention icon Pop-up Select the album menu.

Page Interaction Description:

• Click on the "..." button, the page dims while the bottom pop-up menu "share" "Report" "Cancel" option, click on the outside of the menu or "Cancel", the menu to bounce back from the bottom;
• Click on the image, the center of the page has a red circle rotation loading page and then jump to the notes page;
• Click the heart icon, the icon to zoom in and then into a red enlarged number of numbers increased by 1;
• Click on the comment icon to go to the comment area on the notes page and swipe up until the last comment appears and the keyboard pops up from the bottom;
• Click on the attention icon, and the page Dim menu pops up from the bottom.

3) Follow the user likes the note: The user has been concerned about the small partners to do something like the operation, the system will recommend to users to see.

Page logic content:

• Click "..." Pop-up menu option "Not interested", select this option after these notes disappear;
• Click on the user name to jump to personal space;
• Click on the picture to go to the notes page;
• Clicking on the icon below the image will result in the same effect as in the previous section.

Page Interaction Description:

• Click on "..." The page dims at the same time the bottom pop-up menu "not interested" "Cancel" option, click the menu outside the screen or "Cancel", the menu to bounce back from the bottom, click "Not interested" after the likes of the note will disappear from this page;
• Click on the image, the center of the page has a red circle rotation loading page and then jump to the notes page;
• Click the heart icon, the icon to zoom in and then into a red enlarged number of numbers increased by 1;
• Click on the attention icon, and the page Dim menu pops up from the bottom.

7.5 "Purchase" page

In the Little Red Book app, the "shopping" page is to support the notes page, the notes page will find the product purchase link, on the purchase page can also see the user posted relevant notes about these items.

(1) Page name: "Purchase" page

(2) Page entry: Launch Little Red Book app swipe left page or tap text to go to "buy" page

(3) Page structure:

1. Promotional ads
2. Product Categories
3. Goods Limited Time purchase
4. Black Card Upgrade
5. New Grass on-line
6. Product List

(4) Detailed description of the logic page

The "Attention" page contains elements of the same functionality as the "Discovery" page, with details drawn from the 6.3 1, 2, 7, 8, 9, 10 content, which are not described here.

1) Promotional ads: in the "shopping" page of the search box is a promotional ads, ads will be written to indicate which kind of commodity today low discount, discount degree, 1 yuan seconds kill activities, etc., put in a conspicuous position in order to give users more benefits.

Click on the promotion to enter the low-priced discount zone, at the top of the page is the zone title, return icon and share icon. The following is a 4-zone recommended products, specially for the user to grow grass products. Below is the section of the Product category floor, click on the floor down arrow to open all floors, click on the floor you want to know to jump directly to its location, or directly up the page to view all the floor content.

In the "Second Kill", "Spring Festival" seasonal floor, "hot List" These floors, will include promotional advertising links, click on the ad to enter a new page is 4 dozen products cycle play, a floor and product list. The rest of the floor is a list of items, click to access the Product Details page. There is a shopping cart icon linked to the shopping cart page at the bottom right of the promotional advertising link page, which can be quickly changed.

2) Classification: "Shopping" page listed 7 categories, the 8th is "more categories" Click to see all the product categories, each category also has a more detailed classification, click on this more detailed classification into the inclusion of notes, products, users of the page, is in the search can directly reach the page. In the "shopping" page feel free to click on a category to go to the exclusive page, the top is the title, return and share icon, the following is the list of products 2 seconds to change to the left, then the floor row, click on the pop-down menu to display all the floor headings.

Below the floor is the first "Today activity" "Low price Zone" link, click into the page structure of the above 1 click on the promotion of the page structure to enter the same. There are several categories in the front of the floor in the corresponding section contains the list, the discount area and product lists, the rest of the category is only the product list of the corresponding content.

3) Merchandise Time-limited purchase: Show the shopping area shows 4 items, click on the product will not be directly to the product details, click on the limited purchase area to enter the limited time purchase page, the top of the black line shows the specific timing to start snapping up goods, the current snapping in the background is red. The next snapping time member can be a priority snap-in, the "soon to open Rob" and "member now Rob" two titles up and down switch.

The user can click a time, the background turns red when clicked, most of the red squares stay in the middle of the time line, and browse which items are low-priced during this time period.

For items that have already been robbed, the top of the list of items has a countdown to the end of the active distance. For goods that have not yet been robbed, the top has a time countdown to start and a member priority a footrace.

In the list of products, you can see the product picture, name, snapping price and "Grab" button, click on the button below the time line to display the "Add to Cart" message, stay 1 seconds after the disappearance. The bottom right corner of the list has a shopping cart icon and a quick jump to the shopping cart page. Click on the product to go to the Product Details page, you can see the comments, related notes.

4) Black Card upgrade: Black card members are small red Book specifically for the user (small sweet potato) to create a member of the shop, from the "shopping" page into the Black Open details page, the first is a membership card picture, click on the picture "View Details" page dimmed central popup menu Description Black Card Members save details and "Join Black Card Members" link button , users can pay for seasonal, half-yearly card and annual card, can be purchased at one time can also open automatic renewal function.

Membership card image below also listed the membership privileges include: Special offers, pre-limited time to rob, seven days insured automatic refund, exclusive price, exclusive customer service, exclusive packaging of the six services.

Below are also "what black Card members say", click the Go to Notes page to view notes about black card members. The next part is the main content, "Black card members enjoy" part of the title line to the left to see what kind of products can participate in product membership benefits, swipe up the page to view the product title and some product list. Click the product title to go to the product list below the heading. When browsing the list of items, a shortcut to "Join Now" appears at the bottom of the page.

5) New grass on-line: The main recommendation is a number of new products, the page consists of classification lines and product list, some of the floor content of the first chapter recommend some community popular notes then the Product list, click on the product image to go to the product shopping page.

6) Product List: Click on the product to go to the shopping page, the page includes product picture, price mark, commodity guarantee, product function Introduction, view brand space (including brand pen brand goods), buy this item also buy other product link, product use comment, view related note, product specification parameter and information, frequently asked questions, usage guide , graphic details, followed by a description, related goods and other content. There is always a quick action icon at the bottom of the page, shop, shopping, wishlist, add to cart, buy now.

Click on the image to go to the Product Details page, left and right to swipe the picture can be viewed more than one picture, further click on the image will enlarge the image, then click the image back to the original size. Swipe up to see the Black Card member price, click on the left pop-up new page is 5 mentioned in the Black Meeting Member introduction page. Continue to slide up the page to see the product brand, click on the brand text to the left pop up the new page will see the brand's other product list and related notes, you can also follow the brand.

"One expensive on the compensation, 7 days Insured" Click on the right arrow, the bottom of the page pop-up menu product description, the contents of this article in detail about the "one expensive on the compensation", "7 Days Insured", "Bonded Warehouse delivery", "Unit price package Mail", "package tax", "not support returns" six policy notice. Clicking on a page other than the menu or clicking the Close icon will cause the menu to pop up from the bottom.

Some products can choose the number of pieces, click on this line, the bottom of the page pop-up menu can select the number and click OK to join the button, the menu from the bottom pop back to the bottom of the upper page shopping cart icon out, a small black menu appears "successfully added to the cart" and a red "go to Checkout" button to connect to the shopping

There is a shop logo below the product feature description, click to go to the merchant homepage. The Merchant homepage is made up of homepage, new, popular, active four parts, the top right corner has the share and the category icon, but lacks a search box. Back to the merchant logo below is a look at these products people also saw the product link, the small sweet potato How to say the product review, and then below is the product detailed graphic introduction and related commodity list. Related products may be the same product or other products with the brand, click on the image to enter the product shopping page.

At the bottom of the product page there are always shops, shopping carts, wishlist, add to cart and quick links to buy now.

Eight, test the abnormal page and unexpected situation

I used the Little Red Book app experience, testing the network anomalies, login anomalies, data loss occurs, the app's response is what, there is no network in the case of what functions can still operate.

8.1 Network Exceptions

Test content: No network under the premise of the user into the login app and the use of the app in the process of breaking the network state.

Through the test found that no network connection in the case of the app to choose to enter the shopping cart, orders, potato coupons, wish list, black card members of these functions did the data cache display text "Can't find page", and the other did not do the data load of the page to do the information of the network anomaly popup design, in the page above the position display " Network connection is broken, check the text of the network settings and stay on the page to know the connection network.

Even if there is no network in the process of using the app, the app is also presented in the same way as these two states. But if the user is not connected to the network in the process of sliding the page to browse the list of notes, the user can still perform to the note like or Cancel to like this operation, you can also browse the following content to browse all the loaded content, you need to update more content when the pop-up message popup window.

8.2 Login exception

Test content: Start the app without a network, without logging in.

In the absence of the network is not logged on the premise of launching the small Red Book app, the Welcome page of the video can be played normally. Figure 1 is a non-network situation, the user through the mobile phone number and send a verification code way to sign in the app. From entering the mobile phone number and go to the Input verification code page, there is a message "network connection disconnected, check the network settings", this message has been stuck in the page. The page shows that the verification code has been sent and sent a countdown, but the author did not receive the verification code in the countdown time, after many attempts have not received.

Figure 2 is a network-free situation where the user logs into the app via a third-party account. No network third-party is unable to authorize, the page did UI design has shown "network error, please click the button reload" text and reload button. There is a message at the bottom of the page "The network does not give force, try again later (C7002)", the text does not disappear. All the prompts do not indicate that the network is not connected and does not give a button to jump to the mobile network settings.

8.3 Data loss

When using the app for a long time to interrupt the warrant background, when the network or login is abnormal, these conditions are likely to cause the app's data to be lost. When the user returns to the app again, the page cannot be allowed to do anything, and the system has to restart the Red Book cover page and then go to the Discover page. In the event that the app crashes, the user cannot click on any feature system and cannot reload, the user can only choose to manually exit the app and then re-enter.

Ix. Problem Exploration & improvement views Question 1: Label content switching

Experience Feeling:

When the user browses the notes in the "Video" tab, they need to swipe up to load more notes, and then find that the label row is hidden, and when the user wants to switch other tabs, they need to go back to the top of the page to toggle the tab. Fast Two-click time with iOS for fast-to-top, with Android I used one of the stupidest ways to swipe down the page to the top of the page, which also led me to not want to switch tabs in the future.

Until recently crazy use of the Little Red Book app only to discover this hidden feature, only need to click "Discover" text not only to achieve the fast to the top also make new notes have been updated, but sometimes also happen repeatedly click "Find" text will not have any effect. I think I was spoiled by the quick sticky button on most pages. Sometimes want to swipe left and right page, the result found that this technique is attention, discovery, purchase the switch between pages.

Change of opinion:

Two corners below the page have been occupied by two shortcuts no more space, you can actively identify the system when the user swipe down the page, the Quick top shortcut appears above the shopping cart icon, swipe up the page or stop sliding when it is automatically hidden.

Issue 2: Video Note walk traffic

Experience Feeling:

When a user enters the video tab, all videos in the video list will automatically play video, even if they are connected to a cellular network.

Change of opinion:

The app should make a pop-up message popup to the user, "allow the app to use the mobile network" and give the "Go Settings" button to jump to the mobile network Settings section.

Question 3: Pictures, video notes

Experience Feeling:

In other tabs, picture notes and video notes are mixed, and when you browse the list of notes, both the picture and the video are in the flow, and all the notes are sorted by default in chronological order, which makes the user less active in controlling the app.

You can add a sort and filter at the top of all your notes, by default in chronological order, sorted by time and heat. The filtering method can be divided into two kinds of picture notes and video notes, which can reduce traffic.

X. SUMMARY

After analysis and continuous application of the small Red Book app, I found that the small red Book different features of the pages are actually closely related, for example, when browsing notes can be directly into the notes mentioned in the purchase of the product link, And on the product purchase page can also see this product other users of the relevant notes issued to understand the use of the product experience. And the real experience is that note sharing really makes me realize that an app can realize the ability to discover good things around the world.

Little Red Book app product requirements document (PRD)