動的グリッドレイアウトを使用しているときに読みやすさを保つにはどうすればよいですか？
最近の傾向として、Pinterestのような動的なメーソンリーグリッドをほぼすべてに使用する傾向があります。これまでにこのようなレイアウトを見たことがない場合は、固定幅の複数の列に編成された可変高さのコンテンツが表示されるため、レンガの壁が横向きになったように見えます。
これは、Pinterestなどの画像ベースのサイトにとっては素晴らしく美しく、ユニークなデザインであることが証明されていますが、多くのデザイナーは、テキストベースのサイトのトレンドを取り入れ始めています。
テキストベースの石積みグリッドがどのように見えるかの良い例は、ここにあります： http://masonry.desandro.com/demos/basic-multi-column.html
その例は特に悪いですが、それは私のポイントを完全に示しています。 UXの達人が知っているように、人間の目は左から右、上から下に読む傾向があります。動的なグリッドレイアウトでは、読んでいる場所の右側にあるコンテンツが、目が期待しているとおりに正確に表示されない可能性があるため、左から右に表示しても必ずしも機能するとは限りません。
したがって、私にとっての自然な傾向は、列を読み続けることです。これは、1つの列を無限に読み取り、自分のしていることを意識的に認識せずに次の列に移動することはないため、かなり悪いことになります。
私の質問は、石積みのグリッドレイアウトを使用し、読みやすさと優れたUXを維持する効果的な方法はありますか？
人間の目が左から右、上から下に物事を読む自然な傾向があるとは思いません。それがほとんどの西洋言語の文化的側面です。多くの言語（ヘブライ語、アラビア語、日本語）はこのフローに従いません。
これを展望するのに良い記事があります： http://www.smashingmagazine.com/2012/03/05/japanese-a-beautifully-complex-writing-system/
あなたの質問に答えるために、私ははいと思います、読みやすさのために効果的なグリッドレイアウトを作成する方法があります。この「組積造グリッド」について私が検討するいくつかのこと：
- フォントサイズ。小さなテキストは相互ににじみやすくなります。
- パディング。呼吸するためのスペースをテキストに与えます。
- コントラスト。一部のテキストブロックが何らかの方法で優先度が高い場合は、それを区別する方法を考える必要があります。
- フロー。コンテンツの階層がある場合は、適切なフローを提供するためにグリッドを順序付ける方法を考える必要があります。つまり、画面全体を飛び越えないように、読者の目は設計された経路に従う必要があります。これは最も難しい課題かもしれません。
ただし、状況や使用計画によって異なりますが、「読みやすさやスキャン可能性を考慮して設計していますか」という質問をするのがよいでしょう。この「組積造グリッド」は、個別の製品ページまたはフルレングスの記事にリンクするコンテンツをスキャンするのに適しているようです。
古い投稿ですが、私はミッチに同意します
石積みのようなレイアウトは、純粋な画像や見出しの選択、ツイートのトピックと特定のストリームのグループなど、非線形/非階層情報で使用するとかなりうまく機能すると思います。
この種のレイアウトは、一種の制御されたカオスを適用します。これにより、ユーザーは速度が遅くなり、ユーザーがすばやくスワイプする傾向がある線形または等間隔のレイアウトよりも少し多く探索するようになります。
したがって、繰り返しになりますが、特定のTwitterストリーム、目次、チャットセッションなど、順序付けされたフローのメリットがあるものを使用することは適切ではないと思います。注文済みで便利です。
優れたUXとは、何かの「熱さ」に関係なく、デザイナーの目標を達成しながらユーザーに最も利益をもたらすものです。
いくつかの有用な情報を伝えながらユーザーがサンプリングできるようにすることが目標である場合、ユーザーがフローをたどらないようにしたい場合は、石積みのようなものがうまく機能します。
Masonryはカバーページ、またはユーザーがスキャンできるように提示されたコンテンツを選択している特定の順序のないブレインダンプと考えることができます。注意を払う。
たとえば、最も古いものから新しいもの、最も人気のあるものから最も人気のないものまで、サイズを介して順序付け/フォーカスしますが、IMOは、順序付けが必要なものを選択したら、より直線的な設計に移行することをお勧めします。
あなたのつぶやきの例では、石積みのようなものがTwitterストリームのホットさ、ホットトピックの大きなブロック、それほどホットではない小さなブロックなどに役立つと思います。単なる例です。
とにかくそれは私の2セントです。
更新：質問されていないか、質問の一部ですが、 http://stackexchange.com/sites を見て、一部で機能する石積みを確認してください。彼らはヒートマップを実装するためにサイズを使用します。サイトをクリックすると、サイズと情報の両方が拡大します。迷惑なことに、アイテムをマウスの下から外に移動することで、アイテムを追跡できなくなります。
彼らはそれをほぼ正しく理解しています。これが動的グリッドが作成されたものです。