web-dev-qa-db-ja.com

モバイルで詳細な大きな画像を表示する

ここに状況があります:
画像はモバイル配信用に最適化されたdivボックスに表示され、大きな画像がプリロードされています。ユーザーがボックスをクリックすると、大きな画像が表示されます。
UXの観点からモバイルで単一の非常に詳細で大きな画像を表示する方法

1)画像の幅/高さを100%で表示しますか?
-ユーザーは最も詳細な画像を取得しますが、激しくスクロールする必要があります
2)100%デバイスで画像を表示(最適なデバイスの向きを検出)ビューポート?
-ユーザーは詳細画像が低く、ズームを使用する必要があります
enter image description here
3)固定幅/高さのデバイスビューポートよりも大きいイメージウィンドウを表示しますか?
-ユーザーは半詳細なimgを取得し、スクロールする必要があります
enter image description here
何か他に提案はありますか?

3
Ivan

携帯電話で製品の画像の各ピクセルを観察することは、退屈(UXの感情面)であり、困難(画面サイズが小さいために広範囲にわたる物理的な相互作用)であり、ユーザーにとってもあまり意味がありません。

より優れたUXを提供するために、インタラクティブな「関心のあるポイント」が埋め込まれた画像を使用できます。このようにして、ユーザーは製品全体の画像を確認し、タップして詳細ビューに切り替えると、製品の重要な機能を見つけることができます。

A。キュー(インタラクティブPOI)のセットを含む初期画像 enter image description here

B。機能の詳細ビュー
enter image description here

利点:

  1. 簡単な相互作用
  2. 詳細を強調する(認知負荷が低い)
  3. 製品全体のイメージと詳細ビューの両方を組み合わせることもできます。
5