App development Combat 2-app product and designer work

Product managers often need to provide product prototypes, flowcharts, and documentation to developers.

Designers need to provide and picture resources to developers.

2.1 Considerations in designing Prototypes and Time

(1) Mobile phone screen width is limited, the horizontal direction as little as possible to place content, and users have generally known that by swiping up the finger, you can display more content in the vertical direction of the screen, so you can put more vertically in the content, you can understand that the height of the display area is unlimited.

(2) If the current display is more than one screen, and the user by swiping up the finger to page N (n>1), at this time usually in the lower right corner of the screen to display an icon, the user click on this icon, the app directly displays the 1th page content.

If the number of pages is more, you need to design that users can choose to view the contents of either page, such as providing a page number list or letting users manually enter the number of page numbers they want to see.

(3) When the string length exceeds the display area, there are usually the following processing methods:

A Line-Break display

B the last character in the display area is displayed as an ellipsis ...

C swipe the current page to the left to display a string that exceeds the display area

When designing a prototype, you need to identify which processing method to use.

(4) Designers in the design, it is best to adapt to the application of the minimum size design, the text display area of the string is the maximum number of characters.

In the e-commerce app, the longest product name may be 20 characters, 20 characters on the top, so it's easier to find the problem of horizontal orientation layout.

(5) The text input area is best designed to design the upper part of the screen so that it won't be obscured by the input method's soft keyboard, such as the sign-in or registration interface for most apps.

If the text input area can only be designed in the lower half of the screen, it is best to design the user to pop a new interface when tapping the text input area so that the text input area is not obscured by the input method's soft keyboard.

Another option is that when the keyboard pops up the input method, the current page moves up the whole, so that the text input area is not obscured.

(6) In the design text input area, should design displays the prompt message: The user input what character and the character number, the input area's rightmost design has the deletion input text the icon, the user clicks can delete all the text in the input area.

(7) The right side of the password input box should be designed with a toggle plaintext display icon.

(8) mobile phone number design according to 3-4-4 format display.

(9) need to identify which pages support users to manually update the current page data, which pages are not supported, if you want to support, you need to explicitly adopt the method:

A user drop-down operation to update data

B the user clicks the Refresh button to update the data

(10) When the user first use the application, many interfaces have no data display, the content is empty, such as when the user first use the e-commerce app, the shopping cart and the order interface content is empty, you need to design these interface content is empty.

(11) Many apps have a tab bar at the bottom of the home page with several buttons, and clicking on these buttons shows that the interface is a first-level interface, and the upper-left corner is not required to have a return icon or button. In addition to the first-level interface, each page should be explicitly returned to the interface from the current interface.

App development Combat 2-app product and designer work