Web ページのレイアウトは、Web デザイン全体において重要な役割を果たします。Web ページのレイアウト設計が異なれば、異なる視覚効果が生まれ、Web ページの閲覧者の第一印象に直接影響します。
Web ページのレイアウトは、Web サイト ユーザーが Web コンテンツとどのように対話するかを主に決定します。優れた Web デザインは実用性と適応性が高いため、ユーザーを満足させる適切なレイアウトのデザインを選択する必要があります。
この記事では、Web ページの一般的な 8 つのレイアウト設計方法を紹介します。
カードの Web レイアウト
カードはインタラクティブな情報を伝達する媒体であり、多くの場合、関連する Web コンテンツを凝縮された形式で提供します。カード Web レイアウトは、各コンテンツを明確に保ちながら、大量のコンテンツをページに配置するのに最適です。カードレイアウトの例:直線的なカードデザイン
大きなタイトルの Web ページのレイアウト
モバイル デザインの隆盛に伴い、大きなフォントを使用したタイポグラフィ デザインが人気を集めており、特に見出しでは大きなフォントが人気です。適切なフォントを選択すると、大きなテキストが読みやすくなり、ユーザー エクスペリエンスが向上します。さらに、強力な視覚効果も提供します。大きな見出しは、他の視覚要素がほとんどないシンプルなデザインで特に人気があります。事例:オンラインシネマ Web デザイン
分割画面 Web レイアウト
このレイアウトは、画面を縦に分割するだけでなく、画面を横に分割することも指します。ページを均等または不均等の 2 つの部分に分割します。この方法の利点は、文字情報と画像要素をより効果的に区別できるため、情報がより整理され、読みやすくなることです。同時に、これはサイトとの即時対話を改善するための素早い選択をサポートすることも目的としています。たとえば、下の図は典型的な水平分割画面の場合です。Web ページ全体は水平方向に 2 つの部分に分割され、左側にテキスト、右側に画像が表示されます。ページ全体での情報の配置がより整理され、ユーザーが素早く読みやすくなります。分割画面は、近年 Web デザインのトレンドになりつつある Web レイアウトです。
F 字型および Z 字型の Web ページ レイアウト
F レイアウトと Z レイアウトは、非常に科学的な Web ページのレイアウト方法です。その基本原理は、人々がページ上で目を動かす方法、つまりコンテンツをスキャンする方法の順序に基づいています。F Web レイアウトには、ページの上部に目立つコンテンツがあり、ページの左側に二次コンテンツがあります (通常は「F」の形)。
Z 字型の Web レイアウト パターンには、上部に目立つコンテンツが表示され、その下にその他の貴重なコンテンツが表示されるという視覚的特徴があります。ページの右上隅から左下隅に向かって斜めに読書視線を描きます (ほぼ「Z」の字)。
一般に、F Web レイアウトは Z Web レイアウトよりも視覚的な定義が高いため、より多くのコンテンツ ページに適しています。Z Web レイアウトは、ブラウザーが 2 つの同一 (またはほぼ同等) の関連コンテンツを表示したときにユーザーの注意を引くことができます。
パーソナライズされた推奨 Web ページ レイアウト
パーソナライズドレコメンドとは、ユーザーのパーソナライズされたニーズに基づいて、ユーザーのニーズを満たすコンテンツを推奨することです。より一般的なのは、NetEase Cloud Music の毎日のおすすめとプライベート FM で、システムはあなたの視聴習慣に基づいて好みの曲を自動的におすすめします。Amazon のホームページの商品フローは、買い物行動データに基づいて、購入したいと思われる商品を推奨します。これが、私たちが買い続けてもやめられない本当の理由です。RottenTomatoes には、ユーザーが最も視聴する可能性が高い映画を配信する優れた予測アルゴリズムがあります。
グリッド Web ページ レイアウト
情報はグリッドに整理されているため、閲覧しやすく、興味のある特定のトピックに立ち止まって集中することができます。グリッドを使用すると、テキスト、写真、ビデオを Web ページ全体に均等に配置できるため、ユーザーは各ユニットの重要性を決定できます。事例：動画用のグリッドデザイン
ムービー風のグリッドデザインインスタントデザインは、オンラインコラボレーションをサポートするプロレベルのUIデザインツールで、Sketch、Figma、XD形式のインポートに対応しており、高品質なデザインリソースが多数用意されています。インタラクティブなプロトタイプの作成と設計注釈の取得をサポートし、生産、設計、研究チームにワンストップの共同オフィス エクスペリエンスを提供します。
https://js.design/community?category=detail&type=resource&id=643d1aa86c033db4007bcaac&source=csdn&plan=yscsdn9121
雑誌のレイアウト
雑誌のレイアウトは、ユニークで記憶に残る、定期的に更新されるさまざまな画像を多数表示するのに最適です。雑誌スタイルのレイアウト デザインには、ホームページ上の 2 番目と 3 番目の記事だけでなく、特集記事 (場合によってはローテーションまたは同様の形式で複数の特集記事) が含まれます。通常、複数の列のコンテンツが含まれており、セクションに分かれている場合もあります。これらの雑誌のレイアウトは、コンテンツが豊富な Web サイト、特に毎日新しいコンテンツを追加する Web サイトに最適です。
Web ページのレイアウトが非対称である
デザインでは、非対称のデザイン要素が他の要素より目立つことがあり、これらの非対称のデザインはよりダイナミックに見えます。ボタン、コントロール、またはリンクを含めると、通常、他の部分よりも視覚的に注目を集めます。
ナビゲーションタブのWebレイアウト
ナビゲーション タグは製品の主要なフレームワークであり、製品の構造分布は基本的にタグ ナビゲーションによって整理され、ユーザーは製品の主な機能を理解できます。ナビゲーション タブの Web レイアウトは、アイテムが少数しか含まれておらず、ドロップダウン メニューと組み合わせてサブメニューを追加できる Web ページに最適です。