web-dev-qa-db-ja.com

カードはどのように読みやすさを向上させますか?

ほとんどのアプリやウェブサイトは、必要な情報を表示するためにカードデザインに適応しています。カードが直感的で読みやすく魅力的なものは何ですか?

8
Mehul Shah

カードベースのUIには、次のような利点があります。

  • スキャン性の向上-カードは情報の小さなコンテナです。コンテンツは意味のあるセクションに分割されているため、情報は体系化され、適切に構成されています。
  • 視覚的に楽しい-カードは、ユーザーの目を効率的かつ即座に描く視覚情報でユーザーをいじめることができます。
  • Easy-on-the-eye Visuals-カードのコンテンツはユーザーが簡単に消化できるため、簡単なストーリーの伝達に役立ちます。
  • Thumb Friendly-物理的なカードと同じように動作するため、ユーザーはそのシンプルさを気に入っており、詳細を確認するためにカードを裏返す物理を直感的に理解できます。次の情報の塊にスワイプします。
  • さまざまな画面サイズに適しています-カードは、簡単に拡大または縮小できるコンテンツコンテナーとして機能し、複数のデバイスにまたがって単一の美的感覚を作り出し、レスポンシブデザインに適しています。デバイスに関係なく一貫したエクスペリエンスを確立するのに役立ちます。

参照: カード:UIコンポーネント定義

17
Akhil Ashok

カードの素晴らしいところは、現実のメタファーです。現実のあらゆる種類のカードは、ほとんどの場合、さまざまなタイプ(画像、テキストなど)の情報をコンパクトにグループ化した小さな情報アイテムであるため、短い一目で直接情報を取得できます。ここでは、グループ化の側面がかなり重要です。カードのデザインにより、カードの情報をグループとして認識できない場合があります。したがって、カードは、さまざまなタイプ(画像、テキストなど)の短い情報のいくつかのチャンクを提示するのに非常に優れた方法であり、より詳細な情報(タイムライン、ニュースフィードなど)につながる可能性があります。

3
peddersen

カードには、特にモバイルで複数の利点があります。

物理性

画面上のテキストはテキストですが、カードはオブジェクトです。ユーザーは、少なくともオブジェクトがタップされたりスワイプされたりできることを期待するように、デザインパターンによってトレーニングされています。カードにアクションが表示されている場合、それらのアクションの範囲が明確に示されています。

均質化

カードは単なるオブジェクトではなく同一のオブジェクトであるため、コンテンツが異なる場合でも、ユーザーは何らかの形で関連していると期待できます。ユーザーはまた、同じオブジェクトが繰り返される方向にスクロールするようにトレーニングされているため、カードの束を水平方向に並べて画面外に移動するとすぐに、水平スクロールのアフォーダンス(Facebook関連の投稿やモバイルの推奨友達など)が作成されます。カードオブジェクトの離散性は、ユーザーが見ることができるのはカードのエッジだけであっても、そのようにしてより多くのコンテンツがあることをユーザーに示します。


ただし、質問はreadabilityについて尋ねます。 @akhilashokが書いたように、カードはスキャン可能性と情報階層に関して、いくつかの重要なポイントに達しました。しかし、これはカードに由来するものではありません。カードは、デザイナーとユーザーがコンテンツを簡単にフォーマットできるメンタルモデルです。

コンテンツが「タイトル、短いテキスト、多分写真」のように見えない場合、カードは役に立ちません。マテリアルデザイン ガイドライン カードとは何か、カードを使用しない場合について説明します。カードが不適切な場合、余分なchromeとパディングがユーザーの注意をそらし、画面上の有効なスペースを減らします。

1
SPavel