Control description
1) Input Box
If the input box has a default hint, click on the input box to eject the soft keyboard.
When the input box is not empty (except for spaces), the default display disappears.
2) Popup and fallback mechanism of soft keyboard
When the input box must be entered as a number, the digital soft keyboard pops up. The rest of the time, pop-up text soft keyboard.
When you click or swipe down in the area outside the soft keyboard, the soft keyboard is retired.
3) Small Black block tips
Displays * seconds, and then disappears automatically.
4) Select the Bullet box
There are action buttons on the frame.
Click outside the box and the box disappears.
5) Phone Back button (Android)
Click the Back button on your phone to go back to the previous layer and pop up the appropriate prompt.
6) Home button
Press the Home key, the program changes to run in the background, when you open the software again, you go back to the page when you press the home key.
At the beginning of the document, it is advisable to have a separate module that describes the controls used within the app, explains the types of these controls, and how each control corresponds, and when the module is unified, it is OK to simply elaborate on the other modules as they relate to the control. Some common controls are listed below.
Similarly, a lot of common mechanisms can be integrated together, such as loading mechanism, caching mechanism, network judgment, interrupt mechanism, and so on, the following is a few of my own collation of the common functions.
General Features:
1) Caching mechanism
Every step of the operation, after each page switch, the data need to be cached? Where's the cache? What is the time to clean up the cache?
2) Network judgment
A, generally when it comes to downloads or other traffic-intensive operations, will be 2/3G network or WiFi network judgment, when the non-WiFi status is determined, will be reminded.
b, other need to request data back, only simple network condition is good judgment, when the network condition is bad when prompted.
3) Interrupt mechanism
In addition to exiting the login, consider what happens to cause the user to interrupt the operation. What is the impact of the interrupt operation, such as whether to save the progress of the operation and so on.
Several common situations are as follows:
A, call
B, Home key, back to the background to run.
C, press the Back button (Android)
D, the page has a suspended function, such as countdown, audio playback during the pause button.
Although the app is very diverse, there are some things to consider when it comes to pages and controls, whether you're designing prototypes or writing PRD.
Notes about the page
1) What is the usage scenario for this page, and what is the purpose of the user's entry to this page? What is the purpose of our designing this page? Do we want users to stay on this page for a long time?
2) Pre-conditions: There are several ways to enter this page, different identities into this page, the operation permissions differ?
3) The mechanism to exit this page. Common: The return button in the upper left corner, return to the previous layer, press the phone back button (Android) also return to the previous layer.
4) Operating gestures: for example, in the left and right drawer, and left and then can usually return to the main interface, such as the top of the Switch tab, is the use of the left side of the switch or click to switch, or some applications double-click to enlarge the page, two fingers to press and slide in the middle, indicating the narrowing of the page, such
5) Different status, page display content is different
For example, after being kicked out of a group, the content is different on the chat page of the person being kicked out and the other person's chat page, for example, the Administrator and the normal member's operation permissions are different, so when you go to the same page, the content displayed is different.
6) Default frame (often forget!)
When the page has several states (such as 2 pictures and 3 images, the page state is different), define the default state, and define the default frame for the page.
The default frame is displayed when the page is entered, and after the data is requested in the background, the page is adjusted to the corresponding frame according to the background data.
7) The default picture when the data is empty (often forget!)
The previous article defines the default frame for the page, but only the frame is not enough, you must also define the default display picture in the frame, the picture will be packaged into the installation package, the network is not in good condition, the default frame and the default picture will be displayed when the data is not requested in the background.
8), display mechanism, sorting mechanism, refresh mechanism
A, determine the size of the app to fit the screen, iOS support to what version, Android to fit the resolution of how much.
Then to form their own intuition, the minimum resolution of the appropriate screen can put the maximum number of buttons, the current design is placed on the smallest screen to fit, will not be too crowded.
When a line of words too much, must think so many words put down, put together not good-looking.
Would you consider flipping the page or the waterfall stream?
b, sorting mechanism.
How much does a page show? What sort of factors do you follow?
C, refresh mechanism.
How much does it refresh at a time? How do I refresh more? Auto Refresh or manual refresh? Do you have a hint when the new content is not being brushed?
Common manual Refresh mode: The top right corner has the refresh button, click, Manual Refresh.
Common Auto-refresh: Refresh When you enter this page again; set a time value to refresh every once in a while.
Notes about the control
Controls are actionable parts such as buttons, selection boxes, toggle tabs, sliders, and so on.
1) What are the prerequisites for the various states of the control? When different identities enter the page, is the button in the same state?
2) The state definition of the control?
For example, such as Submit button, to define clearly when can point, when not point
3) is the position and size of the control appropriate?
is the button to be operated clear in the current interface? Is the important, frequently triggered function button on the phone's operational area?
4) How many controls do you have? What is the result of each operation? can users find hidden deep operating methods? Do I need to add user guidance?
Common are: Click, long Press, left and right strokes
5) Change of state during Operation
A, load: whether the waiting time for state change is more than 2S, if it is too long to join the loading state
B, read
C, buffering
D, Operation progress display: such as progress bar,
6) Continue operation during Operation
What is the impact of continuing operations during a button operation? Do you need to save the progress? Do you need to be prompted?
Common continue actions: Cancel, toggle, return, click on another area, click this button again consecutively
7) Interruption during operation
Refer to General function 3) interrupt mechanism
8) after operation
A, is there a suitable hint?
Type of prompt that appears: Select whether the light (tip/red dot), Medium (Toast), heavy (prompt box) priority level is appropriate
B. Change of button state after operation
C, after the operation of various results: success, failure, null value
9) Think about the results after the operation, and then what happens?
10) Consider the impact of special cases on the operation of this button
A. What is the network requirement for the operation of this button? WiFi or 2/3g network? What is the network's judgment logic? When the network is bad, do the appropriate reminders?
B. Does this button require a login? Can I do this if I'm not logged in? Do I need a login reminder?
C, a number of consecutive clicks, what will be the impact? Give feedback?
D, the data obtained after the operation needs to be cached? Where's the cache? What is the time to clean up the cache?
E, some operations after the implementation of the changes caused by when the show? can be displayed? is not displayed at this time, when you enter this page again, or not at the moment, when you enter the app again?
For example, after the chat record is deleted, return to the chat page, empty the chat log immediately or enter again?
In general, PRD belongs to the operational level of skills, should be as reasonable as possible, logic tight.
PRD Study notes: Some notes to note