web-dev-qa-db-ja.com

カードUIを使用して、一連のアクションを実行する必要がありますか? (共有、詳細、情報)

私はプロジェクトにカードUIを使用していますが、一部のカードは行または列に配置されている場合が多く、グリッドを構成しています。問題は、一部のカードに「共有」などの1つのアクションがあり、他のカードには2つまたは3つのアクションがあることです。グリッドを台無しにしない一貫した外観を求めています。

私の最良の選択肢は何ですか?カードの下部にアクションを配置することは、少なくともモバイルでは人気があるようです。しかし、これはウェブ上のグリッドを説明していません。

ベストプラクティスに関するアイデアはありますか?

2
user1509151

カードのGoogleマテリアルデザインガイドライン は、よく読むことをお勧めします。

カードが同じサイズかどうかを指定しませんでしたが、「グリッドを台無しに」しないことに基づいて、おそらく同じサイズです。

異なるサイズのカードのグリッドが可能ですが、アクションでカードをオーバーロードしないように特に注意する必要があります。

Googleマテリアルデザインから:

カードの主なアクションは通常、カード自体です。

補足アクションは、コンテンツタイプと予想される結果に応じて、コレクション内のカードごとに異なります。たとえば、映画を再生することと本を開くことです。コレクション内のカード内で、アクションを一貫して配置します。

また:

カード内の補足アクションは、アイコン、テキスト、UIコントロールを使用して明示的に呼び出され、通常はカードの下部に配置されます。

オーバーフローメニューに加えて、補足アクションを2つのアクションに制限します。

そして:

カードは複数のアクション、UIコントロール、およびオーバーフローメニューをサポートできますが、制限を使用し、カードはより複雑で詳細な情報へのエントリポイントであることを覚えておいてください。

したがって、Michael Laiが言ったように、一貫性と抑制がここでの鍵です。

注意しないと、それが情報と機能の捨て場になることがわかります

したがって、グリッドは次のようになります。

mockup

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

これらのカードは非常によく似ており、それぞれにメディアがあり、下部に補足アクションがあります。しかし同時に、補足的なアクションの量が異なると、ある程度矛盾しています。

1
locationunknown

私が考えることができる2つのデザイン戦略があり、それはあなたがカードに入れている実際のコンテンツに依存すると思います。

  • オプションA-コンテンツがモジュール式であり、カード内のサブセクションとして機能すると仮定して、アクションをコンテンツに関連付けます
  • オプションB-すべてのアクションが関連し、すべてのコンテンツに適用されると仮定して、コンテンツをアクションから分離します(コンテンツは慎重な情報ブロックです)。

情報と機能性のために「クリーン」で単純なカードUIの用語を捨て場に注いでいるので、一般的に他のことは不明確な言葉で多くの悲しみを引き起こします(警告しなかったとは言わないでください)。

0
Michael Lai