web-dev-qa-db-ja.com

タブバーにアクションボタンを配置することはできますか?

この場合はタスクと参加者の2つのタブ付きビューを考えてください。タスクビューでは、タスクのカードを表示できます。これらのタスクカード内で、コンテンツを編集して参加者に割り当てることができます。

新しいタスクを作成することも必要ですが、ここで問題が発生します:[タスク]ナビゲーションタブに[新しいタスクを作成]ボタンがあっても問題ありませんか?

以下は、タブバーの紺色のボタンが新しいタスクを追加するビジュアルです。

enter image description here

フローティングアクションボタン(FAB) を使用することには消極的です。

  1. タスクの追加は、必ずしもこのビューで最も一般的なアクションではなく、
  2. fABはiOSではあまり使用されておらず、iOSガイドラインでも使用されていません。

このデザインはAndroidとiOSモバイルプラットフォームの両方に対応しているため、答えは両方のUIプラクティスを考慮する必要があります。

24
RobbyReindeer

2つのアクションを分離する必要があります。選択のためだけにタブを使用し、タスクを追加するには、アクションを表示領域の下部に固定する必要があります。タブ内をスクロールしてタスクを表示し、アクションを追加できます

これが、上で説明した概念のワイヤーフレームです。

enter image description here

44
Sheraz

ほとんどのユーザーを混乱させる可能性があるため、選択カテゴリとそのアクションは別々にすることができます。それらの間に明確な分離があることはより明確であり、それはモバイルの標準的な慣行でもあります。また、ユーザーが画面上で必要とする可能性のある他のアクションを検討し、それらをグループ化することもできます。同じことを説明するために、以前 'Shaz'が共有していたワイヤーフレームをすばやく修正しました。 enter image description here

24
Yobuddy

モバイルでは、可能であれば、タッチ要素を別のタッチ要素で囲むことは避けてください。

ディスプレイ、タッチセンサー、およびユーザーの構造の違いにより、一部のユーザーが目的の領域を一貫してアクティブにすることが困難になる場合があります。

ShazとYobuddyのレイアウトはこの原則に準拠しているので、どちらか一方に寄りかかります。 Shazのレイアウトはよりシンプルですが、'create new task'を超えた相互作用をサポートすると、Yobuddyのレイアウトはよりクリーンになります。

3
DoubleD

検討すべき2つの提案がありますので、それぞれを読んで引数を検討してください。

フローティングアクションボタン

フローティングアクションボタンボタンは、それが表示される画面の主要なアクションを提供します。私はこのアプローチを強くお勧めしますが、質問でこれらを使用することについて懸念を表明したので、それらに対処することを許可します。

  1. タスクの追加は、必ずしもこのビューで最も一般的なアクションではありません

これは、ビュー内に存在する最も一般的なアクションではない場合もありますが、タスクのリストで最も目立つアクションである可能性があります。他の各アクションを実行し、モックアップで私がするようにそれらが適用されるものを確認します。

  • tabsこれらは上位レベルのナビゲーション構造の一部であり、ユーザーはリストにアクセスできますが、アクセスできませんリストに適用
  • タスクカードユーザーは、タスクカードを直接クリックして、個々のタスクを編集または表示できます。これは、リスト内のタスクのプロパティです。ユーザーはカードを変更しますがはしませんリストを変更します(表示された概要の更新を除く)
  • assign前のポイントと同様に、これによりリストではなくタスクカードを変更できます

ユーザーが実行する可能性のあるいくつかのアクション(およびタスクの追加以上に使用できる可能性のあるアクション)がありますが、新しいタスクの作成は、特定のタスクに固有のものではなく、リストの動作である唯一のアクションである場合があります。リストに直接適用される唯一のプロパティであることが判明した場合は、フローティングアクションボタンがジョブの最も重要なツールである可能性があります。以下の「ボトムナビゲーション」を考慮しない場合です。

  1. fABはiOSではそれほど一般的に使用されておらず、iOSガイドラインでも使用されていません

まだ一般的ではないことは事実ですが、マテリアルデザインがAppleのドメインに普及するにつれて、またAndroidアプリケーションが単一のインターフェイスデザインを維持するアプリケーションから)普及するにつれて、それが使用され、ますます人気が高まっています。いくつかの回答on この質問 Spotify、現在のGmailインターフェース(マテリアルインターフェースに従うように更新)、iOS 11ノートアプリなどのiOSアプリケーションでフローティングアクションボタンが使用されていることを示します。

上記のSpotifyの場合と同様に、フローティングアクションボタンは右下隅に配置する必要がないことにも注意してください。 資料docs にはこれの素晴らしい例がいくつかありますが、他の配置がインターフェースに適合しない限り、親しみやすいように通常の位置をお勧めします。

ボトムナビゲーション

これは、代替手段を提供するための Shazの素晴らしい答え の拡張です。私の以前の提案では、フローティングアクションボタンの使用に関する懸念を和らげない場合、またはリストに追加のアクション(コンテンツの並べ替え/フィルタリングなど)が必要だとわかった場合は、オプションを画面の下部に配置するという2番目の提案があります。 。

