1枚の写真にある個別のアイテム（製品）をどのように表示しますか？
かっこいい帽子、Tシャツ、ブーツなどを着た男性の画像があるとします。これらの商品を商品として表示し、必要に応じて見つけて購入できるようにすることを目的としています。
現在、これを表示する方法は2つあります。
この問題をどのように解決しますか？
考慮すべき主なことが2つあります。
- ユーザーはどこで情報を見ますか
- ユーザーはどこで操作しますか（/その情報を求めます）
画像の外側に情報を表示しても画像は覆われず、常に表示されているため、ユーザーは何を期待し、何も見落とすことがありません。
ユーザーは、インジケーター（この場合はドット）または情報を介して対話できます。両方と相互作用する可能性を与えることはおそらく良い考えです。そのため、情報が画像の外にある場合、情報を操作すると、対応するインジケーターとその逆の情報が記録されます。
これらは一般的な提案であり、場合によっては、特定のユーザーエクスペリエンスを実現するために、ユーザーが情報を取得して対話する方法を変更する必要がある場合があります。
最初のアプローチにはいくつかの落とし穴があると思います。スタイル、構成、編集などの要素は、特定のメッセージ（ライフスタイル、魅力、望ましさ...）をビューアに伝えるために、写真家が意図的に選択しました。画像にテキストやコントロールを追加すると、写真の全体的な印象が損なわれる可能性があります。 特にファッションのオンラインショップでは、ユーザーが購入するか購入しないかを決定する際の基準となる最も重要な要素は製品イメージです。実際には、製品の邪魔になる要素や製品の邪魔になる要素を追加しないでください。プレゼンテーション
さらに、すべての製品ボックスが同時に表示される必要があります。たとえば、ユーザーは外観だけでなく価格によっても選択できます。各製品の基本的な詳細を示さないことは、大きなビジネスリスクになる可能性があります。このため、商品の箱と画像を組み合わせるのはさらに難しくなります。たとえば、衣服の詳細をテキストで覆ってはならず、テキストは読みやすく設計する必要があります（たとえば、すべてに適切なテキストサイズを確保できますか）画像上のボックス？）.
写真とテキスト（ボックス）が完全に調和するデザインが存在することを否定したくありません。いくつかの潜在的な困難と非常に注意深い設計の必要性を指摘したいだけです。
あなたはPolyvoreのようなことをすることができます。これは、エリアにカーソルを合わせると、一種のクイックビューになります。あなたの最初のオプションに似ています
このリンクのようにいくつかの素晴らしいスタイリングで最初のオプションに行くことをお勧めします https://tympanus.net/Development/TooltipStylesInspiration/curved.html
脈動する円は、クリック可能なアイテムやユーザーが探索できる何かがあることをユーザーに知らせます。
- このオプションは、ユーザービューの邪魔をせずに明確な表示を提供し、製品の外部の別のビューで詳細を表示することなく、製品の詳細に関する情報を取得できるため、適切です。
- このオプションを使用すると、ユーザーは製品の外部の詳細を確認できます。すべての詳細を1か所に表示するのは煩わしく、簡単ではないと思います。
そして私の選択肢は一番です。