web-dev-qa-db-ja.com

タブバー以上の画面スペース?

5項目のタブバーメニューを使用することについてどう思いますか?

アプリのセクションにすばやくアクセスできるため、今では多くのアプリがタブバーメニューを再び使用しています。

しかし、コンテンツを表示するために画面内により多くのスペースを確保するよりも優れていると思いますか?

私の場合、ユーザーがアプリのセクションにすばやくアクセスすることが重要であるため、タブバーの使用を検討しました。私の問題は、現在5個のアイテムがあることですが、将来的にはさらに多くのアイテムが存在する可能性があります。だから、おそらくユーザーにとってはスライドメニューの方がいいので、それに慣れるようにし、将来的にはオプションを追加するだけです。また、スライドメニューは画面の一部を使用しません。しかし、タブバーは今あるものでより良くなっていることを知っています。探している情報にすばやくアクセスできますが、将来、より多くのアイテムを処理できるかどうかはわかりません。

1
Lucia Guedes

iOSヒューマンインターフェイスガイドライン の内容は次のとおりです。

タブバー

タブバーを使用すると、さまざまなサブタスク、ビュー、またはモードを切り替えることができます。

enter image description here

enter image description here

APIノート

タブバーは、一連のカスタムビューの表示を管理するオブジェクトであるタブバーコントローラーに含まれています。コードでタブバーを定義する方法の詳細については、 "Tab Bar Controllers" および "Tab Bars" を参照してください。

タブバー:

  • 半透明です
  • 常に画面の下端に表示されます
  • IPhoneで一度に表示されるタブは5つまでです(タブがさらにある場合は、タブバーに4つが表示され、[追加]タブが追加され、リストに追加のタブが表示されます)。
  • すべての方向で同じ高さを維持します
  • アプリ固有の情報を伝えるために、バッジ(白いテキストと数字または感嘆符のいずれかを含む赤い楕円)を表示できます

タブバーを使用して、同じデータセットまたはアプリの全体的な機能に関連するさまざまなサブタスクに関するさまざまなパースペクティブにユーザーがアクセスできるようにします。

一般に、アプリレベルで情報を整理するにはタブバーを使用します。タブバーは、アプリのメインビューでの使用に適しています。情報階層をフラット化し、一度に複数のピア情報カテゴリまたはモードへのアクセスを提供する方法。

現在のモードまたは画面で要素に作用するコントロールをユーザーに与えるためにタブバーを使用しないでください。ユーザーにコントロールを提供する必要がある場合は、代わりにツールバーを使用してください(使用ガイドラインについては、 Toolbar を参照してください)。

その機能が利用できないときにタブを削除しないでください。場合によってはタブを削除しても、そうでない場合は、アプリのUIが不安定になり、予測不可能な。最善の解決策は、すべてのタブが有効になっていることを確認することですが、タブのコンテンツが使用できない理由を説明してください。たとえば、ユーザーがiOSデバイスに曲がない場合、ミュージックアプリの[曲]タブに、曲のダウンロード方法を説明する画面が表示されます。

目立たないように通信するためにタブバーアイコンにバッジを付けることを検討してください。タブバーアイコンにバッジを表示して、そのビューに関連する新しい情報があることを示すかモード。

iPadでは、分割ビューペインまたはポップオーバーでタブバーを使用する場合があります。タブがそのビュー内のコンテンツを切り替えるかフィルタリングする場合に使用します。ただし、セグメント化されたコントロールの外観は、ポップオーバーまたは分割ビューの外観とよりよく調和するため、多くの場合、セグメント化されたコントロールをポップオーバーまたは分割ビューペインの下部エッジで使用する方が適切に機能します。 (セグメント化されたコントロールの使用の詳細については、「 セグメント化されたコントロール 」を参照してください。)

iPadでは、タブバーが多すぎて混雑しないようにしてください。タブバーに多すぎるタブを配置すると、人々がタブを物理的にタップすることが困難になる可能性があります彼らは望んでいる。さらに、表示するタブを追加するたびに、アプリの複雑さが増します。一般に、メインビューまたは分割ビューの右側のペインにあるタブの数を約7に制限してください。ポップオーバーまたは分割ビューの左側のペインでは、最大で約5つのタブがうまく収まります。

