APP interface layout "little experience"

APP interface layout design is a very important part of APP design. Reasonable use of APP interface layout will make the APP interface appear clear and beautiful. So what are the common APP interface layouts?

① Top navigation. The navigation of the entire application is at the top. Users can switch between different navigation tabs by swiping left and right. The main content area will be a dynamic panel. When the user clicks on the navigation item or swipes left and right, the state of the dynamic panel in the main content area will be switched.

② Tabbed navigation. Apps with multiple main functional divisions all use this method; it is suitable for 3 to 5 navigation menus, with more prominent core functions and can also notify users in a very intuitive way.

③ Drawer style. Drawer style layout means that the navigation is hidden on the left or right side, and the user can drag the navigation part out by sliding and dragging, just like opening a drawer. This layout is suitable for applications with a lot of main content and do not want the menu bar to occupy a fixed position and consume space.

④ Nine-grid format. The nine-grid format does not necessarily have nine grids, and can be flexibly adjusted according to needs. The characteristic of the nine-grid layout is that it is intuitive, and all functions are clear at a glance.

⑤ Drop-down list style. In this layout, the menu is hidden by default and slides out after the user clicks it. It is a bit similar to the drawer layout, but it usually slides up and down.

⑥ Abnormal. In this type of layout, some unconventional menus are used for navigation, such as circular navigation disks, fly-out menus, etc.

⑦ Hierarchical menu. This multi-level menu design is suitable for interface applications with many items but relatively simple content of each item, such as contacts, addresses, etc. Recommended reading: Reason and emotion in interface design!

1. The company/organization logo is in the same position on all pages.

2. All data content required by the user is displayed in a reasonable order.

3. All important options should be displayed on the home page, and important items should always be displayed.

5. Important items should be displayed at the top center of the page.

6. Necessary information should be displayed at all times.

7. Messages, prompts, notifications and other information appear on the screen where they are easy to find.

8. Make sure the home page looks like a home page (make it different from other second- and third-level pages).

9. The length of the homepage should not be too long.

10. The APP navigation should adopt the bottom navigation method as much as possible. The number of menus is 4 to 5.

11. The length of each APP page should be appropriate.

12. Use clickable “table of contents” on long web pages.

13. Dedicated navigation pages should be short and avoid scrolling so that users can browse all navigation information at a glance.

14. Give priority to paging (rather than scrolling).

15. Do not scroll too much (up to 4 full screens).

16. When you need to read and understand the text carefully, you should use scrolling (not paging).

17. Provide a title for the frame.

18. Pay attention to the width of the panel blocks on the home page.

19. Place the primary navigation in the left panel

20. Avoid horizontal scrolling.

21. Is there enough spacing around the text area?

22. Are the items reasonably classified into logical areas, and are the areas clearly divided by titles? Recommended: Basics of UI Icon Design (Video Tutorial)