web-dev-qa-db-ja.com

このサイドメニューと呼ばれるものは、多くのマルチタッチアプリにありますが、どこから来たものですか?

たとえば、YouTubeやFacebookのアプリにあります。 enter image description hereenter image description here

86
Lenar Hoyt

私はそれのために行く名前はそれのために一般的に使用されるアイコンへの参照としてのハンバーガーメニューであると信じていますux-hamburger-drawer-icon.333-tr.s20、Unicode文字≡ U+2261 Identical Toに似ており、引き出し内のアイテムの積み重ねられた性質にも似ています。 Hamburger DrawerおよびHamburger SidebarもUXコミュニティにとって認識可能な用語です。


私がこの用語の適切な用法であると私が信じるものについての少しの議論:

メニュー自体は新しいものではありません。アプリやサイトのさまざまな部分へのリンクを含むサイドバーメニューは、初期のWeb以降(そしておそらく他の場所ではおそらくまだ初期の段階)からこのように使用されています。また、非表示のコンテンツを切り替えたり、オプションでドラッグしてコンテンツを表示したりするボタンも、タッチスクリーンスマートフォンよりもはるかに長く存在しています。 QuickTime Playerの古いバージョンのドロワー および OS Xのカラーピッカースウォッチドロワー は、この良い例です。

このパターンは、次のような方法で、ドロワーメニューと表示/非表示ボタンパターンの組み合わせとして最もよく説明されています。

  • メインコンテンツが邪魔にならないようにスライドするか、視覚的に下にとどまり、ボタンをタップまたはドラッグすることで引き出しを表示します。
  • 引き出しのコンテンツは、一時的なアクセスを目的としたメタコンテンツです(ナビゲーションボタン、チャットの連絡先リストなど)。
  • 部分的に表示されているメインコンテンツ領域をもう一度タップすると、引き出しが閉じます。
  • アクティブ化ボタンは常に表示され、引き出しが表示される側のすぐ横にある「ナビゲーション」ヘッダー/フッターに表示されます。

(もちろん)上記のガイドラインを曲げるバリアントが存在します。一部の実装では、ボタンのタップ(ドラッグではない)のみが許可される場合や、同じアプリをより大きなサイズで表示する場合、メインのコンテンツをタップして復元する機能が省略される場合があります。画面デバイス、または引き出しが奇妙にクリックできないものに使用されている可能性があります。このため、上記のポイントは、急速に普及し、広く使用されるようになったパターンの理想化された一般的な形式を示しています。

このパターンが以前にこのフォームに表示されなかった理由の1つ(および他のパターンと区別するに値する理由)の1つは、タッチスクリーンスマートフォンの前は、UIデザインが固定サイズのフルスクリーンほど制限されていなかったためだと思います。この新しい制約により、メインコンテンツが画面から一時的にスライドするという概念とメニューのモーダルな性質が必要であると見なされ、そのため、不必要な視覚的な混乱を隠し、長さのないメニューを提供できるという利点が生まれました。再設計。 AppleのUIToolbarの「More」ボタンのアプローチが醸造の問題を半分しか解決しなかったことも、おそらく助けになった。


私がこの種のサイドバーの引き出しを目にした最初の場所は、iPad向けの今は売れなくなったTweetieアプリだった。 webOSにもかなり長い間このような引き出しがありましたが、「ハンバーガー」ボタンも固定幅の引き出しサイズも採用していないと思います。これについては明確な答えはありませんが、 the です。 数値ofopenソースライブラリforメイキングこれら種類ofサイドバーメニュー 。 GitHubでは、あなたが言及したようにすべてFacebook iOSアプリとPathをポイントしているようです。

Facebook/Path-Style Sidebar/Menu/Drawerは、今後の用語と考えることができると思いますが、会社名への参照はそれを時代遅れにするだろうと予測しますやがて。

81

サイドパネル前述のように appadvice

アプリは非常に洗練されたインターフェイスを備えており、ナビゲーションにサイドパネルを使用します。

23
FrankL

(ハンバーガーアイコンではなく)レイアウトパターン自体は、「Off Canvas」と呼ばれます。 Luke Wroblewskiが Multi-Device Layout Patterns に関する記事で書いています。

...Off Canvasマルチデバイスレイアウトのパターンは、画面外のスペースを利用して、画面サイズが大きくなるまでコンテンツまたはナビゲーションを非表示に保ちます表示するか、ユーザーがアクションを実行して公開します。このパターンは、いくつかの個別のモバイルWebサイトの設計とネイティブモバイルアプリケーションで現れています。

Zurb Foundation のようなフレームワークに実装されています。

FacebookのiPhoneアプリ(またはパス、またはこの規則に従うようになった任意の数のアプリ)を使用した場合は、off canvasパネルが表示されます。ネイティブアプリ内。ボタンを押すと、パネルが左からスライドします(または、見方によっては、メインパネルが邪魔になりません)。

そして、次のような記事で取り上げられています Off The Beaten Canvas:Exploring the Potential of theOff-Canvas Pattern Smashing Magazine:

off-canvasフライアウトメニューは、モバイルレイアウトの主要なナビゲーションパターンとして引き継がれました。そして、正当な理由から:オフキャンバスメニューは、ユーザーに多くの追加情報を提供しながら、コンテキストを維持するための優れた方法です。

22
Matt Obee

@matt_d_ratの記述を詳しく説明するには、

これについては ここにすばらしい記述があります ですが、1981年にXerox Starワークステーション用に Norm Cox によって最初に設計されました!このアイコンはGUI自体の概念と同じくらい古いものです!

実際の動作を見るには このビデオをご覧ください で、約21分にスキップしてください。

Xerox Star Workstation - Hamburger Menu!

21
CBarr

Androidデベロッパーサイト および Googleデザイン仕様 によると、これはナビゲーションドロワーとして知られています。

12
Shruti

Quora で始まった関連する議論から、Geoff Aldayはアイコン自体の起源をもう少し深く掘り下げ、Norm CoxがXerox Starパーソナルワークステーションのアイコンの設計に貢献した人物であることを発見しました。 1981年に導入されました。

CoxとAldayの間の e-mail conversation で、Coxはアイコンがどのようにして生まれたか、そして彼らが働いていたデザインの制約を明らかにします。今日アイコンは愛情を込めてハンバーガーアイコンと呼ばれていますが、コックスはアイコンのためのゼロックス自身の内部ジョークを明らかにします。

私たちは、この画像が窓を涼しく保つための「通気口」であることを潜在的なユーザーに伝えていました。

8
matt_d_rat

サイドナビゲーションは、次のように提案されている用語の1つです。 http://www.androiduipatterns.com/2012/06/emerging-ui -pattern-side-navigation.html

これは一読の価値があり、アプリのナビゲーションメカニズムに革新をもたらす理由を説明しています。

また、他の候補用語もリストします。

  • フライインアプリメニュー
  • ナビゲーションをスライドアウト
  • スライドナビゲーションバー
  • スライドメニュー
4
Dvir Adler

ハンバーガーメニューとフライアウトメニューの両方を聞いたことがあります。オースティンの私の作業環境では、フライアウトメニューが最も一般的に使用される用語です。

3
Tom

これは「ハンバーガーメニュー」と呼ばれます。

Avid Media Composer(文字通り数十年間UIを変更していないプロのビデオ編集スイート)には、「ハンバーガーメニュー」と呼ばれる類似のアイコンを持つメニューがあります。これは、名前の由来。

2
BrianMojo