web-dev-qa-db-ja.com

モバイルハンバーガーメニューの場所

より大きなモバイルデバイス(Samsung Galaxy NoteやiPhone 6 Plusなど)の登場により、Webサイトで特定のアクションに到達するには、追加の作業が必要です。

Ease of thumb reach map

画面の下部にハンバーガーメニューを配置するために、誰もがモバイルWebの前例(アプリではない)を参照できますか?私たちが参照している例はGoogleマップです。これは、ページの下部にある種のメニューを提供します。

Google Maps on Android

2
Alex Skoal

これも検討したいのですが、よく見ている要素のようです。 マテリアルデザイン は、フローティングボタンの概念をAndroidのデフォルトとして導入しているため、より多くのアクション(メニューを展開するなど)が表示されることが期待されますより大きなデバイスの底面または安全面。

さて、私は悪魔の支持者を演じ、ノーマンとギブソンの両方の定義を取り入れたMads Soegaardによる Affordances の記事をチェックすることをお勧めします。ここでは、ほとんどのユーザーがその要素を上に表示することを期待しているため、これが依然として難しい移動である理由を理解します。

以上のことをすべて踏まえて、すべてのシナリオを考慮した代替案を作成することができます。たとえば、フローティングアクションボタンを使用して大きなモバイル画面をターゲットに設定すると、フローティングアクションが表示されます画面の下部または場合によっては中央に、次に bottom sheet を使用してメニューを表示します。また、通常のモバイル画面では、メニューを上部に配置し、下部のシートまたは通常のドロップダウンメニューを使用します。

ただし、ここでは[〜#〜] menu [〜#〜]について説明していることに注意してください。ハンバーガーアイコンを使用するかどうかに関係なく、要素のテストが行​​われます。

1
Devin