UI デザイン パターンは、一般的なユーザー インターフェイスの問題に対する提案された解決策です。ソリューションが証明されると、それは頻繁に使用され、最終的には再利用可能な設計パターンに進化します。
デザイナーは、Web サイトのさまざまな機能タイプに応じて、対応する Web サイト UI デザイン パターンの使用を選択できるため、一貫性のある効率的な Web サイト UI インターフェイスを作成できます。
この記事では、8 つの一般的な Web サイト UI デザイン パターンを推奨します。
遅れ登録
Web サイトの UI デザイン パターンは、電子商取引プラットフォームで特に一般的です。名前が示すように、この Web サイト UI デザイン パターンは、ユーザーが登録を遅らせることができることを意味します。ユーザーは実際のチェックアウトまで登録されません。WebサイトのUIデザインパターンは、正式に登録せずにWebサイトを体験したいだけのユーザーのニーズを満たすことができます。
この Web サイト UI デザイン パターンにより、新規ユーザーがアカウントを作成していないために Web サイトを体験するのを妨げることなく、新規ユーザーが Web サイトを閲覧してお気に入りの商品をショッピング カートに追加することが簡単かつ迅速になります。ユーザーが最終的にチェックアウトするとき、それはユーザーが Web サイトに対する需要があり、アカウントを作成する必要があることを意味します。このウェブサイトの UI デザイン パターンは、新規ユーザーのニーズを大幅に満たすことができ、リラックス感があり、ユーザーに優れたエクスペリエンスを提供します。
パン粉
ブレッドクラム ナビゲーション (パス ナビゲーションとも呼ばれる) は、Web サイトの設計における古典的な UI デザイン パターンであり、ほとんどの Web サイトに適しています。現在、ブレッドクラム ナビゲーションは多くの Web サイトで人気があります。Web サイトの UI デザイン パターンは通常、電子商取引プラットフォーム、ソーシャル スタイルの雑誌、ニュース ジャーナルなど、大量のコンテンツと情報を含む Web サイトに表示されます。ほとんどのユーザーは、広範囲かつ長期的に使用されているため、このナビゲーション モードに慣れています。
この Web サイト UI デザイン パターンは、ユーザーが Web サイトのアーキテクチャを素早く理解できるように導き、ユーザーが製品構造における自分の位置を常に理解できるようにし、ユーザーが高度なページにジャンプするための操作の数を減らし、ユーザーに迅速な方法を提供します。ただし、すべての Web サイトがこのモデルに適しているわけではありません。たとえば、ブレッドクラム ナビゲーションは、小規模なサイト、ページ数の少ないサイト、またはクロス構造のサイトには適切な選択ではありません。
https://js.design/community?category=detail&type=resource&id=64c324932cf109c42e89edf1&source=csdn&plan=yscsdn9111
カードレイアウト
カード レイアウトは、デザイナーがコンテンツを表示するためによく使用するもう 1 つの Web サイト UI デザイン パターンです。このモードは非常に柔軟で、さまざまな形式や長さのコンテンツの表示の問題を効果的に解決できます。言い換えれば、カード レイアウトは Web やモバイルのデザインで利用可能なスペースを最大限に活用します。
カード グリッド システムは、ユーザーが特定のものを検索するのではなく、何気なくサイトを閲覧しているときに最適に表示されます。その特徴は、各カードの内容と形式が干渉することなく互いに独立しており、異なるカードが同じページに異なる内容を掲載できることです。カードは独立しており、リストよりも情報量が多く、理解しやすい情報を視覚的にグループ化し、整理した状態に保ちます。この Web サイト UI デザイン パターンは直感的で魅力的で、ほとんどのユーザーを満足させ、ユーザーに明確な視覚的階層を提供します。
タグナビゲーション
タブ ナビゲーション (タブ ナビゲーションとも呼ばれる) は、ほとんどのユーザーが使い慣れている高頻度ナビゲーションの形式です。この Web サイト UI デザイン パターンは、ユーザーが目的の情報をすばやく見つけられるように、階層的な分類が必要な複雑なコンテンツに非常に適しています。
タブ ナビゲーションは、ページの視覚的なバランスを維持するだけでなく、ユーザーがページをすばやく見つけるのにも役立ちます。タブ ナビゲーションは、コンテンツをフラットな構造で整理するという問題を効果的に解決し、常にユーザーの位置をユーザーに示します。このモードの機能入り口は直感的かつ明確で視認性が高く、ワンクリックで柔軟にページを切り替えることができ、明確で理解しやすい構造となっており、ユーザーが目的を素早く見つけることができます。タブ ナビゲーションや階層ナビゲーションも使用には適していますが、カテゴリの数が少ないタブ システムではうまく機能しません。
ページネーションと連続スクロール
ページネーションはコンテンツを複数のページに分割する Web サイト UI デザイン パターンであり、連続スクロールはユーザーがスクロールすることで大量のコンテンツを閲覧できるようにするデザイン パターンです。これらの Web サイト UI デザイン パターンは両方とも、ユーザーにコンテンツを提供することによって生成されます。
一方で、ユーザーがコンテンツをより簡単に消化して理解できるように、コンテンツを別々の部分に分割する必要があります。この時点で、ページング モードが有効になり、前後のページ (前後のページを含む) への移動や、コンテンツの先頭または末尾への直接ジャンプを完全に制御できるようになります。ページング モードを使用すると、ユーザーはインターフェイスをより詳細に制御でき、ターゲット コンテンツが存在するかどうかをより正確に判断できるようになり、ターゲット コンテンツを見つけるのに必要な時間を見積もることができ、ユーザーに没入型のエクスペリエンスを提供できます。
連続スクロール モードは使用シナリオが少なく、コンテンツを素早く閲覧して発見するのに適しています。
下部ナビゲーション
ファット フッターとも呼ばれるボトム ナビゲーションも、一般的なデザイン パターンです。これは主に、メインのナビゲーション システムをバイパスして製品固有のページに直接アクセスしたいというユーザーのニーズを満たすために使用されます。
このモードは通常、FAQ ページなど、特定のページが他のページよりも頻繁にアクセスされる Web サイトで使用されます。この機能は、Web サイトの一般的な階層を気にせずにショートカットを追加するのと似ています。
フローティングウィンドウ
フローティング ウィンドウとも呼ばれるフローティング ウィンドウも、Web サイトの UI デザインで非常に一般的です。たとえば、オンライン ストアやブログの場合、フローティング ウィンドウ Web サイトの UI デザイン パターンは、ユーザーの注意を引く優れた方法を提供します。デザイナーはこのパターンを使用して、セール、重要なニュース、その他の注意が必要な情報にユーザーの注意を引きます。
フローティング ウィンドウは、ユーザーの閲覧を意図的に中断して注意を引く Web サイトの UI デザイン パターンです。さらに、フローティング ウィンドウ モードは非常にうまく機能し、非常に高速に動作し、ユーザーにほとんど支障を与えません。そのため、デザイナーに広く愛されているのも頷けます。
カルーセル
カルーセル Web サイト UI デザイン パターンを使用すると、ユーザーは左右にスワイプしてドラッグすることでコンテンツを閲覧できます。その力は、ユーザーがより多くのオプションを表示し、そのうちの 1 つにすべての注意を集中できることです。カルーセルはユーザーにコンテンツを直感的に提示できるため、ユーザー エクスペリエンスが非常にスムーズになります。これは、カルーセルがユーザーにリーチするための非常に説得力のある方法であることも意味します。
同時に、Web サイトの UI デザイン モードは、設置面積が小さく、表示コンテンツが大きいため、使いやすくなっています。これは非常に視覚的な方法ですが、表示する必要があるコンテンツが視覚的ではない場合 (文書など)、カルーセル モードは適していません。