By analyzing these styles, we can think about what design meaning and purpose different styles represent, and we can't ignore the core of the function because it is simple and common.

1. Hamburg menu

Keywords: horizontal bar, multiple menu options

This icon is simple and easy to understand, usually located in the upper and lower corners of web pages and apps, to inform users that there is more to explore besides this button.

when the product has multiple menu options, consider using the hamburger icon to display it, but avoid using it in desktop view as much as possible.

2. Vertical three-point menu

Keywords: vertical and embedded menu

Usually located in the upper right corner or top of a screen or window, it is used to open icons with additional options, and the content to be opened is often a smaller embedded menu rather than a whole new page.

3. horizontal three-point menu

keywords: horizontal, embedded menu and web

horizontal three-point menu are also often located in the upper right corner of the screen or window, and are used to open the menu or display related items.

because the icon style is horizontal, it is easier to use on the web or in a horizontal direction such as a table.

4. jiugongge menu?

Keywords: subcategory, subfunction

The nine-grid menu is usually used to open different subproducts or subfunctions contained in the same product, and you can quickly switch between them. This icon is often located in the upper right corner of the product homepage.

5. Filtered menu

Keywords: filtering and sorting

Filtered menu is formed by horizontally overlapping three lines with different lengths, and it is the most widely used filtering symbol. You can use a filtered menu with the Sort By option or with a global filter.

6. Variation of Hamburg menu

Keywords: special style and stronger sense of fashion

As a substitute for Hamburg icon, is it the same as displaying list menu, but these styles may be less common, and are more commonly used on websites full of modernity, fashion and artistic sense.

Finally

Different styles may represent completely different design purposes, and thinking about these small but precise details often is the key to ensure the improvement of product experience.

It's faster to take your time, and I hope it will help you ~

1. Talk about the application of card design

2. Case study: layout design of grid system

3. How to design dark pattern? These three factors need to be considered

4. Deep analysis: application logic design of service blueprint.