Summary of mobile app UI design patterns

The general functional elements of the mobile app user interface include navigation, forms, tables and lists, search and classification, tools, charts, visual attraction, feedback and help.
Common navigation includes hop-type navigation (including jiugong Ge), list menu, option menu, showroom style, meter style, metaphor style, and super menu. Page wheel is also used in secondary navigation, image wheel and extended list. The hop panel is also called launchpad. It uses grid layout for equally important content, but it is not stuck in grid layout. The list menu also includes a personalized list, group list, and enhanced list. It is suitable for displaying titles with long or sub-text content. You can set different effects for selected menu items by using easy-to-recognize or labeled icons, so that you can clearly define which item you have selected. The showroom style can be well applied to frequently viewed and updated content. Do not use too many instruments for design. Exercise caution when referencing the metaphorical navigation. Before selecting navigation, you must first determine the information architecture. If the navigation object is only a minority of content in the application, you can use the option menu. All major navigation is also suitable for secondary navigation. For secondary navigation, page wheel can be used to implement a small number of page navigation tasks. Image wheel is used to show art, products, and photos.
Common forms include login forms, registry forms, check forms, calculation forms, search forms, multi-step forms, and long forms. References to forms include forms on mobile device: modern solutions (HTTP; // templates) mobile form design strategies (http://www.uxbooth.com/blog/mobile-form-design-strategies) do not create original login forms, using common design solutions, it is best to retrieve the password in a way that forgets the password. The registration page must be concise and clear. All information to be filled in is displayed on the screen. Do not make too many search options scare users and control the search conditions on one page. The design goal is to remove unnecessary input domains and reduce the page and operation steps, do not consider the form into several steps to avoid scrolling the screen.
Common tables include: Basic Tables, tables with no table header, row grouping tables, fixed column tables, cascading lists, editable tables, and tables with visual indicators, tables with Content Overview and data. Do not use dark gridlines or vertical separation methods for tables. The text is left-aligned and the numbers are right-aligned. The table content displayed on a screen should not be too large. A maximum of three lines of information can be displayed in each Wide Row. A striking style is designed for fixed columns to remind users that sliding operations can browse more data. The table content overview should be displayed above the data and be clear at a glance. Remove unnecessary icons by using visual indicators that users can quickly recognize.
Common data types include explicit search, Automatic completion search, range search, display of recent search content, on-screen classification, category sorting selector, category form, on-screen filtering, and container filtering, filter dialog box and filter form. Dynamic Filtering is effective for a limited amount of data. For range search, 3 ~ The six range options are sufficient. Specify the total number of items in the search result. Use delayed loading instead of pagination. Filter options should be clear and easy to understand. Use a short list of filter options to avoid scrolling.
Common Operation columns include toolbar, overlapping menu, context tool, inline operation, call OPERATION button, and batch operation. The toolbar is usually displayed at the bottom of the screen and contains screen-level operations. Do not hide the main operation in the menu or design it as an unrecognized toolbar icon. Each object can have up to 1 ~ Two kinds of inline operations. The multi-state button is both a trigger and a feedback mechanism. It is suitable for performing operations in a series of closely related tasks in a limited screen space, batch operations such as deletion and re-sorting are best performed in editing mode.
Common charts include: charts with filters, charts with data on the overview page, rolling preview charts, data point detail charts, detailed information charts, scaling charts, data perspective charts, and spark spectrum charts. If you want to provide time-based filtering control, you must reserve enough screen space for the touch click object. The chart features depend on whether the preview window is read-only or interactive. If it is an interactive preview window, it is easier for users to operate with large touch objects. The test chart has three main contents: What is the topic? What information is most important? What is the specific value of the most important information? Attract users to view more data and use the navigation display hierarchy. All details are displayed by combining the spark line and detailed information graph.
Visual attraction includes dialog box, prompt, wizard, video presentation, slides, first-time use guide, continuous visual attraction, and discoverable visual attraction. The content of the dialog box must be concise and concise, so that you can access the application instructions in other ways. The prompt should be as close as possible to the content it points. You can use the Wizard to highlight the main functions of the application from the perspective of the user's purpose. The video demonstration can display the key functions of the application. Keep the element of continuous visual attraction concise and encourage users to refresh data. Common feedback includes: error, confirmation, and system status. Provide a solution to the problem in the form of plain text, and try not to use the mode dialog box. When you perform an operation, you are prompted to confirm the information, but do not interrupt the user's use of the product. Common features include: Touch, slide, and drag. Visual design techniques such as corner angle and shadow make the interface elements look touchable. The icon dragged to the handle must be easy to recognize. Common help modes include: instructions for use, instructions for interface elements, and instructions for using the wizard. The use of screen, illustration, text and other forms are integrated in the instructions. The wizard should include the most critical functions in the application. It is best to start from the user's usage goal.
The core design of the mobile application user interface is direct implementation and lightweight design.