web-dev-qa-db-fra.com

Quelle est la différence entre les 2 icônes de menu: 3 points (kebab) et 3 lignes (hamburger)

Quelle est la différence (s'il y en a ...) entre ces 2 icônes de menu?

1) 3 lignes (icône de burger alias)
enter image description here

2) 3 points (icône de kebab alias)
enter image description here

27
Gil Epshtain

D'une manière générale, ils sont utilisés pour ouvrir différents types de menus.

  • Le "burger" est utilisé pour ouvrir un "menu burger", qui se présente comme un tiroir qui apparaît du côté de l'écran et occupe la majeure partie de l'écran;
  • Le `` kebab '' (trois points verticaux), qui provient de la langue Material Design de Google, est conçu pour ouvrir un menu en ligne plus petit à partir d'un bouton ou d'un autre contrôle.

En termes de nommage d'icônes en particulier, Google se réfère au menu du burger comme "menu" et au "kebab", vertical ou horizontal, comme "plus d'horizons" ou "plus de vert".

Voici une bonne démo de Luke Wroblewski de kebab et d'autres options de menu:

enter image description here

30
Matt Obee

Je faisais référence à iOS et Android directives de conception et ils ne mentionnent jamais l'icône à 3 points comme "menu kebab" ).

Dans Android, ils l'appellent Menu de débordement tandis que dans iOS, ils l'appellent Plus .

Pour référence: Android - https://material.io/design/components/app-bars-top.html#anatomy =

iOS - https://developer.Apple.com/design/human-interface-guidelines/ios/icons-and-images/ icônes-système/# tab-bar-icons

6
NB4

Google a défini ces icônes dans son guide de conception.

L'icône de burger   est nommé avec l'icône de navigation qui ouvre les tiroirs de navigation.
Ceux-ci ( material.io ):

tiroirs de navigation accès à destinations et appli fonctionnalité, comme le changement de compte.


L'icône à 3 points   est nommé comme menu de débordement .
Google explique cela: ( material.io ):

App actions sont placés sur le côté droit d'une application, sous forme d'icônes ou dans un menu de débordement.


Remarque, ce n'est que la définition de Google. Mais, Google utilise avec Android ces icônes en fait de manière intensive. D'autres sociétés ou programmeurs peuvent également utiliser ces icônes différemment.

2
gotwo

J'ai également rencontré de nombreuses représentations jusqu'à présent et je voulais en présenter quelques-unes ci-dessous.

enter image description here

Même s'ils ont l'air différents, ils sont utilisés dans le même but pour opening the menu. Même s'ils préféraient parfois en raison de limitations d'espace avec leurs propres représentations, certains d'entre eux étaient utilisés avec des illustrations distinctes dans un thème, ce qui s'appelait ainsi hamburger menu, mais je ne sais pas non plus si cela s'applique à tous.

enter image description here

2
Erhan Yaşar

Les trois points sont connus comme des ellipses ... et indiquent qu'il y a plus, qu'il y a une certaine présomption de conscience du contexte actuel et qu'il y a plus que ce qui est actuellement visible.

À l'origine, il était utilisé à plat, comme ça ...

Il a été rendu (parfois et de plus en plus souvent) vertical parce que le menu hamburger est une pile verticale, et gagnait en popularité, donc ceux qui ont tendance à copier sans trop y penser sont allés: " chose".

Le hamburger est une abréviation visuelle pour un menu vertical ou une liste. Cela a donc du sens en tant qu'icône.

Tout comme le ... Ellipsis.

L'ellipse verticale n'est que bêtise.

Mais gagne en popularité parce que Google Material veut s'imaginer une chose, et arbitre, et certaines personnes veulent attribuer à cette illusion.

Apple, pendant un certain temps, a voulu empêcher tous ces types de choses, car ils considéraient leur besoin comme un indicateur de mauvaise conception d'application. Ils auraient pu avoir un point.

Les conventions qui ont vu le jour en raison de leur utilisation continue et croissante sont essentiellement:

Menus = hamburger Plus d'actions = ellipses

Dans une certaine mesure, cela a également un sens.

Les ellipses verticales ne sont qu'un horrible faux pas. Utilisez-le pour tout ce que vous voulez.

1
Confused