web-dev-qa-db-ja.com

パネル内のアイテムの間隔(WrapPanel)

WrapPanelを使用してアイテムを表示する多くのサイトとアプリケーション。アイテムは左から右に並べられ、スペースがなくなると次の行にスキップする傾向があります。

例えば:

Image App Windows 8NetFlix

この組織を作るための最良の方法は何ですか?それとも、何を示しているかに依存しますか?すべてのアイテムを同じサイズのままにすると、いつサイズが変化しますか? (図1、Google画像での検索は類似しています)

類似点の1つは、要素間に常にマージンがあることです(ただし、小さいです)。しかし、ほとんどのアプリケーションが次のようなコンテンツを共有する理由: enter image description here

そうじゃない?

enter image description here

2番目のオプションは、より対称的です(左マージンと右マージン)。

3
J. Lennon

何かが意識的であるか無意識であるかを知るために、インサイダーコンテキストがないと、意図をUIに読み取るのが難しい場合があります。何かが特定の方法である理由を説明するために、有効なUXの原則を十分に当てはめることができますが、偶発的である可能性も高くなります。

その結果、あなたの質問には2つの可能な答えがあります:

意識的な設計の決定として、要素間に異なるマージンを持つことは、グループ化の原則を使用して、負のスペースを使用して要素間の関係を作成する例です(他の回答として)指摘した)。

無意識のデザイン決定として、フローリストのCSSマージンを使用していない場合の見た目と同じくらい簡単にすることもできます。行の最初または最後の位置にあるアイテムを認識します。

したがって、各アイテムに適用されるCSSは同じになります。つまり、マージン:10px; 2つの項目が隣り合っている場合、それらの間のギャップは右マージンと左マージンの合計になります。

mockup

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

その結果、行の最初または最後のアイテムの場合よりも、隣接する要素間の空白が多くなります。

提供された例を使用すると、最初の例は意識的な設計決定のように見えますが、2番目の例(Netflix)はおそらくリスト内の均一マージンの累積効果をより代表的に示します。

2
Charles Wesley

実際、私はあなたの2番目の例が最初の例よりless対称的だと思います。ビュー内のアイテムの周囲のスペースは、アイテムに属していると考えてください。各アイテムの周囲には一定のマージンがあります。次に、ビューの端と最初のアイテムとの間に、アイテム自体の間にあるよりも少ない(半分の)マージンがあることは、突然意味をなします。後者の場合、各アイテムに独自のマージンが設定されるため、マージンは2倍になります。

2
André

ラップ内とラップ外で異なるマージンコンテンツのグループ化を強制する。側面に異なる(小さいまたは広い)マージンを設定することで、画像が表示領域を超えて続くことはなく、内部の同じ幅のギャップによって形成される表示グループは完全に表示されます。

さらに、ラップの側面にはスペースがなく、列(ギャップ)内にのみ存在することがよくあります。あなたの例は実際に次のことを示しています:ワイヤーフレームに表示されるラップだけではなく、側面のマージンがページ全体に適用されます。

1
kontur