優れたインタラクティブ体験のウェブサイトリスト製品表示デザイン

商品集約ページ: 名前の通り、商品をリスト化して、一定の共通特性を持つ商品のコレクションページを作成します。

目的は、消費者により多くの製品の選択肢を提供し、それによってコンバージョン率を高め、ユーザーの直帰率を最小限に抑え、スムーズな閲覧を保証することです。これには、高品質の視覚体験と優れたインタラクティブ体験を提供する必要があります。

ここでは主に製品の展示に重点が置かれています。

現在、製品ディスプレイのデザインには主に 3 つの種類があります。

1. 行と列で並べ替える（Taobao Mall...JD.com）

2. 滝の流れ（モグジェ）

できるだけ多くの商品をユーザーに表示する

3. 特別なモデルが優れている（優れている）

アダプティブスクリーン製品表示では、各カテゴリの下に大きな画像を使用して、いくつかの製品やバナーの宣伝に重点を置きます。

整然とした配置は、高品質の写真を掲載したウェブサイトに適しています。

商品展示の基本情報

商品画像/商品名/商品価格

画像サイズ：約200X200

写真は少し大きめなので、ユーザーは毎回詳細をクリックして大きな写真を見る必要がありません。リスト内の項目を理解するプロセスを完了することができ、忍耐力を失うこともありません。

画像サイズを大きくすることでトランザクション量が増加したかどうかは不明です。しかし、写真の数が多いほど真実が多くなり、写真が大きいほど真実に近づくことは明らかです。

ただし、電化製品の写真は小さくても構いませんが、特に製品の外観が似ている場合は、製品名がより重要になります。

製品名:

パーソナライズされたコピーライターが参加した製品ブランド、シリーズ、説明、機能、活動

商品価格:

元の価格 - 現在の価格 - 割引

現在の価格を強調表示、元の価格を消す、割引の支援

ウェブサイトや製品の特性に応じてモジュールを追加する

信用:ユーザーは一度取引に成功すると、取引相手の信用評価を行うことができます。

タグ：新製品、送料無料など、製品の販売特性を反映

レビュー数:購入者の意見を最も正確に反映するものであり、ユーザーが最も重視する要素の 1 つです。

販売量：ランキング方法であるだけでなく、ユーザーの購入を誘導し、商品が人気があるかどうかをユーザーに伝える重要な要素でもあります。

色:必要な色がリストで利用可能かどうかを直接かつ明確に確認できます。

製品展示のインタラクティブ効果

単一の製品エリアにマウスを移動すると、ユーザーが選択した製品がカバーするエリアを強調するボックスが表示されます。

追加情報が表示されます: ユーザーがさらに知りたいコンテンツが表示されます

モールの化粧品リストに、製品を使用したユーザーの体験談を掲載する

Youzhong: マウスをホバーすると、さまざまな角度から商品の写真やビデオが表示されます

韓国のウェブサイト ogage

マウスをホバーするとプレビュー、お気に入り、ショッピングカートのボタンが表示されます

画像/製品名をクリックしてください:

1. 詳細ページに直接ジャンプ

例: Taobao、JD.com、Amazon...

2. 詳細ページボックスがポップアップ表示されます

たとえば、Youzhong は、コンテンツが比較的簡潔で、ユーザーがそれに集中する必要があり、ページ上の要素の位置を固定する必要がある状況に適しています。

製品の種類が異なれば、ビジネス上の要求も異なりますが、達成すべき目標は同じであり、設計の最終目標も同じで、形式が異なるだけです。