この機能には 下のナビゲーション バーを使用することをお勧めします。これはナビゲーションを目的としているため、「新しいタスク」画面にナビゲートすることは理にかなっているかもしれませんが、このバーから「ソート」するのは場違いかもしれません。ここでの解決策は、シートを使用してソート/フィルタリングオプションを提供し、ボタンがその目的のためにシートに「ナビゲート」するようにすることです。

最終的な考え

フローティングアクションボタンは、このオプションを含めるための最も重要なアプローチであり、この目的では、思ったほど場違いではない場合があります。厳密には下のナビゲーションではありませんが、コンポーネントを正しく使用すると、iOSまたはAndroidのユーザーにオプションが適切に表示されます。これらのオプションのいずれも、ツールバーの単純な3ドット mentab mobile examples に示されているように)で十分でない場合でも、配置するよりもマテリアルデザインに沿ったものになります。ナビゲーション内のアクション。

3
lakevna

私はあなたの考えが好きですが、「それは依存する」と言います。

タブを常に表示し、タブ内にヘッダーがない状態でタブ内のタスクをスクロールする(1つの画面で保持できるタスクよりも多いと想定)場合は、タブが正しい場所です。ボタンの機能でユーザーの驚きを減らしたい場合(多くの場合、タブ内のアクションではなく、新しいタブの追加を期待する場合があります)、「新しいタスクを追加してください」という単純なメッセージが表示されたバルーンを追加できます(モバイルアプリ)。
また、新しく作成されたタスクの配置について考えてください-それらは並べ替えられていますか一番上に最新またはその逆ですか?後者では、タスクを作成するためのインプレースフォームにすぐにスクロールできます。

ただし、すべてのタスクの完全なコンテンツに合わせてタブのサイズを変更すると、ヘッダーがスクロールして消えます(スタンドアロンアプリケーションとWebページのどちらを要求しているかが明確ではありません)。新しいタスクを追加できます。

FABに近づかないようにすることに同意します。最近、会計アプリを使用していました。モバイルデバイスで使用すると、ボタンが画面の下部に配置されていても、アイテムのリストが部分的に隠れています。

2
Mike

許容できるかもしれませんが、お勧めしません。

ユーザーが新しいタスクを追加する方法を探している場合、ボタンにはラベルもコンテキストの手掛かりもないため、簡単に見つけることはできません。このデザインは、意図しない失明の影響を受ける可能性があります。タブスイッチを必要としないため、プラスアイコンは表示されません。これは、新しいタスクを追加できることを知っている人と、まだそれを知らない人の場合です。

単純なスクロールは、ボタンの可能性があるものを見つけるために画面上のすべての詳細をスキャンするよりも少ない労力で済みます。これは、はっきりと見えるものと一見明白なアイコンでは誇張されているように聞こえるかもしれませんが、そうでない場合でも驚かないでください!タスクリストの最後までスクロールして、明確なラベルが付いた直接目立つボタンを表示することをお勧めします。これは最も重要なアクションではないと述べたので、常に視野に入っているとは限らないことはおそらく受け入れられます。ユーザーが過去に既にタスクを追加していても、同じ検索を行うことでその方法を思い出せるようにします。ボタンがどこにあったのか、また何だったのかを思い出させるよりもよいでしょう。

2
jazZRo

この場所の意味に問題があるようです。

タブのアクションボタンは、タブがアクティブでないときにタブを操作できることを示しています。

最も一般的な例は、ブラウザのタブを閉じるボタンです。別のオプションは、ブラウザのタブバーの端にある新しいタブボタンです。そのようなタブで考えられるもう1つのボタンは、「タブの複製」です。

このタブのタスクリストにある「タスクの追加」アクションが必要な場合、これはおそらく、別のタブで作業しているときにバックグラウンドで静かに実行する必要があるものではなく、タスクタブに切り替える必要があるものです。

だから私は他の答えで示唆されているように別の解決策を選ぶでしょう。

2
allo

各タスクレベルで、IDスペースが許すように、タイトルの隣(これはデザインにあります)と一緒に、Shazの提案として、下部に1つのボタンとして保持することをお勧めします。
Solution:

1

受け入れられた回答とは異なるため、この問題のために最終的に得た解決策を示します。

私は問題を間違った方法で見ていて、「問題を追加する」アクションボタンではなく問題であるタブに最初に焦点を当てるべきだったという結論に達しました。

そのため、「参加者」タブと「タスク」タブを1つのページに統合し、ページの上部と下部をそれぞれのセクション専用にすることにしました。

ここに私が来た解決策があります:

enter image description here

1
RobbyReindeer

このようにアクションバーでシンプルなプラスボタンを使用することの何が問題になっています:

action bar with button

プラスボタンは、現在のタブに応じて、タスクまたは参加者を追加できます。参加者タブで必要ない場合は、プラスボタンを非表示にすることもできます。

1
Qandeel Abbasi