web-dev-qa-db-ja.com

Web上のライトボックスの一般的なレスポンシブデザインの実践?

私は、ライトボックス自体に関する中程度のサイズの情報をページのライトボックスに入力するページをデザインしています。また、モバイルデバイス、特にスマートフォンで応答するようにこのページを設計する必要があります。これの一般的な方法は何ですか?

9
user38091

ビューポートが小さすぎる場合は、ライトボックスの周囲のマージンを削除し、閉じるボタンを削除して、Appleが " full screenモーダルビュー "?ほぼこのように:

enter image description here

11
Tony Bolero

レスポンシブライトボックスのデザインと使いやすさ について行われたいくつかの審議について書きました覚えておくべき主なものは次のとおりです。

  1. ライトボックスは煩わしいことに注意してください!コンテンツを紹介する方法が他にない場合にのみ、ライトボックスを使用してください。いずれかを使用する必要がある場合は、ユーザーが以前と同じページにいて、大幅な変更を行っていないことをユーザーができるだけ簡単に理解できるようにします。

  2. ユーザーは、ページに複数の画像またはビデオがある場合、ライトボックスを閉じて再度開いて次のコンテンツを表示しなくても、矢印キーまたはスワイプまたはクリックスルーで連続するコンテンツにアクセスできることを期待しています。

  3. ビデオを表示する場合は、ビデオのUIとコントロールがナビゲーション要素によって隠れたり覆われたりしていないことを確認してください。これはキーボードショートカットにも当てはまりますが、オーバーライドするのが適切な場合もあります。

  4. できる限り、レスポンシブな画像が自然なサイズを超えて拡大しないようにしてください。大きすぎるとぼやけてしまい、小さすぎてライトボックス化する価値すらありません。

  5. 画面上のライトボックスの位置を固定するか、画面外にスクロールできるようにするかを決定します。それぞれの方法には長所と短所があり、ユースケースに適したものを決定するのはユーザー次第です。

9
Bryce

彼のコメントでのopの説明に基づいて、問題はそれ自体「ライトボックス」ではなく、モーダルウィンドウ/ダイアログの詳細に関するようです。ユーザーは情報を提示される必要があり、さらにアクションを実行する前に情報に同意または同意しないでください。ライトボックスはこれを処理する1つの方法であり、古い学校のモーダル、またはユーザー同意書のような中間ページです。 Webサイトが既にライトボックスを使用しており、モバイル用にサイズ変更してサイトの外観を統一できる場合は、これが最も実用的なソリューションです。

0
sn3ll