web-dev-qa-db-ja.com

カードのUIとボタンを組み合わせる

私はAndroid=のアプリケーションを設計しています。視覚的なデザインにはカードのテーマを使用することにしました。理由は、提示される情報がカードのフォーマットに適合していることです。重要な情報の短いバーストです。

ボタンをレイアウトに統合するときに問題が発生します。ボタンには主に2つのタイプがあります。

  1. 特定のカードに固有
  2. カードのセットに固有

まず、ボタンをカードの下部に配置します。これは、モーダルウィンドウの場合と同じように、見栄えがよく、テーマに沿ったものです。ただし、2番目のケースでは、アクションがカードのセットに適用される場合、ボタンはリストの最後にあるカードの外側に配置する必要があります。 多くの場合、ボタンはフォールドの下にあり、テスターはアクション/変更を適用するためにボタンを押す必要があることに気づきません。

これに対する私の解決策は、コンテンツがその下に続いていることを示すために、影付きの永続的な全幅ボタンを配置することです。 しかし、全体的なデザインとうまく調和していないようで、私はこれを使用することをためらっています。

皆さんからの有用で革新的なフィードバックが大好きです。乾杯。

ビジュアル:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

5
BatlaDanny

Androidの標準(現時点では Material Design )が心配な場合は、cardsを間違った道。これが、これらの問題に直面している理由です。

これは Material Design ページからです:

使用する場合

次のようなコンテンツを表示する場合は、カードレイアウトを使用します。

  • コレクションとして、複数のデータタイプで構成されます(たとえば、カードコレクションは画像、動画、テキストで構成されます)。
  • 直接比較する必要はありません(ユーザーは画像やテキスト文字列を直接比較していません)。
  • コメントなど、非常に可変長のコンテンツをサポートします。
  • +1ボタンやコメントなどのリッチコンテンツやインタラクションで構成されています。
  • それ以外の場合はリストに含まれますが、3行を超えるテキストを表示する必要があります。
  • それ以外の場合はグリッドリストに含まれますが、画像を補足するためにさらにテキストを表示する必要があります。

したがって、あなたのケースでは、設定の種類ごとに1つのカードではなく、1つのカード内に設定を追加する必要があります。これにより、カードが画面のサイズを超えた場合に論理的な連続性が得られます。

また、カード内でアクションを実行できること、および floating action buttons を使用して、必要に応じてこの動作を防止することもできます

3
Devin

Type1:「すべて表示」ボタンが本当に必要ですか?ユーザーはグループをタップして開くだけです。このように、ボタンはナビゲーションではなく、実際のアクションのためだけのものです

タイプ2:保存する変更がある場合にのみ表示するという条件の下では、スティッキーボタンは良い解決策のようです。メニューバーがあるので、ボタンをページの上部に配置することもできます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

0
Renaud