web-dev-qa-db-ja.com

2つのメニューアイコンの違い:3ドット(ケバブ)と3行(ハンバーガー)

これらの2つのメニューアイコンの違い(ある場合...)

1)3行(別名:バーガーアイコン)
enter image description here

2)3ドット(ケバブアイコン)
enter image description here

27
Gil Epshtain

一般的に言って、それらはさまざまなタイプのメニューを開くために使用されます。

  • 「ハンバーガー」は「ハンバーガーメニュー」を開くために使用されます。これは、画面の側面から表示され、画面の大部分を占める引き出しとして表示されます。
  • Googleのマテリアルデザイン言語に由来する「ケバブ」(縦に3つ並んだドット)は、ボタンやその他のコントロールから小さなインラインメニューを開くように設計されています。

具体的には、アイコンの命名に関して、Googleはハンバーガーメニューを「メニュー」と呼び、垂直または水平の「ケバブ」を「より水平」または「より多くの垂直」と呼びます。

ケバブとその他のメニューオプションの Luke Wroblewski の優れたデモを以下に示します。

enter image description here

30
Matt Obee

私はiOSおよびAndroid設計ガイドラインを参照しており、3ドットのアイコンを "ケバブメニュー"として言及していません。

AndroidではこれをOverflow menuと呼びますが、iOSではMore

参考までに:Android- https://material.io/design/components/app-bars-top.html#anatomy =

iOS- https://developer.Apple.com/design/human-interface-guidelines/ios/icons-and-images/ system-icons /#tab-bar-icons

6
NB4

Googleはそのデザインガイダンスでこれらのアイコンを定義しています。

いわゆるハンバーガーアイコン  ナビゲーションドロワーを開くナビゲーションアイコンで名前が付けられます。
これら( material.io ):

ナビゲーションドロワーは へのアクセス 目的地とアプリ 機能性、アカウントの切り替えなど。


3ドットアイコン  overflow menuという名前です。
Googleはそれについて説明しています:( material.io ):

アプリ 行動 アプリの右側にアイコンとして、または オーバーフローメニュー


注、これは単なるGoogleの定義です。しかし、GoogleはAndroid=実際にはこれらのアイコンを集中的に使用しています。他の企業やプログラマーもこれらのアイコンを別の方法で使用する場合があります。

2
gotwo

これまでにも多くの表現に出くわしましたが、それらのいくつかを以下に紹介したいと思いました。

enter image description here

それらは異なって見えても、opening the menuとほぼ同じ目的で使用されます。独自の表現にはスペースの制限があるため、彼らは時々好みましたが、それらの一部はテーマ内の個別のイラストで使用され、hamburger menu、しかし、それがすべてに当てはまるかどうかもわかりません。

enter image description here

2
Erhan Yaşar

3つのドットは楕円として知られています...そして、現在のコンテキストの認識にはある程度の推定があり、現在表示されているものよりも多くのものがあることを示しています。

もともとそのまま使用していたようで......

ハンバーガーメニューは縦型のスタックであり、人気が高まっているため、(時々、ますます頻繁に)縦に作られました。事」。

ハンバーガーは、垂直メニューまたはリストの視覚的な略語です。したがって、アイコンとして意味があります。

と同じように...省略記号。

縦の省略記号は単なる愚かさです。

しかし、Google Materialはそれ自体が物事や調停者を想像したいと考え、一部の人々はこの妄想に帰することを望んでいるため、人気が高まっています。

Appleは長い間、これらすべてのタイプの必要性を悪いアプリデザインの指標と見なしていたため、これらすべての種類のものを防止することを望んでいました。彼らはポイントを持っていたかもしれません。

継続して使用が増加しているために発生した規則は、基本的に次のとおりです。

メニュー=ハンバーガーその他のアクション=楕円

これは、ある程度、理にかなっています。

縦長の楕円は忌まわしい失敗です。何にでも使ってください。

1
Confused