iPadでは、[その他]タブを作成しないでください。iPadアプリでは、追加のタブのリスト専用の画面を使用すると、スペースの使用効率が低下します。

iPadアプリの各方向に同じタブを表示して、視覚的な安定性を向上させます。縦向きの場合、推奨される7つのタブは画面の幅全体にぴったり収まります。横向きでは、画面の幅に沿って同じタブを中央に配置する必要があります。このガイダンスは、分割ビューペインまたはポップオーバー内のタブバーの使用にも適用されます。たとえば、縦向きのポップオーバーでタブバーを使用する場合、横向きの分割ビューの左側のペインに同じタブを表示するとうまく機能します。

0
Code Maverick

アプリデザインでタブを使用する利点は、コンテンツの範囲を指定でき、ユーザーが特定のセクションの関連コンテンツをすばやく同化できることです。また、ユーザーに異なるセクション間をすばやくジャンプするという点で柔軟性があり、重要なナビゲーションリードとして機能します。以下は、タブを使用してユーザーがアプリをより効果的に利用するのをどのようにすばやく支援できるかの例です。

enter image description here

enter image description here

Appleには タブがナビゲーションの観点から役立つ理由の詳細な推論 もあります。ヒューマンインターフェイスガイドラインを引用するには

タブバー

タブバーを使用すると、さまざまなサブタスク、ビュー、モードを切り替えることができます。

enter image description here

通常、タブバーを使用して、アプリレベルで情報を整理します。タブバーは、情報階層を平坦化し、一度に複数のピア情報カテゴリまたはモードへのアクセスを提供するのに適した方法であるため、メインアプリビューでの使用に適しています。

最後に、アプリケーションのタブを設計する方法の推奨ベストプラクティスに関するこの記事をご覧になることをお勧めします: iPhoneタブバー-現実からのレッスン

1
Mervin

それはすべてあなたのドメインに依存します。達成したいことについて分析し、tabbarを使用するか、垂直方向のスペースを節約する他の形式のメニューナビゲーションを使用するかを評価する必要があります。

それは主に依存します:

  • ユーザーコンバージョンを向上させるために1つの画面に表示する必要がある項目の数は?これを知るには、おそらく分析を試してみる必要があります。たとえば、ホテルの部屋を扱っていて、分析により、ユーザーが1つの画面に3つ以上のオファーを表示すると、コンバージョン率が向上することに気付いたとします。このシナリオでは、タブバーよりも3つのオファーの表示を優先する必要があります。

  • 利用可能な高さを前提として、すべての関連情報をリストアイテムに収めることができますか?前の例で述べたように、少なくとも3つのアイテムを表示する必要があります。タブバーの場合、それらのオファーに関するすべての関連情報をリスト内に配置するのに十分なスペースがありますか?表示する多くの重要な情報(ホテル名、ユーザーからの距離、設備、価格、割引価格など)がある場合は、タブバーを順番に並べるとスペースが不十分になる可能性がありますすっきりしたUIを作成します。

  • ユーザーが製品についてのより多くのインスタント情報を持っていること、または画面のさまざまなセッションに簡単にアクセスすることは重要ですか?ホテルアプリの他のセクションがカラーテーマと概要ページを変更するための設定パネルでは、ユーザーがそれらにすぐにアクセスできるようにする必要がないことは明らかです。代わりに、スペースを賢く使用してオファーをより適切に表示することをお勧めします。

すべてを要約すると、ユーザーを変換するために何が良いかを理解し、上記の3つの質問の結果をクロスします。

次に、常にファンシーソリューションを採用してUXを微調整できます。たとえば、画面が小さいときにサイドメニューに置き換えられる長い画面(例:iPhone 5+)にtabbarがあるとします。これは、モバイルアプリの一種の「レスポンシブデザイン」になります(この方法がまだ行われていないとは思いますが)。

1
Nicola Miotto