web-dev-qa-db-ja.com

横向きのモバイルのネストされたタブ。ベストプラクティス

横向きのモバイル画面でタブを整理するのに問題があります。

入力：

  • それはゲームです。
  • 「在庫」という名前の画面。ユーザーは何百ものアイテムを所有できます。
  • すべてのアイテムは4つのカテゴリにグループ化できます。
  • 設計上、「購入」と「使用」の画面には2つの「ルート」タブが必要です。
  • ユーザーは画面が開いた直後に「購入」または「使用」を決定し、ほとんどの時間をアイテムタイプ間の切り替えに費やしますが、「インテンションタイプ」間の切り替えは行いません購入/使用

データスキームData scheme

私の現在の状態Prototype

問題を赤でマークしました：

  • 「タイプ4」タブが「使用」ボタンと交差する
  • 「使用」ボタンがスクロールジェスチャーと交差する
  • 右側の愚かな空の領域

EDIT＃1

いくつかの詳細：

  • 「ヘッダーバー」を使用して、すべての画面でコアユーザー情報を表示します（3種類のリソース、プレミアム通貨、現在地など）。
  • 「ショップ」セクションには、価格付きの「購入」ボタン（5桁まで+通貨のアイコン）があります。
  • アイテムの例：「8時間の高速化プロセス」、「24時間の高速化プロセス」、「3日間の高速化プロセス」なので、アイコン自体にいくつかの数字があり、この数字は可能な限り速く読めるはずです。
mobiletabsgames
8
wecando

まず、非常に良い質問をして、そのような詳細で論理的な方法でユーザビリティの問題を説明してくれて、おめでとうございます。

あなたの質問自体については、スペース、要素の配置、ジェスチャーに関する問題を認識していると思いますので、これが私の問題の見方です。

1。コンテナー要素の再配置

他のすべての要素のスペースを節約しながら、コストをかけずにレイアウトの使いやすさを最大化するためにこれを行います。実際、ナビゲーションの視覚化を改善しているため、次の原則に従ってボタンが右上に移動します。

enter image description here

「到達困難」ゾーンには、戻るボタンのみが含まれるようになりました

2。向きを変更するタブが上にあるこの向きでは、ジェスチャーで問題が発生します。現在の警告：上のタブが間違っていると言っているのではなく、特定のケースで問題が発生しているため、方向を変更してこれらの問題を取り除くことをお勧めします。ただし、次のステップで、タブを上に保つことができるようにいくつかの変更を行うことがわかります。上記で投稿した最初の画像を見ると、側面のタブが到達しやすいゾーンにあるので、それを検討する必要があります

  1. 内部要素を再配置するスペースが増えたので、アイテムを再配置できます。ここで、タブを選択したままにしたり、横に配置したりできます。垂直方向のスペースが不足している場合は、上に置くとモバイルに適し、横に置くとデスクトップ（必要な場合）とタブレットに適していると思います。ここでテストする必要があります。また、簡単なジェスチャーアフォーダンスを提供するために、大きな「行動を促す」要素を使用していることがわかります。別の方法として、「Material like」FAB（ Floating Action Buttons ）を使用できます。

さらに面倒なことなく、問題を解決する方法についての簡単なモックアップを次に示します。

enter image description here

そしてFAB（スペース最適化バージョン）

enter image description here

最後に、ボタンのコピー、タブの影、Zインデックスによる3次元効果、およびゲームの使いやすさを向上させるその他の重要な要素を確認します。

コメントに対する回答

  • 「ヘッダーバー」を使用して、すべての画面でコアユーザー情報を表示します（3種類のリソース、プレミアム通貨、現在地など）。

はい、サブヘッダーまたはセカンダリツールバーを使用できます。もう一度、マテリアルデザインを例にとると、 I領域ページ 、次に ツールバー および アプリバー セクションを見てください。

  • 「ショップ」セクションには、価格付きの「購入」ボタン（5桁まで+通貨のアイコン）があります。

私の例（これは単なる例であり、ガイドラインです）では、「このアイテムを使用」を「$ 123,45で購入」に簡単に変更できます。つまり、アクションを使用しない限り、FABは使用できません。 （3回目の編集に関連するため、以下を参照してください）

  • アイテムの例：「8時間の高速化プロセス」、「24時間の高速化プロセス」、「3日間の高速化プロセス」なので、アイコン自体にいくつかの数字があり、この数字は可能な限り速く読めるはずです。

空の四角がこの領域であると想定されており、非常に読みやすいサイズで問題なくすべてのコンテンツを追加できます。そうでない場合は、単にサイズを調整します。これはガイドラインであり、コンテンツが何であるか私にはわかりません。

また、actionsの概念を理解してください。アクションとコンテンツ、コンセプト、サブアクションを混在させることは一般的な問題です。なぜなら、実際には相互にリンクしていることがあるからです。あなたの場合、あなたは単に購入と使用ボタンを持つことができます。他には何もありません。次に、ポップアップまたは ボトムシート またはこれらのアクションのサブアクションを表示するもの（「8時間で$ 1,23をスピードアップ」、「12時間で$ 4をスピードアップ」など）を作成できます。 、56 "、" 24時間高速化して7,89ドル "繰り返しますが、これにはテストといくつかのマーケティング上の決定が必要になりますが、どのパスを選択したい場合でも、私のモックアップ（およびこれらのコメント）はすべてを許可します。

まあ、これがあなたを助けることを願っています！

2
Devin

組織階層を使用する

ユーザーが店にいるときにトップバーを表示する必要がある理由はわかりません（モーダルインタラクション）。しかし、それはリアルタイムゲームプレイか何かなので、そこに必要であると想定します。

視覚的なレイアウトを理解するには：

  • 最も広いコンテキストから最も狭いコンテキストに移動します。コンテキストの階層はおおよそ次のとおりです。ユーザー->ショップ->カテゴリ->アイテム。

  • 次に、階層を視覚的なレイアウト、上から下、左から右にマップします。これは、おおよそ次のことを意味します。

    • トップバー=ユーザー、サブバー=ショップ/在庫、左パネル=カテゴリ、右パネル=アイテム。
    • ほとんどのユーザーはページを上から下、左から右に処理するので、このレイアウトは視覚的な階層とうまく一致します。

    • 分割された左/右のスクロールパネルは理想的ではありませんが、横長のモバイルウィンドウのスペースの制約とアスペクト比を考えると、合理的なアプローチです。左と右のパネルは、（おそらく）両方の親指でこれをプレイするゲーマーが簡単にアクセスできます。 。

    • 一部の肛門コメンターは、R​​TL言語について以下のコメントを間違いなく追加します。

enter image description here

  • エルゴノミクスをチェックします
    • 一般的な操作は、ゲームに戻る、在庫から切り替える<->ショップ、アイテムのスクロール、カテゴリのスクロール、アイテムの購入です。コントロールは主にページの左側と右側にあるので、人間工学はかなり良いはずです。また、非アクティブなサブヘッダーを使用すると、 Buy からのボタン Inventory アイテムパネルがスクロールされたときのボタン。
0
tohster