web-dev-qa-db-ja.com

スワイプして左側のナビゲーションを展開/折りたたみます

私のAndroidアプリケーションには左側のナビゲーションメニューがあります Google TVの左側のメニューバーに似ています 。プログラムで折りたたんだり展開したりして、画面。狭いビューではアイコンの付いたボタンのみがあり、広いビューでは各ボタンにテキストがあります。

次に、ユーザーがこのナビゲーションを左/右フリングジェスチャーで展開したり折りたたんだりできるようにします。それはすべてうまく動作しますが、ユーザーが実際に機能を発見するのではないかと思います。私は 過去のロングクリックと同様の問題 があり、ロングクリックと同じように機能するボタンを追加してしまいました。

その折りたたみ/展開機能とスワイプジェスチャーに対して、それを行う必要がありますか?ユーザーがこの機能を発見するのに役立つ他のオプションはありますか?ヘルプテキストや新機能のリリースノートなどは、おそらく読まれることはないと思います。

4
Manfred Moser

ジェスチャーについて重要なことは、プラットフォーム上のすべてのアプリで一貫した動作が必要であることです。そうでなければ、それらは混乱し、発見するのが難しいでしょう。

OPへのコメントで述べたように、HPのwebOSはスライディングペインを多く使用します(実際には 公式スタイルガイドの一部 です)。以下は、レイアウトがアプリ(ネイティブのメールクライアントとサードパーティのTwitterクライアント)にどのように実装されているかを示すスクリーンショットです。推奨事項については、写真の下にスクロールしてください。

電子メール(ネイティブ)

hp touchpad email app 3 panes vertical

スライドオプションは、スライド可能な各ペインの左下隅にある3つの垂直バーで示されます。左端のペインには特別な記号がなく、ドラッグジェスチャーに応答しません。また、右端のパネルが部分的にしか表示されておらず、完全に表示されていることに注意してください。水平方向では、画面の幅はすべてのボタンを表示するには十分ですが、メールを完全に表示するには十分ではありません。

hp touchpad email app 2 panes vertical

これで、一番左のペインが非表示になります。ただし、非表示になっているペインの数を視覚的に示すものはありません。左下隅にスライドアイコンがあるため、少なくとも1つのペインがあることだけがわかります。右端のペインが全画面に展開されている場合、非表示になっているペインの数も示されません。

TweetPad(サードパーティ)

hp touchpad tweepad 2 panes vertical

最初のビューは、ナビゲーションとフィードの2つのペインのみで構成されています。 3番目のペインが表示される可能性があることを示すものはありません(ツイートを押したときにのみ表示され、個別のツイートのすべてのコントロールが含まれています)。フィードがスライドできることも示されません。スライドは、ペインの任意の場所から開始する右から左へのドラッグジェスチャによって実行されます。

hp touchpad tweetpad 2 panes vertical minimized navigation

フィードペインを最大化しても、ナビゲーションペインは消えません。ラベルをアイコンまでカバーするのに十分なだけスライドしますが、OPが使用しているパターンと同様に、完全に機能します。ペインのレイアウトを変更せずに、任意のアイコンを押して目的地に到達できます。同時に、フィードペインを右にスライドしてナビゲーションをさらに表示できることを示すものはまだありません。

推奨事項

これらの2つのアプリケーションと公式の設計ガイドラインは、画面レイアウトとのすべてのやり取りをカバーしています。このアプローチの明らかな問題は、1)ペインの展開と折りたたみの可能性を示すこと、および2)折りたたまれたペインの数を示すことです。

そのようなレイアウトはAndroid=)ではまだ一般的ではないため、左端のペイン(2ペインレイアウトの場合)に明確なホットゾーンまたはトグルボタンを作成することは、珍しいジェスチャーを有効にします。

また、いずれかのペインが全画面表示になり、他のペインが非表示になっている場合は、非表示になっているペインの数と、ユーザーがスワイプまたは押してそれらを表示する方法を明確に示す必要があります。

4
dnbrv

タッチスクリーンアプリケーションでのこのパターンのさらにいくつかの例:

IPadバージョンでは常にナビゲーションサイドバーが表示されますが、iPhone向けのGmailアプリでは、画面全体をスワイプして左側のナビゲーションを表示します( スクリーンショットと説明を参照 )。同じアクションに対して、冗長なMenuボタンもあることに注目してください。

[アプリ]は、メッセージを右にスライドして、下にあるGmailメニューを表示します。非常に洗練されており、フォルダやサブフォルダ間のナビゲーションがより速く、より効率的になります。

gmail app for iphone


また、通知またはメニューを表示するために1つ(または複数)のサイドを外側から内側にドラッグするのが一般的です。iOSとAndroid上面は通知、BBX下面はメニューです。

1
Naoise Golden

Androidは通常、前/次のアイテム(Googleリーダーやカレンダーなど)または前/次のタブ(Android市場: http://www.pushing-pixels.org/2011/08/11/Android-tips-and-tricks-swipey-tabs.html )。

タブレットでは、左にスワイプして選択した最初のジャンル(アプリ、ゲーム、ブックス、ミュージック)のサブカテゴリを表示するときと同じように、画面の半分だけにコンテンツを表示できます。 Swipey tabs

現在のAndroidコンテンツを拡張するためのパターンは現在マーケットにもありますが、アプリの説明などに表示される下向きの矢印です: Expanding area

そのため、本当にコンテンツを折りたたんだり展開したりする場合は、ここで2番目のデザインを使用できますが、ナビゲーションをスワイプしてlaマーケットカテゴリを表示する場合は、「スワイプタブ」を実装してメニューを見つけやすくすることができます。ユーザーに。

1
Karen