web-dev-qa-db-ja.com

カードの最適な幅はどれくらいですか?そして応答性は?

まず、内容に依存することを知っています。そしてux.seを読んだ後、ブログやウェブサイトを観察しました。結果はかなり少なくなります。

これまでに見つけたもの:

  • テキストは最高100文字(ux.seなど)で読めますが、人々は50〜75文字(facebook、googleなどの人気のあるWebサイトなど)を好みます
  • カードはできるだけ小さくする必要があります

これら2つはすでにトリッキーです。 Google+はカードに50〜80文字を表示しますが、これは主に画面サイズによって異なります(3つの異なるカードサイズがあります)。彼らは非常に小さい13px Arialを使用しています。少なくともこれに従って smashingmagazineの記事 は、少なくとも16pxを使用することを提案しています。大きなフォントサイズはカードパターンと一致しますか?

幸いなことに、私は通常、長いテキストはありません。これはビジネスソフトウェアであり、メール、名前などの多くのデータフィールドを使用しています。それが問題です。データフィールドの長さは予測できません。メールアドレスの長さはどれくらいですか?カードサイズは、すべての発生の99%に適合するように設計する必要がありますか? 1%の場合、切り捨てを使用しますか?

3 examples of cards

そして応答性はどうですか?

カードは:

  • 常に同じ幅を保つ(マテリアルデザインで説明)
  • 画面サイズに適合(利用可能なスペースと残りのUIの適応方法に応じて、最小幅と最大幅)
  • google +(360px、440px、520px)などの固定サイズを使用する

追加のガイドライン、ベストプラクティス、考えはありますか?

2
Gustav

あなたが言うように、それは内容と多くの要因に依存するので、私は「最適な」カードサイズがないと確信しています。

たとえば、新聞の見出しが含まれているカードは、写真のサムネイルが含まれているカード(pinterestなど)よりもアスペクト比が異なる方がより良い結果が得られます。

また、ユーザーの注意が焦点を絞ったナラティブに向けられているサイト(コミックストリップやキュレーションコレクションなど)では、ユーザーの目がコレクション内を直線的に移動するようにカードをフォーマットできます。他のサイト(Amazon、ebayなど)では、発見に重点が置かれているため、カードをレイアウトしてフォーマットし、幅広いスキャンを促進します。

だから私のしっかりした答えは、最適なカード幅はないということです。

建設的であるかもしれないものは:

  1. UXの目標とカードの形式およびレイアウトの関係を(観察して読むことにより)学びます。例:空間およびグリッドの配置、選択のパラドックス、呼吸空間、線形スキャンとブラウンスキャンなど。

  2. UXの優先順位の明確な階層を作成します(物語やコレクションを伝えたいですか?読者にタイトルまたは画像を最初に見てもらいたいですか?)

  3. #1を#2に一致させてから、すばやく反復して設計します。

カードレイアウトは、1つのページで情報のいくつかの複雑な階層を表す傾向があるため、デザインは非常に困難です。したがって、これらの制約で優れたUXを表現することは非常に困難です。カードをインタラクティブにする必要がある場合は、さらに難しくなります。

したがって、カードのデザインを正しくするための単一の最適な幅や方法はありません。 Googleのマテリアルデザインでも、カードのレイアウトの処方ではなく、一連のツールと原則の概要を説明しています。Google自体は、カードレイアウトの幅を1つに決めていません(Google Now、Keep、Maps、Plusなどのカードを比較してください)。 。)。

1
tohster